这是一段示例文本，用于展示段落排版效果。内容无实际意义，仅用于测试主题的字体、行距与阅读体验。你可以将其替换为真实文档内容。文本包含多句长段落，用于模拟真实文章的阅读场景。

在这一段中，我们继续展示长段落的效果。通过多句连续的描述，可以更好地观察主题在正文排版上的表现，包括段落间距、行宽、对齐方式等。

子章节 A

这里是一个子章节示例。用于展示二级与三级标题之间的层级关系。你可以在这里放置更细节的说明、步骤或补充内容。

这一段落继续展示正文排版效果，包括段落长度、行距与阅读节奏。你可以根据需要自由替换内容。

子章节 B

这一部分用于展示另一段示例文本。通过不同长度的段落，可以观察主题在多段落场景下的表现。

你可以在这里加入说明、示例、注意事项或其他内容。文本本身不具备实际意义，仅用于占位与排版展示。

第二部分

这一章节用于展示代码块、图片与其他组件的组合效果。你可以根据需要替换为真实文档内容。

var a = 1;
var b = 2;
var c = 3;

子章节 A

这里是一个子章节示例。用于展示二级与三级标题之间的层级关系。你可以在这里放置更细节的说明、步骤或补充内容。

这一段落继续展示正文排版效果，包括段落长度、行距与阅读节奏。你可以根据需要自由替换内容。

子章节 B

这一部分用于展示另一段示例文本。通过不同长度的段落，可以观察主题在多段落场景下的表现。

你可以在这里加入说明、示例、注意事项或其他内容。文本本身不具备实际意义，仅用于占位与排版展示。

第三部分

这一章节用于展示代码块、图片与其他组件的组合效果。你可以根据需要替换为真实文档内容。

子章节 A

这里是一个子章节示例。用于展示二级与三级标题之间的层级关系。你可以在这里放置更细节的说明、步骤或补充内容。

这一段落继续展示正文排版效果，包括段落长度、行距与阅读节奏。你可以根据需要自由替换内容。

子章节 B

这一部分用于展示另一段示例文本。通过不同长度的段落，可以观察主题在多段落场景下的表现。

你可以在这里加入说明、示例、注意事项或其他内容。文本本身不具备实际意义，仅用于占位与排版展示。

欢迎使用 Linen —— 一个简约、优雅的 Hexo 主题。这个主题大部分灵感来自于 https://medium.com/blog。

安装

前置条件

现有的 Hexo 项目或者使用 https://hexo.io/docs/ 新建一个 Hexo 项目。Hexo 版本 "^8.1.1"。

你可以通过以下几种方式来使用 Linen 主题：

1. 通过 npm 安装

   npm install hexo-theme-linen -S
   

   然后在 Hexo 项目配置文件 _config.yml 中配置 theme: linen 。重新启动 Hexo 项目，即可启用 Linen 主题。

2. 直接克隆主题文件到 Hexo 主题目录

   git clone https://github.com/LynanBreeze/hexo-theme-linen.git
   

   然后在 Hexo 项目配置文件 _config.yml 中配置 theme: hexo-theme-linen 。重新启动 Hexo 项目，即可启用 Linen 主题。

3. 直接克隆本文档站点源码修改使用

   git clone https://github.com/LynanBreeze/hexo-theme-linen-doc-zh-CN.git
   

个性化配置

继续阅读 下一篇文章 了解如何进行一些个性化配置。

在站点根目录编辑（如果没有，则需要新建一个）_config.linen.yml 文件，然后在文件中加入如下格式的内容：

logo:
  src: /img/linen-logo.svg
  width: 225
  height: 42

请将 src、width、height 替换为对应 logo 图片文件的路径和尺寸。

顶部导航菜单

在 _config.linen.yml 中加入如下格式的内容：

navItems:
  - name: 归档
    path: /archives/

站点信息

在 _config.linen.yml 中加入如下格式的内容：

