hexo的next主题个性化配置

前言:

如果你觉得我的博客界面不错，你可以参考这篇文章，在这篇文章中总结了几十个个性化配置，并不是都要安装，取你所需即可．

一、常用的个性化配置汇总：

１．更换主题

２．设置语言

３．字数统计和阅读时长(网站底部/文章内)

４．添加busuanzi: 统计浏览次数（本站总访客数，本站总访问量）

５．本站已安全运行 XX天 XX小时XX分XX秒

６．添加评论系统(常见的有: 网易云跟帖但现在已失效，来必力，valine) ,这里以valine为例

７．添加热度（文章阅读次数）

８．为博客加上宠物

９．鼠标点击出现桃心效果

１０．网页底部的动态桃心图像

１１．添加顶部加载条

１２．设置网站的图标Favicon

１３．DaoVoice 在线联系

１４．添加AddThis分享

１５．添加打赏

１６．文章加密访问

１７．在文章底部增加版权信息

１８．修改文章底部的那个带#号的标签

１９．在每篇文章末尾添加“本文结束”标记

２０．修改作者头像并旋转

２１．隐藏网页底部powered By Hexo / 强力驱动

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

２３．修改代码块自定义样式（设置代码高亮主题）

２４．开启代码块复制

２５．侧边栏社交链接

２６．图片处理(使用七牛云为Hexo存储图片等静态资源)

２７．修改背景图,以及侧边栏顶部颜色

２８．侧边栏添加网易云音乐

２９．底部添加公网安备

３０．取消“文章目录”的自动编号

３１．封面模式

１．更换主题: (以next主题为例)

注: next 主题的 github仓库地址迁移了

１．１　下载主题:

旧版本next主题地址: 5以下的版本包含5: 旧版本5以下

安装指令: 首先打开git bash进入根目录即 " /blog/" 执行命令:git clone https://github.com/iissnan/hexo-theme-next themes/next 此时会从next主题的作者的github仓库克隆next主题到 我们本地的 /blog/theme/next文件夹下

最新版在这里下载: 新版本6开始

安装指令: 同上 git clone https://github.com/theme-next/hexo-theme-next themes/next

安装完成后，打开 站点配置文件,找到 theme 字段，并将其值更改为 next, 一定要保存

依次执行git clean，git g,git s 然后查看运行结果:

nexT主题有四种选择，上面这个只是最简洁的一种，我选择的是Gemini布局。

１．２　修改主题配置文件：

然后重新git clean，git g，git s查看效果:

２．设置语言：

在站点配置文件中设置语言:

language: zh-Hans     next5以下版本(包含)
language: zh-CN       next6以上版本(包含)

３．字数统计和阅读时长(网站底部/文章内):

３．１　首先安装插件:

$ npm install hexo-symbols-count-time --save

３．２　然后修改主题配置文件如下:

symbols_count_time:
	separated_meta: true   ＃显示属性名称,设为false后只显示图标和统计数字,不显示属性的文字
	item_text_post: true   ＃显示属性名称,设为false后只显示图标和统计数字,不显示属性的文字
	item_text_total: true ＃底部footer是否显示字数统计属性文字(如站点总字数,站点阅读时长 ≈ 1 分钟)
	awl: 4     ＃计算字数的一个设置,没设置过
	wpm: 275  ＃一分钟阅读的字数	

３．３　站点配置文件中添加：

symbols_count_time:
 #文章内是否显示
  symbols: true
  time: true
 # 网页底部是否显示
  total_symbols: true
  total_time: true

注意: 配置文件中的空格**

４．添加busuanzi: 统计浏览次数（本站总访客数，本站总访问量）

打开/blog/themes/next/layout/_partials/footer.swig 在文件底部添加下面的代码:

<div class="powered-by">
<i class="fa fa-user-md"></i>
<span id="busuanzi_container_site_uv">
  本站总访客数:<span id="busuanzi_value_site_uv"></span>&nbsp;&nbsp;| 
</span>
<span id="busuanzi_container_site_pv">
    &nbsp;本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
</div>
</div>

５．本站已安全运行 XX天 XX小时XX分XX秒

打开/blog/themes/next/layout/_partials/footer.swig 在文件底部添加下面的代码:

<script>
    var now = new Date(); 
    function createtime() { 
        var grt= new Date("03/12/2019 12:00:00");//此处修改你的建站时间或者网站上线时间 
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "; 
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
    } 
setInterval("createtime()",250);
</script>

６．添加评论系统(常见的有: 网易云跟帖但现在已失效，来必力，valine) ,这里以valine为例:

