hexo-theme-next @modified LRH

警告
本文最后更新于 2019-09-13,文中内容可能已过时。
危险
如无必要,不再更新!(2019.09.13)
今晚我做出了一个慎重的决定,由于博主时间精力有限,需要更多的时间来工作和学习。所以我将放弃对 next 的主题的自定义修改,next 主题官方已经更新到了 7.0+的版本,喜欢 next 主题风格的朋友可以在 github 更新。
我这也算是上古版本了,版本差距实在过大,所以我也将放弃博客使用主题的更新。
以下仍为当前博客使用主题,lib 资源已打包 github。
next
基于 hexo-theme-next 6.0+ 的 Pisces 模板做的 DIY 扩展性设计(部分兼容 next 其他几种模板)。主要是一些 custom style 还有一些第三方的 js。修改的地方太多也有点小乱就不提 PR 了。
modified  官方 Demo => https://theme-next.org
记录一下折腾过程,以后备份恢复博客也好方便自己。本文之前的美化修改请见 hexo 标签
主题中若有遗漏第三方插件或应用的 key 及 id 值等请修改为自己对应的值

主要的几个自定义文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
_config.swig                                 #主题配置文件 相关账户信息自己注册替换
\layout\custom\head.swig                     #在头部自定义加入标签
\layout\custom\google_adsense.swig           #谷歌广告模块,内有注释暂时弃用
\layout\_layout.swig                         #主布局
\layout\_macro\post.swig                     #文章布局
\layout\_macro\post-copyright.swig           #文章版权
\layout\_macro\siderbar.swig                 #侧栏模板
\layout\_third-party\copy-code.swig          #复制按钮
\layout\_partials\comments.swig              #评论主模板
\layout\_partials\footer.swig                #底部模板#该模块在 layout.swig 引入,用于在 body 自定义标签
\layout\_partials\footer_custom.swig         #footer 自定义文件
\layout\_third-party\custom.swig             #该模块在 layout.swig 引入用于在 body 自定义标签
\source\css\_custom\customs.styl             #主要用户自定义样式表
\source\fonts\                               #引入了一些我的手写体及外部字体
\scripts\qcloudcdn.js                        #腾讯云 cos 桶刷新缓存的脚本,不需要可删掉 [^1]

^1

1 初步安装

安装整个改过的主题,然后下载相应的 lib 资源解压放入 source 文件夹

1
2
cd hexo
git clone https://github.com/Lruihao/hexo-theme-next themes/next

主题配置文件_config.yml, 选择主题

1
theme: next
lib 下载 http://github.com/Lruihao/hexo-theme-next/releases/tag/v6.9.1

lib 资源

2 更新内容

更多自定义详见源码

自定义友链模板,打开hexo\themes\next\layout\新建links.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
 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
