修改 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里,所以存在加载顺序问题。且它的功能有限。
之所以在此记录,是因为有个需求:
- markdown中嵌入 iframe 后,iframe 内的按钮可控制全屏效果;
- 所以只能在 vuepress 的 js 文件中写一个全局方法,供 iframe 调用;
- 当 iframe 加载完成后,向 js 发送全局方法请求,然后反向监听 iframe 内的按钮。以此达到全屏效果;
- 可参考 Vuepress markdown 文件中嵌入 iframe 和 JavaScript 对指定元素做全屏效果