文章转载于:
hexo 博客 yili 主题个性化自定义教程 (1) -- 借鉴中学习, 初认 yili 主题
https://aoguai.top/archives/71918d25.html
这个博客跌跌撞撞也弄了好多天了, 由于 Next 主题不知道什么情况, 被我玩坏了. 所以换了一个主题.
大名鼎鼎的 yilia 主题, 崇尚简约优雅, 以及极致的性能, 符合我的性格. 以后很长一段时间都用这个主题啦.
接下来来说一下一些 yili 主题个性化自定义的方法和自己走过的坑.
本教程适用于 yilia 主题
前言
由于 yilia 已经不维护了, 坑还挺多的, 所以下面这些方法都是我试过了才敢拿出来的.
如果有错误, 请原步骤返回检查错误, 或者参考官方教程↓
yilia 主题 GitHub 开源地址 https://github.com/litten/hexo-theme-yilia
本篇收集了全网目前最全的攻略啦, 各位凑活着看.
这是一个系列, 第一步先借鉴一下别人的代码, 哈哈哈哈嗝.
如何正确使用 yilia 主题
安装
$ Git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
配置
修改 hexo 根目录下的_config.YAML : theme: yilia
自定义配置
主题配置文件在主目录下的_config.YAML, 请根据自己需要修改使用. 完整配置例子, 可以参考作者的博客 https://github.com/litten/BlogBackup
主题配置详细介绍
接下来我来说一下主题配置中的基本配置有哪些可以自定义的地方, 详细看下面的备注
部分代码我会用我自己的配置来讲解具体用法
- # 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.YAML 最下面加上
- 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 里面加.
按网上的方法我试了好久才成功..... 原因就是他们的教程不够详细.
首先是去注册 https://www.livere.com/ , 然后获取到自己的 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.YAML** 中添加以下内容:
#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. 添加百度统计
先打开百度统计 https://tongji.baidu.com/web/welcome/login , 添加站点, 复制获得的代码, 粘贴到
\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>
当然也可以改成其他内容. 其他内容怎么修改以后再慢慢说(比如建站时间什么的.)
当然各位也可以先自己尝试一下.
- <% } %>
- <-- 在此处添加代码 -->
- <% 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>
- <% 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>
- <% } %>
- # 版权
- # 版权基础设定: 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
来源: https://www.cnblogs.com/aoguai/p/11781505.html