hexo的next主题换到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>
    <% } %>