外部脚本与样式

小于 1 分钟

本教程将指导你如何将外部脚本和样式添加到你的站点。

全局

如果你需要添加全局的 CSS 与 JS，请在 VuePress 配置文件中配置 head 选项。

例子

import { defineUserConfig } from "vuepress";

export default defineUserConfig({
  // ...

  head: [
    // ...

    // 导入一个外部脚本
    ["script", { src: "YOUR_SCRIPT_LINK" }],
    // 添加一段脚本
    [
      "script",
      {},
      `\
        // your script here
      `,
    ],
    // 添加一个外部 CSS
    ["link", { rel: "stylesheet", href: "YOUR_STYLE_LINK" }],
    // 添加一段样式
    // 我们不建议这么做，你应该首选使用 .vuepress/style/index.scss
    [
      "style",
      {},
      `\
        /* your style here */
      `,
    ],
  ],

  // ...
});

每页

如果你需要添加页面级别的 CSS 与 JS，请在 frontmatter 中配置 head 选项。

---
head:
  - script: YOUR_SCRIPT_LINK
  - script:
      type: module
      src: YOUR_SCRIPT_LINK
  - style: YOUR_STYLE_LINK
  - style:
      type: text/css
      content: |
        /* your style here */
---

页面内容

...