yilia 是一个比较干净,简洁的hexo主题。
一、下载并启用
进入命令行,下载 yilia 主题,输入:git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
修改站点配置文件 _config.yml,找到如下代码:theme:landscape
将 landscape
修改为 yilia
即可。
二、主题相关设置
1.“所有文章”按钮的安装
首先使用命令 node -v 检查版本是不是大于 6.2
在博客根目录执行以下命令:npm i hexo-generator-json-content --save
在博客配置文件 _config.yml 最下面加上:
1 | jsonContent: |
2 | meta: false |
3 | pages: false |
4 | posts: |
5 | title: true |
6 | date: true |
7 | path: true |
8 | text: false |
9 | raw: false |
10 | content: false |
11 | slug: false |
12 | updated: false |
13 | comments: false |
14 | link: false |
15 | permalink: false |
16 | excerpt: false |
17 | categories: false |
18 | tags: true |
2.添加图片资源文件夹
路径为 themes/yilia/source/
下,可添加一个 assets
文件夹,里面存放图片资源即可
需要添加头像或者微信/支付宝二维码图片,直接引用即可。路径为 themes/yilia/_config.yml
。
1 | # 微信二维码图片 |
2 | weixin: /assets/img/wechat.png |
3 | # 头像图片 |
4 | avatar: /assets/img/head.jpg |
5 | # 网页图标 |
6 | favicon: /assets/img/head.jpg |
3.文章显示摘要
在你 MD 格式文章正文插入 <!-- more -->
即可,只会显示它之前的,此后的就不显示,点击文章标题,全文阅读才可看到,同时注释掉文件 themes/yilia/_config.yml
里的:# excerpt_link: more
4.文章显示目录
增加文章目录 TOC ( table of content ),方便阅读文章,在 themes/yilia/_config.yml
中进行配置 toc: 2
即可,它会将你 Markdown 语法的标题,生成目录,目录查看在右下角。
5.增加归档菜单
修改 themes/yilia/_config.yml
内容:
1 | menu: |
2 | 主页: / |
3 | 归档: /archives/index.html |
6.增加不蒜子统计
利用这个统计,可以知道你博客的访问量
在 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,包括访客数和站点访问总量
1 | # PV方式,单个用户连续点击 n 篇,记录 n 次记录值 |
2 | <span id="busuanzi_container_site_pv"> 本站总访问量<span id="busuanzi_value_site_pv"></span>次</span> |
3 | # UV方式,单个用户连续点击 n 篇,记录 1 次记录值 |
4 | <span id="busuanzi_container_site_uv"> 本站访客数<span id="busuanzi_value_site_uv"></span>人次</span> |
单篇文章点击量:
在需要显示的地方添加
1 | # 使用 pv 记录方式,每访问一次,记录一次 |
2 | <span id="busuanzi_container_page_pv"> 本文总阅读量<span id="busuanzi_value_page_pv"></span>次</span> |
7.修改代码块样式
默认的代码样式太刺眼了,调成稍微柔和一些的,这里是调成 Atom 风格,以下为两种方式都可以,推荐第一种直接修改编译好的文件,不然还需要重新build。
- 直接修改编译好的文件。路径为:
theme\yilia\source\main.0cf68a.css
- 修改代码背景色,搜索
.article-entry .highlight
, 修改background后面的颜色![](http://p5sfmckwy.bkt.clouddn.com/img/3_4_code_bg_color.png)
修改代码字体颜色.article-entry .highlight .line
修改源文件重新build。上述资源对应源文件为yilia\source-src\css\highlight.scss
,按照如下方式build1
cd 到 yilia 目录下
2
npm install
3
npm run dev
4
npm run dist
8.更改左侧昵称字体
在themes\yilia\source\main.0cf68a.css
文件里面修改,找到header-author
,修改里面的font-family
,改成:font-family:"Times New Roman",Georgia,Serif
9.左侧显示总文章数
打开themes\yilia\layout\_partial\left-col.ejs
文件在:后面添加:1
<nav class="header-menu">
2
<ul>
3
<% for (var i in theme.menu){ %>
4
<li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
5
<%}%>
6
</ul>
7
</nav>
1
<nav>
2
总文章数 <%=site.posts.length%>
3
</nav>
10.添加字数统计
首先安装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
中添加:添加位置在如下代码的下面:1
<nav>
2
总字数 <span class="post-count"><%= totalcount(site, '0,0.0a') %></span>
3
</nav>
编辑1
<nav>
2
总文章数 <%=site.posts.length%>
3
</nav>
themes\yilia\layout\_partial\article.ejs
在header下面加入:即可显示单篇字数和预计阅读时长。1
<div align="center" class="post-count">
2
字数:<%= wordcount(post.content) %>字 | 预计阅读时长:<%= min2read(post.content) %>分钟
3
</div>
11添加来必力(livere)评论系统
yilia 默认带了几个系统,但是没有来必力,所以可以自己加
首先是去注册来必力,然后获取到自己的id
新建themes\yilia\layout\_partial\comment\livere.ejs
文件,输入如下内容:然后编辑1
<!-- 来必力City版安装代码 -->
2
<div id="lv-container" data-id="city" data-uid="<%=theme.livere_uid%>">
3
<script type="text/javascript">
4
(function(d, s) {
5
var j, e = d.getElementsByTagName(s)[0];
6
if (typeof LivereTower === 'function') { return; }
7
j = d.createElement(s);
8
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
9
j.async = true;
10
e.parentNode.insertBefore(j, e);
11
})(document, 'script');
12
</script>
13
<noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
14
</div>
15
<!-- City版安装代码已完成 -->
themes\yilia\layout\_partial\article.ejs
文件,找到:<% if (!index && post.comments){ %>
,添加:在主题配置文件1
<% if (theme.livere){ %>
2
<%- partial('comment/livere', {
3
key: post.slug,
4
title: post.title,
5
url: config.url+url_for(post.path)
6
}) %>
7
<% } %>
themes\yilia\_config.yml
中添加以下内容:1
livere: true
2
livere_uid: 你的id
12修复失效的微信分享二维码
打开themes\yilia\layout\_partial\post\share.ejs
文件
把第49行中的//pan.baidu.com/share/qrcode?url=
修改为://api.qrserver.com/v1/create-qr-code/?size=150x150&data=
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>html代码块样本</title>
6
</head>
7
<body>
8
<h1>这个样式可还行?</h1>
9
<p class="p1" style="font-size:20px;">我的第一个段落。</p>
10
</body>
11
</html>
本文链接: http://wyg0514.github.io/article/13bc6951.html
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!