ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

基于 Markor 的 Jekyll 博客写作指南:理解 jekyll-post.md 模板与 Markdown 前端元数据机制

2026/10/3 13:38:54 拓冰建站 浏览量
基于 Markor 的 Jekyll 博客写作指南:理解 jekyll-post.md 模板与 Markdown 前端元数据机制 移动开发【免费下载链接】markorText editor - Notes ToDo (for Android) - Markdown, todo.txt, plaintext, math, ..项目地址https://gitcode.com/gh_mirrors/ma/markor点击查看免费下载output_article基于 Markor 的 Jekyll 博客写作指南从模板文件到 Front Matter 渲染机制导读本文以 Markor 内置模板 app/src/main/assets/templates/jekyll-post.md 为切入点系统讲解在 Android 设备上使用 Markor 编写 Jekyll 博客文章的完整工作流从模板中的 YAML Front Matter前置元数据字段含义、Markor 内置的 Jekyll 语法扩展到新建文件时的模板加载与占位符替换机制。读完本文你将掌握如何在 Markor 中直接产出符合 Jekyll 规范、可直接推送至 GitHub Pages 等静态站点的 Markdown 博文并能理解预览模式下 Front Matter 被解析和渲染的底层原理。一、模板全貌一份为 Jekyll 预置的 Markdown 博文骨架Markor 在应用内置资产目录assets/templates下随包分发了一批文档模板AppSettings.java 中的getBuiltinTemplates()通过AssetManager.list(templates)枚举并读取该目录下的全部文件其中 jekyll-post.md 专为 Jekyll 静态博客定制。模板完整内容如下--- layout: post tags: [] categories: [] #date: 2019-06-25 13:14:15 #excerpt: #image: BASEURL/assets/blog/img/.png #description: #permalink: title: title ---可以看到这是一份形简意丰的骨架正文区为空真正有价值的是文件顶部的 YAML Front Matter 块。它与 Jekyll 官方对博文文件的要求完全对齐——Jekyll 要求每篇文章在文件开头用---包裹的 YAML 块声明元数据Markor 恰好把这一步做成了开箱即用的模板。值得注意的是仓库中还存在同主题的 AsciiDoc 版本 app/src/main/assets/templates/jekyll-post.adoc以及用于演示的实际示例文件 samples/2029-01-01-jekyll-post.md、samples/2029-01-01-jekyll-post.adoc。示例文件名带2029-01-01日期前缀正是 Jekyll 标准的文章命名约定见本文第五节。二、Front Matter 字段逐项解析模板中的每一行字段都有明确的 Jekyll 语义下面逐一说明其作用、取值方式与在 Markor 中的表现。2.1 布局与标题必填核心字段字段模板默认值作用layoutpost指定 Jekyll 使用的布局模板对应站点_layouts/post.html几乎所有博文都应保持posttitletitle文章标题会在站点列表页、RSS 与title标签中展示写作时务必替换其中title建议保留单引号包裹——Jekyll 的 YAML 解析器基于 Ruby对未加引号、含特殊字符的字符串容易误解析引号是安全写法。2.2 标签与分类内容组织字段tags: [] categories: []两个字段默认是空数组但取值方式不同tags文章标签可写为[markdown, android]或 YAML 列表形式tags: - markdown - android在 Markor 的预览渲染中tags会被特殊处理源码 MarkdownTextConverter.java 中有一条专门的分支——当tags恰好只有一个元素且形如[tag1,tag2,tag3]时会先按逗号拆分、再通过LinkedHashSet去重保序最终展开为独立的标签项同时模板的 CSSCSS_FRONTMATTER会为标签渲染圆角胶囊样式。categories文章分类Jekyll 用它生成分类归档页支持层级结构如[tech, android]。2.3 被注释的可选字段按需启用模板用#注释保留了四个常用可选字段取消注释即可启用字段默认示例用途date2019-06-25 13:14:15手动固定发布时间不设置时 Jekyll 使用文件名中的日期前缀excerpt自定义文章摘要不设置时 Jekyll 自动截取正文开头imageBASEURL/assets/blog/img/.png封面图路径注意BASEURL是占位符应替换为站点根路径如/assets/blog/img/xxx.pngpermalink空自定义文章 URL如/blog/my-post留空时使用默认的/:categories/:year/:month/:day/:title规则description空页面描述通常用于 SEO meta 标签这种默认必填字段开启、可选字段注释保留的设计让模板既能开箱即用又保留了完整的扩展空间。三、Markor 如何解析与渲染 Jekyll 语法模板之所以能无缝工作是因为 Markor 的 Markdown 转换器在底层集成了对 Jekyll 语法的完整支持。证据集中在 MarkdownTextConverter.java3.1 解析器扩展注册转换器基于 flexmark-java 构建在flexmarkExtensions列表中显式注册了与 Jekyll 直接相关的三个扩展源码 L126-L147JekyllTagExtension.create(), // 识别 {% ... %} 标签语法 JekyllFrontMatterExtension.create(), // 识别 --- 包裹的 Front Matter 块 YamlFrontMatterExtension.create(), // 将 Front Matter 解析为结构化 YAML这意味着即使没有开启任何额外选项Markor 在预览模式中也能正确把---之间的 YAML 块从正文中剥离出来解析而不会把它误当作水平分割线或正文文本。3.2 Front Matter 的可视化渲染Markor 默认不会把 Front Matter 原样显示在预览中而是按需渲染成结构化信息条。其逻辑位于 MarkdownTextConverter.java L216-L241只有当文档以---开头且满足以下任一条件时才触发解析用户在设置中配置了要显示的 YAML 键AppSettings.getMarkdownShownYamlFrontMatterKeys()正文中出现了{{ post.xxx }}形式的令牌YAML_FRONTMATTER_TOKEN_PATTERN正则匹配。通过extractYamlAttributes()用YamlFrontMatterExtension单独解析得到MapString, ListString形式的键值对。仅渲染白名单内的属性每个属性包装为front-matter-item容器整体放入.front-matter-container并注入CSS_FRONTMARTTER样式——这就是预览中顶部那条标题、标签胶囊、描述信息条的来源。3.3 正文内的{{ post.xxx }}令牌替换这是模板与 Markor 交互最巧妙的一环。在 Jekyll 站点中正文可以使用{{ page.title }}、{{ page.tags }}等 Liquid 变量Markor 在本地预览时无法运行 Jekyll于是实现了近似机制源码 replaceTokens() 会扫描正文中的{{ post.attr }}令牌并把对应 YAML 属性的值经过去引号、HTML 转义、--→–破折号处理回填进去最终渲染为高亮的post-item-attr标签。例如若 Front Matter 中声明了tags: [markdown, android]正文某处写入本文标签{{ post.tags }}预览时会自动显示为两个独立的标签条目。这让你在手机上写作时就能即时看到标签、标题等元数据最终会以什么形态出现在页面上。3.4 Jekyll Liquid 令牌的本地化替代模板注释与正文中可能出现{{ site.time | date: %x }}、{{ site.baseurl }}这类 Liquid 表达式。Markor 在转换时做了两处替换MarkdownTextConverter.java L299-L300markup markup.replace({{ site.baseurl }}, ..) .replace(TOKEN_SITE_DATE_JEKYLL, TOKEN_POST_TODAY_DATE);{{ site.baseurl }}被替换为..——因为 Markor 中 Jekyll 文章通常存放在_posts目录该目录相对于站点根目录恰好上跳一级图片等资源引用如![](../assets/img/x.png)因此可正确解析{{ site.time | date: %x }}被替换为{{ post.date_today }}后者在 TextConverterBase.java 中最终被替换为设备当前的本地化日期字符串。这套机制让 Markor 的预览与 Jekyll 站点的最终渲染保持一致本地所见即线上所得。四、在 Markor 中使用模板新建博文模板的消费入口是新建文件对话框对应源码 NewFileDialog.java。4.1 模板加载流程NewFileDialog.java L156-L162 将三部分来源合并进模板下拉框第一项固定为空文件R.string.empty_file接着是用户在设置中配置的 snippets 目录下的所有纯文本片段文件getSnippetFiles()最后是内置模板getBuiltinTemplates()即assets/templates下的全部文件——jekyll-post.md就在这里。4.2 文件名自动生成选中jekyll-post.md模板后对话框会用模板文件名自动建议标题与扩展名jekyll-post.mdNewFileDialog.java L173-L188标题格式可通过格式输入框定制支持{{title}}占位符与yyyy-MM-ddTHHmmss等日期格式默认规则见 NewFileDialog.java L244-L257确认后模板内容作为新文件内容写入模板名与格式偏好会被记住下次新建同类型文件时自动预选NewFileDialog.java L311-L315。4.3 与 AsciiDoc 模板的对照若你的博客使用 AsciiDocJekyll 同样支持可对照参考 jekyll-post.adoc它以 My Title起头用:page-subtitle:、:page-tags:、:page-last-updated:等文档属性承载元数据并通过ifndef::env-site[]条件块实现本地预览显示副标题、线上 Jekyll 站点不重复显示的差异化渲染。两份模板体现了 Markor 对 Markdown / AsciiDoc 双格式 Jekyll 工作流的完整覆盖。五、写作到发布的完整流程结合模板与 Markor 的功能一条完整的移动端 Jekyll 写作链路如下新建文件打开新建文件对话框模板选择jekyll-post.md标题格式可设置为 Jekyll 规范的yyyy-MM-dd-{{title}}日期前缀便于 Jekyll 识别发布时间。填写元数据把title: title替换为真实标题按需填写tags、categories取消注释date、excerpt、permalink等可选字段。写作正文利用 Markor 的 Markdown 全语法支持任务列表、表格、脚注、数学公式 KaTeX、Mermaid 图表等均由 MarkdownTextConverter.java 注册的 flexmark 扩展提供需要展示元数据时在正文中写{{ post.tags }}等令牌。本地预览切换预览模式Front Matter 会渲染为信息条{{ site.baseurl }}与日期令牌被替换为本地可解析值图片路径经escapeSpacesInLink()处理空格转%20见 MarkdownTextConverter.java L349-L376。归档发布将文件放入 Jekyll 仓库的_posts目录Markor 检测到_posts/blog/post文件夹时还会自动为预览注入目录 TOC见 MarkdownTextConverter.java L244-L259经 Git 推送后由 Jekyll 构建发布。值得强调的是模板中注释字段与文件命名都遵循 Jekyll 官方约定YYYY-MM-DD-title.ext、---定界符、layout必填因此只要不删改 Front Matter 结构Markor 产出的文件即可直接进入 Jekyll 构建流水线无需二次编辑。六、小结jekyll-post.md虽仅十余行却是 Markor 面向 Jekyll 博客场景的核心载体它既是可复制的写作骨架又是测试 Markor Jekyll 语法支持的天然样例。配合 MarkdownTextConverter.java 中的 Jekyll 扩展注册、Front Matter 白名单渲染与令牌替换机制以及 NewFileDialog.java 的模板加载流程你完全可以在手机端完成建文件—填元数据—写作—预览—归档的 Jekyll 博客全流程且预览结果与线上渲染保持一致。 /output_article赞分享移动开发【免费下载链接】markorText editor - Notes ToDo (for Android) - Markdown, todo.txt, plaintext, math, ..项目地址https://gitcode.com/gh_mirrors/ma/markor点击查看免费下载相关推荐Jekyll 博客写作实战基于 _posts 目录的纯文本博客系统Jekyll 博客写作实战基于 _posts 目录的纯文本博客系统 核心主题 Jekyll 是博客感知的静态站点生成器其博客功能完全由文本文件驱动——前端CMS使用 Devbox 搭建可复现的 Jekyll 博客开发环境基于 examples/stacks/jekyll 模板使用 Devbox 搭建可复现的 Jekyll 博客开发环境基于 examples/stacks/jekyll 模板 本指南以本仓库 examples/st开发工具CLIacademicpages.github.io CV 页面搭建指南基于 Jekyll 的 Markdown 简历模板解析academicpages.github.io CV 页面搭建指南基于 Jekyll 的 Markdown 简历模板解析 本篇技术指南围绕 academicp前端文档上一篇掌握UnrealPakViewerPak文件解析从入门到精通下一篇UnrealPakViewerUE4资源包解析全攻略——从加密容器到资产洞察创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考