内容残缺·Hexonext配置指南

发表于 | 更新于: | 分类于 ，
字数统计: 1.3k | 阅读时长 ≈ 6

为什么你的博客总是这么空？

Hexonext配置指南
逐步完善中

基础配置

占位置

进阶配置

代码块复制功能

下载 clipboard.js
第三方三方插件 clipboardjs ，相关介绍和兼容性我就不赘述了，去它主页或github上看。

下载链接： 二选一
clipboard.js
推荐 clipboard.min.js
右键链接另存为保存到\themes\next\source\js\src

clipboardjs 使用

在 \themes\next\source\js\src 目录下创建 clipboard-use.js 并添加以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*页面载入完成后，创建复制按钮*/
!function (e, t, a) { 
  /* code */
  var initCopyCode = function(){
    var copyHtml = '';
    copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
    copyHtml += '  <i class="fa fa-globe"></i><span>copy</span>';
    copyHtml += '</button>';
    $(".highlight .code pre").before(copyHtml);
    new ClipboardJS('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });
  }
  initCopyCode();
}(window, document);

在 \themes\next\source\css\_custom\custom.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
//代码块复制按钮
.highlight{
  //方便copy代码按钮（btn-copy）的定位
  position: relative;
}
.btn-copy {
    display: inline-block;
    cursor: pointer;
    background-color: #eee;
    background-image: linear-gradient(#fcfcfc,#eee);
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #333;
    -webkit-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    padding: 2px 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0;
}
.btn-copy span {
    margin-left: 5px;
}
.highlight:hover .btn-copy{
  opacity: 1;
}

引用

在 \themes\next\layout\_layout.swig 文件中，添加引用（注：在 swig 末尾或 body 结束标签 </body> 之前添加）

1
2
3
<!-- 代码块复制功能 -->
<script type="text/javascript" src="/js/src/clipboard.min.js"></script>  
<script type="text/javascript" src="/js/src/clipboard-use.js"></script>

美化

侧栏加入已运行的时间

在 /themes/next/layout/_custom/sidebar.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
<div id="days"></div>
<script>
function show_date_time(){
    window.setTimeout("show_date_time()", 1000);
    BirthDay=new Date("05/27/2017 15:13:14");
    today=new Date();
    timeold=(today.getTime()-BirthDay.getTime());
    sectimeold=timeold/1000
    secondsold=Math.floor(sectimeold);
    msPerDay=24*60*60*1000
    e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=setzero(Math.floor(e_hrsold));
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
    seconds=setzero(Math.floor((e_minsold-minsold)*60));
    document.getElementById('days').innerHTML="已运行 "+daysold+" 天 "+hrsold+" 小时 "+minsold+" 分 "+seconds+" 秒";
}
function setzero(i) {
    if (i<10) {
        i="0" + i
    };
    return i;
}
show_date_time();
</script>

上面 Date 的值记得改为你自己的，且按上面格式，然后修改
/themes/next/layout/_macro/sidebar.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{# Blogroll #}
        {% if theme.links %}
          <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
              {{ theme.links_title }}&nbsp;
              <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
            </div>
            <ul class="links-of-blogroll-list">
              {% for name, link in theme.links %}
                <li class="links-of-blogroll-item">
                  <a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
                </li>
              {% endfor %}
            </ul>
         {% include '../_custom/sidebar.swig' %}   {#添加此行#}
          </div>
         {% endif %}

         {% include '../_custom/sidebar.swig' %}   {#删除此行#}

这样就可以了！当然，要是不喜欢颜色，感觉不好看，就可以在上文所提的 custom.styl 加入
/themes/next/source/css/_custom/custom.styl

1
2
3
4
5
6
7
// 自定义的侧栏时间样式
#days {
    display: block;
    color: rgb(7, 179, 155);
    font-size: 13px;
    margin-top: 15px;
}

超链接配色

先在 /themes/next/source/css/_custom/custom.styl 添加以下参数

1
2
3
4
5
6
7
8
9
10
11
//修改超链接样式
if hexo-config("custom_css.post_body_a.enable")
  .post-body 
    a:not(.btn){
      color: convert(hexo-config("custom_css.post_body_a.normal_color"));
      border-bottom: none;
      &:hover {
        color: convert(hexo-config("custom_css.post_body_a.hover_color"));
        text-decoration: underline;
      }
    }

PS: 其中的 a:not(.btn) 是为了不影响 阅读全文按钮
然后在 主题配置文件 /themes/_config.yml 中加入 custom_css的配置

1
2
3
4
5
6
custom_css:
  # the style of post body link
  post_body_a:
    enable: true
    normal_color: "#0593d3"
    hover_color: "#0477ab"

后续修改 超链接 样式时，只需修改 配置文件 里面的 颜色值 即可

代码框配色

短代码框

在 /themes/next/source/css/_custom/custom.styl 添加

1
2
3
4
5
//修改短代码框
code {
  color: #fd00ff;   // 字体颜色
  background: #fbd9ff;   // 背景颜色
}

TOC[文章目录]

next侧边栏的文章目录默认是关闭的
可以通过修改 主题配置文件 /themes/next/_config.yml 来开启

1
2
3
4
5
6
7
8
9
# Table Of Contents in the Sidebar
toc:
  enable: true   # 显示/隐藏文章目录

  # Automatically add list number to toc.
  number: false   # 是否自动在目录里标上序号

  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: true   # 文章目录自动换行

逐级展开

在 /themes/next/source/css/_custom/custom.styl 添加以下参数

1
2
3
4
5
//文章目录[TOC]逐级展开
.post-toc .nav .nav-child { 
//none开启block关闭
    display: none; 
}

第三方

占位置

如有漏缺请联系Yaklo补全

参考

参考文章

Hexo NexT 代码块复制功能
侧栏加入已运行的时间
Hexo Next 修改超链接的样式
Hexo Next主题的TOC设置成不是逐级展开

参考视频

参考网站

为什么不尝试赏点子鼓励我呢~