先注册leancloud账号,获取自己的appid,appkey

打开主题配置文件,修改如下:

valine:
  enable: true # 为true时启用评论
  appid:  # 这里填写上面得到的APP ID   注意空一格再输入ID和key,
  appkey:  # 这里填写上面得到的APP KEY
  notify: false #  邮件通知
  verify: false # 验证码
  placeholder:  #评论框中预设的文字,随意填写
  avatar: mm # gravatar style 头像,采用gravatar头像,到http://cn.gravatar.com/了解
  guest_info: nick,mail,link # custom comment header 访客信息,显示在评论框上面,三者可随意选择或全选
  pageSize: 10 # pagination size 评论分页大小
  visitor: false #

７．添加热度（文章阅读次数）

修改主题配置文件

leancloud_visitors:
  enable: true
  app_id:  #填入你leancloud账号的appid
  app_key: #填入你leancloud账号的appkey

打开/blog/themes/next/layout/_macro/post.swig,在画红线的区域添加℃：

然后打开，/blog/themes/next/languages/zh-Hans.yml,将画红框的改为热度就OK了

８．为博客加上宠物

８．１　在hexo根目录下安装插件:

$ npm install -save hexo-helper-live2d

８．２　安装需要的宠物插件:宠物样式 源码地址

$ npm install {packagename}

其中{packagename} 替换为你要安装的宠物名,如live2d-widget-model-shizuku

具体指令: $ npm install live2d-widget-model-shizuku

８．３　在站点配置文件中加上如下代码:

live2d:
  enable: true   #开启宠物
  scriptFrom: local
  model:
    use: live2d-widget-model-shizuku
  display:
    position: right   #指定宠物显示的位置
    width: 70    #指定宠物显示的宽度
    height: 120   #指定宠物显示的高度
  mobile:
    show: true  #是否在手机上显示

９．鼠标点击出现桃心效果

并且将代码复制进去，然后保存

在/themes/next/source/js/src里面 新建click-love.js文件: 粘贴如下代码:

<!-- 页面点击小桃心-->
<script type="text/javascript" src="/js/src/love.js"></script>

然后打开\themes\next\layout\_layout.swig文件,在末尾添加以下代码：

!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);

１０．网页底部的动态桃心图像

修改主题配置文件:

icon:
	name: heart      #如果name的值为heart表示引用fontawesome网站上的心形图标
	animated: true     #如果想用动态图标应该将animated的值设为true
	color: "#ff0000"     #图标的色--用16进制数  

１１．添加顶部加载条

在根目录打开git bash执行以下指令:

git clone https://github.com/theme-next/theme-next-pace source /lib/pace

修改主题配置文件:

pace: true  #启用顶部加载条
pace_theme: pace-theme-flash   #指定顶部加载条样式

１２．设置网站的图标Favicon

１２．１　下载一个32*32的图片，并改名为favicon.ico, 然后放到/blog/themes/next/source/images目录

１２．２　修改主题配置文件

  favicon:
  　small: /images/favicon-16x16-next.png
  　medium: /images/favicon.ico
  　apple_touch_icon: /images/apple-touch-icon-next.png
  　safari_pinned_tab: /images/logo.svg

１３．　DaoVoice 在线联系

１３．１　注册地址: ,获取app_id

１３．２　/blog/themes/next/layout/_partials/head/head.swig 添加下面的代码:

{% if theme.custom_file_path.head %} 
{% set custom_head = '../../../../../' + theme.custom_file_path.head %}
{% else %}
  {% set custom_head = '../../_custom/head.swig' %}
{% endif %}
{% include custom_head %}

