Hexo-NexT配置超炫网页效果

前言

Hexo安装过后，默认的主题是landscape，如果不喜欢，我们也可以进行更换。本文主要讲解NexT主题的使用。先看下我博客网站的效果吧：blogwenbo.com

Hexo主题相关网址

Hexo官网

Theme

NexT

NexT安装

切换主题

设置Menu

初始化对应的Menu文件夹

设置动态背景

在右上角或者左上角实现fork me on github

添加添加RSS

修改文章内链接文本样式

修改底部标签样式

在文章末尾添加“文章结束”标记

设置头像并设置动画效果

修改代码块``自定义样式

侧边栏社交小图标设置

主页文章添加阴影效果

网站底部加上访问量

添加热度

网站底部字数统计

设置网站的图标Favicon

实现文章统计功能

添加网页顶部进度加载条

添加来必力云跟帖功能

底部隐藏由Hexo强力驱动、主题--NexT.Mist

去掉底部重复字数统计

添加jiathis分享

博文置顶

修改字体大小

添加DaoVoice在线联系

添加底部桃心

添加侧栏推荐阅读

在文章底部增加版权信息

Hexo博客添加站内搜索

添加外链网易云音乐

NexT安装

切换到Blog文件夹下（就是hexo init的文件夹），查看文件

cd [Blog]

ls
_config.yml node_modules    scaffolds   themes
db.json     package.json    source

通过git安装，前提是你的电脑安装了git.

git clone https://github.com/iissnan/hexo-theme-next themes/next

查看标签列表

git tag -l
输出：
...
v5.1.3
v5.1.4

切换到v5.1.4

git checkout tags/v5.1.4
输出：
HEAD is now at 4f75fe5... 2018 NY update.

通过curl安装NexT

mkdir themes/next
curl -s https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

更新主题NexT

cd themes/next
git pull

切换成NexT主题，在hexo根文件夹下，编辑_config.yml文件

theme: next

//切换后，用命令清除下缓存
hexo clean

//执行hexo s本地产看NexT主题效果
hexo s

切换主题

在列表中选择一款自己喜欢的主题风格。

# Schemes
scheme: Muse  //默认主题
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

设置Menu

默认只有两个首页和归档，如下图所示：

屏幕快照 2018-01-20 下午6.42.20.png
如果还要添加，编辑themes/next/_config.yml：

menu:
  home: / || home  //首页
  about: /about/ || user  //关于
  tags: /tags/ || tags  //标签
  categories: /categories/ || th   //分类
  archives: /archives/ || archive //归档
  schedule: /schedule/ || calendar   //日程表
  sitemap: /sitemap.xml || sitemap   //站点地图

将需要的Menu前面#号去掉。如下图所示:

屏幕快照 2018-01-20 下午6.47.17.png

初始化对应的Menu文件夹

没有创建Menu对应的文件夹，Blog/source文件目录如下：

屏幕快照 2018-01-20 下午6.55.51.png
在博客网站点击标签菜单可能会提示：

屏幕快照 2018-01-20 下午6.50.42.png
比如要创建标签文件夹，终端中输入（前提在Hexo文件路径下）：

  hexo new page "tags"
输出：
INFO  Created: ~/Desktop/MyBlog/Blog/source/tags/index.md

成功过后目录如下：

屏幕快照 2018-01-20 下午6.58.01.png
编辑Blog/source/tags中index.md文件，添加type: "tags"，其他Menu也同理创建。

title: tags
date: 2018-01-20 18:57:48
type: "tags"

设置动态背景

主题配置文件中找到canvas_nest，设置成ture就OK啦。

# Canvas-nest
canvas_nest: ture

在右上角或者左上角实现fork me on github

效果图如下图所示：

屏幕快照 2018-01-20 下午7.49.45.png
在GitHub Ribbons或GitHub Corners选择一款你喜欢的挂饰，拷贝方框内的代码：

屏幕快照 2018-01-20 下午7.41.10.png
将刚刚复制的挂饰代码，添加到Blog/themes/next/layout/_layout.swig文件中，添加位置如下图所示(放在<div class="headband"></div>下方)：

屏幕快照 2018-01-20 下午7.39.36.png

添加添加RSS

切换到Blog文件夹（hexo init的文件夹）下

cd [Blog]

安装Hexo插件

 npm install --save hexo-generator-feed

安装成功之后，编辑Blog/_config.yml文件，在文件末尾添加

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

