hexo博客yilia主题深度设置

转载：Shuyan

 http://dongshuyan.com/2019/05/24/hexo博客注意事项/ 

1、微信分享异常

这里是themes\yilia\layout\ _partial\post\share.ejs出了问题。
而且是两个问题：

1.1 首先是百度网盘取消了生成二维码的功能。

解决方法是修改themes\yilia\layout_partial\post\share.ejs
文件中的

1	//pan.baidu.com/share/qrcode?url=

 

修改为

1	//api.qrserver.com/v1/create-qr-code/?size=150x150&data=

 

1.2 我这里分享的网址有问题。方法一

直接在根目录的配置文件中添加你网站的url信息。

1.3 我这里分享的网址有问题。方法二

解决方法是在文件中的

1 2	var sUrl = url.replace(/index\.html$/, ''); sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'http:' + sUrl;

 

下面加一行（这里的20是根据自己网址长度计算得到的）

1	test=sUrl.substring(20);

 

然后上面就变成了：

1 2 3 4 5

<% var sUrl = url.replace(/index\.html$/, ''); sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'http:' + sUrl; test=sUrl.substring(20); %>

 

然后将上一步中的

1	'//api.qrserver.com/v1/create-qr-code/?size=150x150&data=' + sUrl

 

改为

1	'//api.qrserver.com/v1/create-qr-code/?size=150x150&data=你的主页网址' + test

 

举例，我的网址是（dongshuyan.github.io）那么就改为：

1 2 3 4 5 6 7

class="page-modal wx-share js-wx-box"> class="close js-modal-close" href="javascript:;"> 扫一扫，分享到微信</p> /api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://dongshuyan.github.io/' + test %>" alt="微信分享二维码"> </div>

 

2.点击“所有文章”无显示

themes\yilia\ _config.yml文件里面

1	mathjax: true

 

改成

1	mathjax: false

 

3.在左侧显示总文章数

将themes\yilia\layout_partial\left-col.ejs文件的

1 2 3 4 5 6 7

class="header-menu"> <% for (var i in theme.menu){ %> <%= i %> <%}%> </ul>

 

后面加上

1 2 3

总文章数 <%=site.posts.length%> </nav>

 

4.怎么置顶文章

4.1安装插件

1 2	npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save

4.2配置置顶标准

