中文博客文章示例

中文博客文章示例

这是一个用于演示语言切换功能的中文博客文章。当语言设置为 zh 时，页面将使用中文字体。

字体切换功能

标题字体

当 language: zh 时，标题将使用 Noto Serif SC 字体，这是一个专为中文设计的衬线字体。

正文字体

正文内容将使用 Noto Sans SC 字体，这是一个现代、清晰的无衬线字体，非常适合中文阅读。

技术实现

这个功能通过以下方式实现：

  1. Frontmatter 语言设置 - 在每篇文章的 frontmatter 中定义 language: en 或 language: zh
  2. HTML lang 属性 - 根据语言自动设置 <html lang="zh"> 或 <html lang="en">
  3. CSS 变量 - 使用 CSS 自定义属性根据语言选择不同的字体族

代码示例

/* 英文文章 */
:global([lang="en"]) {
  --title-font-family: 'Playfair Display', serif;
  --body-font-family: 'Inter', sans-serif;
}

/* 中文文章 */
:global([lang="zh"]) {
  --title-font-family: 'Noto Serif SC', serif;
  --body-font-family: 'Noto Sans SC', sans-serif;
}

这种方法的优点是：

  • 自动根据内容语言切换字体
  • 保持良好的可读性
  • 支持混合语言内容
  • 易于维护和扩展

希望这个示例能帮助你理解语言切换功能的实现方式！