Hexo使用Next主题的配置

最新推荐文章于 2022-08-31 07:47:34 发布

置顶老米的世界

最新推荐文章于 2022-08-31 07:47:34 发布

阅读量665

点赞数

分类专栏： Hexo 文章标签： Next主题 Hexo Next

本文链接：https://blog.csdn.net/MPFLY/article/details/100008928

版权

Hexo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以下为我在调试我的博客之后，做得总结。基于hexo-theme-next，版本为5.1.3。
这是我的博客–老米的世界，欢迎参观~~~

1. 博客底部标签样式

只需要修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成

2. 文章结束标志

在路径 \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>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后(END POST BODY)， post-footer 之前添加如代码：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后打开主题配置文件（_config.yml),在末尾添加：

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

3. RSS

切换到根目录下，然后运行如下代码，安装hexo-generator-feed
```
$ npm install --save hexo-generator-feed
```

在hexo的_config.yml中，在最后添加如下代码：

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

在next主题的_config.yml中ctrl + F找到rss:，添加代码如下：

（注意在冒号后面要加一个空格）

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

重新生成一次，你会在./public 文件夹中看到 atom.xml 文件。然后启动服务器查看是否有效，之后再部署到 github中。

4. 修改文章内链接文本样式

修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  transition color .3s;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

5. 文章字体大小改为`16px`

修改文件 themes\next\source\css\_common\components\post\post.styl，找到.post-body，修改其中代码如下：

.post-body {
  font-family: $font-family-posts;
  font-size 16px;
  +mobile() {
    word-break: break-word;
  }
}

6. 修改作者头像鼠标上移旋转

打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：

.site-author-image {
  display: block;
  margin: 0 auto;
  cursor pointer;
  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 .5s ease-out;
  -moz-transition: -moz-transform .5s ease-out;
  transition: transform .5s 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);
  }
}

7. 代码样式——包括代码块和多行代码

打开\themes\next\source\css\_custom\custom.styl,向里面加入：

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

8. 站点访问量

较低版本的next没有内置busuanzi，推荐以下方法

打开\themes\next\layout\_partials\footer.swig文件

在一开头加上以下代码：

<script async 					src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

然后在合适的位置添加显示统计的代码

<div class="powered-by">
  <i class="fa fa-user-md"></i>
  <span id="busuanzi_container_site_uv">
    本站访客数:<span id="busuanzi_value_site_pv"></span>
  </span>
</div>

在这里有两中不同计算方式的统计代码：

pv的方式，单个用户连续点击n篇文章，记录n次访问量

<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

uv的方式，单个用户连续点击n篇文章，只记录1次访客数

<span id="busuanzi_container_site_uv">
  本站总访问量<span id="busuanzi_value_site_uv"></span>次
</span>

清除缓存，重新加载，搞定。

版本较高的内置的busuanzi

只需要在主题配置文件中修改如下：

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 本站访问量
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 本站访客数
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i> 文章阅读量
  page_pv_footer:

9. 全站字数统计

针对较低版本的next，推荐一下方法

