感谢全栈工程师[Never_yu](https://neveryu.github.io/)。

Never_yu开放了自己的博客源码供大家参考。为表示致敬，把原本计划放到我的博客技术的内容全部写在这里。

分类内容说明本文是否详细说明对应的文字或代码解释
展示生动化在文档中增加图标是，增加自己的理解常见问题3
文字增加背景色块是，增加自己的理解
图形边框效果是
引用边框变色是
行内代码引用是
代码引用高亮和引用的引用是，增加自己的理解
修改超链接的展示样式是7.修改文章内链接文本样式
添加居中效果是
功能优化菜单栏中标签与侧边栏中标签关联的问题引用到其他文章
其他github屏蔽vendors ，导致页面空白的解决方案
关于如何修改内容区域宽度
图片模式
添加音乐
添加最近访客
鼠标点击小红心的设置
背景的设置
多说评论不稳定，加载速度慢怎么办？
给 Github 添加 README
精于心的动画
附录PS:定制的css页面

展示生动化

NexT主题极简风格给人很舒服的感觉，在其中点缀少许生动的元素，会增色不少，下面的方法在视觉上会增加许多鲜活的因素，不过并不是一味的加法就是好事情，要酌情选择。

在文档中增加图标

Hexo-NexT搭建个人博客（一）有符合主题色调的图标搭配文字，效果如下：

  •     支持Markdown Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
  •     一件部署 只需一条指令即可部署到Github Pages，或其他网站
  •     丰富的插件 Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade, CoffeeScript。

代码如下：

- <i class="fa fa-pencil"></i>支持Markdown
<i>Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。</i>
- <i class="fa fa-cloud-upload"></i><h6 style="display: inline;">　一件部署</h6>
<i>只需一条指令即可部署到Github Pages，或其他网站</i>
- <i class="fa fa-cog"></i><h6 style="display: inline;">　丰富的插件</h6>
<i>Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade, CoffeeScript。</i>

这是在Markdown中插入了html的语句，我把第一句中的<h6>去掉了，看一下效果。至于图标，采用Font Awesome提供的默认图标，语法格式如下：

<i class="fa fa-github"></i>
<i class="fa fa-github fa-lg"></i>
<i class="fa fa-github fa-2x"></i>

Font Awesome提供了大量的应用方法说明，可以参考设置自己的博客内容。

文字增加背景色块

相信大家对下面的文字增加背景色块的显示方式并不陌生。

官方文档开篇：为了描述方便，在以下说明中，将前者称为站点配置文件， 后者称为主题配置文件。 Github仓库的Readme.md中的小图标（如下图）：

Join the chat at https://gitter.im/iissnan/hexo-theme-next

要想实现第二种方式，比较简单，做好对应的图片，源码如下:

[![Join the chat at https://gitter.im/iissnan/hexo-theme-next](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/iissnan/hexo-theme-next?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

前面是图片的地址，后面是图片点击之后的触发。

至于第一种显示，需要做两件事情，先在themes\next\source\css\_custom\custom.styl对应的文件中增加 css 样式语句，具体的语句内容见定制的CSS代码部分。在正文需要使用的地方写如下内容:

<span id="inline-blue">站点配置文件</span>， 
<span id="inline-purple">主题配置文件</span>

原理是通过Markdown文件中的id读取到了css文件中对应的样式并且直接展示出来，两者缺一不可。

图形边框效果

Hexo-NexT搭建个人博客（一）有一个非常醒目的 Download Now 文字效果。鼠标出发后还会有变色，下载git安装包。

<a id="download" href="https://git-scm.com/download/win"><i class="fa fa-download"></i><span> Download Now</span>
</a>

这也是调用了Font Awesome的方法。

引用边框变色

左边框变色和上边框变色效果如下：

如果没有安装成功，那可能就是墙的原因。建议下载 `Node.js` 直接安装。

关于更多基本操作和基础知识，请查阅 [Hexo](https://hexo.io/zh-cn/) 与 [NexT](http://theme-next.iissnan.com/) 官方文档.

<p id="div-border-left-red">如果没有安装成功，那可能就是墙的原因。建议下载 `Node.js` 直接安装。</p>
<p id="div-border-top-blue">关于更多基本操作和基础知识，请查阅 [Hexo](https://hexo.io/zh-cn/) 与 [NexT](http://theme-next.iissnan.com/) 官方文档.</p>

原理和文字增加背景色块相同，不再赘述。

行内代码引用

这个问题困扰了我很久，类似于我是代码这样在行内引用代码。

`我是代码`

一直使用四个点来做代码引用，三个点也可以。

代码引用高亮和引用的引用

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

在上代码引用块的右侧增加对应的解释方法即可。

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

html的语言，把bash改为html。 上面的例子还解释了一个问题，如果把引用的符号也加入到引用的代码块中，因为四个符号和三个符号都可以引用代码，所以在三个引用符号之外加上四个符号，程序就能正常的配对和显示。

修改超链接的展示样式

Hexo-NexT搭建个人博客（二）中修改文章内超链接文本样式为淡蓝色。只要在主题的源码中找到对应的文件themes\next\source\css\_custom\custom.styl ，添加如下 css 样式语句：

.post-body p a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}

注意：     该样式是全局样式，所有用到markdown默认语法的超链接都会采用这样的方式展示。     在Markdown列表模式下，该样式并未加载。

添加居中效果

感谢全栈工程师[Never_yu](https://neveryu.github.io/)。
代码如下： ```` html
感谢全栈工程师[Never_yu](https://neveryu.github.io/)。
```` 这是hexo默认的引用方式。

功能优化

菜单栏中标签与侧边栏中标签关联的问题

我在NexT主题个性化修改与调试方案中已经详细说明，Never_yu’s Blog也有方案，不再赘述。

其他

关于github屏蔽vendors ，导致页面空白的解决方案

暂时没有遇到

关于如何修改内容区域宽度

尚未修改

图片模式

尚未启用。

添加High一下

暂时不添加

添加最近访客

暂时不添加

鼠标点击小红心的设置

没看到效果

背景的设置

暂时不添加

多说评论不稳定，加载速度慢怎么办？

暂时不修改

给 Github 添加 README

暂时不修改

动画效果

NexT 因其 精于心，简于形 的风格，一直被广大用户所喜爱。 在CSS中找到了id=“yu-1"的部分，但是对css不了解，暂时放弃。

声明: 本文转载需标明出处，禁止用于商业目的。

ChangeLog

161123 新建

PS:定制的css页面

// Custom styles.

//修改文章内链接文本样式
.post-body p a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}
//修改不在文章内的链接文本样式
.link-blue{
color: #f36;
&:hover {
color: #f00;
}
}
//修改文章内code样式
code {color:#fff;background:#333;}

//修改文章中图片样式，改为居中
.posts-expand .post-body img {
margin: 0 auto;
}

// 下载样式
a#download {
display: inline-block;
padding: 0 10px;
color: #000;
background: transparent;
border: 2px solid #000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #000;
color: #fff;
}
}
//阅读全文样式
.post-more-link .btn {
position:relative;
border: 2px solid #000;
border-radius: 2px;
padding: 0 10px;
font-weight: bold;
background: transparent;
transition: all .5s ease;
&:hover {
background: #000;
color: #eee;
animation: animate-yu-1 3s ease-in;
}
}
//
//
//
// 颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 颜色块-绿
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 颜色块-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}
// 左侧边框红色块级
p#div-border-left-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #df3e3e;
}
// 左侧边框黄色块级
p#div-border-left-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #f0ad4e;
}
// 左侧边框绿色块级
p#div-border-left-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #5cb85c;
}
// 左侧边框蓝色块级
p#div-border-left-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #2780e3;
}
// 左侧边框紫色块级
p#div-border-left-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #9954bb;
}
// 右侧边框红色块级
p#div-border-right-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #df3e3e;
}
// 右侧边框黄色块级
p#div-border-right-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #f0ad4e;
}
// 右侧边框绿色块级
p#div-border-right-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #5cb85c;
}
// 右侧边框蓝色块级
p#div-border-right-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #2780e3;
}
// 右侧边框紫色块级
p#div-border-right-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-right-width: 5px;
border-radius: 3px;
border-right-color: #9954bb;
}
// 上侧边框红色
p#div-border-top-red {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #df3e3e;
}
// 上侧边框黄色
p#div-border-top-yellow {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #f0ad4e;
}
// 上侧边框绿色
p#div-border-top-green {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #5cb85c;
}
// 上侧边框蓝色
p#div-border-top-blue {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #2780e3;
}
// 上侧边框紫色
p#div-border-top-purple {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-top-width: 5px;
border-radius: 3px;
border-top-color: #9954bb;
}

//动画模块
//第一篇博客中-精于心，简于形-的动画
span#yu-1 {
display:inline;
position:relative;
border-top:1px solid #222;
border-bottom:1px solid #222;
font-size:110%;
cursor:pointer;
&:hover {
background-color: #000;
color: #fff;
animation: animate-yu-1 3s ease-in;
}
}
@keyframes animate-yu-1 {
0% {
left:-10px;
top:0px;
}
10% {
left:10px;
top:0px;
}
20% {
left:-8px;
top:0px;
}
30% {
left:8px;
top:0px;
}
40% {
left:-5px;
top:0px;
}
50% {
left:5px;
top:0px;
}
60% {
left:-3px;
top:0px;
}
70% {
left:3px;
top:0px;
}
80% {
left:-1px;
top:0px;
}
90% {
left:1px;
top:0px;
}
100% {
left:0px;
top:0px;
}
}
//留言页面-[最近访客]-的样式
span#yu-2 {
display:inline;
position:relative;
border-top:1px solid #222;
border-bottom:1px solid #222;
font-size:130%;
}