Yilia主题优化(统计、评论、目录、一言、爱心效果、、、)
分享一些博客基础的配置((▽))
参考了一些博客，Ծ‸Ծ一点一点填坑~
添加统计(不蒜子&字数统计)
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属性即可
toc: 0 #不开启目录
toc: 1 #文章.md文件开头添加"toc:true"属性的才有目录
toc: 2 #所有文章开启目录
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: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;
}
2、修改ejs文件：
找到themes\yilia\layout\_partial\article.ejs
在 </header> <% } %> 下面加入
<!-- 目录内容 -->
<% if (!index && post.toc){ %>
<p class="show-toc-btn" id="show-toc-btn" onclick="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="隐藏导航" onclick="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>
<% } %>
<!-- 目录内容结束 -->
对应每篇文章的md文件，开头加上toc: true属性就行
添加valine评论系统(Gitalk参见另一篇文章：点击跳转 )
1、注册learncloud账号，创建应用(需要先实名认证账号)
2、应用设置里找到 App ID 和 App Key
3、打开yilia主题目录下的_config.yml,修改设置
valine:
enable: true
appid: '' #Leancloud应用的App ID
appkey: '' #Leancloud应用的App Key
#这里的appid和appkey如果配置失败可以试试改成app_id和app_key
verify: false #验证码
notify: false #评论回复提醒
avatar: mm #评论列表头像样式：
avatar_cdn: '' #头像CDN
placeholder: '友情提醒，留下正确的邮箱地址可以第一时间获取评论反馈' #评论框占位符
pageSize: 10 #评论分页
visitor: true #阅读统计
4、找到yilia\layout_partial\目录下的article.ejs、添加代码:
<% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
<section id="comments" class="comments">
<style>
.comments{margin:30px;padding:10px;background:#fff}
@media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
</style>
<%- partial('post/valine', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
</section>
<% } %>
5、在_partial\post目录下新建valine.ejs,内容如下:
<div id="vcomment"></div>
<script src="//cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
<script src='//cdn.jsdelivr.net/npm/valine/dist/Valine.min.js'></script>
<script>
var notify = '<%= theme.valine.notify %>' == true ? true : false;
var verify = '<%= theme.valine.verify %>' == true ? true : false;
new Valine({
av: AV,
el: '#vcomment',
notify: notify,
verify: verify,
app_id: "<%= theme.valine.appid %>",
app_key: "<%= theme.valine.appkey %>",
placeholder: "<%= theme.valine.placeholder %>",
avatar: "<%= theme.valine.avatar %>",
avatar_cdn: "<%= theme.valine.avatar_cdn %>",
pageSize: "<%= theme.valine.pageSize %>"
});
</script>
6、valine绑定邮箱接收回复通知
添加爱心点击效果
1、新建js文件：
yilia\source\asset路径下新建clicklove.js,内容如下：
! 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);
2、修改ejs文件：
找到themes\yilia\layout_partial\after-footer.ejs,添加：
<script type="text/javascript" src="/assets/clicklove.js"></script>
//注意：这里的路径要对应之前创建clicklove.ejs的地方
调用一言API(刷新自动生成个性签名)
修改代码
找到themes\yilia\layout_partial\left-col.ejs文件
(大概12行，theme.subtitle属性内):
把
<p class="header-subtitle"><%=theme.subtitle%></p>
修改为
<p id="hitokoto">:D 获取中...</p>
<script src="https://v1.hitokoto.cn/?encode=jsselect=%23hitokoto" defer></script>
CSS自定义
1、<kbd>F12</kbd> 审查元素,找到自己要修改的内容：
2、修改themes\yilia\source目录下的main.xxxx.css
<kbd>Crtl</kbd> + <kbd>F</kbd> 搜索自己需要修改的内容,虽然是经过打包的css,还是能看懂的哈(┌(。Д。)┐)
*<kbd>F12</kbd> 是个好东西(-▽-)
文章加密
1、引入加密插件encrypt
找到博客根目录下的package.json,最下面添加：
"hexo-blog-encrypt": "2.0.*"
如图：
cmd进入博客根目录，执行：
npm install
2、修改配置
找到根目录下的_config.yml文件，添加：
# Security
#
encrypt:
enable: true
3、加密文章的配置
在需要加密的文章.md文件开头写入：
---
title: 加密文章
date: 2019-05-30 22:02:07
password: 这里填密码
abstract: 这里是博客简述（能被访客看见）
message: 输入密码提示语句（例如：请输入密码）
---
加密文章URL(注意：修改后之前文章的统计数据(浏览量)会重新计数)
1、安装插件
npm install hexo-abbrlink --save
2、修改根目录的_config.yml:
把“permalink: :year/:month/:day/:title/”改为“permalink: archives/:abbrlink.html”
之后在下面添加：
abbrlink:
alg: crc32 # 算法
rep: hex # 进制
添加RSS
1、安装插件：
npm install --save hexo-generator-feed
2、在根目录的_config.yml添加:
#rss
plugins: hexo-generater-feed
3、修改主题目录下的_config.yml
在subnav:里面添加：
rss: '/atom.xml'
上传README.md文件
1、在博客根目录的source文件夹内，新建README.md文件
2、在博客根目录的_config.yml里修改配置：
//hexo部署页面的时候会默认把source目录下的.md文件渲染成html,所以需要跳过README.md的渲染。
添加百度统计
1、注册、获取统计代码：
2、修改主题配置
找到yilia主题目录下的_config.yml,最后添加一句：
baidu_tongji: true
3、新建ejs、修改head.ejs
\themes\yilia\layout目录下新建baidu_tongji.ejs,内容如下:
<% if (theme.baidu_tongji) { %>
//这里添上上面获取的代码
<% } %>
找到themes\yilia\layout_partial\head.ejs,在</head>上面添加：
<%- partial("baidu_tongji") %>
京东三面231人在聊
投递华为等公司8个岗位 >