{% 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/0eeeae6f.js","daovoice")
 daovoice('init', {
  app_id: "06289ecd"
});
daovoice('update');
 </script>
{% endif %}

１３．３　修改主题的配置文件

daovoice: true
daovoice_app_id: 我们注册获取的id

１４．添加AddThis分享

１４．１　在网站 AddThis 上注册账号。 可以使用 Google/Facebook/Twitter 账号进行第三方登陆

１４．２　设置分享按钮的样式:(显示位置, 显示样式为扩展式,悬浮式等)

１４．３　修改主题配置文件

add_this_id: 你Addthis账号ID

１５．添加打赏:

 reward:
 　　enable: true　＃开启
 　　comment: 坚持原创技术分享，您的支持将鼓励我继续创作！　＃图片上方显示的文本
 　　wechatpay: ＃图片地址
 　　alipay: ＃图片地址

１６．文章加密访问

１６．１　在　/blog/themes/next/layout/_partials/head/head.swig 文件中添加：

<script> 
 (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

１６．２　在需要加密的文章的页面顶部(Front matter区域)加入 “password : 设置密码值”

１７．在文章底部增加版权信息

１７．１　在/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>本博客所有文章除特别声明外，均采用 <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)"><i class="fa fa-creative-commons"></i>BY-NC-SA </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/layout/_macro/post.swig，在下面位置添加:

代码如下:

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

１７．４　修改/blog/themes/next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：

@import "my-post-copyright

保存重新生成即可。
１７．５　如果要在文章下面增加版权信息的显示，需要在 Markdown 中增加copyright: true的设置，类似：

---
title: hexo个性化配置
date: 2017-05-22 22:53:53
tags: hexo美化
categories: Hexo
copyright: true
---

如果你觉得每次都要输入copyright: true很麻烦的话,那么在/scaffolds/post.md文件中添加：

１８．修改文章底部的那个带#号的标签

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

１９．在每篇文章末尾添加“本文结束”标记

１９．１　在路径 /blog/themes/next/layout/_macro 中新建 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之前添加,即在如下位置添加

代码如下：

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

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

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

２０．修改侧边栏作者头像并旋转：

２０．１　打开\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);
  }
}

２１．隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig,使用””隐藏之间的代码即可，或者直接删除。位置如图：

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

点击这里

或者 这里挑选自己喜欢的样式，并复制代码。

/blog/themes/next/layout/_layout.swig文件中进行配置. next表示的是当前你使用的主题的样式.

注意的是: href 后面是自己的github的地址,记得修改哦!

２３．修改代码块自定义样式

修改主题配置文件

highlight_theme: night bright #可选值: normal | night | night eighties | night blue | night bright

２４．开启代码块复制

codeblock:
  enable: true
  show_result: true

２５．侧边栏社交链接

修改主题配置文件: 链接放置在 social 字段下，一行一个链接。其键值格式是 显示文本: 链接地址

#设置侧边栏社交链
social:
  GitHub: https://github.com/zzwwqq || github
  E-Mail: mailto:zwq13264860490@gmail.com || envelope
  Weibo: https://weibo.com/u/5564810309/home?wvr=5 || weibo
  知乎: https://www.zhihu.com/people/shen-qiu-wu-hen-66/activities || snapchat

#这里键的值必须和上面social中的 "||" 后面指定的名称一致，在fontawesome官网找喜欢的小图标，将名字复制在如下位置，如E-Mail:对应的图标名称为envelope。

social_icons:
  enable: true    # `enable` 选项用于控制是否显示图标
  icons_only: false
  transition: false 
  #图标
  GitHub: github
  E-Mail: envelope
  Weibo: weibo
  知乎: snapchat

２６．图片处理(使用七牛云为Hexo存储图片等静态资源)

２６．１　七牛是什么?

七牛 是一个云存储服务商，注册并实名认证之后1后，你将免费享有 10GB 存储空间，每月 10GB 下载流量、100 万次 GET 请求、 10 万次 PUT/DELETE 请求。七牛的定位不是像百度云一样的 网盘 ，也不是同坚果云一般的 同步云 ，而是 CDN 2 ，让你在浏览网页的时候最快的接收到页面中的图片、音频等文件，所以非常适合个人、企业用户用来储存站点资源。对于个人博主来说，你可以把博客中的图片、音频、视频等媒体上传到七牛，在博客中引用；也可以将站点需要加载的CSS、JS等文件上传到七牛，以加速网站。

２６．２　与其他上传站点相比：

• 更稳定：七牛毕竟是老牌服务商，数据的安全性和稳定性都较有保证。如果上传到什么小网站，哪天发现图片都打不开了才是人间惨剧~
• 更灵活：配合 hexo-qiniu-sync 插件4，就算是七牛以后更改了空间域名，也不用一篇一篇地去改外链地址，只要在配置文件中修改外链前缀即可。
• 更方便：配合 hexo-qiniu-sync 插件，不必”上传→复制链接→引用外链“，直接按照本地路径引用，然后键入一条命令同步到七牛就好。会自动识别哪些是新增、修改的文件需要上传，哪些是原有的文件不需改动，十分方便。

２６．３　七牛并非尽善尽美：

• 在线文件管理不支持目录
• 本地删除文件，云端不能同步删除文件

２６．４　开始安装：

１．点击 这里 申请七牛账户

