You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在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-->

不过这种方式需要每个帖子都手动写,维护起来很麻烦,还是方法一更省心。

另外补充一下:你之前尝试的appendrstrip没用,就是因为post.excerpt已经是渲染后的HTML,rstrip只能去掉末尾的空白字符,没法改变<p>标签的结构,所以链接还是会跑到段落外面。

备注:内容来源于stack exchange,提问作者user4815162342

火山引擎 最新活动