hexo的next主题换到Yelee(Yilia)

文章目录

1. 1. layout/_partial/post/nav.ejs
2. 2. layout/_partial/comments/valine.ejs

自动生成摘要

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

方法二: description in Front-matter

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

代码区前后有很多空行

添加统计字数

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

需要注意下面的配置

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

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

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

layout/_partial/post/nav.ejs

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

<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: true
    lines: 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: 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

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

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