２．创建存储空间（七牛叫作”Bucket“），注意添加的空间为”对象存储“，访问控制选择”公开空间“：

３．点击页面右上角头像→进入”密钥管理“→复制当前使用中的AK和SK，待会设置插件时会用到。

４．安装插件：在hexo主目录下运行以下命令：

npm install hexo-qiniu-sync --save

５．站点配置文件中添加下面内容:

qiniu:
　offline: false    #是否离线. 离线状态将使用本地地址渲染
  sync: true        #是否同步
  bucket: blog     #这里替换为你存储空间的名称
  #secret_file: sec/qn.json or C:
  access_key: 2rRw0dG-jQYCoqs9rvsltVQqzSBVpwS     #上传密钥AccessKey,替换为你自己的
  secret_key: OCBcCU3tqKiBdOza9PlLoR6AcA-fV_u   #上传密钥SecretKey,替换为你自己的
  dirPrefix: static                  #上传的资源子目录前缀.如设置为static，那么urlPrefix后面也要加static
  urlPrefix: http://cdn.zzwwqq.xyz/static/   #这里替换为你自己的外链域名,如何获取,查看下面图示
  up_host: http://upload.qiniu.com    #这里不用改
  local_dir: static      #本地资源储存目录。在本例中，待上传的资源都储存在hexo主目录中的static 文件夹（也就是与 source 目录平级）中。
  update_exist: true    #是否更新已经上传过的文件
  #运行程序后,会自动在本地根目录生成static目录,static目录下生成三个文件夹,js,css,images
  image: 
    folder: images
    extend: 
  js:
    folder: js
  css:
    folder: css

６．如何引用七牛上的图片?

引用地址：urlPrefix＋dirPrefix＋images+ 相对于/blog/static/images/ 的文件路径

例如: http://cdn.zzwwqq.xyz/static/images/hexo/hexo-1.jpg

２７．修改背景图,以及侧边栏顶部颜色，主／副标题颜色

效果图：

//添加背景图片
body { 
background:url(http://cdn.zzwwqq.xyz/%E6%98%9F%E7%A9%BA.jpg)}
//改掉题头颜色
.site-meta {
background:url(http://cdn.zzwwqq.xyz/static/images/hexo/hexo-0-site-meta.jpg)
  
}
//主标题颜色
.brand{
  color: #4dfc23
  }
//副标题颜色
.site-subtitle{
  color: #4dfc23
}

.footer{
    font-size: 14px;
    color: #ededed;
}

２８．侧边栏添加网易云音乐

效果图:

1. 打开网易云音乐官网，进入想插入的音乐的界面

2. 点击“生成外链播放器”

   

3. 复制代码

##２９．底部添加公网安备

 <div class="BbeiAn-info" style="color:#4dfc23">
   {{ __('鄂ICP备') }} -
    <a target="_blank" href="http://www.miitbeian.gov.cn/" style="color:#4dfc23;"  rel="nofollow">18025394</a> <!--a标签中增加nofollow属性，避免爬虫出站。-->| 
	<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42090202000295" style="text-decoration:none;color:#4dfc23;padding-left:30px;background:url(https://s1.ax1x.com/2018/09/29/ilmwIH.png) no-repeat left center" rel="nofollow">{{ __('鄂公网安备 42090202000295') }}</a>	  <!--这里将图标作为了背景，以使得能和后面的文字在同一行-->
</div>

３０．取消“文章目录”的自动编号

修改如下

修改后:

３１．封面模式

需要安装一个小插件是：hexo-less，安装指令: $ npm install --save hexo-less

该插件解决了什么问题呢？

手动设置文章概要，但不影响章内䆟。只需在文章中写 <!-- less --> 作为分割线， <!-- less --> 上面的内容会作为摘要，但不作为文章内容的一部分。

举例，我想让这篇文章在主页列表中，只显示一张美图。

效果图：

文章中代码如下:

二、说明:

修改hexo的站点配置文件,需要重启服务器(即执行 $ hexo s命令),才能生效.

修改其他文件如主题配置文件,不必重启服务器(即执行 $ hexo s命令), 直接刷新页面即可生效.

参考链接:

http://theme-next.iissnan.com/getting-started.html

https://www.jianshu.com/p/f054333ac9e6

https://www.jianshu.com/p/d0fe52c73950

https://xian6ge.cn/posts/40ba2cba/

https://me.idealli.com/post/e8d13fc.html

http://yuchen-lea.github.io/2016-01-21-use-qiniu-store-file-for-hexo/

https://www.jianshu.com/p/805bd0b65d98