摘要: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
即可。
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>
最终效果
电脑端
手机端
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: '' |