普遍问题

大约 2 分钟

Adding Markdown Extensions

添加 Markdown 扩展

你可以在配置文件中使用 extendsMarkdown 钩子来添加 Markdown 扩展:

import { defineUserConfig } from "vuepress";

export default defineUserConfig({
  // 站点配置
  // ...

  extendsMarkdown: (md) => {
    md.use(yourExtension, options);
  },
});

import { defineUserConfig } from "vuepress";

export default defineUserConfig({
  // 站点配置
  // ...

  extendsMarkdown: (md) => {
    md.use(yourExtension, options);
  },
});

如何让侧边栏可折叠 / 如何在移动端显示 TOC / 如何在 PC 上将侧边栏置于左侧

为了更好的适应不同尺寸的设备，主题使用响应式布局通过屏幕宽度来调整布局。

由于布局是预渲染的，所有尺寸的屏幕共享相同的 DOM 结构，为了正确的首屏渲染和较佳性能，不同尺寸布局几乎仅通过 CSS 渲染而非脚本控制。在同一 DOM 结构上，我们实现了若干套 CSS 来显示不同布局。这意味着你不能自定义这些布局或者调整它们的顺序。

你唯一可配置的内容就是 CSS 断点，默认的断点如下:

你可以通过样式配置文件来调整这些断点。

比如:

如果你不喜欢宽屏布局，你可以将 $pc 断点设置一个非常大的值:
```
$pc: 9999px;
```
如果你不想要 Pad 布局，你可以将 $tablet 断点和 $pad 断点重合:
```
$tablet: 959px;
```

当然，如果你足够强，你可以自行通过覆盖主题的 CSS 样式来通过这份 DOM 实现你想要的布局。这可能会很困难，但即技术上绝对是可行的。

显示四级或更多级的标题

默认情况下，VuePress 只会从 Markdown 提取 h2 和 h3 标题，所以仅靠配置主题，你永远也看不见 h4 标题。

你需要在 VuePress 配置文件中配置 markdown.headers.levelsopen in new window:

export default {
  markdown: {
    headers: {
      // 用到哪一级就提取哪一级
      levels: [2, 3, 4, 5, 6],
    },
  },

  // 其他配置
  // ...
};

在上方提取更深层级的标题后，你就能在主题选项或页面 Frontmatter 中通过增加 headerDepth 的数值来展示更多标题了。

调整内容宽度

如果你对默认的内容宽度不满意，你可以通过在调色板文件中设置 $content-width 变量来调整内容宽度。

内容宽度很窄

如果你觉得内容宽度很窄，这大概率是你的个人审美问题，因为 vuepress-theme-hope 遵循了最佳布局设计实践。相关讨论与让内容占满屏幕的方式的解决办法，详见此讨论open in new window。