配置主题_config.yml文件，command+f搜索rss，在后面加上/atom.xml

# 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 //注意：有一个空格

之后，终端输入hexo s查看效果

hexo s

屏幕快照 2018-01-20 下午8.02.19.png

修改文章内链接文本样式

修改Blog/themes/next/source/css/_common/components/post/post.styl，在末尾添加CSS样式：

// 文章内链接文本样式
.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; //底部分割线颜色
  }
}

设置后，效果如下：

屏幕快照 2018-01-20 下午10.12.30.png

修改底部标签样式

修改Blog\themes\next\layout\_macro\post.swig中文件，command+f搜索rel="tag">#，将#替换成<i class="fa fa-tag"></i>。输入以下命令，查看效果：

hexo clean
hexo s

屏幕快照 2018-01-20 下午10.21.15.png

在文章末尾添加“文章结束”标记

在路径Blog\themes\next\layout\_macro文件夹中新建passage-end-tag.swig文件。

//切换到路径_macro
cd [_macro路径]

//创建passage-end-tag.swig文件
touch passage-end-tag.swig

在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>

打开Blog\themes\next\layout\_macro\post.swig，在post-body之后，post-footer之前（post-footer之前两个DIV），添加以下代码：

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

添加位置，如下图所示：

屏幕快照 2018-01-20 下午10.40.49.png
修改主题配置文件_config.yml，在末尾添加：

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

配置完成之后，效果如下：

屏幕快照 2018-01-20 下午10.43.14.png

设置头像并设置动画效果

在Blog/_config.yml中添加头像链接地址：

//添加头像地址
avatar: [ http://....]

设置头像圆角并旋转，打开Blog/themes/next/source/css/_common/components/sidebar/sidebar-author.styl，添加以下代码：

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

效果如下：

Untitled.gif

修改代码块``自定义样式

打开Blog\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;
}

侧边栏社交小图标设置

打开主题配置文件_config.yml，command+f搜索Social，将你有的社交账号前面的#号去掉。格式为：

[社交平台名]: [社交地址] || [图标名称]

#social:
  GitHub: https://github.com/yourname || github
  简书: https://www.jianshu.com/u/63445e24e8bf || heartbeat
  掘金: https://juejin.im/user/5a371ae551882512d0607108 || spinner
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

效果图如下：

屏幕快照 2018-01-20 下午11.40.09.png
图标可以去Font Awesome Icon网站去找，找到后复制名字到相应的位置即可。

主页文章添加阴影效果

打开Blog\themes\next\source\css\_custom\custom.styl，添加以下代码：

// 主页文章添加阴影效果
 .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);
  }

效果如下：

屏幕快照 2018-01-20 下午11.44.32.png

网站底部加上访问量

打开Blog/themes/next/layout/_partials/footer.swig文件，在copyright加上如下代码：

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

屏幕快照 2018-01-20 下午11.48.10.png

在适当的位置添加显示统计代码

<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>

屏幕快照 2018-01-20 下午11.54.05.png

设置统计方式

//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>

效果图如下：

屏幕快照 2018-01-20 下午11.57.45.png

添加热度

进入LeanCloud官网，进行账号注册。登录后，进入控制台，创建应用，应用名为Hexo如下图所示：

屏幕快照 2018-01-21 上午12.47.11.png
创建应用后，点击存储，创建Class，Class命名为Counter，操作如下图所示：

屏幕快照 2018-01-21 上午12.48.03.png

屏幕快照 2018-01-21 上午12.48.48.png
查看AppID和AppKey，如下图所示：

屏幕快照 2018-01-21 上午12.52.37.png
打开Blog/themes/next/layout/_macro/post.swig，command+F搜索leancloud-visitors-count，在图片位置加入<span>℃</span>，如下图所示：

屏幕快照 2018-01-21 上午12.44.04.png
编辑主题配置文件，command+f搜索leancloud_visitors，将其值设为：ture，将AppID和AppKey粘贴到相应位置：

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: ture
  app_id: app_id
  app_key: app_key

效果图如下图所示：

屏幕快照 2018-01-21 上午12.58.08.png

网站底部字数统计

npm install hexo-wordcount --save

在Blog/themes/next/layout/_partials/footer.swig末尾添加代码：

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

效果图如下图所示：

屏幕快照 2018-01-21 上午11.33.01.png

设置网站的图标Favicon

