在 VuePress 中引用自定义 JavaScript 文件可以通过几种方式实现。以下是几种常见的方法：
1. 通过 enhanceApp.js 文件
这是在 VuePress 中注入全局 JavaScript 文件的推荐方式。你可以在 VuePress 项目的 docs/.vuepress 目录下创建一个 enhanceApp.js 文件，并在该文件中引入自定义的 JavaScript 逻辑。
示例步骤：
创建
enhanceApp.js文件：在
docs/.vuepress目录下创建enhanceApp.js，并将自定义 JavaScript 引入其中。// docs/.vuepress/enhanceApp.js export default ({ router, siteData }) => { // 这里可以引入你的自定义 JavaScript console.log("Custom JavaScript has been loaded!"); }如果你有外部的 JS 文件，也可以通过
import或require来引入。// 引入外部的 JS 文件 import customScript from './path/to/customScript.js'; export default ({ router, siteData }) => { customScript(); }
2. 在主题或页面中通过 <script> 标签引用
你可以在自定义的 VuePress 主题文件中直接使用 <script> 标签来加载外部的 JavaScript 文件。
例如，在你的主题或布局文件（例如 Layout.vue 或 404.vue 等）中：
<template>
<div>
<!-- 你的页面内容 -->
</div>
</template>
<script>
export default {
mounted() {
// 通过动态加载外部 JS 文件
const script = document.createElement('script');
script.src = '/path/to/your/script.js';
document.body.appendChild(script);
}
}
</script>3. 通过 head 配置在全局加载 JS
你可以在 config.js 中通过 head 选项加载外部的 JavaScript 文件。
在
docs/.vuepress/config.js文件中：module.exports = { head: [ ['script', { src: '/path/to/your/script.js' }], ], }
这会在页面的 <head> 部分插入一条 <script> 标签，加载指定的外部 JavaScript 文件。
总结：
enhanceApp.js：适用于引入全局 JS 或为 VuePress 应用添加增强功能。- Vue 文件中的
<script>标签：适用于在特定页面或布局中引用 JavaScript。 config.js中的head配置：适用于在所有页面中全局加载 JavaScript 文件。
这几种方法各有适用场景，你可以根据需求选择合适的方式来引入自定义 JavaScript。
引入自定义的 JavaScript 文件：
const sidebar = require('./sitebars/index.js');这一行代码使用
require函数引入了位于sitebars/index.js路径下的 JavaScript 文件，并将其内容赋值给常量sidebar。require函数通常用于 Node.js 或某些模块化的前端框架，用来加载外部的模块或文件。sidebar变量可以用来存储并在代码的其他地方使用这个index.js文件中的内容。可能包含侧边栏导航逻辑或配置。引入自定义的 CSS 文件：
head: [ ['link', { rel: 'stylesheet', href: '/assets/css/index.css' }] ]这一部分代码在某个配置文件（可能是用于页面设置的配置，比如 VuePress 的
config.js）中，用来向 HTML 页面中的<head>标签中插入自定义的 CSS 文件。head是一个包含各种<head>标签内容的数组。在这个数组中，它插入了一条<link>标签，用来加载位于/assets/css/index.css的样式文件。rel: 'stylesheet'表示这是一个样式表（CSS）。href: '/assets/css/index.css'是指向自定义样式文件的路径。
这意味着该代码会在页面加载时应用自定义的 CSS 样式文件，对页面的外观和布局进行定制。
总结：
- 第一段代码引入了一个自定义的 JavaScript 文件，包含侧边栏的功能。
- 第二段代码将自定义的 CSS 文件插入到页面的
<head>部分，确保页面加载时使用自定义样式。
