标签：head 嵌入 06 Vuepress2 js vuepress iframe public

 修改 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 对指定元素做全屏效果

标签：head,嵌入,06,Vuepress2,js,vuepress,iframe,public
来源： https://blog.csdn.net/sinat_31213021/article/details/119384644

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。