如何用Jekyll读取Markdown内容生成时间轴页面？

当然可以实现！我来一步步帮你搞定用Jekyll生成时间轴页面的需求，完全贴合你想要的效果。

第一步：规范你的Markdown内容结构 #

首先，你需要在Markdown文件里用统一的格式区分每个时间轴条目。建议用**三级标题（###）**来写日期，标题下面的内容就是该条目的描述（支持Markdown格式）。比如：

---
layout: timeline
title: 我的个人时间轴
---

### 25 Dec
My first news - 这里可以写详细内容，还能加**加粗**、*斜体*这类Markdown格式哦

### 10 Jan
Another important update，甚至可以插入图片或者链接

这样Jekyll能方便地识别每个时间轴条目的日期和内容。

第二步：编写timeline.html布局文件 #

你已有时间轴的HTML结构，只需要用Jekyll的Liquid模板语言，把Markdown里的日期和内容动态替换进去就行。核心思路是：把转换后的Markdown内容（也就是page.content，已经是HTML格式）按标题标签拆分，提取日期和对应内容。

举个例子，假设你的基础时间轴HTML结构是这样的：

<div class="timeline-container">
  <!-- 单个时间轴条目 -->
  <div class="timeline-item">
    <div class="timeline-date">
      <span class="day">25</span>
      <span class="month">Dec</span>
    </div>
    <div class="timeline-content">My first news</div>
  </div>
</div>

那修改后的timeline.html布局文件应该是这样：

---
layout: default  <!-- 这里可以替换成你自己的基础布局 -->
---
<div class="timeline-container">
  {% assign timeline_entries = page.content | split: '<h3>' %}
  {% for entry in timeline_entries offset:1 %}
    {% assign entry_parts = entry | split: '</h3>' %}
    {% assign full_date = entry_parts[0] | strip %}
    {% assign entry_content = entry_parts[1] | strip %}
    
    <!-- 如果你的日期需要拆分成日和月，比如"25 Dec"，可以这样处理 -->
    {% assign date_parts = full_date | split: ' ' %}
    {% assign day = date_parts[0] %}
    {% assign month = date_parts[1] %}

    <!-- 插入你的时间轴条目结构 -->
    <div class="timeline-item">
      <div class="timeline-date">
        <span class="day">{{ day }}</span>
        <span class="month">{{ month }}</span>
      </div>
      <div class="timeline-content">
        {{ entry_content }}
      </div>
    </div>
  {% endfor %}
</div>

关键代码解释 #

• {% assign timeline_entries = page.content | split: '<h3>' %}：把Markdown转换后的HTML内容按<h3>标签拆分（因为你用了###，对应HTML的h3）。第一个拆分出来的元素是空的，所以用offset:1跳过。
• split: '</h3>'：把每个条目拆分成“日期”和“内容”两部分。
• 如果你的日期格式是25|Dec这种带分隔符的，只需要把split: ' '改成split: '|'就行，灵活调整适配你的格式。

最后测试 #

把timeline.html放到Jekyll项目的_layouts文件夹里，然后你的Markdown文件（比如my-timeline.md）头部加上layout: timeline，运行jekyll serve就能看到效果啦！

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