第一次看到同学的博客时,就被这种极简又炫酷的画面吸引了,后来才知道,这就是Next主题。
所以,当自己拥有博客后,自然第一选择就是Next主题。
克隆下来的Next主题是默认的,可以根据需要,修改配置,打造自己的个性化主题。
网上有很多大家的文章可以参考,这里主要参考了 hexo的next主题个性化配置教程
这里 主要记录下自己偏爱的配置,留存一下,以防意外。
添加动态背景
1 2 3
| {% if theme.canvas_nest %} <script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script> {% endif %}
|
打开 next/layout/_layout.swig
在 < /body>之前添加代码(注意不要放在< /head>的后面)
打开 /next/_config.yml,在里面添加如下代码:(可以放在最后面)
1 2 3 4 5 6
| # -------------------------------------------------------------- # background settings # -------------------------------------------------------------- # add canvas-nest effect # see detail from https://github.com/hustcc/canvas-nest.js canvas_nest: true
|
实现点击出现桃心效果
1 2
| <!-- 页面点击小红心 --> <script type="text/javascript" src="/js/src/love.js"></script>
|
文章末尾统一添加“本文结束”标记
- 在路径
\themes\next\layout\_macro
中新建 passage-end-tag.swig
文件,并添加以下内容:
1 2 3 4 5
| <div> {% if not is_index %} <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div> {% endif %} </div>
|
- 接着打开
\themes\next\layout\_macro\post.swig
文件,在post-body
之后, post-footer
之前添加如下画红色部分代码(post-footer之前两个DIV):
1 2 3 4 5
| <div> {% if not is_index %} {% include 'passage-end-tag.swig' %} {% endif %} </div>
|
- 然后打开主题配置文件(
_config.yml
),在末尾添加:
1 2 3
| # 文章末尾添加“本文结束”标记 passage_end_tag: enabled: true
|
修改文章底部的那个带#号的标签
修改模板/themes/next/layout/_macro/post.swig
,搜索 rel="tag">#
,将 #
换成 <i class="fa fa-tag"></i>
修改作者头像并旋转
- 打开
\themes\next\source\css\_common\components\sidebar\sidebar-author.styl
,在里面添加如下代码:
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
| .site-author-image { display: block; margin: 0 auto; padding: $site-author-image-padding; max-width: $site-author-image-width; height: $site-author-image-height; border: $site-author-image-border-width solid $site-author-image-border-color;
/* 头像圆形 */ border-radius: 80px; -webkit-border-radius: 80px; -moz-border-radius: 80px; box-shadow: inset 0 -1px 0 #333sf;
/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
/* 鼠标经过头像旋转360度 */ -webkit-transition: -webkit-transform 1.0s ease-out; -moz-transition: -moz-transform 1.0s ease-out; transition: transform 1.0s ease-out; }
img:hover { /* 鼠标经过停止头像旋转 -webkit-animation-play-state:paused; animation-play-state:paused;*/
/* 鼠标经过头像旋转360度 */ -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); transform: rotateZ(360deg); }
/* Z 轴旋转动画 */ @-webkit-keyframes play { 0% { -webkit-transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(-360deg); } } @-moz-keyframes play { 0% { -moz-transform: rotateZ(0deg); } 100% { -moz-transform: rotateZ(-360deg); } } @keyframes play { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(-360deg); } }
|
侧边栏社交小图标设置
- 打开主题配置文件(
_config.yml
),搜索social_icons
,打开对应注释掉的内容 即可
- 在图标库找自己喜欢的小图标,并将名字复制在如下位置,保存。
网站底部字数统计
1
| $ npm install hexo-wordcount --save
|
- 在
/themes/next/layout/_partials/footer.swig
文件尾部加上:
1 2 3 4
| <div class="theme-info"> <div class="powered-by"></div> <span class="post-count">博客全站共{{ totalcount(site) }}字</span> </div>
|
在文章底部增加版权信息
- 在目录
next/layout/_macro/
下添加 my-copyright.swig
:
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
| {% if page.copyright %} <div class="my_post_copyright"> <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script> <!-- JS库 sweetalert 可修改路径 --> <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p> <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p> <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}</p> <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}</p> <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a> <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span> </p> <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p> </div> <script> var clipboard = new Clipboard('.fa-clipboard'); $(".fa-clipboard").click(function(){ clipboard.on('success', function(){ swal({ title: "", text: '复制成功', icon: "success", showConfirmButton: true }); }); }); </script> {% endif %}
|
- 在目录
next/source/css/_common/components/post/
下添加my-post-copyright.styl
:
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
| .my_post_copyright { width: 85%; max-width: 45em; margin: 2.8em auto 0; padding: 0.5em 1.0em; border: 1px solid #d3d3d3; font-size: 0.93rem; line-height: 1.6em; word-break: break-all; background: rgba(255,255,255,0.4); } .my_post_copyright p{margin:0;} .my_post_copyright span { display: inline-block; width: 5.2em; color: #b5b5b5; font-weight: bold; } .my_post_copyright .raw { margin-left: 1em; width: 5em; } .my_post_copyright a { color: #808080; border-bottom:0; } .my_post_copyright a:hover { color: #a3d2a3; text-decoration: underline; } .my_post_copyright:hover .fa-clipboard { color: #000; } .my_post_copyright .post-url:hover { font-weight: normal; } .my_post_copyright .copy-path { margin-left: 1em; width: 1em; +mobile(){display:none;} } .my_post_copyright .copy-path:hover { color: #808080; cursor: pointer; }
|
- 修改
next/layout/_macro/post.swig
,
在代码
1 2 3 4 5
| <div> {% if not is_index %} {% include 'wechat-subscriber.swig' %} {% endif %} </div>
|
之前添加增加如下代码:
1 2 3 4 5
| <div> {% if not is_index %} {% include 'my-copyright.swig' %} {% endif %} </div>
|
- 修改
next/source/css/_common/components/post/post.styl
文件,在最后一行增加代码:
1
| @import "my-post-copyright"
|
- 如果要在该博文下面增加版权信息的显示,需要在 Markdown 中增加
copyright: true
的设置
- 修改根目录下_config.yml中 url 链接地址