• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

hexo-theme-sakuraplus: 主题是:hexo-theme-sakura,经过我的魔改,哈哈,plus版 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

hexo-theme-sakuraplus

开源软件地址:

https://gitee.com/cungudafa/hexo-theme-sakuraplus

开源软件介绍:

hexo-theme-sakuraplus


:one: :soon: 看一看瞧一瞧,再决定做不做

Hexo主题Sakura由Hojun大佬修改自WordPress主题Sakura,感谢原作者Mashiro

由于sakura最近没有再更新了,我对之前的魔改笔记进行了调整和整理,开源hexo-theme-sakuraplus版本。

特性

  • 简单漂亮,文章内容美观易读
  • 响应式设计,博客在桌面端、平板、手机等设备上均能很好的展现
  • 首页轮播文章及自动切换 Banner 图片
  • 背景壁纸切换(增加)
  • 时间轴式的归档页
  • 支持pjax刷新
  • 友情链接页面 (增加了config可选设置提示语和本网站信息)
  • 支持在首页的音乐播放和视频播放功能
  • 支持文章置顶和文章打赏(增加了提示语)
  • 支持 MathJax
  • TOC 目录
  • 缓加载动画
  • 增加了相册页面(一个快速查找文章的接口,后面可能会美化)
  • 增加了豆瓣读书、豆瓣电影页面
  • 增加了个性说说在线发布页面(增加了)
  • 优化了文章底部作者信息不填写时显示为空的问题
  • 优化了Valine评论模块(最新可定制表情等)
  • 可设置复制文章内容时追加版权信息(可设置是否追加版权信息)
  • 增加了 DaoVoice在线聊天功能
  • 增加了可设置代码块相关(是否显示名称、是否可复制,是否可收缩,是否可折行)
  • 增加了ICP备案信息显示(可选)
  • 增加了标签云页面(如果需要更多功能,后面可补充)
  • 增加了看板娘动画
  • 增加了可设置首页音乐提示
  • 增加了不蒜子统计、谷歌分析(Google Analytics)和文章字数统计等功能(需要安装hexo-wordcount)
  • 优化了自我介绍页面
  • 增加了自定义logo的接口
  • 增加了fancybox查看大图功能(可选)
  • 增加了外链转知乎卡片形式
  • 增加了谷歌分析和百度分析
  • 增加了widgetpack星星评分
  • 多种背景和点击动画(可选设置)
  • 优化css和js在config可配置
  • 优化文章图片阴影显示和引用样式(阅读butter)
  • 增加播放器隐藏选项
  • 新增了分析页面(echarts图)
  • 归档页新增文章日历(echarts图)
  • 新增文章描述为空时,自动获取文章前50字
  • 新增404页面
  • 新增左侧悬浮框(回到顶部,打开左侧目录,跳转评论,黑夜模式,背景音乐播放在config设置

:two: :fast_forward: 使用方法

1.下载

当你看到这里的时候,应该已经有一个自己的 Hexo 博客了。如果还没有的话,不妨使用 Hexo 和 Markdown 来写博客和文章。

点击 这里 下载 master 分支的最新稳定版的代码,解压缩后,将 hexo-theme-sakuraplus 的文件夹复制到你 Hexo 的 themes 文件夹中即可。

当然你也可以在你的 themes 文件夹下使用 Git clone 命令来下载:

git clone https://gitee.com/cungudafa/hexo-theme-sakuraplus.git

2.配置

2.1切换主题

修改 Hexo 根目录下的 _config.ymltheme 的值:theme: hexo-theme-sakuraplus

_config.yml 文件的其它修改建议

  • 请修改 _config.ymlurl 的值为你的网站主 URL(如:http://xxx.github.io)。

  • 如果你是中文用户,则建议修改 language 的值为 zh-CN

  • 建议修改permalink,可修改为短链接。安装插件:

     npm install hexo-abbrlink --save

    主配置文件修改和添加:

     #permalink: :year/:month/:day/:title/ #主题默认文章链接配置 permalink: post/:abbrlink.html #修改  ## 启用算法生成不重复文件编号,添加 abbrlink: 	  alg: crc16   #算法: crc16(default) and crc32 	  rep: hex   #进制: dec(default) and hex: dec #输出进制:十进制和十六进制,默认为10进制。丨dec为十进制,hex为十六进制 

2.2新建分类 categories 页

categories 页是用来展示所有分类的页面,如果在你的博客 source 目录下还没有 categories/index.md 文件,那么你就需要新建一个,命令如下:

hexo new page "categories"

编辑你刚刚新建的页面文件 /source/categories/index.md,至少需要以下内容:

---title: 分类date: 2020-04-21 00:00:00type: "categories"photos: https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/banner/donate.jpgcomments: falselayout: "categories"---

2.3新建标签 tags 页

tags 页是用来展示所有标签的页面,如果在你的博客 source 目录下还没有 tags/index.md 文件,那么你就需要新建一个,命令如下:

hexo new page "tags"

编辑你刚刚新建的页面文件 /source/tags/index.md,至少需要以下内容:

---title: tagstype: tagsdate: 2020-02-13 20:24:16photos: https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/banner/donate.jpgcomments: falselayout: "tags"---

2.4新建关于我 about 页

about 页是用来展示关于我和我的博客信息的页面,如果在你的博客 source 目录下还没有 about/index.md 文件,那么你就需要新建一个,命令如下:

hexo new page "about"

编辑你刚刚新建的页面文件 /source/about/index.md,至少需要以下内容:

Tips: 这里用了botui,还需要单独配置(/js/third-party/botui.js)

---title: aboutdate: 2020-2-12 22:14:36keywords: 关于description: layout: "about"comments: falsephotos: https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/banner/about.jpg---<!-- https://www.bootcdn.cn/botui/ --><link href="https://cdn.bootcss.com/botui/0.3.9/botui-theme-default.css" rel="stylesheet"><link href="https://cdn.bootcss.com/botui/0.3.9/botui.min.css" rel="stylesheet">{% raw %}<!-- 因为vue和botui更新导至bug,现将对话移至js下的botui中配置 --><div class="entry-content">  <div class="moe-cungudafa" style="text-align:center; font-size: 50px; margin-bottom: 20px;">姑的小屋</div>  <div id="hello-cungudafa" class="popcontainer" style="min-height: 300px; padding: 2px 6px 4px; background-color: rgb(36, 200, 255); border-radius: 10px;">    <center>    <p>    </p>    <h4>    与&nbsp;<ruby>    cungduafa&nbsp;<rp>    (</rp>    <rt>    真(ま)白(しろ)</rt>    <rp>    )</rp>    </ruby>    对话中...</h4>    <p>    </p>    </center>    <bot-ui></botui>  </div></div><script src="/js/botui.js"></script><script> bot_ui_ini()</script>{% endraw %}

2.5新建留言板 comment 页(可选的)

conmment 页是用来展示留言板信息的页面,如果在你的博客 source 目录下还没有 conmment/index.md 文件,那么你就需要新建一个,命令如下:

hexo new page "conmment"

编辑你刚刚新建的页面文件 /source/contact/index.md,至少需要以下内容:

---title: 留言板type: commentlayout: "comment"date: 2020-04-21 20:17:58photos: https://gitee.com/cungudafa/source/raw/master/img/bg/hyo/3.jpg---<h2 align="center">有什么想说的?</h2><h2 align="center">有什么想问的?</h2>

:本留言板功能依赖于第三方评论系统,请激活你的评论系统才有效果。

2.6新建友情链接 links 页(可选的)

links 页是用来展示友情链接信息的页面,如果在你的博客 source 目录下还没有 links/index.md 文件,那么你就需要新建一个,命令如下:

hexo new page "links"

编辑你刚刚新建的页面文件 /source/links/index.md,至少需要以下内容:

---layout: linkstitle: linksdate: 2020-02-13 23:11:06keywords: 友人帐description: comments: truephotos: https://cdn.jsdelivr.net/gh/cungudafa/img/images/pic01.jpglinks:  - group: 多站快速门    desc:     items:    - url: https://blog.csdn.net/cungudafa      img: https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg      name: CSDN      desc: 我的技术栈  - group: 友情链接    desc:     items:    - url: https://blog.csdn.net/cungudafa      img: https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg      name: CSDN      desc: 我的技术栈    - name: 总站导航      url: https://cungudafa.js.org/      img: https://cungudafa.top/img/avatar.png      desc: cungudafa.js.org---

Tips:注意前面的空格哦,很重要!

增加了友链要求提示项tips(支持html标签格式),在主题配置文件,name、desc、url、img可以直接写入你的网站信息。

# 友链页信息,tips支持html语言mylinkinfo:  enable: true  tips: '<p><strong>Tips:</strong>网站不要求https强制加锁,但头像图片尽量用安全链接哦!</p> <p style="font-size: 13px;color: #ff9999;"> 1. 请先 <font color=#ff1234 size=5>添加本站链接</font>,在本站留言,待站长审核通过即添加友链。<br>2. 拒绝广告站,技术博客优先~<br>3. 对于取消本站链接或死链,站长会定期移除。</p>'  name: cungudafa  desc: 一个学习记录者  url: https://cungudafa.top  img: https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg

3.菜单导航配置

配置基本菜单导航的名称、路径url和图标icon.

1.菜单导航名称可以是中文也可以是英文(如:Index主页)2.图标icon 可以在Font Awesome v4 中查找

menus:  首页: { path: /, fa: fa-fort-awesome faa-shake }  归档: { path: /archives, fa: fa-archive faa-shake, submenus: {     统计: {path: /analytics/ , fa: fa-line-chart },    标签: {path: /tags, fa: fa-tags },     技术: {path: /categories/技术/, fa: fa-code },     生活: {path: /categories/生活/, fa: fa-file-text-o } #,     #资源: {path: /categories/资源/, fa: fa-cloud-download },     #随想: {path: /categories/随想/, fa: fa-commenting-o },    #转载: {path: /categories/转载/, fa: fa-book }  } }  清单: { path: javascript:;, fa: fa-list-ul faa-vertical, submenus: {     说说: {path: /artitalk/, fa: fa-commenting-o fa-commenting },     相册: {path: /photos/, fa: fa-photo },    悦读: {path: /books/, fa: fa-book },    追剧: {path: /movies/, fa: fa-film faa-vertical }  } }  留言板: { path: /comment/, fa: fa-pencil-square-o faa-tada }  友人帐: { path: /links/, fa: fa-link faa-shake }  赞赏: { path: /donate/, fa: fa-heart faa-pulse }  关于: { path: /, fa: fa-leaf faa-wrench , submenus: {     我?: {path: /about/, fa: fa-meetup},     主题: {path: /theme-sakura/, fa: iconfont icon-sakura },    # Lab: {path: /lab/, fa: fa-cogs },    # valine: {path: /valine/, fa: fa-cogs }  } }  项目: { path: /client/, fa: fa-android faa-vertical }  RSS: { path: /atom.xml, fa: fa-rss faa-pulse }#social  url, img PC端配置social:  gitee: {url: https://gitee.com/cungudafa, img: /img/social/gitee.png}  github: {url: http://github.com/cungudafa, img: /img/social/github.png}  csdn: {url: https://blog.csdn.net/cungudafa, img: /img/social/csdn.png}  zhihu: {url: https://www.zhihu.com/people/cungudafa, img: /img/social/zhihu.png}  #jianshu: {url: /https://www.jianshu.com/u/9b726a534140, img: /img/social/jianshu.png}  # sina: {url: http://weibo.com/3829198906/info, img: /img/social/sina.png}  bilibili: {url: https://space.bilibili.com/430247358, img: /img/social/bilibili.png}  #wangyiyun: {url: https://music.163.com/#/user/home?id=337394988, img: /img/social/wangyiyun.png}  wechat: {url: /#, qrcode: /img/custom/cungudafa.png, img: /img/social/wechat.png}#social  url, img 移动端配置msocial:  github: {url: http://github.com/cungudafa, fa: fa-github, color: 333}  weibo: {url: http://weibo.com/3829198906/info, fa: fa-weibo, color: dd4b39}  #qq: {url: https://wpa.qq.com/msgrd?v=3&uin=2627039020&site=qq&menu=yes, fa: fa-qq, color: 25c6fe}  csdn: {url: https://blog.csdn.net/cungudafa, fa: fa-star, color: ff9900}

Tips:注意二级菜单和图标的写法

4.代码高亮

由于 Hexo 自带的代码高亮主题显示不好看,所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮,安装命令如下:

npm i -S hexo-prism-plugin

然后,修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false,并新增 prism 插件相关的配置,主要配置如下:

highlight:  enable: falseprism_plugin:  mode: 'preprocess'    # realtime/preprocess  theme: 'tomorrow'  line_number: false    # default false  custom_css:

5.搜索

本主题中还使用到了 hexo-generator-json-content 的 Hexo 插件来做内容搜索,安装命令如下:

npm install hexo-generator-json-content --save

6.文章字数统计插件(建议安装)

如果你想要在文章中显示文章字数、阅读时长信息,可以安装 hexo-wordcount插件。

安装命令如下:

npm i --save hexo-wordcount

7.添加emoji表情支持(可选的)

本主题新增了对emoji表情的支持,使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成,把对应的markdown emoji语法(::,例如::smile:)转变成会跳跃的emoji表情,安装命令如下:

npm install hexo-filter-github-emojis --save

在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:

githubEmojis:  enable: true  className: github-emoji  inject: true  styles:  customEmojis:

8.添加 RSS 订阅支持(可选的)

本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS,安装命令如下:

npm install hexo-generator-feed --save

在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:

feed:  type: atom  path: atom.xml  limit: 20  hub:  content:  content_limit: 140  content_limit_delim: ' '  order_by: -date

执行 hexo clean && hexo g 重新生成博客文件,然后在 public 文件夹中即可看到 atom.xml 文件,说明你已经安装成功了。

9.添加 DaoVoice 在线聊天功能(可选的)

前往 DaoVoice 官网注册并且获取 app_id,并将 app_id 填入主题的 _config.yml 文件中。

# Online contact ##在线聊天 https://www.daocloud.io/daovoice:   enable: false  app_id: f6b2a0b1 ##这里替换成你DaoVoice上的appid

10.在线发布说说页面

根据官网教程配置artitalk.js.org,本主题融合了自定义配置背景的功能,具体可以参考个性定制教程

# 动态说说页面# You can get your appid and appkey from https://leancloud.cn# more info please open https://artitalk.js.orgartitalk:  appID: CiSXX5nyVSt0RIztkC1oLL9P-MdYXbMMI  appKEY: vrfkqkuHou88MuRKfF3OeExc  per: 7 #每页显示说说的数量  username: cungudafa # Leancloud中设置的用户名  placeholder1: 没有密码,不能评论! # 密码框提示语  lazy: 1 # 加载动画1:加载,0:取消加载  img: https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg #用户默认头像  bgimg: https://gitee.com/cungudafa/source/raw/master/img/gif/Sitich/Sitich16.gif # 输入框小动画  # 极简黑白主题minimalist、渐变主题gradient、壁纸wallpaper   # 参考 https://blog.csdn.net/cungudafa/article/details/106224223  style:     enable: true #个性定制    wallpaper: https://ae01.alicdn.com/kf/H21b5f6b8496141a1979a33666e1074d9x.jpg #https://bing.rthe.net/wallpaper  # 壁纸    color: white   #字体颜色    linear_gradient: rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35) 95% # 渐变规律颜色+百分比 rgb(109, 208, 242) 15%, rgb(245, 154, 190) 85%    border_right_color: '#FFC0BE' #三角颜色    animation: false #true打开动画渐变渲染(壁纸和动画渐变渲染建议只开一个)

根据你的爱好修改字体颜色,背景,动画等。

11.修改页脚

页脚信息可能需要做定制化修改,而且它不便于做成配置信息,所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中,包括站点、使用的主题、访问量等。

12.修改打赏的二维码图片

在主题config里面可以修改路径,你可以替换成你的的微信和支付宝的打赏二维码图片。

donate:  title: 谢谢饲主了喵~  message: 我能想到最浪漫的事,就是我喝奶茶你付钱~  paypal: #https://www.paypal.me/hojuncn  alipay: /img/custom/donate/AliPay.jpg #大图  alipayQR: /img/custom/donate/AliPayQR.jpg  wechat: /img/custom/donate/WeChatPay.png #大图  wechatQR: /img/custom/donate/WeChanQR.jpg  wechatSQ: /img/custom/donate/WeChanSQ.jpg

donates 页是单独的打赏页面(可选),如果在你的博客 source 目录下还没有 donate/index.md 文件,那么你就需要新建一个,命令如下:

hexo new page "donate"

编辑你刚刚新建的页面文件 /source/donate/index.md,至少需要以下内容:

---layout: donatetitle: donatedate: 2020-02-13 23:13:05keywords: 谢谢饲主了喵~description: comments: falsephotos: https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/banner/donate.jpg---

在主题文件的 themes\sakura\layout\donate.ejs 文件中,可以增加更多的打赏方式。

13.配置视频、音乐播放器(可选的)

要支持音乐播放,在主题的 _config.yml 配置文件中激活music配置即可:

# 视频地址为https://cdn.jsdelivr.net/gh/honjun/[email protected]/Unbroken.mp4,配置如下movies:  enable: false  url: https://cdn.jsdelivr.net/gh/honjun/[email protected]  # 多个视频用逗号隔开,随机获取。支持的格式目前已知MP4,Flv。其他的可以试下,不保证有用  name: Unbroken.mp4aplayer:  ##媒体播放引擎,移动端会禁止自动播放  enable: false  id: 2660651585  server: netease  type: playlist  fixed: true ##开启吸底模式,固定到底部  autoplay: false ##音频自动播放  loop: all  ##音频循环播放, 可选值: 'all', 'one', 'none'  order: random ##音频循环顺序, 可选值: 'list', 'random'  preload: auto ##预加载,可选值: 'none', 'metadata', 'auto'  volume: 0.7 ##默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效  mutex: true ##互斥,阻止多个播放器同时播放

14.评论

根据官网的配置教程,严格配置:valine.js.org

# Valine ##极简留言功能# You can get your appid and appkey from https://leancloud.cn# more info please open https://valine.js.orgvaline:  enable: true ##打开valine评论功能true  appId: cBzr9TtJ0xY0s6f3H8bpmB3M-gzGzoHsz  appKey: 3opMyv2Vyx3mHa0IWitRGSoi  notify: false #true自带评论mail回复提醒,第三方邮件提醒就设置为false  verify: true #验证码  visitor: false #统计阅读量  comment_count: true #统计评论数  avatar: monsterid # Gravatar style : mp/identicon/monsterid/wavatar/retro/hide  guest_info: nick #,mail,link # custom comment header  pageSize: 10  palaceholder: 你是我一生只会遇见一次的惊喜 # Comment Box placeholder  requiredFields: ['nick','mail'] #设置必填项  background: https://gitee.com/cungudafa/source/raw/master/img/gif/Sitich/Sitich2.gif

15.文章分析

日历页面(在归档页面下方,可选择性开启),文章分析页面(选择性开启,若关闭,请在菜单栏中删除即可)

# Whether to display post-calender in the `archive` page# 设置在归档页面achive中是否显示'文章日历'控件postCalendar: true 

:three: :loudspeaker: hexo特性设置及文章撰写

1.文章 Front-matter 介绍

Front-matter 选项详解

Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 titledate 的值。

配置选项默认值描述
titleMarkdown 的文件标题文章标题,强烈建议填写此选项
date文件创建时的日期时间发布时间,强烈建议填写此选项,且最好保证全局唯一
author_config.yml 中的 author文章作者 ,也可以修改
authorLink链接
avatar头像
authorAbout简介(非文章页设置为一言)
photosbg 中的某个值文章特征图,推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
toptrue推荐文章(文章是否置

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap