hexo-Github
Hexo Theme Sakura
hexo-theme-sakura主题 English document
基于WordPress主题Sakura修改成Hexo的主题。
demo预览
1、主题下载安装
hexo-theme-sakura建议下载压缩包格式,因为除了主题内容还有些source的配置对新手来说比较太麻烦,直接下载解压就省去这些麻烦咯。
下载好后解压到博客根目录(不是主题目录哦,重复的选择替换)。接着在命令行(cmd、bash)运行npm i
安装依赖。
2、主题配置
博客根目录下的_config配置
站点
1 2 3 4 5 6 7 8
| title: 你的站点名 subtitle: description: 站点简介 keywords: author: 作者名 language: zh-cn timezone:
|
部署
1 2 3 4 5 6
| deploy: type: git repo: github: 你的github仓库地址 branch: master
|
备份 (使用hexo b发布备份到远程仓库)
1 2 3 4 5 6 7 8
| backup: type: git message: backup my blog of https://honjun.github.io/ repository: github: https://github.com/honjun/honjun.github.io.git,backup
|
主题目录下的_config配置
其中标明【改】的是需要修改部门,标明【选】是可改可不改,标明【非】是不用改的部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124
|
prefixName: さくら荘その siteName: hojun
favicon: /images/favicon.ico avatar: /img/custom/avatar.jpg
url: https://sakura.hojun.cn
description: Live your life with passion! With some drive!
cdn: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6
pjax: 1
notice: hexo-Sakura主题已经开源,目前正在开发中...
lazyloadImg: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg
menus: 首页: { path: /, fa: fa-fort-awesome faa-shake } 归档: { path: /archives, fa: fa-archive faa-shake, submenus: { 技术: {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: /tags/悦读/, fa: fa-th-list faa-bounce }, 番组: {path: /bangumi/, fa: fa-film faa-vertical }, 歌单: {path: /music/, fa: fa-headphones }, 图集: {path: /tags/图集/, fa: fa-photo } } } 留言板: { 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 }, } } 客户端: { path: /client/, fa: fa-android faa-vertical } RSS: { path: /atom.xml, fa: fa-rss faa-pulse }
homePageSortType: -1
homeArticleShown: 10
bgn: 8
startdash: - {url: /theme-sakura/, title: Sakura, desc: 本站 hexo 主题, img: /img/startdash/sakura.md.png} - {url: http://space.bilibili.com/271849279, title: Bilibili, desc: 博主的b站视频, img: /img/startdash/bilibili.jpg} - {url: /, title: hojun的万事屋, desc: 技术服务, img: /img/startdash/wangshiwu.jpg}
siteBuildingTime: 07/17/2018
social: github: {url: http://github.com/honjun, img: /img/social/github.png} sina: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/sina.png} wangyiyun: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/wangyiyun.png} zhihu: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/zhihu.png} email: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/email.svg} wechat: {url: /#, qrcode: /img/custom/wechat.jpg, img: /img/social/wechat.png}
msocial: github: {url: http://github.com/honjun, fa: fa-github, color: 333} weibo: {url: http://weibo.com/mashirozx?is_all=1, fa: fa-weibo, color: dd4b39} qq: {url: https://wpa.qq.com/msgrd?v=3&uin=954655431&site=qq&menu=yes, fa: fa-qq, color: 25c6fe}
donate: alipay: /img/custom/donate/AliPayQR.jpg wechat: /img/custom/donate/WeChanQR.jpg wechatSQ: /img/custom/donate/WeChanSQ.jpg
movies: url: https://cdn.jsdelivr.net/gh/honjun/hojun@1.2 name: Unbroken.mp4
aplayer: id: 2660651585 server: netease type: playlist fixed: true mini: false autoplay: false loop: all order: random preload: auto volume: 0.7 mutex: true
valine: true v_appId: GyC3NzMvd0hT9Yyd2hYIC0MN-gzGzoHsz v_appKey: mgOpfzbkHYqU92CV4IDlAUHQ
|
分类页和标签页配置
分类页

标签页

配置项在\themes\Sakura\languages\zh-cn.yml里。新增一个分类或标签最好加下哦,当然嫌麻烦可以直接使用一张默认图片(可以改主题或者直接把404图片替换下,征求下意见要不要给这个在配置文件中加个开关,可以issue或群里提出来),现在是没设置的话会使用那种倒立小狗404哦。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
|
技术: zh: 野生技术协会 en: Geek – Only for Love img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/coding.jpg 生活: zh: 生活 en: live img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/writing.jpg
悦读: img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/reading.jpg
|
单页面封面配置

如留言板页面页面,位于source下的comment下,打开index.md如下:
1 2 3 4 5 6 7 8 9
| --- title: comment date: 2018-12-20 23:13:48 keywords: 留言板 description: comments: true # 在这里配置单页面头部图片,自定义替换哦~ photos: https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/comment.jpg ---
|
单页面配置
番组计划页 (请直接在下载后的文件中改,下面的添加了注释可能会有些影响)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| --- layout: bangumi title: bangumi comments: false date: 2019-02-10 21:32:48 keywords: description: bangumis: - img: https://lain.bgm.tv/pic/cover/l/0e/1e/218971_2y351.jpg title: 朝花夕誓——于离别之朝束起约定之花 status: 已追完 progress: 100 jp: さよならの朝に約束の花をかざろう time: 放送时间: 2018-02-24 SUN. desc: 住在远离尘嚣的土地,一边将每天的事情编织成名为希比欧的布,一边静静生活的伊欧夫人民。在15岁左右外表就停止成长,拥有数百年寿命的他们,被称为“离别的一族”,并被视为活着的传说。没有双亲的伊欧夫少女玛奇亚,过着被伙伴包围的平稳日子,却总感觉“孤身一人”。他们的这种日常,一瞬间就崩溃消失。追求伊欧夫的长寿之血,梅萨蒂军乘坐着名为雷纳特的古代兽发动了进攻。在绝望与混乱之中,伊欧夫的第一美女蕾莉亚被梅萨蒂带走,而玛奇亚暗恋的少年克里姆也失踪了。玛奇亚虽然总算逃脱了,却失去了伙伴和归去之地……。 - img: https://lain.bgm.tv/pic/cover/l/0e/1e/218971_2y351.jpg title: 朝花夕誓——于离别之朝束起约定之花 status: 已追完 progress: 50 jp: さよならの朝に約束の花をかざろう time: 放送时间: 2018-02-24 SUN. desc: 住在远离尘嚣的土地,一边将每天的事情编织成名为希比欧的布,一边静静生活的伊欧夫人民。在15岁左右外表就停止成长,拥有数百年寿命的他们,被称为“离别的一族”,并被视为活着的传说。没有双亲的伊欧夫少女玛奇亚,过着被伙伴包围的平稳日子,却总感觉“孤身一人”。他们的这种日常,一瞬间就崩溃消失。追求伊欧夫的长寿之血,梅萨蒂军乘坐着名为雷纳特的古代兽发动了进攻。在绝望与混乱之中,伊欧夫的第一美女蕾莉亚被梅萨蒂带走,而玛奇亚暗恋的少年克里姆也失踪了。玛奇亚虽然总算逃脱了,却失去了伙伴和归去之地……。 ---
|
友链页 (请直接在下载后的文件中改,下面的添加了注释可能会有些影响)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
| --- layout: links title: links
date: 2018-12-19 23:11:06
keywords: 友人帐 description:
comments: true
photos: https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/links.jpg
links: - group: 个人项目 desc: 充分说明这家伙是条咸鱼 < ( ̄︶ ̄)> items: - url: https://shino.cc/fgvf img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg name: Google desc: Google 镜像 - url: https://shino.cc/fgvf img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg name: Google desc: Google 镜像 - group: 小伙伴们 desc: 欢迎交换友链 ꉂ(ˊᗜˋ) items: - url: https://shino.cc/fgvf img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg name: Google desc: Google 镜像 - url: https://shino.cc/fgvf img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg name: Google desc: Google 镜像 ---
|
写文章配置
主题集成了个人插件hexo-tag-bili和hexo-tag-fancybox_img。其中hexo-tag-bili用来在文章或单页面中插入B站外链视频,使用语法如下:
1
| {% bili video_id [page] %}
|
详细使用教程详见hexo-tag-bili。
hexo-tag-fancybox_img用来在文章或单页面中图片,使用语法如下:
1
| {% fb_img src [caption] %}
|
详细使用教程详见hexo-tag-fancybox_img
DIY
修改页脚
themes/Sakura/layout/_partial/footer.ejs
1
| <p style="color: #666666;">© 2018</p>
|
修改为
1
| <p style="color: #666666;">© 20xx</p>
|
“运行时长” 显示
themes/Sakura/layout/_partial/footer.ejs
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <footer> <!-- ... --> <p style="color: #666666;">© 2020 <i class="fa fa-bar-chart" aria-hidden="true"></i> 小站勉强存活中</p> <p> 本站已侥幸存活 <span id="run_time"></span></p> <!-- ... --> </footer>
<!-- 网站显示已经运行多久时间 --> <script> function runTime(){ var d = new Date(),str = ''; BirthDay=new Date("May 15, 2020"); today=new Date(); timeold=(today.getTime()-BirthDay.getTime()); sectimeold=timeold/1000 secondsold=Math.floor(sectimeold); msPerDay=24*60*60*1000 msPerYear=365*24*60*60*1000 e_daysold=timeold/msPerDay e_yearsold=timeold/msPerYear daysold=Math.floor(e_daysold); yearsold=Math.floor(e_yearsold); str = daysold+" 天 "; str += d.getHours()+' 时 '; str += d.getMinutes()+' 分 '; str+= d.getSeconds()+' 秒 '; return str; } setInterval(function(){$('#run_time').html(runTime())},1000); </script>
|
其中BirthDay是网站起始日期,是要自己改的。
str显示的是运行多少年多少天,根据自己实际情况更改。
post 模板更改
scaffolds/post.md
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| --- title: {{ title }} date: {{ date }} author: hojun avatar: https://wx1.sinaimg.cn/large/006bYVyvgy1ftand2qurdj303c03cdfv.jpg authorLink: hojun.cn authorAbout: 一个好奇的人 authorDesc: 一个好奇的人 categories: 技术 comments: true tags: keywords: description: photos: ---
|
修改为
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| --- title: {{ title }} date: {{ date }} author: SnorlaxSE avatar: 'http://qiniu.snorlax.top/theme/custom/avatar.jpg' authorLink: authorAbout: 元气满满的卡比兽 authorDesc: 元气满满的卡比兽 categories: comments: true tags: keywords: description: photos: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/coding.jpg ---
<!--more-->
|
例友人帐: { path: /links/, fa: fa-link faa-shake }
,该模板文件位于source/links/index.md
可适当修改.
fontawesome
以 code
为例, 在fa:
后 写作fa-code
即可.
1
| 技术: {path: /categories/技术/, fa: fa-code },
|
歌单
在网易云音乐网页版 找出想要下载无损的歌单,地址栏地址便是歌单地址;
在source/music/index.md
修改id
鼠标点击爱心效果
在 themes/Sakura/source/js
下新建文件 click-love.js
,在 click-love.js 文件中添加以下代码:
1
| !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 500%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
|
在 themes/Sakura/layout/layout.ejs
文件末尾添加以下代码:
1 2 3
| <!-- 页面点击小红心 --> <script type="text/javascript" src="/js/click-love.js"></script> 完成以上操作后,当我们点击鼠标的时候就可以看见爱心的特效了
|
樱花飘落特效
在 themes/Sakura/layout/layout.ejs
文件末尾添加以下代码:
1
| <script src="https://cdn.jsdelivr.net/gh/Zevs6/CDN/js/sakura.js"></script>
|
或将该sakura.js
文件保存至themes/Sakura/source/js
,在 themes/Sakura/layout/layout.ejs
文件末尾添加以下代码:
1 2
| <!-- 樱花飘落特效 --> <script src="/js/sakura.js"></script>
|
看板娘
将下面两行代码插入layout目录下layout.ejs
文件的< html>和</ html>`标签内
1 2
| < script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
将下面一行代码插入layout目录下layout.ejs
文件的< body>和 </ body>标签内;如不需要,注释此行即可
1
| < script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
|
把模型替换成自定义模型
切换背景
严格意义上来说这个并不算增加,算是恢复,作者在移植这款主题时,只删除了对应的ejs布局文件,并没有删除style.css和js里面相关代码,想要加上这个功能只需要把原作者的相关的div等加上就行。大佬可自行到白猫(原作者)网站查看源代码加上就行。如果是小白或者比较懒得朋友那你只需要按以下几个步骤即可实现这个功能:
1:找到 /themes/sakura/layout/layout.ejs
在里面加入两行代码代码位置和内容如下(注释下面那两行):
1 2 3 4 5 6 7 8 9
| ...... ...... ...... <!-- 实现换肤功能 --> <%- partial('_partial/setdisplay') %> <%- partial('_partial/set', null, {cache: !config.relative_link}) %> </body> </html>
|
2: 在/themes/sakura/layout/_partial文件夹下面依次新建set.ejs和setdisplay.ejs,其内容分别如下:
set.ejs
1 2 3 4
| <div class="changeSkin-gear no-select"> <div class="keys" id="setbtn"> <span id="open-skinMenu"> 切换主题 | SCHEME TOOL <i class="iconfont icon-gear inline-block rotating"></i> </span></div> </div>
|
setdisplay.ejs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <div class="skin-menu no-select" id="mainskin" style="position: fixed"> <div class="theme-controls row-container"> <ul class="menu-list"> <li id="white-bg"> <i class="fa fa-television" aria-hidden="true"></i></li> <li id="sakura-bg"> <i class="iconfont icon-sakura"></i></li> <li id="gribs-bg"> <i class="fa fa-slack" aria-hidden="true"></i></li> <li id="KAdots-bg"> <i class="iconfont icon-dots"></i></li> <li id="totem-bg"> <i class="fa fa-optin-monster" aria-hidden="true"></i></li> <li id="pixiv-bg"> <i class="iconfont icon-pixiv"></i></li> <li id="bing-bg"> <i class="iconfont icon-bing"></i></li> <li id="dark-bg"> <i class="fa fa-moon-o" aria-hidden="true"></i></li> </ul> </div> </div> <canvas id="night-mode-cover"></canvas>
|
引入不蒜子访问量和访问人次统计
不蒜子的添加非常非常方便,不蒜子
在footer.ejs
中的合适位置,看你要显示在哪个地方,添加:
1 2 3 4 5
| <!--这一段是不蒜子的访问量统计代码--> <!-- <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script> --> <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script> <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次 </span> <span id="busuanzi_container_site_uv">访客数<span id="busuanzi_value_site_uv"></span>人次</span>
|
就可以了.
用七牛云搭建一个属于自己的图床
SEO优化
demo
在 _config.yml
编辑:
1 2 3 4
| skip_render: - projects/**, - baidu_verify_OSA0I3H9AP.html - google74357ce561728b1d.html
|
开启SSL证书
使用全站加密,http 自动跳转到 https:
1 2 3 4 5 6 7
| listen 80 default_server; listen [::]:80 default_server; server_name staunchkai.com; root /home/hexo; rewrite ^(.*) https://<your site>$1 permanent; # 添加的语句
|
数学公式渲染
按步骤完成至”解决语义冲突”,编辑 themes/Sakura/_config.yml
:
在使用数学公式渲染的md文件表头添加mathjax: true
,如下所示:
1 2 3 4 5 6 7 8 9
| --- title: {{ title }} date: {{ date }} layout: post author: SnorlaxSE <!-- ... --> mathjax: true
---
|
To be continued…
扩展阅读