打开：/themes/*/layout（/_macro）/post.ejs
直接在最前面加入以下代码即可

1 2 3 4 5

<% if (page.top) { %> class="fa fa-thumb-tack"> 7D26CD>置顶</font> | <% } %>

 

4.3配置文章

然后在需要置顶的文章的Front-matter中加上top选项即可
top后面的数字越大，优先级越高

1 2 3 4 5

--- title: 2019 date: 2019-02-14 16:10:03 top: 5 ---

4.4优先级配置

修改根目录配置文件/_config.yml,top值-1标示根据top值倒序（正序设置为1即可），同样date也是根据创建日期倒序。

1 2 3 4 5 6

index_generator: path: '' per_page: 10 order_by: top: -1 date: -1

5.Hexo 实现私密文章加密

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

cd /Hexo npm install hexo-blog-encrypt vim /Hexo/_config.yml 添加如下内容 # Security ## 文章加密 hexo-blog-encrypt encrypt: enable: true 然后在想加密的文章头部添加上对应字段，如 --- title: hello world date: 2016-03-30 21:18:02 tags: password: 12345 （密码） abstract: Welcome to my blog, enter password to read. message: Welcome to my blog, enter password to read. --- password: 是该博客加密使用的密码 abstract: 是该博客的摘要，会显示在博客的列表页 message: 这个是博客查看时，密码输入框上面的描述性文字

6.增加不蒜子统计

利用这个统计，可以知道你博客的访问量

6.1安装不蒜子脚本

在 themes\yilia\layout\ _partial\after-footer.ejs最后添加

1

 

6.2单篇文章点击量

在themes/yilia/layout/_partial/article.ejs中 在

1	<%- partial('post/title', {class_name: 'article-title'}) %>

 

后面插入如下代码

1 2 3 4 5 6 7 8 9 10 11

<% if (!index && post.comments){ %> class="cloud-tie-join-count" href="javascript:void(0);" style="color:gray;font-size:14px;"> class="icon-sort"> "busuanzi_container_page_pv" style="color:#ef7522;font-size:14px;"> 阅读数: 次    </span> <% } %>

 

7.增加版权声明

7.1配置yilia

在

1	themes/yilia/layout/_partial/article.ejs

 

中标注的位置添加代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14

class="article-entry" itemprop="articleBody"> <% if (post.excerpt && index){ %> <%- post.excerpt %> <% if (theme.excerpt_link) { %> class="article-more-a" href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %> >> <% } %> <% } else { %> <%- post.content %> <% } %> <-- 在此处添加代码--> <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %> class="page-reward"> "javascript:;" class="page-reward-btn tooltip-top"> class="tooltip tooltip-east">

 

添加的代码如下

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

<% var sUrl = url.replace(/index\.html$/, ''); sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl; %> <% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %> class="declare"> 本文作者：</strong> <% if(config.author != undefined){ %> <%= config.author%> <% }else{%> 请在博客根目录“_config.yml”中填入正确的“author” <%}%> 本文链接：</strong> <%=sUrl%> 版权声明：</strong> 本作品采用 <%= theme.licensee_name%> 进行许可。转载请注明出处！ <% if(theme.licensee_img != undefined){ %> "license" href="<%= theme.licensee_url%>"> <% } %> </div> <% } else {%> <% } %>

创建新文件

1	themes/yilia/source-src/css/declare.scss

 

并添加如下CSS代码。

1 2 3 4 5 6

.declare { margin-top: 2em; border-left: 3px solid #ff1700; padding: .5em 1em; }

为

1	themes/yilia/source-src/css/main.scss

 

添加如下代码：

1	@import "./declare";

7.2配置显示

修改为

1	themes/yilia/_config.yml

 

在里面加入：

1 2 3 4 5 6 7 8 9

#版权基础设定：0-关闭声明； 1-文章对应的md文件里有declare: true属性，才有版权声明； 2-所有文章均有版权声明 #当前应用的版权协议地址。 #版权协议的名称 #版权协议的Logo declare_type: 1 licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/ licensee_name: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议' licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png

 

然后在需要进行版权声明的文章的md文件头部，设置属性

1	declare:true

 

即可。

8.字数、阅读时长添加(失败)

8.1 安装hexo-wordcount 安装完就报错了 pass

在博客目录下打开terminal，输入命令

1	npm i --save hexo-wordcount

 

9.鼠标点击小红心的设置

在

1	hexo/themes/yilia/source

 

文件目录下添加

1

love.js

 

文件。

1

!function(e,t,a){function r(){for(var e=0;e0?(t.body.removeChild(s[e].el),s.splice(e,1)):(s[e].y--,s[e].scale+=.004,s[e].alpha-=.013,s[e].el.style.cssText="left:"+s[e].x+"px;top:"+s[e].y+"px;opacity:"+s[e].alpha+";transform:scale("+s[e].scale+","+s[e].scale+") rotate(45deg);background:"+s[e].color+";z-index:99999");requestAnimationFrame(r)}function n(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),o(e)}}function o(e){var a=t.createElement("div");a.className="heart",s.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:c()}),t.body.appendChild(a)}function i(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 c(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var s=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},i(".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;}"),n(),r()}(window,document);

在

1	hexo/themes/yilia/layout/_partial/footer.ejs

 

文件的最后， 添加以下代码：

1 2

10.文本结束并且与more无冲突

打开

1	yourblog\themes\yilia\layout\_partial

 

文件夹，并编辑

1	article.ejs

 

文件

并在这段代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<% if (!post.noDate){ %> <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %> <% } %> </header> <% } %> <% if (post.excerpt && index){ %> <%- post.excerpt %> <% if (theme.excerpt_link) { %> <%= theme.excerpt_link %> >> <% } %> <% } else { %> <%- post.content %> <% } %>

的下面添加：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<% if ((theme.essayending_type === 2 || (theme.essayending_type === 1 && post.essayending)) && !index){ %> <% if (!index){ %> class="essayending"> "text-align:center;color: #ccc;font-size:22px;"> -------------本文结束class="fa fa-paw">感谢您的阅读------------- </div> </div> <% } else {%> <% } %> <% } %>

然后在

1	\theme\yilia\_config.yml

 

文件中找到合适位置添加

1 2	#文章结束 essayending_type: 1 #0关闭文章结束提示 2全开 1需要在文章开头加上 essayending: true

 

这里
0表示关闭文章结束提示
2表示全开
1表示需要在文章开头加上 essayending: true 才会开启文章结束提示

11. 404 页面

直接在hexo/source文件夹里面加一个404.html

12. Sitemap方式提交网页

在 Hexo 根目录打开命令行工具，执行以下命令：

1 2 3

npm install hexo-generator-sitemap --save hexo clean hexo g

 

查看

1	{your_hexo_path}/public

 

文件夹，可以看到

1	sitmap.xml

 

文件。
sitemap 的初衷是给搜索引擎看的，为了提高搜索引擎对自己站点的收录效果，我们最好手动到 google 和百度等搜索引擎提交 sitemap.xml。

baidu提交网址：https://ziyuan.baidu.com/?castk=LTE%3D

13.百度自动推送方式提交网页

在本机

1	<博客根目录>/themes/yilia/layout/_partial

 

目录下打开article.ejs文件，定位到如下这段代码：

1 2 3 4

<% var sUrl = url.replace(/index\.html$/, ''); sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl; %>

在它前面加上：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<% if (1){ %> style="display:block" data-ad-client="ca-pub-8955547868703063" data-ad-slot="3853918361" data-ad-format="auto" data-full-width-responsive="true"> <% } %> 可以在结尾处添加： <% if ((theme.googlead_type === 2 || (theme.googlead_type === 1 && post.googlead)) && !index){ %> ⬇️下面这个才是真正的广告哦，如果感觉真的从文章中有带走新东西的话，可以帮我点一下哦⬇️ 这里是google网页生成的代码 <% } %>

 

然后还需要再

1	/theme/yilia/_config.yml

 

中合适位置添加

1 2	#google广告基础设定：0-关闭广告； 1-文章对应的md文件里有googlead: true属性，才有广告； 2-所有文章均有广告 googlead_type: 1

 

使用教程如上面提示：
0-关闭广告；
1-文章对应的md文件里有googlead: true属性，才有广告；
2-所有文章均有广告

5.添加完毕
在网页中点击“大功告成”
6.想网页上传
hexo clean
hexo g
hexo d
7.等待一小时左右大约会出现广告

22 Gitment/Gitalk评论系统

感觉gitment 和 gitalk也不错
可以参考
Hexo主题yilia增加gitalk评论插件
Hexo-yilia使用gitment/gitalk评论系统 
Gitment给基于hexo的yilia主题的博客搭建免费评论系统

自己配置了一下gitalk

22.1 注册 OAuth Application

注册网址：https://github.com/settings/applications/new

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Application name DongBlogComments Something users will recognize and trust. Homepage URL https://dongshuyan.github.io/ The full URL to your application homepage. Application description Shuyan's Blog This is displayed to all users of your application. Authorization callback URL http://dongshuyan.com/

 

注册成功后，会获取到 Client ID/scerct 。

22.2配置

1	layout/_partial/post目录下新增gitalk.ejs文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

修改source-src/css/目录下comment.scss文件

1 2 3 4 5 6 7 8 9 10

disqus_thread, .duoshuo, .cloud-tie-wrapper, #SOHUCS, #gitment-ctn, #gitalk-container { padding: 0 30px !important; min-height: 20px; } #SOHUCS { #SOHU_MAIN .module-cmt-list .block-cont-gw { border-bottom: 1px dashed #c8c8c8 !important; } }

 

在

1	layout/_partial

 

目录下的article.ejs文件内新增gitalk相关的配置代码：

1 2 3 4 5 6 7

<% if(theme.gitalk.enable){ %> <%- partial('post/gitalk', { key: post.slug, title: post.title, url: config.url+url_for(post.path) }) %> <% } %>

 

最后在yilia主题配置文件中新增gitalk相关的配置：

1 2 3 4 5 6 7 8

gitalk: enable: true githubID: 'dongshuyan' repo: 'DongBlogComments' #这里可以另开一个也可以就用你博客的那个repo ClientID: '刚才得到的code' ClientSecret: '刚才得到的code' adminUser: 'dongshuyan' distractionFreeMode: true

 

踩坑教程：
Gitment评论功能接入踩坑教程
[gitalk] 解决配置gitalk插件后初始化登录时跳转回首页
登录报错/?error=redirect_uri_mismatch& #162

23.tag中含有大写字母的bug

总之tag别用大写字母！！！

24 hexo d上传失败

显示：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

INFO Deploying: git INFO Clearing .deploy_git folder... INFO Copying files from public folder... INFO Copying files from extend dirs... On branch master nothing to commit, working tree clean Enumerating objects: 396, done. Counting objects: 100% (396/396), done. Delta compression using up to 8 threads Compressing objects: 100% (144/144), done. error: RPC failed; curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 60 fatal: the remote end hung up unexpectedly Writing objects: 100% (235/235), 2.31 MiB | 14.00 KiB/s, done. Total 235 (delta 104), reused 0 (delta 0) fatal: the remote end hung up unexpectedly Everything up-to-date FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html Error: Spawn failed at ChildProcess. (/Users/moyu/Desktop/learn/blog_new/node_modules/hexo-util/lib/spawn.js:52:19) at emitTwo (events.js:126:13) at ChildProcess.emit (events.js:214:7) at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)

 

我这里是网络代理问题。

25 跳转到指定位置

html里面加上

1

 

然后跳转xx.html#printcenter1

参考

Hexo文章置顶的方法
Hexo增加置顶属性
Hexo 基于yilia主题及其它插件优化
Hexo yilia 主题一揽子使用方案
在Hexo中自动为Yilia主题增加版权声明
Hexo-Yilia进阶笔记
Hexo+yilia主题实现文章目录和添加视频
hexo的next主题个性化教程:打造炫酷网站
Hexo博客Yilia主题修改记录
Hexo Yilia 主题进阶配置
Hexo博客提交百度和Google收录
DesertsP/Valine-Admin
Valine Admin 配置手册
Valine: 独立博客评论系统
github_Valine
动态版娘
Hexo-添加看板娘(进阶版)
hexo yilia 主题添加 google 广告
Google AdSense 申请日志及教程
Hexo-yilia使用gitment/gitalk评论系统 
Gitment给基于hexo的yilia主题的博客搭建免费评论系统
Hexo博客yilia主题首页添加helper-live2d模型插件
hexo模版yilia添加可爱的看板娘
Gitment评论功能接入踩坑教程
[gitalk] 解决配置gitalk插件后初始化登录时跳转回首页
登录报错/?error=redirect_uri_mismatch& #162
Hexo主题yilia增加gitalk评论插件