Hexo Next6.5主题配置优化

置顶 | 发表于 | 更新于 | 分类于 | 阅读次数：
| 本文字数： 8.1k

年年是记忆，来日也可期。

RainyDay-<徐秉龙>

基于Next 6.5版本，网上有很多Next主题配置优化的教程，查找下来感觉比较杂乱，因此总结一些自己所使用的。

1.Next底部图标设置

将底部的图标设置为动态红心效果。

2.实现点击出现桃心效果

在/themes/next/source/js/src下新建文件 clicklove.js ，接着把如下的代码拷贝粘贴到 clicklove.js 文件中。

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

在\themes\next\layout\_layout.swig文件末尾添加：

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>
3.修改文章内链接文本样式

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

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.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;
  }
}
4.修改文章底部的那个带#号的标签

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

5.在每篇文章末尾统一添加“本文结束”标记

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

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

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
6.主页文章添加阴影效果

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

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
7.动态背景

进入theme/next目录，执行命令：

1
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

将主题配置文件_config.yml中的canvas_nest: false改为canvas_nest: true生效。

8.添加搜索功能

安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：

1
$ npm install hexo-generator-searchdb --save

编辑根配置文件，新增以下内容到任意位置：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑Next主题配置文件，启用本地搜索功能：

1
2
3
# Local search
local_search:
  enable: true
9.文章置顶

在博客根目录下执行：

1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

打开：/blog/themes/next/layout/_macro 目录下的post.swig文件，定位到<div class="post-meta">标签下，插入如下代码：

1
2
3
4
5
{% if post.top %}
       <i class="fa fa-thumb-tack"></i>
       <font color=7D26CD>置顶</font>
        <span class="post-meta-divider">|</span>
{% endif %}

然后在需要置顶的文章的Front-matter中加上top: true即可.

10.添加顶部加载条和返回顶部显示百分比

11.代码复制功能

12.添加宠物

博客根目录安装插件：

1
npm install --save hexo-helper-live2d

下载模型，模型名称可以到这里参考，一些模型的预览可以在这里。

1
npm install live2d-widget-model-haruto //我使用的这个

在 hexo 根路径下的 _config.yml中添加参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
live2d:
  enable: true #启用
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-wanko #模型名称
  display: #位置和大小
    position: right 
    width: 150  
    height: 300
  mobile: #手机端是否显示
    show: true

效果如下：

13.添加音乐

第一种方法直接网易云生成外链，放在layout/_macro/sidebar.swig 文件下:

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=490106148&auto=1&height=66"></iframe> //auto为1，自动播放

效果如下：

第二种方式，根目录安装插件：

1
npm install hexo-tag-aplayer --save

文章中的写法：

1
{% aplayer "歌曲名" "歌手名" "https://什么什么什么.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %}

        

         

另外可以支持歌单：


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
{% aplayerlist %}
{
    "narrow": false,   // （可选）播放器袖珍风格
    "autoplay": true,  // （可选) 自动播放，移动端浏览器暂时不支持此功能
    "mode": "random",  // （可选）曲目循环类型，有 'random'（随机播放）, 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放)， 默认：'circulation' 
    "showlrc": 3, // （可选）歌词显示配置项，可选项有：1,2,3
    "mutex": true,// （可选）该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
    "theme": "#e6d0b2",  // （可选）播放器风格色彩设置，默认：#b7daff
    "preload": "metadata", // （可选）音乐文件预载入模式，可选项： 'none' 'metadata' 'auto', 默认: 'auto'
    "listmaxheight": "513px", // (可选) 该播放列表的最大长度
    "music": [
        {
            "title": "CoCo",
            "author": "Jeff Williams",
            "url": "caffeine.mp3",
            "pic": "caffeine.jpeg",
            "lrc": "caffeine.txt"
        },
        {
            "title": "アイロニ",
            "author": "鹿乃",
            "url": "irony.mp3",
            "pic": "irony.jpg"
        }
    ]
}
{% endaplayerlist %}


以上添加音乐的方法过于复杂：


使用MeingJS支持(可参考官方文档)，在根目录配置文件_config.yml下加入：


1
2
aplayer:
  meting: true


之后文章要插入的地方使用这种格式(随意选用一种)：


1
2
3
4
5
6
第一种：
<!-- Simple example (id, server, type)  -->
{% meting "60198" "netease" "playlist" %}
第二种：
<!-- Advanced example -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}






选项
默认
描述






ID
需要
歌曲ID /播放列表ID /专辑ID /搜索关键字




server
需要
音乐平台：netease，tencent，kugou，xiami，baidu




type
需要
song，playlist，album，search，artist




fixed
false
启用固定模式




mini
false
启用迷你模式




loop
all
播放器循环播放，值：’all’，’one’，’none’




order
list
顺序，值：’列表’，’随机’




volume
0.7
默认音量，注意播放器将记住用户设置，默认音量将在用户自行设置音量后无效




lrctype
0
歌词类型




listfolded
false
指示列表是否应首先折叠




autoplay
false
自动播放歌曲，移动浏览器不支持




mutex
true
当该玩家玩时，暂停其他玩家




listmaxheight
340px
播放列表的最大高度




preload
auto
载入音乐的方式，可以是none，metadata，auto




storagename
metingjs
存储播放器设置的LocalStorage键




theme
#ad7a86
主题色






更多优化可参考博客教程：



      
    


    

    
    
    
    

    
    

    
        
-------------本文结束感谢您的阅读-------------