hexo的next主题换到Yelee(Yilia)

原有的主题是已经配过valine的 配置valine,

需要注意下面的配置

本主题基于主题 Hexo-Theme-Yilia 修改而来,在此再次感谢原作者 Litten。修复了一些 bugs,改变了大量的样式,添加了不少特性。对原主题百般折腾后,发觉变动越来越大,

索性就发布个新主题了,主题随我微博名 “夜Yelee” 。个人喜欢简洁的样式,重视内容的浏览,

同时希望作为个人网站的博客,能稍微凸显出博主个性。各种修改折腾大抵基于以上考虑。

layout/_partial/post/nav.ejs

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

<% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
<section id="comments" class="comments" style="margin:30px;padding:15px;background:#fff} ">
<style>
@media screen and (max-width:800px) {
.comments {
margin: auto;
padding: 10px;
background: #fff
}
}
</style>
<%- partial('../comments/valine', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
</section>
<% } %>

layout/_partial/comments/valine.ejs

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
<div id="vcomment" class="comment"></div>
<!--载入js,在 body之前插入即可-->
<!--Leancloud 操作库:-->
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!--Valine 的核心代码库-->
<script src='//cdn.jsdelivr.net/npm/valine/dist/Valine.min.js'></script>
<script>
var notify = '<%= theme.valine.notify %>' == true ? true : false;
var verify = '<%= theme.valine.verify %>' == true ? true : false;
new Valine({
// AV 对象来自上面引入av-min.js(老司机们不要开车➳♡゛扎心了老铁)
av: AV,
el: '#vcomment',
emoticon_url: 'https://cloud.panjunwen.com/alu',
emoticon_list: ["狂汗.png", "不说话.png", "汗.png", "坐等.png", "献花.png", "不高兴.png", "中刀.png", "害羞.png",
"皱眉.png", "小眼睛.png", "暗地观察.png"
],
app_id: '<%= theme.valine.appid %>',
app_key: '<%= theme.valine.appkey %>',
placeholder: '<%= theme.valine.placeholder %>'
});
if (window.location.hash) {
var checkExist = setInterval(function () {
if (document.getElementById(window.location.hash.replace("#", ""))) {
location.href = window.location.hash;
clearInterval(checkExist);
}
}, 250);
}
</script>

