能否通过Markdown向TypeScript传递变量？博客自定义显示需求问询

Markdown本身确实没有原生的自定义显示控制标签，但**Front Matter（前置元数据）**是解决这个需求的标准方案，几乎所有静态博客框架都支持，完全能满足你多变量控制页面功能的要求。

1. 核心实现：在Markdown文件中添加Front Matter #

在每个Markdown文件的最开头，用特定格式（最常用的是YAML，也支持JSON/TOML）定义自定义变量，这些变量会被博客渲染系统解析，用来控制页面的显示逻辑。

举个实际例子，政治类文章的Markdown文件开头可以这么写：

---
title: 2024年政策解读
category: politics
nav_animation: slide-from-left
display_style: high-contrast
show_sidebar: false
---

# 正文内容
这里是政治类文章的正文...

个人类文章可以改成：

---
title: 周末登山随笔
category: personal
nav_animation: fade-in
display_style: warm-theme
show_sidebar: true
---

# 正文内容
这里是个人类文章的正文...

2. 如何让这些变量生效 #

• 如果你用现成的静态博客框架（比如Hexo、Jekyll、Hugo）：框架会自动解析Front Matter里的变量，你只需要在页面模板（比如Liquid、Jinja2模板）里根据变量值做判断。比如在导航栏的模板里：

  <!-- 伪代码示例 -->
  <nav class="navbar {% if page.nav_animation == 'slide-from-left' %}slide-left{% elif page.nav_animation == 'fade-in' %}fade{% endif %}">
    <!-- 导航内容 -->
  </nav>
  

• 如果是自己从零搭建站点：可以用解析库提取Front Matter（比如JavaScript里的gray-matter，Python里的python-frontmatter），把变量传到前端后，用JS动态控制样式或动画：

  // 伪代码示例：提取变量后处理
  if (articleData.nav_animation === 'slide-from-left') {
    document.querySelector('.navbar').classList.add('slide-left-animation');
  }
  

3. 备选方案（不推荐，但应急可用） #

如果出于某些原因不想用Front Matter，还有两种关联方式，但维护成本更高：

• 文件名编码：把变量写在文件名里，比如politics-slide-from-left-high-contrast-政策解读.md，解析文件名时拆分提取参数，但可读性差，变量多了容易混乱。
• 配套JSON文件：每个Markdown文件对应一个同名的JSON文件（比如政策解读.md对应政策解读.json），JSON里存自定义变量，但需要同步维护两个文件，容易出错。

总结：Front Matter是最简便、通用的方案，完全符合你的需求，不属于Markdown不支持的功能，而是行业内约定俗成的扩展用法。

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