125
126
127
128
129
{% extends '_layout.swig' %}
{% import '_macro/sidebar.swig' as sidebar_template %}

  {% block title %}{#
  #}{% set page_title_suffix = ' | ' + title %}{#

  #}{% if page.type === "categories" and not page.title %}{#
    #}{{ __('title.category') + page_title_suffix }}{#
  #}{% elif page.type === "tags" and not page.title %}{#
    #}{{ __('title.tag') + page_title_suffix }}{#

  #}{% elif page.type === "photos" and not page.title %}{#
  #}{{ __('title.photos') + page_title_suffix }}{#

  #}{% else %}{#
    #}{{ page.title + page_title_suffix }}{#
  #}{% endif %}{#
#}{% endblock %}

{% block page_class %}page-post-detail{% endblock %}

{% block content %}

  <div id="posts" class="posts-expand">
    {##################}
    {#### PAGE BLOCK ###}
    {##################}
    <div class="post-block page">
      {% include '_partials/page-header.swig' %}
      {#################}
      {#### PAGE BODY ###}
      {#################}

      <script src="//at.alicdn.com/t/font_578712_g26jo2kbzd5qm2t9.js"></script>
      <div class="post-body{% if theme.han %} han-init-context{% endif %}{% if page.direction && page.direction.toLowerCase() === 'rtl' %} rtl{% endif %}">
        <div class="links-list">
          {% for svg,link in site.data.links %}
            <div class="card-box" title="{{ link.info }}">
              <a href="{{ link.site }}" target="_blank">
                {% if link.avatar %}
                  <img class="card-avatar" data-original="{{ link.avatar }}" alt="{{ link.nickname }}"/>
                {% else %}
                  <svg class="card-avatar" aria-hidden="true">
                    <use xlink:href="#icon-{{svg+1}}"></use>
                  </svg>
                {% endif %}
                <span title="{{ link.nickname }}">@{{ link.nickname }}</span>
              </a>
            </div>
          {% endfor %}
        </div>
        {{ page.content }}
      </div>

      <style>
        /* @Author: lruihao.cn */
        .links-list {
          margin-top: 1rem;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          flex-wrap: wrap;
        }
        .card-box {
          width: 150px;
          height: 200px;
          font-size: 1rem;
          text-align: center;
          background: rgba(255,255,255,0.3);
          box-sizing: border-box;
          box-shadow: 3px 3px 5px #aaa;
          border-radius: 5px;
          transition-duration: 0.3s;
          margin-bottom: 1rem;
          display: flex;
          flex-direction: column;
        }
        .card-box:hover {
          background: #fff;
          transform: scale(1.03);
          box-shadow: 0 0 3px #aaa;
        }
        .card-box a {
          border:none;
        }
        .card-avatar {
          width: 100%!important;
          height: 150px!important;
          border-radius: 5px;
          margin: 0;
          padding: 0;
        }
        .card-box span{
          display: block;
          position: relative;
          bottom: 1rem;
          align-self: flex-end;
          color: #2bbc8a;
          font-weight: bold;
          max-width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-top: 15px;
        }
        .card-box span:hover {
          color: #d480aa;
        }
      </style>

      {#####################}
      {#### END PAGE BODY ###}
      {#####################}
    </div>
    {% include '_partials/breadcrumb.swig' %}
    {######################}
    {#### END PAGE BLOCK ###}
    {######################}
  </div>

{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(false) }}
{% endblock %}

{% block script_extra %}
  {% include '_scripts/pages/post-details.swig' %}
{% endblock %}
  • 若未使用懒加载请将模板中的data-original属性改为src
  • 若懒加载无法加载预览图请手动添加src="/images/loading.gif"
  • 若 fancybox 显示 alt 内容请更换 fancybox2 或者将 alt 属值删除
1
<img class="card-avatar" data-original="{{ link.avatar }}" alt="{{ link.nickname }}"/>

然后hexo n page links新建一个页面文章配置写下如下内容:

1
2
3
4
---
title: 友情链接
layout: links
---

然后在links页面文件夹下面新建文件夹_data,再在里面新建links.yml,内容如下

1
2
3
4
5
6
7
8
- nickname: 博採眾長
  avatar: http://lruihao.cn/images/avatar.png
  site: http://lruihao.cn
  info: 一个菜鸟的博客
- nickname:                 #友链名称
  avatar:                   #友链头像
  site:                     #友链地址
  info:                     #友链说明

2.2 备案信息自定义

1
2
3
4
5
6
7
8
## -------------------------------------------------------------
## footer_custom Settings
## -------------------------------------------------------------
beian:
  enable: true
  gov: 湘公网安备 43030402000254 号
  recordcode: 43030402000254
  icp: 湘 ICP 备 18020535 号

2.3 文字抖动特效

1
<div class="shaky">(づ●'◡'●) づ ❥内容区</div>
(づ●'◡'●) づ ❥内容区

2.4 左下角微信公众号

1
\source\css\_custom\customs.styl

2.5 相关文章收纳

加入 H5 标签,实现可收纳功能,点击查看详情。

2.6 Chat Services

共 chatra,tidio,daovoice 三个选项,三选一

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
## Chatra Support
## See: https://chatra.io
## Dashboard: https://app.chatra.io/settings/general
chatra:
  enable: false
  async: true
  id: ## visit Dashboard to get your ChatraID
  #embed: ## unfinished experimental feature for developers, See: https://chatra.io/help/api/#injectto

## Tidio Support
## See: https://www.tidiochat.com
## Dashboard: https://www.tidiochat.com/panel/dashboard
tidio:
  enable: false
  key: ## Public Key, get it from Dashboard, See: https://www.tidiochat.com/panel/settings/developer

#在线客服
daovoice: true
daovoice_app_id: xxxx   ## http://www.daovoice.io/

2.7 pdf 和 Mermaid 解析模块

pdf 传送门

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
pdf:
  enable: false
  ## Default height
  height: 500px
  pdfobject:
    cdn: //cdn.jsdelivr.net/npm/pdfobject@2/pdfobject.min.js
    #cdn: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js

## Mermaid tag
mermaid:
  enable: false
  ## Available themes: default | dark | forest | neutral
  theme: forest
  cdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
  #cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

2.8 模仿 csdn 转发样式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
...
   <a class="post-title-link" href="{{ url_for(post.path) }}" itemprop="url">
+    {% if post.repost %}
+      <span class="repost">转</span>
+    {% endif %}
     {{ post.title | default(__('post.untitled'))}}
   </a>
 {% else -%}
+  {% if post.repost %}
+    <span class="repost">转</span>
+  {% endif %}
   {{- post.title -}}
...
1
2
3
4
5
6
7
8
.repost {
  color: #5acc79;
  border: 1px solid #e7f4df;
  border-radius: 20px;
  padding: 2px 5px;
  font-size: 15px;
  font-weight: 500;
}
1
2
3
4
---
title: xxxx
repost: true
---

预览

2.9 热度页面

打开hexo\themes\next\layout新建 top.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
 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
{% extends '_layout.swig' %}
{% import '_macro/sidebar.swig' as sidebar_template %}

  {% block title %}{#
  #}{% set page_title_suffix = ' | ' + title %}{#

  #}{% if page.type === "categories" and not page.title %}{#
    #}{{ __('title.category') + page_title_suffix }}{#
  #}{% elif page.type === "tags" and not page.title %}{#
    #}{{ __('title.tag') + page_title_suffix }}{#

  #}{% elif page.type === "photos" and not page.title %}{#
  #}{{ __('title.photos') + page_title_suffix }}{#

  #}{% else %}{#
    #}{{ page.title + page_title_suffix }}{#
  #}{% endif %}{#
#}{% endblock %}

{% block page_class %}page-post-detail{% endblock %}

{% block content %}

  <div id="posts" class="posts-expand">
    {##################}
    {#### PAGE BLOCK ###}
    {##################}
    <div class="post-block page">
      {% include '_partials/page-header.swig' %}
      {#################}
      {#### PAGE BODY ###}
      {#################}

      <div class="post-body{% if theme.han %} han-init-context{% endif %}{% if page.direction && page.direction.toLowerCase() === 'rtl' %} rtl{% endif %}">
        {{ page.content }}
        <div id="top"></div>
      </div>

      <style>
        #top{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          flex-wrap: wrap;
          width: 100%;
          min-height: calc({{ page.limit }} * 20px);
        }
        #top div{
          width: 400px;
          height: 40px;
          max-width: 400px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        #top a{
          color: #555;
          text-decoration: none;
          outline: 0;
          border-bottom: 1px solid #999;
          word-wrap: break-word;
        }
      </style>
      <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
      <script>AV.initialize("{{ theme.valine.appid }}", "{{ theme.valine.appkey }}");</script>
      <script type="text/javascript">
        setTimeout(function(){
          var time=0
          var title=""
          var url=""
          var query = new AV.Query('Counter');
          query.notEqualTo('id',0);
          query.descending('time');
          query.limit({{ page.limit }}); //设置篇数
          query.find().then(function (todo) {
            for (var i=0;i<{{ page.limit }};i++){
              var result=todo[i].attributes;
              time=result.time;
              title=result.title;
              category=result.categories
              url=result.url;
              var content="<div>"+"【文章热度:"+time+"℃】"+"<a href='"+"{{ config.url }}"+""+url+"'>"+title+"</a>"+"</div>";
              document.getElementById("top").innerHTML+=content;
            }
          }, function (error) {
            console.log("error");
          });
        },1000)
      </script>

      {#####################}
      {#### END PAGE BODY ###}
      {#####################}
    </div>
    {% include '_partials/breadcrumb.swig' %}
    {######################}
    {#### END PAGE BLOCK ###}
    {######################}
  </div>

{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(false) }}
{% endblock %}

{% block script_extra %}
  {% include '_scripts/pages/post-details.swig' %}
{% endblock %}

其中第 36 行改成你自己的 leancloud 的 appid 和 appkey, 比如我的是在主题配置文件里面的 valine 配置下,所以我就写成theme.valine.appid。和我一样就不需要修改,其他自行配置。

然后hexo n page top新建一个页面文章配置写下如下内容,limit 表示显示篇数:

1
2
3
4
5
---
title: 热度
layout: top
limit: 20
---

2.10 复制按钮样式

images/lightbtn.png images/nightbtn.png images/3dbtn.png

本来只想简单美化一下变成 night 样式的,后来写完发现 3dbtn 也挺喜欢的。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
codeblock:
  ## Manual define the border radius in codeblock
  ## Leave it empty for the default 1
  border_radius: 5
  ## Add copy button on codeblock
  copy_button:
    enable: true
    ## Show text copy result
    show_result: true
    ## Style: 'light,night,flat,3dbtn' is currently available, leave it empty or light is default theme
    style: night

相关内容

Buy me a coffee~
Lruihao 支付宝支付宝
Lruihao 微信微信
0%