06. Vuepress2.x 嵌入 js 文件

 修改 docs/.vuepress/config.ts 配置文件

• 设置 head 属性。
• 注意：base.js文件放在 docs/.vuepress/public/js 文件夹下，public/js 要手动创建。
• 编译后 dist 文件夹会将 public 文件夹下的文件放出。

module.exports = {
    host: 'localhost', // ip
    port: '8099', //端口号
    title: '我的技术站', // 设置网站标题
    description: '描述：我的技术站',
    base: '/', //默认路径
    head: [
        // 设置 favor.ico，docs/.vuepress/public 下
        [
            'link', { rel: 'icon', href: '/images/logo.png' }
        ],
        
        [
            'link', { rel: 'stylesheet', href: '/css/index.css' }
        ],
        [
            'script', {type: 'text/javascript', src: '/js/base.js'}
        ]
    ],
    themeConfig: {// 主题设置
        ...
    }
}

下图可以清晰的看出结构

效果图

说明：

• 可以看到 head 属性中设置的都可在 html head标签中嵌入；
• 这里虽然嵌入了js文件，但这个文件放在 head里，所以存在加载顺序问题。且它的功能有限；
• 之所以在此记录，是因为有个需求：

1. markdown中嵌入 iframe 后，iframe 内的按钮可控制全屏效果；
2. 所以只能在 vuepress 的 js 文件中写一个全局方法，供 iframe 调用；
3. 当 iframe 加载完成后，向 js 发送全局方法请求，然后反向监听 iframe 内的按钮。以此达到全屏效果；
4. 可参考 Vuepress markdown 文件中嵌入 iframe 和 JavaScript 对指定元素做全屏效果