hexo的next主题个性化配置

前言:

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

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

1.更换主题
2.设置语言
3.字数统计和阅读时长(网站底部/文章内)
4.添加busuanzi: 统计浏览次数(本站总访客数,本站总访问量)
5.本站已安全运行 XX天 XX小时XX分XX秒
6.添加评论系统以valine例
7.添加热度(文章阅读次数)
8.为博客加上宠物
9.鼠标点击出现桃心效果
10.网页底部的动态桃心图像
11.添加顶部加载条
12.设置网站的图标Favicon
13.DaoVoice 在线联系
14.添加AddThis分享
15.添加打赏
16.文章加密访问
17.在文章底部增加版权信息
18.修改文章底部的那个带#号的标签
19.在每篇文章末尾添加“本文结束”标记
20.修改作者头像并旋转
21.隐藏网页底部powered By Hexo / 强力驱动
22.在右上角或者左上角实现fork me on github
23.修改代码块自定义样式(设置代码高亮主题)
24.开启代码块复制
25.侧边栏社交链接
26.图片处理(使用七牛云为Hexo存储图片等静态资源)
27.修改背景图,以及侧边栏顶部颜色
28.侧边栏添加网易云音乐
29.底部添加公网安备
30.取消“文章目录”的自动编号
31.封面模式

1.更换主题: (以next主题为例)

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

1.1 下载主题:

旧版本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 cleangit g,git s 然后查看运行结果:



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

1.2 修改主题配置文件:



然后重新git cleangit ggit s查看效果:



2.设置语言:

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

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

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

3.1 首先安装插件:

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

3.2 然后修改主题配置文件如下:

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

3.3 站点配置文件中添加:

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

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

4.添加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>

5.本站已安全运行 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>

6.添加评论系统(常见的有: 网易云跟帖但现在已失效,来必力,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 #

7.添加热度(文章阅读次数)

修改主题配置文件

  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了





8.为博客加上宠物

8.1 在hexo根目录下安装插件:

$ npm install -save hexo-helper-live2d

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

$ npm install {packagename}

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

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

8.3 在站点配置文件中加上如下代码:

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

9.鼠标点击出现桃心效果

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

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

10.网页底部的动态桃心图像

修改主题配置文件:

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

11.添加顶部加载条

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

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

修改主题配置文件:

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

12.设置网站的图标Favicon

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

12.2 修改主题配置文件

    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

13. DaoVoice 在线联系

13.1 注册地址: ,获取app_id



13.2 /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 %}

13.3 修改主题的配置文件

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

14.添加AddThis分享

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



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








14.3 修改主题配置文件

add_this_id: 你Addthis账号ID

15.添加打赏:

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

16.文章加密访问

16.1 在 /blog/themes/next/layout/_partials/head/head.swig 文件中添加:

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

16.2 在需要加密的文章的页面顶部(Front matter区域)加入 "password : 设置密码值"

17.在文章底部增加版权信息

17.1 在/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 %}

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

17.3 修改/blog/themes/next/layout/_macro/post.swig,在下面位置添加:



代码如下:

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

17.4 修改/blog/themes/next/source/css/_common/components/post/post.styl文件,在最后一行增加代码:

@import "my-post-copyright

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

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

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



18.修改文章底部的那个带#号的标签

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

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

19.1 在路径 /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>

19.2 接着打开/blog/themes/next/layout/_macro/post.swig文件,在post-body 之后, post-footer之前添加,即在如下位置添加



代码如下:

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

19.3 然后打开主题配置文件(_config.yml),在末尾添加:

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

20.修改侧边栏作者头像并旋转:

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

21.隐藏网页底部powered By Hexo / 强力驱动

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



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

点击这里



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



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



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




23.修改代码块自定义样式

修改主题配置文件

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




24.开启代码块复制

  codeblock:
    enable: true
    show_result: true
  ​

25.侧边栏社交链接

修改主题配置文件: 链接放置在 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

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

26.1 七牛是什么?

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

26.2 与其他上传站点相比:

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

26.3 七牛并非尽善尽美:

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

26.4 开始安装:

1.点击 这里 申请七牛账户

2.创建存储空间(七牛叫作”Bucket“),注意添加的空间为”对象存储“,访问控制选择”公开空间“:





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

4.安装插件:在hexo主目录下运行以下命令:

npm install hexo-qiniu-sync --save

5.站点配置文件中添加下面内容:

  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

6.如何引用七牛上的图片?

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

例如: cdn.zzwwqq.xyz/static/i

27.修改背景图,以及侧边栏顶部颜色,主/副标题颜色

效果图:



  //添加背景图片
  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;
  }

28.侧边栏添加网易云音乐

效果图:



  1. 打开网易云音乐官网,进入想插入的音乐的界面
  2. 点击“生成外链播放器”


  1. 复制代码



29.底部添加公网安备

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

30.取消“文章目录”的自动编号



修改如下



修改后:



31.封面模式

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

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

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

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

效果图:



文章中代码如下:


二、说明:

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

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


参考链接:

theme-next.iissnan.com/

jianshu.com/p/f054333ac

jianshu.com/p/d0fe52c73

xian6ge.cn/posts/40ba2c

me.idealli.com/post/e8d

yuchen-lea.github.io/20

jianshu.com/p/805bd0b65

发布于 2019-03-26