Hexo + yilia 搭建博客可能会遇到的所有疑问

摘要：Hexo + yilia 搭建博客可能会遇到的所有疑问！！！文章目录、设置文章显示长度，不展开全文、相册、引入音乐、引入视频、网站统计量显示

1.hexo yilia 文章目录

为了方便查看每篇文章的目录结构，可以定位到想看的地方，特地找了下如何实现这个功能。

• 新版本的 yilia 已经自带了这个文章目录功能，只需要在每篇文章开头加入：toc: true 即可,他会自动根据文章来进行目录划分。

• 如果你用的还是老版本的话，可以使用方法二

  • 打开themes\yilia\source下的main.234bc0.css文件，直接在后面添加如下代码：

    1 2 3 4 5 6 7 8 9 10

    /* 新添加的 */ #container .show-toc-btn,#container .toc-article{display:block} .toc-article{z-index:100;background:#fff;border:1px solid #ccc;max-width:250px;min-width:150px;max-height:500px;overflow-y:auto;-webkit-box-shadow:5px 5px 2px #ccc;box-shadow:5px 5px 2px #ccc;font-size:12px;padding:10px;position:fixed;right:35px;top:129px}.toc-article .toc-close{font-weight:700;font-size:20px;cursor:pointer;float:right;color:#ccc}.toc-article .toc-close:hover{color:#000}.toc-article .toc{font-size:12px;padding:0;line-height:20px}.toc-article .toc .toc-number{color:#333}.toc-article .toc .toc-text:hover{text-decoration:underline;color:#2a6496}.toc-article li{list-style-type:none}.toc-article .toc-level-1{margin:4px 0}.toc-article .toc-child{}@-moz-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-o-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.show-toc-btn{display:none;z-index:10;width:30px;min-height:14px;overflow:hidden;padding:4px 6px 8px 5px;border:1px solid #ddd;border-right:none;position:fixed;right:40px;text-align:center;background-color:#f9f9f9}.show-toc-btn .btn-bg{margin-top:2px;display:block;width:16px;height:14px;background:url(http://7xtawy.com1.z0.glb.clouddn.com/show.png) no-repeat;-webkit-background-size:100%;-moz-background-size:100%;background-size:100%}.show-toc-btn .btn-text{color:#999;font-size:12px}.show-toc-btn:hover{cursor:pointer}.show-toc-btn:hover .btn-bg{background-position:0 -16px}.show-toc-btn:hover .btn-text{font-size:12px;color:#ea8010} .toc-article li ol, .toc-article li ul { margin-left: 30px; } .toc-article ol, .toc-article ul { margin: 10px 0; }

  • 修改 article.ejs 文件
    打开 themes\yilia\layout\_partial 文件夹下的 article.ejs 文件, 在 </header> <% } %> 下面加入如下内容（注意位置）

    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 28

    <!-- 目录内容 --> <% if (!index && post.toc){ %> <p class="show-toc-btn" id="show-toc-btn" οnclick="showToc();" style="display:none"> <span class="btn-bg"></span> <span class="btn-text">文章导航</span> </p> <div id="toc-article" class="toc-article"> <span id="toc-close" class="toc-close" title="隐藏导航" οnclick="showBtn();">×</span> <strong class="toc-title">文章目录</strong> <%- toc(post.content) %> </div> <script type="text/javascript"> function showToc(){ var toc_article = document.getElementById("toc-article"); var show_toc_btn = document.getElementById("show-toc-btn"); toc_article.setAttribute("style","display:block"); show_toc_btn.setAttribute("style","display:none"); }; function showBtn(){ var toc_article = document.getElementById("toc-article"); var show_toc_btn = document.getElementById("show-toc-btn"); toc_article.setAttribute("style","display:none"); show_toc_btn.setAttribute("style","display:block"); }; </script> <% } %> <!-- 目录内容结束 -->

    然后若想要文章显示目录，在每篇文章开头加入：toc: true 即可。

    参考文章：Hexo+yilia主题实现文章目录和添加视频

