next个性化配置-CSDN博客

本文链接：https://blog.csdn.net/Ziyi_ing/article/details/108151794

next主主题装上了，但是初始页面，真的一般般，一颗躁动的心就开始造作了！

1. 左上角丝带展示效果&fork me on github

先到这里选择你想要的效果
选好以后，复制文字到 themes/next/layout/_layout.swig 文件中，

<div class="headband"></div>

的下面，把href改成你自己的github地址。

2. 添加动态粒子背景即增加自定义js模块

具体实现流程：

修改_leyout.swig文件在 next/layout/_layout.swig在body标签里面放入以下代码	{% 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/_config.yml修改canvas_nest: true		//如果没有这个的话可以写一个上来，注意冒号后面的空格改完以后，hexo clean -> hexo g -> hexo s 一条龙，就可本地预览了

页面增加点击桃心跳出的效果载桃心js文档传送门

下载的代码放在themes/next/sourse/js/src里面修改_layout.swig文件在文档的最后增加<!-- 页面点击小红心 --><script type="text/javascript" src="/js/src/love.js"></script>

小结

可见，本框架主题，引入js的方法之一就是把写好的js文件放在themes/next/sourse/js/src目录下，然后在_layout.swig中添加script标签，src写的是相对路径从js这一级开始写。
或者将js文档放在服务器或者线上的任何能找到地址的地方，直接引用，但是特殊的功能可能需要修改配置，具体问题遇到以后再处理！

3. 修改文章内链的样式即修改css样式

首先是修改文章内链的样式

打开：themes\next\source\css_common\components\post\post.styl 增加： // 文章内链接文本样式.post-body p a{  color: #0593d3;  border-bottom: none;  border-bottom: 1px solid #0593d3;  &:hover {	color: #fc6423;	border-bottom: none;	border-bottom: 1px solid #fc6423;  } 搞定！

小结

不难看出，styl文件就是html中引用的css文件，也就是说只要你有css基础，完全可以对所有的样式表进行大调整，随心所欲的改，是不是忽然就很爽啦！
我就在这里改了一下背景图片

body{	background: url("imgurl")!important;}

是不是很暴力，哈哈！

4.在每篇文章末尾增加本文结束的标记，即为文章增加dom

刚才打开的swig文件，如果又细心的小伙伴看的话，一眼就能看出来，它就是我们经常用的html文件格式，但是在框架里有特殊的写法。
所以就是具体怎么做，心里应该有点数了吧！
主要就是要知道他的命名规范。
这里增加“本文结束”的标记需要这么做：

打开：themes/next/layout/_macro路径，查找passage-end-tag.swig，如果你没有建过应该是没有的新建它，并在里面写：	<div>		{% if not is_index %}			<div style="text-align:center;color: #ccc;font-size:14px;">				-------------本文结束				<i class="fa fa-paw"></i>				感谢您的阅读-------------			</div>		{% endif %}	</div>然后把这个文件引用到post.swig文件中(themes/next/layout/_macro/post.swig)在footer.post-footer之前引用刚才的swig文件，也就是HTML文件。	<div>		{% if not is_index %}			{% include 'passage-end-tag.swig' %}		{% endif %}	</div>还需要一步，修改配置，打开主题配置文件_config.yml,写入或者修改：	# 文章末尾添加“本文结束”标记	passage_end_tag:		enabled: true

5.在网站底部增加访问量，即引用next相关插件

实现目的为，在底部显示“本站访问次数”、“总字数”等相关统计信息。

更改文件： themes/next/layout/_partials/footer.swig在div.copyright前面增加引用js的代码块	<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>然后，在本文档中，你觉得适合的位置上，增加如下的代码块内容可以修改但id和class一定保持不变<div class="powered-by">	<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">		本站访客数:<span id="busuanzi_value_site_uv"></span>	</span></div>

然后实现一个网站总字数统计的效果，具体效果为“博客全站工90.0k字”

首先需要安装一个小插件，在根目录下运行$ npm install hexo-wordcount --save然后修改文件： themes/next/layout/_partials/footer.swig在文档中最后，或者你觉得适合的位置，增加如下代码块<div class="theme-info">	<div class="powered-by"></div>	<span class="post-count">博客全站共{{ totalcount(site) }}字</span></div>

6.在文章底部增加版权信息

这里需要扫个盲了，你可能已经提交了几个文章，语法也用了个马马虎虎，但是却不知道写的是什么！

Markdown:Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。Markdown具有一系列衍生版本，用于扩展Markdown的功能(如表格、脚注、内嵌HTML等等)，这些功能原初的Markdown尚不具备，它们能让Markdown转换成更多的格式，例如LaTeX，Docbook。Markdown增强版中比较有名的有Markdown Extra、MultiMarkdown、 Maruku等。这些衍生版本要么基于工具，如Pandoc；要么基于网站，如GitHub和Wikipedia，在语法上基本兼容，但在一些语法和渲染效果上有改动。 ------摘自【百度百科-Markdown】

根据上面几个成功的例子，可猜一下具体操作方法：

在文章页面，增加一定量的代码块，用以显示你需要展示的信息。
为展示信息配置css样式。
获取里面需要展示的数据，用js或其他手段
更改配置或者已经搞定了？
这里是我根据大牛的教程学到的方法：

在next/layout/_marcro下新建一个swig文件，并命名为 my-copyright.swig,写如下内容：

{% 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 type="text/javascript"  src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>  <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">  <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');    clipboard.on('success', $(function(){      $(".fa-clipboard").click(function(){        swal({             title: "",             text: '复制成功',             html: false,          timer: 500,             showConfirmButton: false        });      });    }));  </script>{% endif %}

在next/sourse/css/_common/components/post下新建一个stl文件，并命名为：my-post-copyright.stl,写如下内容：

.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中，引入swig文件，代码如下：

	在文件中	<div>      {% if not is_index %}        {% include 'wechat-subscriber.swig' %}      {% endif %}	</div>	的上面增加	<div>      {% if not is_index %}        {% include 'my-copyright.swig' %}      {% endif %}</div>

引入stl文件

在文件next/source/css/_common/components/post/post.styl的末尾调用stl文件，如下：@import “my-post-copyright”

在写博客的时候，Markdown文件的头部信息里面，将copyright引用
```
copyright: true    //记得空格
```

7.代码块自定义样式

打开\themes\next\source\css_custom\custom.styl,向里面加入：(颜色可以自己定义)

// Custom styles.code {    color: #ff7600;    background: #fbf7f8;    margin: 2px;}// 大代码块的自定义样式.highlight, pre {    margin: 5px 0;    padding: 5px;    border-radius: 3px;}.highlight, code, pre {    border: 1px solid #d6d6d6;}

8.侧边栏社交，及小图标的增加

修改配置文件_config.yml

social:	GitHub: https://github.com/purplechildrensocial-icons:	enable: true	GitHub: github

9.首页增加“查看更多”按钮，点击查看更多，展开页面！

只需要在你感觉合适的地方写入下面一行代码就ok了！

<!-- more -->

10.文章标签默认是#图标，修改成图标样式

修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

附上：

[fontawesome图标库，hexo里面的图标都是用的这里的](https://fontawesome.com/icons?from=io)