info:
  site_desc: 一个简约的 Hexo 主题.
  avatar: https://xxx.xxx/xx.jpg
  siteCardBg: https://xxx.xxx/xx.jpg
  registration: 火星ICP备22222222

比如如果需要设置头像图片，添加/修改 info 里的 avatar 字段即可。可以在 https://unsplash.com/s/illustrations/avatar?license=free 上找到一些不错的头像图片。

siteCardBg 是分享网站时展示的封面图片。

懒加载配置

在 _config.linen.yml 中加入如下格式的内容：

lazyload: 
  enable: true,
  loadingImage: "/linen-theme/img/lazyload/loading.svg", // 自定义的 loading 图片
  errorTipImage: "/linen-theme/img/lazyload/error-tip.svg", // 自定义的 Error 图片
  intersectionRatio: 0.25, // 触发加载的图片比例
  placeholderRatio: 3 / 2, // 默认的占位图比例
  showTransition: true, // 是否需要过度动画
  showAltText: true, // 是否展示 Alt 文字到图片下方
  preloadCount: 5 // 预加载的图片数量

以上参数为默认值，可根据实际需要进行修改。

追加 CSS、脚本到 heads

在 _config.linen.yml 中加入如下格式的内容：

heads:
  - <script src="/path-to/your-js.js"></script>
  - <link rel="stylesheet" href="/path-to/your-css.css">

用途：统计代码、添加自定义 CSS。

中英域名

在 _config.linen.yml 中加入如下格式的内容：

siteOriginLocaleMap:
  zh-CN: https://test.cn
  en: https://test.com

效果如下图：

在 _config.linen.yml 中加入如下格式的内容即可：

topArticles:
  - _posts/quick-start.md
  - _posts/lorem.md

重新启动 Hexo 预览变更内容。

值得一提的是，这里的 topArticles 可以配置超过 4 条数据，但是只会渲染前 4 条有效文章。

有效文章指的是，如果我配置了一篇不存在的文章，那么该条记录将被过滤掉。

topArticles:
  - _posts/fake-1.md
  - _posts/fake-2.md
  - _posts/quick-start.md
  - _posts/lorem.md

比如这个例子，fake-1 和 fake-2 其实并不存在，它不影响 quick-start 作为第一篇有效文章。

默认配置为：

feed:
  path: /feed.xml
  limit: 10
  icon: /favicon.svg

可以修改上面 3 个 RSS 配置选项。

如果需要关闭 RSS 插件（或是使用其他的 RSS 插件），可添加下面的配置来关闭内置的 RSS 插件：

feed: false

Linen 主题新增了图片容器，支持以下几种布局的图片排版。请点击页面上的 切换到原始 Markdown 内容 按钮参考页面源码来使用图片排版。

横排

竖排

横竖混排

支持 r73、r37、r64、r46 共 4 种混排比例布局。

如果需要开启 gitalk，在 _config.linen.yml 中加入以下配置：

comment:
  type: gitalk
  client_id: ****
  client_secret: ***
  repo: ***
  owner: ***
  admin:
    - ***
  per_page: 20
  distraction_free_mode: false
  pager_direction: last
  create_issue_manually: false
  proxy: https://cors-anywhere.lynanbreeze.workers.dev/?url=https://github.com/login/oauth/access_token
  flip_move_options: null
  enable_hotkey: true
  language: zh-CN

配置指南

以下内容引用自 Icarus用户指南 - 用户评论插件

1. 登录GitHub并点此注册一个新的OAuth应用。
   填写”应用名称“(Application name)，”应用主页“(Homepage URL)，”应用描述“(Application description)。
   然后，在”认证回调地址“(Authorization callback URL)填写你的博客的根URL地址。
   点击“注册应用”(Register application)按钮来跳转到应用详情界面。

   

