OGeek|极客世界-中国程序员成长平台 › 门户 › 开源› WEB应用开发›网站主题

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

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

开源软件名称：

hexo-theme-sakuraplus

开源软件地址：

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

开源软件介绍：

hexo-theme-sakuraplus

看一看瞧一瞧，再决定做不做

示例站：cungudafa.top
现在看这个：cungudafa.js.org
预览视频： bilibili
源码地址：hexo-theme-sakuraplus

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设置）

使用方法

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.yml 的 theme 的值：theme: hexo-theme-sakuraplus

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

请修改 _config.yml 的 url 的值为你的网站主 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

hexo特性设置及文章撰写

1.文章 Front-matter 介绍

Front-matter 选项详解

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

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