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

需要注意下面的配置

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

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

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

layout/_partial/post/nav.ejs

<% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
<p 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)}) %>
</p>
<% } %>

layout/_partial/comments/valine.ejs

<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 -->

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

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

方法二: description in Front-matter

> 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中的代码换成下面的

       <% 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 添加下面代码

   auto_excerpt:enable: truelines: 3

hexo博文摘要生成方案

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

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

1. _config.yml

   #打赏
   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: atompath: atom.xmllimit: 20hub:content:content_limit: 140content_limit_delim: ' 'order_by: -dateicon: icon.png

2. layout/_partial/post/nav.ejs

   <% 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%><iclass="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

<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>

代码区前后有很多空行

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

解决链接

添加统计字数

<% 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><% } %>

起初参考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相对地址也跟着换掉

自动生成摘要

官方推荐的文章摘要格式

方法一:

> title: Hello World> date: 2015-12-03 00:00:00> ---> >
>
>

之前最好不要有空格等字符；

方法二: description in Front-matter

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

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

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

有 hexo-auto-excerpt 可以使用

1. npm install –save hexo-auto-excerpt

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

       <% 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 %><%- post.content.substring(0, br_position + 1) %><% } %><% } %><% } else { %><%- partial('toc', { post: post}) %><%- post.content %><% } %>