2.hexo yilia 设置文章显示长度，不展开全文

yilia 主题中可以用 <!-- more --> 截取文章的显示长度，如果你想在哪截取文章，就在那行使用该字符。

3.hexo yilia 相册

QAQ 本人太懒了，没做这个功能，不过我把我参考的链接共享出来，有空在去研究研究
参考地址：Hexo+Github实现相册功能

4.hexo yilia 引入音乐

如下图，可以在网易云音乐里搜到你想要引入的音乐，然后点击如下的 “生成外链播放器” 即可：

5.hexo yilia 引入视频

是在之前相册功能的基础之上，相册功能的实现点击这里查看

• 添加视频样式css

  • 打开当前博客source\photos文件夹下的ins.css文件
  • 加入如下内容

    1 2 3 4 5 6 7 8 9

    /* ====== video ===== */ .video-container { z-index: 1; position: relative; padding-bottom: 56.25%; margin: 0 auto; } .video-container iframe, .video-container object, .video-container embed {z-index: 1;position: absolute;top: 0;left: 7%;width: 85%;height: 85%;box-shadow: 0px 0px 20px 2px #888888;}

• 添加视频

  • 我这里添加的是优酷上面的视频
  • 在当前博客source\photos文件夹下建立videos.ejs文件
  • 内容如下：

    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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

    --- layout: post slug: "photos" title: "相册" noDate: "true" comments: "true" reward: "true" open_in_new: false --- <link rel="stylesheet" href="./ins.css"> <div class="photos-btn-wrap"> <a class="photos-btn" href="/photos">Photos</a> <a class="photos-btn active" href="/photos/videos.html">Videos</a> </div> <center><h1>指弹_女儿情</h1></center> <hr/> <center> <div class="video-container"> <iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjUzMzY4OTM3Ng==" frameborder=0 allowfullscreen> </iframe> </div> </center> <hr/> <center><h1>指弹_友谊地久天长</h1></center> <hr/> <center> <div class="video-container"> <iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjQ5MDExOTY2MA==" frameborder=0 allowfullscreen> </iframe> </div> </center> <hr/> <center><h1>指弹_Always with me</h1></center> <hr/> <center> <div class="video-container"> <iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjQ4MDQyNTQ0MA==" frameborder=0 allowfullscreen> </iframe> </div> </center>

• 最终效果

  • 电脑端
    

  • 手机端
    

参考网址：Hexo-yilia主题实现文章目录和添加视频

6.hexo yilia 网站统计量显示

6.1网站访问量显示

• 效果：
  
• 实现：
  • 我使用了不蒜子第三方的统计插件，网址：http://ibruce.info/2015/04/04/busuanzi/
  • 在themes\yilia\layout\_partial下的footer.ejs中加入如下代码即可
    

1 2 3 4 5 6 7 8 9

<div calss="count-span"> <span id="busuanzi_container_site_pv"> 总访问量: <span id="busuanzi_value_site_pv"></span>| </span> <span id="busuanzi_container_site_uv"> 总访客: <span id="busuanzi_value_site_uv"></span> </span> </div> <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

6.2网站 ip 访问量显示(友盟)

• 效果：
  

• 实现：

  • 我使用了友盟第三方的统计插件，网址：http://www.umeng.com/

  • 首先注册一个帐号->进入个人中心->首先映入眼睛的是一片空白的，什么产品都没有->展开全部产品->选择U-Web网站统计->点击立即使用->添加站点->接下来看图

    
    
    
    

  • 复制代码，在themes\yilia\layout\_partial下的footer.ejs中加入如下代码即可
    

1 2 3

<div> <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1272778416'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1272778416%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));</script> </div>

• 这里用自己复制过来的代码放进去就行了
• 可在友盟上查看最近的访问量和数据

6.3网站 ip 访问量统计(百度)

• 申请账号：https://tongji.baidu.com/web/welcome/login
• 在代码获取的地方只要填入key即可

1 2 3

# Miscellaneous baidu_analytics: '454d1a5ba8ed29xxxxxxxx' google_analytics: ''