hexo博客yili主题个性化自定义教程(1) ——自创中进修,初认yili主题
2019-11-18杂谈搜奇网34°c
A+ A-文章转载于:hexo博客yili主题特性化自定义教程(1) ——自创中进修,初认yili主题
这个博客跌跌撞撞也弄了好多天了,由于Next主题不知道什么情况,被我玩坏了。所以换了一个主题。
赫赫有名的yilia主题,崇尚简约文雅,以及极致的机能,相符我的性情。今后很长一段时候都用这个主题啦。
接下来来讲一下一些yili主题特性化自定义的要领和本身走过的坑。
本教程适用于yilia主题
媒介
由于yilia已不保护了,坑还挺多的,所以下面这些要领都是我试过了才敢拿出来的。
假如有毛病,请原步骤返回搜检毛病,或许参考官方教程↓
yilia主题github开源地点
本篇网络了全网如今最全的攻略啦,列位凑在世看。
这是一个系列,第一步先自创一下他人的代码,哈哈哈哈嗝。
怎样准确运用yilia主题
装置
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
设置
修正hexo根目次下的_config.yml
: theme: yilia
自定义设置
主题设置文件在主目次下的_config.yml
,请依据本身须要修正运用。 完全设置例子,能够参考作者的博客
主题设置细致引见
接下来我来讲一下主题设置中的基本设置有哪些能够自定义的处所,细致看下面的备注
部份代码我会用我本身的设置来解说详细用法
# Header
// 这段代码是左边栏的相干展现内容,后期能够加上分类,关于等。每一个页面背面是它的寄存途径
menu:
主页: /
漫笔: /tags/漫笔/
# SubNav // 这段代码是左边栏的相干联系体式格局图标,后期能够修正图标等。
subnav:
github: "#" //不须要就改成 "#"这个是github
weibo: "#" //微博
rss: "#" //RSS
zhihu: "#" //知乎
#qq: "#" //QQ
#weixin: "#" //微信
#jianshu: "#" //简书
#douban: "#" //豆瓣
#segmentfault: "#" //思否segmentfault
#bilibili: "#" //哔哩哔哩
#acfun: "#" //acfun
#mail: "mailto:litten225@qq.com" //比方你想展现邮箱,就把这里的地点改成你本身的邮箱即可。前面的 mailto: 不要去掉
#facebook: "#" //facebook
#google: "#" //google
#twitter: "#" //twitter
#linkedin: "#" //linkedin
rss: /atom.xml
# 是不是须要修正 root 途径
# 假如您的网站寄存在子目次中,比方 http://yoursite.com/blog,
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root:
# Content
# 文章太长,截断按钮笔墨
excerpt_link: more //这个笔墨是能够本身修正的,比方我的就改成了睁开全文
# 文章卡片右下角常驻链接,不须要请设置为false,假如上面改成了睁开全文,这个发起改成false
show_all_link: '睁开全文'
# 数学公式
mathjax: false
# 是不是在新窗口翻开链接
open_in_new: false
# 打赏
# 打赏type设定:0-封闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-一切文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '感谢你请我吃糖果' //这个是打赏时刻显现的笔墨,能够修正
# 支付宝二维码图片地点,跟你设置头像的体式格局一样。比方:/assets/img/alipay.jpg ,网络图片直接用 https://xxx.png 即可
alipay:
# 微信二维码图片地点
weixin:
# 目次
# 目次设定:0-不显现目次; 1-文章对应的md文件里有toc:true属性,才有目次; 2-一切文章均显现目次
toc: 1
# 依据本身的习气来设置,假如你的目次题目习气有标号,置为true即可隐蔽hexo反复的序号;不然置为false
toc_hide_index: true
# 目次为空时的提醒
toc_empty_wording: '目次,不存在的…'
# 是不是有疾速回到顶部的按钮
top: true
# Miscellaneous
baidu_analytics: '' # 百度剖析
google_analytics: '' # 谷歌剖析
favicon: /favicon.png # 站点logo
#你的头像url
avatar:
#是不是开启分享
share_jia: true
#批评:1、多说;2、网易云跟帖;3、畅言;4、Disqus;5、Gitment
#不须要运用某项,直接设置值为false,或解释掉
#详细请参考wiki:https://github.com/litten/hexo-theme-yilia/wiki/
#1、多说
duoshuo: false
#2、网易云跟帖
wangyiyun: false
#3、畅言
changyan_appid: false
changyan_conf: false
#4、Disqus 在hexo根目次的config里也有disqus_shortname字段,优先运用yilia的
disqus: false
#5、Gitment
gitment_owner: false #你的 GitHub ID
gitment_repo: '' #存储批评的 repo
gitment_oauth:
client_id: '' #client ID
client_secret: '' #client secret
# 款式定制 - 平常不须要修正,除非有很强的定制欲望…
style:
# 左边栏头像上面的背景色彩
header: '#4d4d4d'
# 右滑板块背景
slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'
# slider的设置
slider:
# 是不是默许睁开tags板块
showTags: false
# 智能菜单
# 如不须要,将该对应项置为false
# 比方
#smart_menu:
# friends: false
smart_menu:
innerArchive: '一切文章'
friends: '友链'
aboutme: '关于我'
friends:
友情链接1: http://localhost:4000/
友情链接2: http://localhost:4000/
友情链接3: http://localhost:4000/
友情链接4: http://localhost:4000/
友情链接5: http://localhost:4000/
友情链接6: http://localhost:4000/
aboutme: 很忸捏<br><br>只做了一点细小的事情<br>感谢人人 //这个是涌如今 关于我 页面的一句话 <br> 是换行的意义。
请照着上面的备注,一条一条修正看看结果,就可以也许控制最基本的主题自定义啦。
主题BUG修复
参考
1.运转服务器,发明涌现毛病提醒
<%- partial('_partial/head') %>
<%- partial('_partial/header') %>
<%- body %>
<% if (theme.sidebar && theme.sidebar !== 'bottom'){ %> <%- partial('_partial/sidebar') %> <% } %>
<%- partial('_partial/footer') %>
<%- partial('_partial/mobile-nav') %> <%- partial('_partial/after-footer') %>
假如涌现上述毛病提醒,申明少装了插件,逐条实行以下敕令装置插件:
npm install hexo-renderer-ejs --save
npm install hexo-renderer-stylus --save
npm install hexo-renderer-marked --save
然后hexo clean
消灭消灭缓存文件和已生成的静态文件再次运转即可。
2.左滑块“一切文章”按钮的装置
起首确保运用版本是不是是大于6.2.
运用敕令node -v
搜检
然后在hexo的设置文件_config.yml最下面加上
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: false
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true
重启服务器即可
2.头像不显现
进入文章后,头像就不显现。
修正themes\yilia\layout_partial\left-col.ejs的第六行,改成
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">
同时,还要修正themes\yilia\layout_partial\mobile-nav.ejs
内里的第10行,修正为
<img src="<%=theme.root%><%=theme.avatar%>" class="js-avatar">
3.打赏二维码不显现
修正themes\yilia\layout_partial\article.ejs
找到<img class=”reward-img”``这个标签,改背面src的值 支付宝的改成这个
<%=theme.root%><%= theme.alipay%>微信的改成这个
<%=theme.root%><%= theme.weixin%>`
4.微信分享不胜利
由于百度网盘作废了生成二维码的功用,致使之前的链接不可用了。
修正themes\yilia\layout_partial\post\share.ejs
把第49行中的//pan.baidu.com/share/qrcode?url=
修正为
//api.qrserver.com/v1/create-qr-code/?size=150x150&data=
即可
5.在左边显现总文章数
修正themes\yilia\layout\_partial\left-col.ejs
在
<nav class="header-menu">
<ul>
<% for (var i in theme.menu){ %>
<li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
<%}%>
</ul>
</nav>
背面到场
<nav>
<a>总文章数 <%=site.posts.length%></a>
</nav>
结果以下
6.增加来必力批评体系
yilia默许带了几个体系,但我是从next这个主题转过来的,之前用的是来必力(livere),不想换了,就得手动在yilia内里加。
按网上的要领我试了良久才胜利.....缘由就是他们的教程不够细致。
起首是去注册livere,然后猎取到本身的id
检察ID要领,右上角头像-治理页面-代码治理猎取
新建\themes\yilia\layout\_partial\post\livere.ejs
内容直接复制代码治理内里的内容
然后编辑themes\yilia\layout\_partial\article.ejs
找到<% if (!index && post.comments){ %>
在它的下方到场以下代码
<% if (theme.livere){ %>
<%- partial('post/livere', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } %>
接下来须要在主题设置文件**_config.yml**中增加以下内容:
#7.来必力
livere: 这里填你的ID
并把其他的批评体系代码屏障
然后hexo clean和hexo d重新部署即可。
结果如图
7.增加字数统计
装置hexo-wordcount
npm i --save hexo-wordcount
!!Node 版本7.6.0之前,请装置 2.x 版本 (Node.js v7.6.0 and previous)!!
npm install hexo-wordcount@2 --save
然后翻开themes\yilia\layout\_partial\left-col.ejs
假如须要在左边增加的话,在之前显现总文章数的代码位置下增加代码
<a>总字数 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span></a>
即
<nav>
<a>总文章数 <%=site.posts.length%></a>
<a>总字数 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span></a>
</nav>
显现单篇字数和估计浏览时长的话
编辑themes\yilia\layout\_partial\article.ejs`` 在第一个
`下,增加代码
<div align="center" class="post-count">
字数:<%= wordcount(post.content) %>字 | 估计浏览时长:<%= min2read(post.content) %>分钟
</div>
即可
结果以下
8.作废接见litten.me:9005
关于接见litten.me:9005的题目,这个主题的作者之前为了更好地完美这个主题,有时刻会网络用户的客户端信息,概况请见这里,假如不想被统计,就将themes\yilia\source-src\js\report.js
内里的内容清空即可
主题简朴美化与完美
参考:
Yilia特性设置- CSDN博客
1.增加百度统计
先翻开百度统计 ,增加站点,复制取得的代码,粘贴到
\themes\yilia\layout\_partial\footer.ejs
中以下代码块

