基于spfk主题的自动摘要

前言

最近又开始捣鼓我的博客，发现我的博客首页一进去就是个空白，对比spfk制作的博客，我陷入了沉思。是不是我的配置错误，还是说我漏了什么文件没有clone。不断的F12调试，重新clone，查找资料，发现原来不是配置的锅，也不是文件缺少，而是没有打上这句话.

<!-- more -->

我赶快把所有的md文件都在合理的位置上打上标记，但是对于一个coder，能不手动就不手动，于是又开始查找相关资料，开始搞事。

自动摘要的原理

很多自动摘要的原理都很简单，比如说多少个字符截断，像next主题就是这么干的，但是，那也太难受了，遇到了有代码的，分段的，基本上就成智障了，还得操心。

移植代码

参考这位老哥的想法https://blog.zthxxx.me/posts/Hexo-Automatic-Add-ReadMore
感觉挺好的，于是动手移植了下代码，不过每个主题的配置都略有不同，所以移植也需要一点点编程知识。
先配置_config.yml，在文末增加如下代码

auto_excerpt:
  enable: true
  lines: 1
#自定义自动摘要几行

找到themes\hexo-theme-spfk\layout_partial 文件下的article.ejs，用文本编辑器打开，将

<div class="article-entry" itemprop="articleBody">到<% if (!index && post.toc != false && !is_page()){ %>

之间的内容替换掉,就可以实现自动readmore了。代码如下

<div class="article-entry" itemprop="articleBody">
      <% var show_all_content = true %>
        <% if (index) { %>
            <% if (post.excerpt) { %>
                <% show_all_content = false %>
                <p><%- post.excerpt %></p>
            <% } 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 { %>
            <% if (post.toc) { %>
                <div id="toc" class="toc-article">
                <strong class="toc-title"><%= __('article.catalogue') %></strong>
                    <%- toc(post.content) %>
                </div>
            <% } %>
        <% } %>
        <% if (show_all_content) { %>
        <%- post.content %>
        <% } %>
      <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.toc)) && !index){ %>
        <div class="page-reward">
          <p><a href="javascript:void(0)" onclick="dashangToggle()" class="dashang">赏</a></p>
          <div class="hide_box"></div>
          <div class="shang_box">
            <a class="shang_close" href="javascript:void(0)" onclick="dashangToggle()">×</a>
            <div class="shang_tit">
              <p><%= theme.reward_wording1%></p>
            </div>
            <div class="shang_payimg">
              <img src="/img/alipayimg.jpg" alt="扫码支持" title="扫一扫" />
            </div>
              <div class="pay_explain"><%= theme.reward_wording2%></div>
            <div class="shang_payselect">
              <% if(theme.alipay) {%>
                <div class="pay_item checked" data-id="alipay">
                  <span class="radiobox"></span>
                  <span class="pay_logo"><img src="<%= theme.alipay%>" alt="支付宝" /></span>
                </div>
              <% } %>
              <% if(theme.weixin) {%>
                <div class="pay_item" data-id="wechat">
                  <span class="radiobox"></span>
                  <span class="pay_logo"><img src="<%= theme.weixin%>" alt="微信" /></span>
                </div>
              <% } %>
            </div>
            <div class="shang_info">
              <p>打开<span id="shang_pay_txt">支付宝</span>扫一扫，即可进行扫码打赏哦</p>
            </div>
          </div>
        </div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
        <script type="text/javascript">
          $(".pay_item").click(function(){
            $(this).addClass('checked').siblings('.pay_item').removeClass('checked');
            var dataid=$(this).attr('data-id');
            $(".shang_payimg img").attr("src","/img/"+dataid+"img.jpg");
            $("#shang_pay_txt").text(dataid=="alipay"?"支付宝":"微信");
          });
          function dashangToggle(){

            $(".hide_box").fadeToggle();
            $(".shang_box").fadeToggle();
          }
        </script>
      <% } %>
    </div>
    <% if (index){ %>
    <div class="article-info article-info-index">
      <%if(post.top){%>
        <div class="article-pop-out tagcloud">
          <a class="">置顶</a>
        </div>
      <% } %>
      <%- partial('post/category') %>
      <%- partial('post/tag') %>
      <% if (index && (post.description || post.excerpt ||!show_all_content)){ %>
        <p class="article-more-link">
          <a <% if (!theme.excerpt_link){ %>class="hidden"<% } %> href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %> >></a>
        </p>
      <% } %>
      <div class="clearfix"></div>
    </div>
    <% } %>
  </div>
  <% if (!index){ %>
    <%- partial('post/nav') %>
  <% } %>
</article>

效果

效果如图所示

问题

自动摘要的行数是对应正文而不包括标题，所以当行数大于一时容易出问题。有时间我准备写一个小标题的摘要配置，先留坑吧

文档下载

我把我修改的配置文件传上来，供大家使用
https://ltengy.github.io/2018/08/06/%E5%9F%BA%E4%BA%8Espfk%E4%B8%BB%E9%A2%98%E7%9A%84%E8%87%AA%E5%8A%A8%E6%91%98%E8%A6%81/