06. Vuepress1.x 嵌入 js 文件

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

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

module.exports = {
    host: 'localhost', // ip
    port: '8099', //端口号
    head: [
        [
            'link', // 设置 favicon.ico，注意图片放在 public 文件夹下
            { rel: 'icon', href: '/images/logo.png' }
        ],
        [
            'script', // js 文件
            { src: '/js/base.js' }
        ]
    ],
    title: '我的技术站', // 设置网站标题，导航栏左侧标题
    description: '描述：我的技术站',
    base: '/', //默认路径
    themeConfig: {// 主题设置
        logo: '/images/logo.png',// 注意图片放在 public 文件夹下
        nav: [
            {
                text: '概述',
                link: '/'
            }, {
    ...
}

下图可以清晰的看出结构

效果图

说明：

这里虽然嵌入了js文件，但这个文件放在 head里，所以存在加载顺序问题。且它的功能有限。

之所以在此记录，是因为有个需求：

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