在图标网站找一张你喜欢的图标（大：32x32 小：16x16），图标网站：easyicon或者阿里巴巴矢量图标库。将下载下来的小图和中图放在Blog/themes/next/source/images，将默认的两张图片替换掉。命名和默认的一样也可以自己定义：

屏幕快照 2018-01-21 上午11.44.04.png
修改主题配置文件，如果你自定义了图片名字，需要做修改：

# For example, you put your favicons into `hexo-site/source/images` directory.
# Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo.
favicon:
  small: /images/favicon-16x16-next.png  //16X16小图
  medium: /images/favicon-32x32-next.png  //32X32大图
  apple_touch_icon: /images/apple-touch-icon-next.png  //apple-touch-icon 
  safari_pinned_tab: /images/logo.svg 
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

修改后，效果如下：

屏幕快照 2018-01-21 下午12.01.32.png

实现文章统计功能

安装Hexo插件，参考网站底部字数统计。
编辑主题配置文件，配置如下：

# 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

效果图：

屏幕快照 2018-01-21 下午12.07.11.png

添加网页顶部进度加载条

编辑主题配置文件，command+F搜索pace，将其值改为ture就可以了，选择一款你喜欢的样式。

# Progress bar in the top during page loading.
pace: ture
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal

添加来必力云跟帖功能

首先去来必力注册账号，然后进入后台管理系统，如下图所示：

屏幕快照 2018-01-21 下午12.17.33.png

拷贝data-uid，如下图所示：

屏幕快照 2018-01-21 下午12.21.02.png
编辑主题配置文件，command+F搜索livere_uid，将刚刚拷贝的data-uid粘贴到相应位置：

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: livere_uid

之后部署查看效果：

屏幕快照 2018-01-21 下午12.51.32.png

底部隐藏由Hexo强力驱动、主题--NexT.Mist

打开Blog/themes/next/layout/_partials/footer.swig，注释掉相应代码。

//用下面的符号注释，注释代码用下面括号括起来
<!-- -->

<!--
<span class="post-meta-divider">|</span>

