Jekyll中文章变量内的Markdown链接无法渲染为可点击链接的问题

原因分析 #

1. Liquid标签未被解析：Jekyll默认不会处理Front Matter变量里嵌套的Liquid代码（比如{{ site.baseurl }}、{% link %}），这些标签会被直接当作纯文本输出，无法生成正确的链接地址。
2. Markdown未转换为HTML：即便Liquid标签能被解析，page.banner-bottom的Markdown格式内容也不会自动转换成可点击的HTML链接，必须触发Markdown渲染流程。

解决方法 #

方法1：使用jekyll-liquify插件 #

通过插件解析变量中的Liquid代码，再转换Markdown：

1. 在项目的Gemfile中添加：

gem 'jekyll-liquify'

2. 执行bundle install安装插件。
3. 修改布局文件中的横幅输出代码：

<div class="banner-bottom">{{ page.banner-bottom | liquify | markdownify }}</div>

liquify负责解析内容里的Liquid标签，markdownify将Markdown链接转为可点击的HTML链接。

方法2：原生Jekyll拆分参数实现 #

无需插件，通过拆分Front Matter参数来构建横幅：
修改文章的Front Matter：

---
layout: post
title:  "Title"
date:   2022-12-06 18:26:05 +0100
categories: category
author: Author name
author-pic: author.jpg
banner-bottom-text: "Some test some test some test"
banner-bottom-link: "page.html"
banner-bottom-link-text: "Link to a page"
---

在布局文件中直接构建横幅内容：

<div class="banner-bottom">
  {{ page.banner-bottom-text }} 
  <a href="{{ site.baseurl }}{% link {{ page.banner-bottom-link }} %}">{{ page.banner-bottom-link-text }}</a>.
</div>

这种方式完全用原生Liquid语法构建，避免在Front Matter中嵌套复杂代码。

方法3：使用Liquid片段文件 #

将横幅内容单独存为Liquid片段，再在布局中引用：

1. 在_includes目录下创建banner-demo.liquid文件，内容为：

Some test some test some test [Link to a page]({{ site.baseurl }}{% link page.html %}).

2. 修改文章的Front Matter：

---
layout: post
title:  "Title"
date:   2022-12-06 18:26:05 +0100
categories: category
author: Author name
author-pic: author.jpg
banner-bottom-snippet: "banner-demo.liquid"
---

3. 在布局文件中引用并渲染：

<div class="banner-bottom">
  {% capture banner_content %}{% include {{ page.banner-bottom-snippet }} %}{% endcapture %}
  {{ banner_content | markdownify }}
</div>

include会自动解析片段中的Liquid标签，markdownify完成Markdown到HTML的转换。

内容的提问来源于stack exchange，提问作者MultiformeIngegno