hexo的Ayer主题添加首页文章自动截断功能(有巨大bug)

⚠️前排提示,我的实现是有bug的(很大很大的bug,建议先跳到最后看效果)

换到Ayer主题后,这个主题没有自动截断,只能手动添加more标记或者不显示文章内容,所以考虑加一个自动截断

1 参考NexT

之前用的NexT主题中有一个自动截断的设置,可以直接设置length进行自动截断,NexT主题配置文件对应的部分如下:

1
2
3
4
# next
auto_excerpt:
enable: true #阅读全文截断
length: 200

于是阅读了NexT里这部分的代码(在next/layout/_macro/post.swig里),尝试在Ayer主题中加上自动截断

2 修改主题配置文件

首先在Ayer主题配置文件里加上属性,enable开启自动截断,length就是自动截断的长度:

1
2
3
4
# 自动截断
auto_excerpt:
enable: true
length: 200

3 修改article.ejs

查看index.ejs,然后跳到_partial/archive,首页对应的是pagination==2的部分,于是跳到article.ejs(这里搜索了一下发现这些设置没有别的调用关系,就放心大胆的改了)

我的逻辑是:

1
2
3
4
5
6
7
8
9
10
11
如果开启了截断功能并且是首页
如果已经有more标志
显示more标志截断内容
加上省略号
显示阅读全文按钮
如果设置了自动截断
显示截断length的内容(通过substring函数)
加上省略号
显示阅读全文按钮
否则
显示全文内容

就是改themes/ayer/layout/_partial/artical.ejs,改完如下面代码的25-47行:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %>" itemscope
itemprop="blogPost" data-scroll-reveal>

<div class="article-inner">
<% if (post.link || post.title){ %>
<header class="article-header">
<%- partial('post/title', {class_name: 'article-title'}) %>
</header>
<% } %>

<% if (index || is_post()) { %>
<div class="article-meta">
<%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
<%- partial('post/category') %>
<% if(theme.word_count && theme.word_count.enable && !post.no_word_count){%>
<%- partial('post/word') %>
<% } %>
</div>
<% } %>

<% if (theme.toc && is_post()){ %>
<%- partial('post/tocbot') %>
<% } %>

<% if (theme.excerpt_all&&index){ %>
<% }else{ %>
<div class="article-entry" itemprop="articleBody">
<%- partial('post/justifiedGallery') %>
<%- partial('post/gallery') %>
<% if (post.excerpt && index){ %>
<%- post.excerpt %>
<%- "..." %>
<% if (theme.excerpt_link){ %>
<a class="article-more-link" href="<%- url_for(post.path) %>"><%= theme.excerpt_link %></a>
<% } %>
<% } else if(theme.auto_excerpt.enable&&index) { %>
<% var cc = post.content %>
<%- cc.substring(0, theme.auto_excerpt.length) %>
<% if (cc.length > theme.auto_excerpt.length){ %>
<%- "..." %>
<% } %>
<% if (theme.excerpt_link){ %>
<a class="article-more-link" href="<%- url_for(post.path) %>"><%= theme.excerpt_link %></a>
<% } %>
<% } else { %>
<%- post.content %>
<% } %>
<!-- reward -->
<% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index && !post.no_reward){ %>
<div id="reward-btn">
<%= __('post.reward') %>
</div>
<% } %>
</div>
<% } %>

<!-- copyright -->
<% if (((theme.copyright_type === 2) || (theme.copyright_type === 1 && post.copyright)) && !index && !post.no_copyright){ %>
<div class="declare">
<ul class="post-copyright">
<li>
<i class="ri-copyright-line"></i>
<strong><%= __('post.copyright_title') %>: </strong>
<%= __('post.copyright_content') %>
</li>
</ul>
</div>
<% } %>
<footer class="article-footer">
<% if (!index && theme.share_enable){ %>
<%- partial('post/share') %>
<% } %>
<%- partial('post/tag') %>

</footer>

</div>

<% if (!index){ %>
<%- partial('post/nav') %>
<% } %>

<% if (theme.valine && theme.valine.enable && !post.no_valine){ %>
<%- partial('post/valine', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
<% } %>

<% if (is_post()) { %>
<%- partial('post/gitalk') %>
<% } %>

<% if (theme.minivaline && theme.minivaline.enable && !post.no_minivaline){ %>
<%- partial('post/minivaline') %>
<% } %>

</article>

这个改了好久才成功,不知道为什么直接用substring函数那个变量是不会改的(我也不会ejs,全是依样画葫芦的改)

4 效果

效果如图:

5 bug说明

但是现在还是会有很大的bug,因为截断的是固定的,这样截断的奇奇怪怪的时候就会出一些问题(卡在文字是没事的,但是比如200字符刚好卡到图片的一半,或是table的一半,或是链接的一半,或是代码的一半……)

比如下图按钮失效直接变成链接了,并且一些错误可能影响到侧边栏啥的:

我目前的解决方式是对那样的文章直接手动添加more标记(有一说一三百多篇一百多篇是需要手动加的,这工作量其实还是直接手动300篇少ORZ,不过写写也蛮有意思)


还不知道NexT是怎么做到自动截断而不会出bug的,如果有大佬会请务必教教我%%%

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2018-2020 LeFlacon

奶茶一杯 快乐起飞

支付宝
微信