{% if theme.footer.powered %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
  <div class="theme-info">{#
  #}{{ __('footer.theme') }} &mdash; {#
  #}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
    #}NexT.{{ theme.scheme }}{#
  #}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}

{% if theme.footer.custom_text %}
  <div class="footer-custom">{#
  #}{{ theme.footer.custom_text }}{#
#}</div>
{% endif %}
-->

注释掉后效果如下：

屏幕快照 2018-01-21 下午1.13.00.png

去掉底部重复字数统计

未去掉前，如下图所示：

屏幕快照 2018-01-21 下午1.15.30.png
注释掉如下代码：

<!--
  {% if theme.post_wordcount.totalcount %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    {% if theme.post_wordcount.item_text %}
      <span class="post-meta-item-text">{{ __('post.totalcount') }}&#58;</span>
    {% endif %}
    <span title="{{ __('post.totalcount') }}">{#
    #}{{ totalcount(site, '0,0.0a') }}{#
  #}</span>
  {% endif %}
-->

添加jiathis分享

编辑主题配置文件，将jiathis改为ture即可：

# Share
# This plugin is more useful in China, make sure you known how to use it.
# And you can find the use guide at official webiste: http://www.jiathis.com/.
# Warning: JiaThis does not support https.
jiathis: ture
  ##uid: Get this uid from http://www.jiathis.com/
#add_this_id:

效果如下图所示：

屏幕快照 2018-01-21 下午1.25.15.png

博文置顶

修改hexo-generator-index插件，把node_modules/hexo-generator-index/lib/generator.js中代码替换为：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

文章添加Top值，值越大，越靠前：

---
title: Hexo-NexT主题配置
date: 2018-01-20 20:41:08
categories: Hexo
tags:
- Hexo
- NexT
top: 100
---

修改字体大小

编辑Blog/themes/next/source/css/_variables/base.styl，command+F搜索$font-size-base，修改为你想要的大小：

// Font size
$font-size-base           = 16px

添加DaoVoice在线联系

首先到DaoVoice注册账号，登录成过后，进入到后台管理，点击应用设置——>安装到网站查看安装代码和AppID。
将安装代码添加到Blog/themes/next/layout/_partials/head.swig中：

{% if theme.daovoice %}
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}

屏幕快照 2018-01-21 下午1.50.23.png

编辑主题配置文件，添加如下代码：

# Online contact 
daovoice: true
daovoice_app_id: daovoice_app_id

效果图如下所示：

屏幕快照 2018-01-21 下午1.55.07.png

添加底部桃心

打开Blog/themes/next/layout/_partials/footer.swig搜索with-love，在fontawesom找到你喜欢的图标，在如下位置替换即可：

屏幕快照 2018-01-21 下午2.13.15.png
效果如下图所示：

屏幕快照 2018-01-21 下午2.14.33.png

添加侧栏推荐阅读

编辑主题配置文件，如下配置即可：

# Blog rolls
links_icon: link
links_title: 推荐阅读
#links_layout: block
links_layout: inline
links:
  Swift 4: https://developer.apple.com/swift/
  Objective-C: https://developer.apple.com/documentation/objectivec

效果如下图所示：

屏幕快照 2018-01-21 下午2.25.59.png

在文章底部增加版权信息

在目录Blog/themes/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 %}

在目录Blog/themes/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;
}

在Blog/themes/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;
}

修改Blog/themes/next/layout/_macro/post.swig，在如图位置添加以下代码：

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

屏幕快照 2018-01-21 下午2.54.04.png

在Blog/themes/next/source/css/_common/components/post/post.styl文件最后加入下面的代码：

@import "my-post-copyright"

在Markdown文章中加入copyright : ture：

---
title: Hexo-NexT主题配置
date: 2018-01-20 20:41:08
categories: Hexo
tags:
- Hexo
- NexT
top: 100
copyright: ture
---

配置根目录下的_config.yml文件，配置为：

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://wenmobo.github.io/  //你的网站地址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

效果图如下所示：

屏幕快照 2018-01-21 下午3.01.04.png

Hexo博客添加站内搜索

NexT主题支持集成 Swiftype、微搜索、Local Search 和 Algolia。下面介绍Local Search的安装吧。
安装 hexo-generator-search

npm install hexo-generator-search --save

安装 hexo-generator-searchdb

npm install hexo-generator-searchdb --save

编辑站点配置文件，添加以下内容

屏幕快照 2018-01-21 下午5.39.59.png

：

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

编辑主题配置文件，设置Local searchenable为ture

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: ture
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

效果如下图所示：

屏幕快照 2018-01-21 下午5.39.59.png

添加外链网易云音乐

打开网易云音乐，注册并登陆你的账号号，点击右上角进入我的主页：

屏幕快照 2018-01-21 下午6.11.50.png
选择一首你喜欢的歌曲或者创建一个喜欢的歌单，进入详情：

屏幕快照 2018-01-21 下午6.12.46.png
点击生成外链播放器

屏幕快照 2018-01-21 下午6.12.56.png
进入详情，设置喜欢的样式，拷贝代码：

屏幕快照 2018-01-21 下午6.13.22.png
将代码粘贴到一个合适的位置，我的粘贴在Blog/themes/next/layout/_macro/sidebar.swig文件下：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=310 height=110 src="//music.163.com/outchain/player?type=0&id=371085186&auto=1&height=90"></iframe>

效果如下：

屏幕快照 2018-01-21 下午6.29.29.png

问题解决

1、博客集成来必力后，标签、分类、分类显示评论组件，这里需要隐藏

打开根目录，找到如下文件夹：

屏幕快照 2018-01-21 下午10.46.50.png
编辑index.md文件，添加comments将其值设为false:

---
title: tags
date: 2018-01-20 18:57:48
type: "tags"
comments: false
---

然后执行，就没有评论框了：

hexo clean
hexo g
hexo d

总结

终于搭建好自己的小窝啦，这里是我的成果： blogwenbo.com，从最开始无从下手，到一步步搭建起各种效果，自己还是挺有成就感的，虽然让自己折腾了好几天，但还是值得的，在搭建的过程中，自己也参考了很多优秀的博客，非常感谢博主的无私分享。如果以后有更多好看炫酷的效果，我也会在本篇博文中更新。如果你也想开始搭建自己的专属静态博客，就赶快行动吧！

参考文章

最后编辑于：2019.04.15 22:02:06

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,001评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,210评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 161,874评论 0赞 351
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,001评论 1赞 291
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,022评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,005评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,929评论 3赞 416
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,742评论 0赞 271
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,193评论 1赞 309
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,427评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,583评论 1赞 346
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,305评论 5赞 342
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,911评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,564评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,731评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,581评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,478评论 2赞 352