Hexo博客主题美化


阅读数: 次   

yilia 主题设置

安装主题

1
2
3
4
5
6
cd /Hexo/themes/
git clone https://github.com/litten/hexo-theme-yilia.git yilia

vim /Hexo/_config.yml

theme: yilia

修改默认设置

vim yilia/_config.yml

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
menu:
  主页: /
  归档: /archives/index.html
  关于: /about

# SubNav
subnav:
  jianshu: "http://www.jianshu.com/users/1a96b9218380/timeline"
  github: "https://github.com/EvanVivian"
  zhihu: "https://www.zhihu.com/people/yan-wei-chao-78/activities"

# 文章太长，截断按钮文字
# excerpt_link: more             注释掉此行

# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2    
# 打赏wording
reward_wording: '请我吃颗糖果吧'          修改文案     
# 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
alipay: /img/EvanAlipay.jpg             添加图片并写上地址
# 微信二维码图片地址
weixin: /img/EvanWechat.jpg             添加图片并写上地址

# 目录
# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 2           ## 修改为默认开启目录

favicon: /img/xhren.jpg

#你的头像url
avatar: /img/daerzi.jpg

##修改默认评论系统 4选一 推荐 gitalk 或 valine
#评论：1、Disqus；2、Gitment 3.gitalk 4.valine
#不需要使用某项，直接设置值为false，或注释掉
#具体请参考wiki：https://github.com/litten/hexo-theme-yilia/wiki/

#1、Disqus 在hexo根目录的config里也有disqus_shortname字段，优先使用yilia的
disqus: false

#2、Gitment
gitment_owner: false      #你的 GitHub ID
gitment_repo: 'xxxxxx'          #存储评论的 repo
gitment_oauth:
  client_id: 'xxxxxxxxxxxxxxxxx'           #client ID
  client_secret: 'xxxxxxxxxxxxxxxxxxxxxxxxx'       #client secret

#3、gitalk
gitalk:
  enable:  true
  githubID:  ********
  repo:  *****
  ClientID:  '*****************'
  ClientSecret:  '****************************'
  adminUser:  **********
  distractionFreeMode: true

#4、Valine https://valine.js.org
valine: 
  appid:  #Leancloud应用的appId
  appkey:  #Leancloud应用的appKey
  verify: false #验证码
  notify: false #评论回复提醒
  avatar: mm #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
  placeholder: Just go go #评论框占位符


# 样式定制 - 一般不需要修改，除非有很强的定制欲望…      
style:
  # 头像上面的背景颜色
  header: '#03344b'     #修改为这个颜色后就跟为的页面一样了
  # 右滑板块背景
  slider: 'linear-gradient(200deg,#a0cfe4,#03344b)'

## 版权声明 后续步骤请看下边
declare_type: 2
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
licensee_name: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议'

# 智能菜单
# 如不需要，将该对应项置为false
# 比如
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '搜索'
  friends: '友链'
  aboutme: false

## 关闭 aboutme

修改代码块样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
直接修改编译好的文件。路径为： theme/yilia/source/main.0cf68a.css 
修改代码背景色，搜索 .article-entry .highlight, 修改background后面的颜色

