分享一些博客基础的配置((▽))
参考了一些博客,Ծ‸Ծ一点一点填坑~
一、添加统计(不蒜子&字数统计)
1、总体统计
找到themes\yilia\layout\_partial\after-footer.ejs
,添加:
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
找到themes\yilia\layout\_partial\footer.ejs
,在<div class="footer-right">
标签内添加:
<!-- # PV方式,单个用户连续点击 n 篇,记录 n 次记录值 -->
<span id="busuanzi_container_site_pv"> 总访问量: <span id="busuanzi_value_site_pv"></span> /</span>
<!-- # UV方式,单个用户连续点击 n 篇,记录 1 次记录值 -->
<span id="busuanzi_container_site_uv"> 访客数:<span id="busuanzi_value_site_uv"></span></span>
2、文章统计
找到themes\yilia\layout\_partial\post\nav.ejs
,注释掉以下两行:大概在27行左右(无此代码请忽略)
<span class="post-meta-item-text">本文阅读量 </span>
<span class="leancloud-visitors-count">8848</span>
注释掉之后直接在这两行下面加上:
<span id="busuanzi_container_page_pv">
本文阅读量: <span id="busuanzi_value_page_pv"></span>次
</span>
3、字数、阅读时长统计
打开博客根目录、安装插件
npm i -save hexo-wordcount
博客根目录_config.yml
添加配置:
word_count: true
找到themes\yilia\layout\_partial\article.ejs
,在大概第七行
下面添加代码:
<% if(theme.word_count && !post.no_word_count){
%>
<%- partial('post/word') %>
<% } %>
最后在themes\yilia\layout\_partial\post
目录下新建word.ejs
,内容如下:
<div style="margin-top:10px;">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-keyboard-o"></i>
<span class="post-meta-item-text" style="font-size: 16px;color: grey"> 字数统计: </span>
<!--这里样式可以自己定制-->
<span class="post-count" style="font-size: 16px;color: grey"><%= wordcount(post.content) %>字</span>
</span>
</span>
<span class="post-time">
|
<span class="post-meta-item-icon">
<i class="fa fa-hourglass-half"></i>
<span class="post-meta-item-text" style="font-size: 16px;color: grey"> 阅读时长: </span>
<span class="post-count" style="font-size: 16px;color: grey"><%= min2read(post.content) %>分</span>
</span>
</span>
</div>
二、添加文章目录(两种)
1、主题默认方式
注意!!!文章Markdown文件一定要从一级标题开始写,直接从二级标题是无法生成目录的!!!
直接在yilia目录下的_config.yml
配置toc属性即可
# 目录设定:0-不显示目录; 1-文章对应的md文件里有toc:true属性,才有目录; 2-所有文章均显示目录
toc: 1
# 标号隐藏:true:隐藏生成目录自带的标号 fasle:不隐藏,默认使用系统带的标号
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录,不存在的…'
2、自制滑动白色目录
1、修改css文件:
themes\yilia\source\assets
路径下找到main.xxxxx.css
,在最后添加代码:
这里的xxxxx是不确定的意思,有些人重新build后会和原版的不一样
#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