2. 复制”Client ID“与”Client Secret“的值并填入主题配置的相应配置项中。

   

   例如，对于下面的”Client ID“和”Client Secret“：

   Client ID
   xxxxxxxxxxxxxxxxxxxx
   Client Secret
   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   

   对应如下的 Gitalk 的配置：

   comment:
     type: gitalk
     client_id: xxxxxxxxxxxxxxxxxxxx
     client_secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
     repo: Some-of-Your-GitHub-Repo
     owner: you_github_name
     admin:
         - you_github_name
     per_page: 20                    # 可选填
     distraction_free_mode: false    # 可选填
     pager_direction: last           # 可选填
     create_issue_manually: false    # 可选填
     proxy:                          # 可选填
     flip_move_options:              # 可选填
     enable_hotkey: true             # 可选填
     language: zh-CN                 # 可选填
   

3. 关于上述配置的含义和可选值，请参考 Gitalk文档 或 hexo-component-inferno。

在封面右下角，可以添加作者或者是位置信息（2选1）。

格式如下：

• 作者信息

  coverInfo: 
    author: freestocks
    url: https://unsplash.com/photos/top-view-of-opened-magazine-near-up-of-coffee-VFs2fZEVkXo
  

• 位置信息

  coverInfo:
    location: 澳门·市政署大楼
    url: https://maps.apple.com/place?address=Avenida%20de%20Almeida%20Ribeiro%20No.%20163,%20Macao%20SAR,%20China&coordinate=22.193346,113.539592&name=%E5%B8%82%E6%94%BF%E7%BD%B2&place-id=IC211FBD448B1E6C&map=explore
  

悬浮文字

有的时候想要写一些说明文字，但是又不想总是在文字后面添加括号（比如这样），可以通过添加下面的配置为文字添加悬浮的说明文案。

比如这里：

customComments:
  - text: 比如这里：
    index: 0
    comment: 看到悬浮文案了吗

隐藏文章

添加下面的配置可以将文章从首页/归档页中去除（不会阻止文章生成，仍可通过 URL 直接访问文章页面）。

hide:
  recent: true
  archive: true

recent: true 配置后文章不会出现在首页中。
archive: true 配置后文章不会出现在归档中。

PhotoSwipe 插件

插件来自 https://photoswipe.com/，如果不需要可以使用如下方式关闭：

全局关闭：在 _config.linen.yml 中添加 photoswipe: false
页面级关闭：在 Front Matter 中添加 photoswipe: false

当文章内没有图片时，即使没有指定 photoswipe: false 也不会加载 PhotoSwipe 插件。

文章目录

在 Front Matter 中有 3 种目录配置：

• 隐藏：toc: false
• 展开：toc: flat
• 自动： 什么都不加

图片懒加载

默认开启，如果不需要可以使用如下方式关闭：

全局关闭：在 _config.linen.yml 中添加

lazyload:
  enable: false

然后需要 npm run clean 清除已构建的文章，否则对已生成文章不会生效。

如果只想要针对某些图片取消懒加载，可以使用以下格式引用图片：

• ![no-lazy](https://abc.com/def.jpg)

• ![This is a image $no-lazy](https://abc.com/def.jpg)

• <img no-lazy src="https://abc.com/def.jpg" alt="def">

这份 Markdown 速查表提供了所有 Markdown 语法元素的快速概览。由于无法涵盖所有​​的边缘情况，如果您需要关于其中任何元素的更多信息，请查阅 基本语法 和 扩展语法 的参考指南。

基本语法

以下是 John Gruber 在其原始设计文档中概述的元素。所有的 Markdown 应用程序都支持这些元素。

标题

H1

H2

H3

粗体

粗体文本

斜体

斜体文本

块引用

块引用

有序列表

1. 第一项
2. 第二项
3. 第三项

无序列表

• 第一项
• 第二项
• 第三项

水平线

删除线

世界是平的。

链接

Markdown 指南

图片

表格

代码

const a = 1;

代码块

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

任务列表

• 撰写新闻稿

• 更新网站

• 联系媒体