<div>
这里粘贴代码
</div>
即可
注重:代码块<div>
和</div>
肯定要在<footer>
和</fotter>
之间
2.修正文章题目款式
翻开\themes\yilia\source-src\css\article.scss
增加以下款式(喜好什么款式能够本身修正):
.article-title_code_ant {
color: black;
margin-left: 0px;
font-weight: 50;
line-height: 1em;
margin-bottom: 1em;
font-size: 27px;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
&:hover{
color: #B0A0AA;
}
}
再翻开\themes\yilia\layout\_partial\article.ejs
,
搜刮<%- partial('post/title', {class_name: 'article-title'}) %>
修正为
<%# 解释掉-partial('post/title', {class_name: 'article-title'}) %>
<%# 修正模板 %>
<center><p><%- partial('post/title', {class_name: 'article-title_code_ant'}) %></p></center>
如图所示
即可,然则如今发明题目的色彩为a标签设置色彩,让我们继承来处理。
继承修正文件,找到\themes\yilia\source\main.0cf68a.css
,翻开编辑,增加以下代码:
.article-inner h1.article-title_code_ant, .article-title_code_ant {
color: #000000;
margin-left: 0;
font-weight: 50;
line-height: 1em;
margin-bottom: 1em;
font-size: 27px;
transition: color .3s
}
处理√
结果以下
3.删除或修正博客底部Hexo Theme Yilia by Litten
翻开\themes\yilia\layout\_partial\footer.ejs
修正以下:
<div class="footer-right">
</div>
固然也能够改成其他内容。其他内容怎样修正今后再慢漫说(比方建站时候什么的。)
固然列位也能够先本身尝试一下。
4.文章增加版权声明
在\themes\yilia\layout\_partial\article.ejs
中以下的位置增加代码
<% } %>
<-- 在此处增加代码-->
<% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>
增加的代码以下
<%# 增加文章版权 %>
<%
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){ %>
<div>
<blockquote>
<strong>本文作者:</strong>
<% if(config.author != undefined){ %>
<%= config.author%>
<% }else{%>
<font color="red">请在博客根目次“_config.yml”中填入准确的“author”</font>
<%}%>
<br>
<strong>本文链接:</strong>
<%= sUrl%>
<br>
<strong>版权声明:</strong>
本作品采纳
<a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
举行允许。转载请说明出处!
<% if(theme.licensee_img != undefined){ %>
<br>
<a rel="license" href="<%= theme.licensee_url%>"><img alt="学问同享允许协定" style="border-width:0" src="<%= theme.licensee_img%>"/></a>
<% } %>
</blockquote>
<%# 增加文章底部标语 %>
<hr>
<center><strong><%= theme.licensee_slogan%></strong></center>
<hr>
</div>
<% } else {%>
<div hidden="hidden"></div>
<% } %>
详细如图
继承修正yilia主题设置文件_config.yml
,增加以下代码
#版权
# 版权基本设定:0-封闭声明; 1-文章对应的md文件里有declare: true属性,才有版权声明; 2-一切文章均有版权声明
declare_type: 2 #一切文章均有版权声明
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 # 版权协定的Logo
licensee_slogan: 乐于分享,专注互联网生活. # 标语
假如须要章对应的md文件里有declare: true属性,才有版权声明的话,在须要举行版权声明的文章的md文件头部,设置属性declare: true
即可。
后语
更多音讯请关注我们: 奥怪的小栈
未完待续......