切换到根目录下，然后运行如下代码：
```
$ 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>

清除缓存，重新加载，搞定。

版本比较高的

打开主题配置文件，找到post_wordcount，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: true
  separated_meta: true

10. 阅读时间、文章字数

切换到根目录下，然后运行如下代码：
```
$ npm install hexo-wordcount --save
```

然后在主题的配置文件中，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

清除缓存，重新加载，搞定。

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

在目录 next/layout/_macro/下添加 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 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：

.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，在代码

<div>
      {% if not is_index %}
        {% include 'wechat-subscriber.swig' %}
      {% endif %}
</div>

之前添加增加如下代码：

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

修改next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：
```
@import "my-post-copyright"
```
保存重新生成即可。
需要在每篇文章的头部添加如下代码：
```
copyright: true
```
[外链图片转存失败(img-ugIdITpg-1566439769845)(https://upload-images.jianshu.io/upload_images/5308475-51f087ce1f1903a6.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

12. 文章加密访问

打开themes->next->layout->_partials->head.swig文件，在顶部位置插入这样一段代码：

<script>
    (function () {
        if ('{{ page.password }}') {
            if (prompt('请输入文章密码') !== '{{ page.password }}') {
                alert('密码错误！');
                if (history.length === 1) {
                    location.replace("http://xxxxxxx.xxx"); // 这里替换成你的首页
                } else {
                    history.back();
                }
            }	
        }
    })();
</script>

在写文章时，如需对该文章加密，需要在文章头部添加以下代码：

password: ******

这样在打开文章时，会自动弹出密码输入框。

13. 修改打赏字体不闪动

修改文件next/source/css/_common/components/post/post-reward.styl，然后注释其中的函数wechat:hover和alipay:hover，如下：

/* 注释文字闪动函数
 #wechat:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
 #alipay:hover p{
   animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
*/

14. 添加友情链接

打开主题配置文件修改成这样就行了(links里面写你想要的链接)：

links_icon: link
links_title: 友情链接
# links_layout: block
links_layout: inline
links:
  慧行说: https://www.liuyude.com/
  张鑫旭: https://www.zhangxinxu.com/

15. 评论

我使用Valine来进行评论，具体的步骤如下：

在leanCloud上注册一个账号
注册成功并登录后，你会得到两个数据：
- App ID
- App Key
复制并保存

打开主题配置文件，我的版本是v5.1.3，其中已经内置了Valine评论系统，只需要打开即可：

valine:
  enable: true
  appid: yourAppid
  appkey: yourAppkey
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: 请输入您的评论，看到必回复！ # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

Valine 目前使用的是Gravatar 作为评论列表头像。

请自行登录或注册Gravatar，然后修改自己的头像。

评论的时候，留下在Gravatar注册时所使用的邮箱即可。

16. 添加文章更新时间

修改/themes/next/layout/_macro/post.swig 文件，在...标签后添加：

{%if post.updated and post.updated > post.date%}
  <span class="post-updated">
    &nbsp; | &nbsp; {{ __('post.updated') }}
    <time itemprop="dateUpdated" datetime="{{ moment(post.updated).format() }}" content="{{ date(post.updated, config.date_format) }}">
      {{ date(post.updated, config.date_format) }}
    </time>
  </span>
{% endif %}

在/themes/next/languages/zh_Hans.yml中新增：
```
post:
  updated: 更新于
```
修改主题配置文件/themes/next/_config.yml，增加一行
```
display_updated: true
```
写文章的时候可以直接在文章开头设置更新时间：
```
updated: 2018-01-01 12:30
```
没有参数的话将会默认显示.md文件的修改日期

17. 文章搜索

根目录下执行：

npm install hexo-generator-searchdb --save

在主题配置文件/theme/next/_config.yml中添加配置：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

并修改数据

local_search:
  enable: true

18. 阅读次数

打开主题配置文件/theme/next/_config.yml修改配置如下

busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: false
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: false
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i> 文章阅读量
  page_pv_footer:

由上到下分别是

全站的UV
全站的PV
文章的PV

19. 配置背景动画

打开主题配置文件/theme/next/_config.yml修改配置如下：

# Canvas-nest
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

20. 首页文章列表鼠标上移样式

打开\themes\next\source\css\_custom\custom.styl，向里面加入：

// 主页文章添加阴影效果
.post {
    margin-top: 60px;
    padding: 25px;
    transition: box-shadow .3s;
    &:hover{
        box-shadow: 0px 6px 8px 6px rgba(202,203,203,0.5);
        -webkit-box-shadow: 0px 6px 8px 6px rgba(202,203,203,0.5);
        -moz-box-shadow: 0px 6px 8px 6px rgba(202,203,203,0.5);
    }
}

21. 去掉文章目录自动生成的编号

打开主题配置文件/theme/next/_config.yml修改配置如下：

 # Automatically add list number to toc.
  number: false

老米的世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Hexo使用Next主题的配置

1. 博客底部标签样式只需要修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成2. 文章结束标志在路径 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：<...
复制链接

扫一扫