起初参考MonoLogueChi博客,不知道什么原因:( 在主页的界面的每个标题下面都有一个留言的窗口

于是我将加到 ARTICLE.EJS 换了地方 themes/hexo-theme-yelee/layout/_partial/post/nav.ejs ,注意换了路径需要将

<%- partial(‘../comments/valine’, {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>

中的../POST/valine相对地址也跟着换掉

自动生成摘要

官方推荐的文章摘要格式

方法一: <!-- more -->

1
2
3
> title: Hello World> date: 2015-12-03 00:00:00> ---> <Excerpt in index | 首页摘要>>
<!-- more -->>
<The rest of contents | 余下全文>>

<!-- more --> 之前最好不要有空格等字符;

方法二: description in Front-matter

1
2
> title: Hello World> date: 2015-12-03 00:00:00> +description: "Welcome to Hexo! This is your very first post.">
---> <Contents>>

通过 description 添加的摘要只能为纯文本;

但是很复杂每次写的时候都要添加对于标签重复劳动,对于之前的文章都要这样去设置很机械,后面发现了

hexo-auto-excerpt 可以使用

  1. npm install –save hexo-auto-excerpt

  2. layout/_partial/article.ejs,在div.article-entry中的代码换成下面的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <% if (index){ %>
    <% if (post.excerpt) { %>
    <%- post.excerpt %>
    <% } else if (theme.auto_excerpt.enable) { %>
    <% var br_position = 0 %>
    <% for (var br_count = 0; br_count < theme.auto_excerpt.lines; br_count++) { %>
    <% br_position = post.content.indexOf('\n',br_position + 1) %>
    <% if(br_position < 0) { break } %>
    <% } %>
    <% if(br_position > 0) { %>
    <% show_all_content = false %>
    <p><%- post.content.substring(0, br_position + 1) %><p>
    <% } %>
    <% } %>
    <% } else { %>
    <%- partial('toc', { post: post}) %>
    <%- post.content %>
    <% } %>
    </div>
  3. _config.yml 添加下面代码

    1
    2
    3
    auto_excerpt:
    enable: true
    lines: 3

hexo博文摘要生成方案

Yelee(Yilia)打赏和调节版本署名的样式

yelee没有打赏功能目前需要自己实现目前需要修改

  1. _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
    #打赏
    donate:
    enable: true #设定打赏功能是否可用
    reward_wording: 加个鸡腿
    wechat: /pics/weixin.png #微信二维码图片的路径
    alipay: /pics/alipay.jpg #支付宝二维码图片的路径
    # 打赏
    # 打赏type设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏
    reward_type: 2
    # 打赏wording
    reward_wording: '加个鸡腿'
    # 支付宝二维码图片地址,跟你设置头像的方式一样。比如:/assets/img/alipay.jpg
    alipay: /pics/weixin.png
    # 微信二维码图片地址
    weixin: /pics/alipay.jpg
    # rss配置
    feed:
    type: atom
    path: atom.xml
    limit: 20
    hub:
    content:
    content_limit: 140
    content_limit_delim: ' '
    order_by: -date
    icon: icon.png
  2. layout/_partial/post/nav.ejs

    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
    <% if (((theme.reward_type === 2 && !post.reward) || (theme.reward_type === 1 && post.reward)) && !index){ %>
    <link rel="stylesheet" type="text/css" href="/share/reward.css" />
    <div class="page-reward">
    <a href="javascript:;" class="page-reward-btn tooltip-top">
    <div class="tooltip tooltip-east">
    <span class="tooltip-item">

    </span>
    <span class="tooltip-content">
    <span class="tooltip-text">
    <span class="tooltip-inner">
    <p class="reward-p"><i class="icon icon-quo-left"></i><%= theme.reward_wording%><i
    class="icon icon-quo-right"></i></p>
    <div class="reward-box">
    <% if(theme.alipay) {%>
    <div class="reward-box-item">
    <img class="reward-img" src="<%= theme.alipay%>">
    <span class="reward-type">支付宝</span>
    </div>
    <% } %>
    <% if(theme.weixin) {%>
    <div class="reward-box-item">
    <img class="reward-img" src="<%= theme.weixin%>">
    <span class="reward-type">微信</span>
    </div>
    <% } %>
    </div>
    </span>
    </span>
    </span>
    </div>
    </a>
    </div>
    <% } %>
  3. 最后是在source下的share文件夹下保存css文件 地址../share/reward.css

修改版本署名的样式 /themes/hexo-theme-yelee/layout/_partial/post/nav.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="is_copyright">
<ui class=post-copyright>
<li><strong><%= __('copyright_info.title') %>:</strong><a href="<%- url_for(post.path) %>"><%= post.title %></a></li>
<li><strong><%= __('copyright_info.author') %>:</strong><a href="/" title="<%= __('tooltip.back2home') %>"><%=theme.author%></a> </li> <li><strong><%= __('copyright_info.date') %>:</strong><%= post.date.format("YYYY-MM-DD, HH:mm:ss") %> </li>
<li> <strong><%= __('copyright_info.updated') %>:</strong><%= post.updated.format("YYYY-MM-DD, HH:mm:ss") %> </li>
<li>
<strong><%= __('copyright_info.url') %>:</strong>
<a class="post-url" href="<%- url_for(post.path) %>" title="<%= post.title %>"><%= post.permalink %></a> <strong class="copy-path" data-clipboard-text="<%= __('copyright_info.from') %> <%= post.permalink %>
<%= __('copyright_info.by') %> <%=theme.author%>" title="<%= __('tooltip.copyPath') %>">
<i class="fa fa-clipboard"></i></strong> <script> var clipboard = new Clipboard('.copy-path'); </script>
</li>
<li> <strong><%= __('copyright_info.license') %>:</strong><i class="fa fa-creative-commons"></i> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" title="CC BY-NC-SA 4.0 International" target = "_blank">"<%= __('copyright_info.cc') %>"</a> <%= __('copyright_info.notice') %> </li>
</ui>
</div>

代码区前后有很多空行

1
2
3
4
.article-entry
pre, code font-family: font-mono, monospace, font-chs font-size: 1em
## 后面加这几个
.line:after content: '' display: inline-block;

解决链接

添加统计字数

1
2
3
4
5
6
7
8
<% if (post.tags && post.tags.length){ %>-
<div class="article-tag tagcloud">
<div class="article-tag tagcloud" style="display: flex; flex-wrap: wrap">
<%- list_tags(post.tags, { show_count: false, class: 'article-tag' }) %>
<span class="post-count">总字数<%= wordcount(post.content) %></span>
<span class="post-count">预计阅读<%= min2read(post.content) %>分钟</span>
</div>
<% } %>