pre{background:#272822;
改为
pre{background:#1a0139;

修改行号颜色，搜索 .article-entry .highlight .gutter pre .line
将
.article-entry .highlight .gutter pre .line{color:#666
改为
.article-entry .highlight .gutter pre .line{color:#fc0000

修改代码字体颜色 .article-entry .highlight .line
.article-entry .highlight .line{color:#fff;
修改为
.article-entry .highlight .line{color:#00ff0d;

代码块行号显示错乱

vim yilia/source/main.0cf68a.css

1
2
3
将 white-space:pre-wrap; 删除.
这个问题是自动换行造成的，使用不自动换行的white-space:pre;
样式代码块部分会自动出现底部滚动条，行号错乱问题就没有了。

添加不蒜子统计

1
2
3
yilia/layout/_partial/after-footer.ejs   中加入

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

单篇文章点击量

themes/yilia/layout/_partial/article.ejs中 在 <%- partial(‘post/title’, {class_name: ‘article-title’}) %> 插入如下代码

1
2
3
4
5
6
7
8
9
10
<!--显示阅读次数-->
<% if (!index && post.comments){ %>
  <br/>
  <a class="cloud-tie-join-count" href="javascript:void(0);" style="color:gray;font-size:14px;">
  <span class="icon-sort"></span>
  <span id="busuanzi_container_page_pv" style="color:#ef7522;font-size:14px;">
            阅读数: <span id="busuanzi_value_page_pv"></span>次 &nbsp;&nbsp;
  </span>
  </a>
<% } %>

参考

备案信息、PV & UV统计、网站运行时间、网站框架及模板

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
修改 yilia/layout/_partial/footer.ej 内容为

<footer id="footer">
  <div class="outer">
    <div id="footer-info">
        <div class="footer-left">
            &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %> - <a href="http://www.miitbeian.gov.cn/" target="_blank">京ICP备16022690号</a>
        </div>
        <div class="footer-right">
            <a href="https://hexo.io/zh-cn/" target="_blank">Evan</a>  Always Love<a href="https://github.com/litten/hexo-theme-yilia" target="_blank"> Vivian</a>
        </div>
        </div>
        <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span> &||& <span id="busuanzi_container_site_uv">你是本博第 <span id="busuanzi_value_site_uv"></span> 位访客</span> || <span id="busuanzi_container_site_pv">历经 <span id="busuanzi_value_site_pv"></span> 次回眸才与你相遇</span> 
    <script>
        var now = new Date(); 
        function createtime() { 
            var grt= new Date("02/19/2017 22:02:00");//此处修改你的建站时间或者网站上线时间 
            now.setTime(now.getTime()+250); 
            days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
            hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
            if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
            mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
            seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
            snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
            document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "; 
            document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
        } 
    setInterval("createtime()",250);
    </script>
  </div>
</footer>

版权声明

themes/yilia/layout/_partial/article.ejs中 在 <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %> 上边插入如下代码

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
<%
  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 class="declare">
    <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>
    <% } %>
  </div>
<% } else {%>
  <div class="declare" hidden="hidden"></div>
<% } %>

版权添加样式
vim yilia/source/main.0cf68a.css 添加如下代码

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

版权声明参考

Hexo 之yilia主题 添加分类

参考

博文置顶

修改 hexo-generator-index 插件
修改文件：node_modules/hexo-generator-index/lib/generator.js 为：

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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) {
            if(a.top == b.top) return b.date - a.date;
            else return b.top - a.top;
        }
        else if(a.top && !b.top) {
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date;
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

设置文章置顶
在文章 顶部 添加 top 值，数值越大文章越靠前，如：

1
2
3
4
5
---
title: Hexo+yilia主题配置备忘
date: 2019-03-05 18:47:55
top: 10
---

参考

评论系统

Valine - 一款快速、简洁且高效的无后端评论系统。
GITALK 一个基于 Github Issue 和 Preact 开发的评论插件。

删除 多说、网易云跟帖、畅言 添加 gitalk、valine

1
2
cd /Hexo/themes/EvanM/layout/_partial/post/
\rm -rf changyan.ejs duoshuo.ejs wangyiyun.ejs

vim gitalk.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></div>
  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script type="text/javascript">

if(<%=theme.gitalk.enable%>){
        var gitalk = new Gitalk({
        clientID: '<%=theme.gitalk.ClientID%>',
        clientSecret: '<%=theme.gitalk.ClientSecret%>',
        repo: '<%=theme.gitalk.repo%>',
        owner: '<%=theme.gitalk.githubID%>',
        admin: ['<%=theme.gitalk.adminUser%>'],
        id: '<%= page.date %>',
        distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
})
gitalk.render('gitalk-container')
}
</script>

vim valine.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="vcomment" class="comment"></div> 
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
   var notify = '<%= theme.valine.notify %>' == true ? true : false;
   var verify = '<%= theme.valine.verify %>' == true ? true : false;
    window.onload = function() {
        new Valine({
            el: '.comment',
            notify: notify,
            verify: verify,
            app_id: "<%= theme.valine.appid %>",
            app_key: "<%= theme.valine.appkey %>",
            placeholder: "<%= theme.valine.placeholder %>",
            avatar:"<%= theme.valine.avatar %>"
        });
    }
</script>

vim /Hexo/themes/EvanM/layout/_partial/article.ejs
删除内容为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<% if (theme.duoshuo){ %>
<%- partial('post/duoshuo', {
    key: post.slug,
    title: post.title,
    url: config.url+url_for(post.path)
  }) %>
<% } %>

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

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

添加如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
    <section id="comments" style="margin:10px;padding:10px;background:#fff;">
      <%- partial('post/valine', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
        }) %>
    </section>
  <% } %>

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

参考
参考
参考

Hexo 之 yilia 添加在线聊天

最近浏览博客时，发现了在线聊天的插件。爱折腾的我肯定是要在自己的站点试试的。
相关产品有 Tidio、 TalkJS、Intercom、tawk.to、 DaoVoice等，使用体验都很好，交互界面也很干净别致。本站目前已测试Tidio、DaoVoice

yilia/layout/_partial/head.ejs

img

SEO 之 Url持久化

1
2
3
4
5
6
7
8
9
10
安装 hexo-abbrlink

npm install hexo-abbrlink --save

配置_config.yml

permalink: posts/:abbrlink.html
abbrlink:
  alg: crc32
  rep: hex

参考

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: 这个是博客查看时，密码输入框上面的描述性文字
赏

感谢支持!

微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_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

正因为没有翅膀，<br>人们才会寻找飞翔的方法。