主题效果总览：文章块与交互组件预览

这篇文章用于集中预览主题在文章页里的主要内容块：标题、段落、链接、引用、提示块、选项卡、表格、代码、图片、脚注、列表和长文本换行。它适合作为主题改样式后的快速回归检查页面。

1. 正文排版

普通段落需要在长时间阅读时保持稳定节奏。这里混合展示 加粗文字、强调文字、行内代码、~~删除线~~、中文标点、English words，以及一个外部链接：Hexo 文档。

当一段文字比较长时，行高、段落间距、链接下划线和深浅色模式下的文字对比都会同时被检查。主题不应该让正文看起来像按钮说明，也不应该让链接被普通文字淹没。

1.1 小标题层级

三级标题适合文章内部的小节。

1.1.1 四级标题

四级标题通常只在较长文章里出现，字号不宜压过三级标题。

2. 列表

无序列表：

首页卡片：标题、摘要、封面和标签需要稳定排列。
文章详情：正文、目录、上一篇/下一篇和互动区共同工作。
移动端：长标题、长链接和图片不能撑破页面。

有序列表：

修改主题样式。
运行本地构建。
打开这篇文章检查所有块。
在浅色和深色模式下各看一遍。

任务列表：

检查普通段落
检查 note 与 tabs
检查真实长文内容

3. 引用块

引用块适合放一段需要从正文中分离出来的话。它应该比普通段落更醒目，但不能抢走 note block 或代码块的层级。

第二段引用用于检查连续段落的间距。

4. Note 提示块

Default 提示用于普通补充说明。这里包含 inline code 和一个内部链接。

Primary 提示通常跟当前主题强调色有关，适合放较重要但不危险的信息。

Success 提示用于完成状态、推荐做法或通过检查的结果。

Info 提示适合放背景信息、兼容性说明和阅读提示。

Warning 提示用于需要注意但不一定错误的内容。

Danger 提示用于破坏性操作、风险说明或强烈不建议的做法。

可折叠提示

带标题的 note 会渲染为可折叠块。展开后应该能正常显示段落、列表和代码：

第一项内容
第二项内容

hexo generate

4.1 VitePress 风格容器

容器语法提示

::: 容器语法会被主题改写为等价的 note block，适合写新文章时减少标签噪音。

没有标题的容器也应该正常显示。

5. Tabs 选项卡

下面的选项卡用于检查按钮组、面板切换、默认激活项和面板内部排版。

选项卡内可以放普通段落、加粗文字 和 行内代码。

这里还有一个嵌套在 tab 内的引用块。

const theme = {
  name: 'framedinfra',
  accent: 'blue',
  noteStyle: 'flat'
};

console.log(`${theme.name}:${theme.accent}`);

这个 tabs 使用 -1，默认不展开任何面板。

note:
  style: flat
  icons: true
code:
  theme: simple

6. 表格

场景	检查点	期望
普通表格	边框、行高、单元格间距	易扫描
长文本	单元格自动换行	不撑破文章区域
行内代码	`code_theme`、`note_style`	颜色清晰
链接	配置页	可识别

7. 代码块

JavaScript:

function buildExcerpt(input, limit = 96) {
  const text = String(input).replace(/<[^>]+>/g, '').trim();
  if (text.length <= limit) return text;
  return text.slice(0, limit) + '...';
}

CSS:

.article-content {
  line-height: 1.75;
  overflow-wrap: break-word;
}

.article-content a {
  text-underline-offset: 3px;
}

Shell:

1 2	hexo clean hexo generate --config _multiconfig.yml

单行代码样式

hexo s

长行代码用于检查横向滚动：

1	https://example.com/articles/theme-preview-checklist?utm_source=demo-blog&utm_medium=markdown&utm_campaign=long-url-wrapping-and-code-scroll-behavior