如何在GitHub Pages的Jekyll中将「Read more...」链接追加到文章摘要的最后一段末尾?
如何在GitHub Pages的Jekyll中将「Read more...」链接追加到文章摘要的最后一段末尾?
这个问题我之前折腾过好一会儿!核心原因确实是你说的那样——post.excerpt输出的是已经渲染完成的HTML代码,不是原始Markdown,所以直接追加链接自然会跑到段落标签的外面,变成单独的元素。
给你分享两个实用的解决办法:
方法一:用Liquid过滤器修改HTML结构(推荐)
我们可以利用Liquid的replace_last过滤器,把摘要HTML里最后一个</p>标签替换成「链接内容+</p>」,这样就能把链接嵌入到最后一段的末尾了。
代码示例:
{% if post.excerpt != post.content %} {{ post.excerpt | replace_last: '</p>', ' <a class="read-more" href="' | append: site.baseurl | append: post.url | append: '">Read more...</a></p>' }} {% else %} {{ post.excerpt }} {% endif %}
如果觉得拼接字符串太繁琐,也可以先定义链接变量再操作,可读性更好:
{% if post.excerpt != post.content %} {% capture read_more_link %}<a class="read-more" href="{{ site.baseurl }}{{ post.url }}">Read more...</a>{% endcapture %} {{ post.excerpt | replace_last: '</p>', ' ' | append: read_more_link | append: '</p>' }} {% else %} {{ post.excerpt }} {% endif %}
注意事项
这个方法的前提是你的文章摘要最后一个HTML元素是<p>标签——也就是你已经把<!--more-->标签放在了摘要段落的末尾,没有额外换行或其他元素(比如列表、引用块)。如果摘要最后有其他元素,这个替换就会失效,但按照你的描述,这个条件是满足的。
方法二:手动在Markdown中嵌入链接(不推荐)
如果你不嫌麻烦,也可以在每个帖子的<!--more-->位置手动插入链接,但这种方法不够自动化,而且会导致链接出现在文章正文中(除非你再做额外处理),所以一般不推荐。
示例:
这是我文章摘要的最后一段文字 <a class="read-more" href="{{ site.baseurl }}{{ page.url }}">Read more...</a><!--more-->
不过这种方式需要每个帖子都手动写,维护起来很麻烦,还是方法一更省心。
另外补充一下:你之前尝试的append和rstrip没用,就是因为post.excerpt已经是渲染后的HTML,rstrip只能去掉末尾的空白字符,没法改变<p>标签的结构,所以链接还是会跑到段落外面。
备注:内容来源于stack exchange,提问作者user4815162342




