SummerGao Books

Add user authorization for VuePress

一、展示本页目录：

[[toc]]

• Add user authorization for VuePress
• 一、展示本页目录：
• 二、标题使用
• 二级标题
  • 三级标题
• 三、代码块
• 四、使用表格
  • 1. 简单表格
  • 2. 复杂表格
• 五、 Emoji 🎉 💯 🐘
• 六、 Vue表达式
• 七、 v-pre
• 八、官网插件
  • 1. @vuepress/plugin-active-header-links
  • 安装
  • 使用
  • 配置选项
  • 选项
  • 2. @vuepress/plugin-back-to-top
  • 安装
  • 使用
• 九、Markdown首行缩进
• 十、自定义容器
  • 在你的 VuePress 站点中注册新的 Markdown 容器。
• 十一、 Markdown文档常用字体及颜色设置
  • 1、字体、字号、颜色设置
  • 2、加粗、斜体设置
  • 3、背景色设置
  • 4、文字的居中
• 十二、在Markdown中打出上标、下标和一些特殊符号
  • 上标
  • 下标
• 十三、vuepress-login 实现
• 配置参考
• 跨域问题
• 十四、axios拦截器判断401 / 全局给header添加token
• 十五、v-dialogs
  • 参考
  • 对话框图标
• 十六、Markdown 插件的添加
  • 引入公式插件
  • 常用公式模板
• 十七、在 Markdown 中 使用 Vue
  • 浏览器的 API 访问限制
• 十八、自定义彩带动画组件
• 十九、集成音乐播放器
  • 方案一
  • 方案二
  • 网易云歌词生成工具
• 二十、注释
• 二十一、静态资源
  • 1. 引用图片
  • 2. 把图片存入markdown文件
  • 3. 插入网络图片
• 二十二、集成md5
  • 安装
  • 引用
• 二十三 网站分析工具实现
  • 工具名称与范围
  • Install
  • Usage
  • Options
  • Install
  • Usage
  • Options
• 二十三、网站首页添加备案号

二、标题使用

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

三、代码块

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

四、使用表格

1. 简单表格

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

2. 复杂表格

markdown绝大多数编辑器都是支持html语言的，markdown本身不支持复杂的表格，所以使用html来编辑即可。

<table>
    <tr>
        <th rowspan="2">真实情况</th>
        <th colspan="2">预测结果</th>
    </tr>
    <tr>
        <td>正例</td>
        <td>反例</td>
    </tr>
    <tr>
        <td>正例</td>
        <td>TP(真正例)</td>
        <td>FN(假反例)</td>
    </tr>
    <tr>
        <td>反例</td>
        <td>FP(假正例)</td>
        <td>TN(真反例)</td>
    </tr>
</table>

真实情况	预测结果
	正例	反例
正例	TP(真正例)	FN(假反例)
反例	FP(假正例)	TN(真反例)

• 使用跨行或者跨列时，使用th标签
• 跨行： rowspan的的参数就是要跨的行数
• 跨列： colspan的参数就是要跨的列数

五、 Emoji 🎉 💯 🐘

:tada: :100: :elephant: :1234: :grinning:  
:ghost: :ring: :snail: :cow2: :mountain_railway:

🎉 💯 🐘 🔢 😀
👻 💍 🐌 🐄 🚞
你可以在这个列表 (opens new window)找到所有可用的 Emoji。

六、 Vue表达式

{{ 1 + 1 }}
<span v-for="i in 3">{{ i }} </span>
{{ $page }}

2
1 2 3
{ "title": "SummerGao Books", "frontmatter": {}, "regularPath": "/guide/markdown/", "relativePath": "guide/markdown/README.md", "key": "v-6fddd67a", "path": "/guide/markdown/", "headers": [ { "level": 2, "title": "Add user authorization for VuePress", "slug": "add-user-authorization-for-vuepress" }, { "level": 2, "title": "一、展示本页目录：", "slug": "一、展示本页目录" }, { "level": 2, "title": "二、标题使用", "slug": "二、标题使用" }, { "level": 2, "title": "二级标题", "slug": "二级标题" }, { "level": 3, "title": "三级标题", "slug": "三级标题" }, { "level": 4, "title": "四级标题", "slug": "四级标题" }, { "level": 5, "title": "五级标题", "slug": "五级标题" }, { "level": 6, "title": "六级标题", "slug": "六级标题" }, { "level": 2, "title": "三、代码块", "slug": "三、代码块" }, { "level": 2, "title": "四、使用表格", "slug": "四、使用表格" }, { "level": 3, "title": "1. 简单表格", "slug": "_1-简单表格" }, { "level": 3, "title": "2. 复杂表格", "slug": "_2-复杂表格" }, { "level": 2, "title": "五、 Emoji 🎉 💯 🐘", "slug": "五、-emoji" }, { "level": 2, "title": "六、 Vue表达式", "slug": "六、-vue表达式" }, { "level": 2, "title": "七、 v-pre", "slug": "七、-v-pre" }, { "level": 2, "title": "八、官网插件", "slug": "八、官网插件" }, { "level": 3, "title": "1. @vuepress/plugin-active-header-links", "slug": "_1-vuepress-plugin-active-header-links" }, { "level": 3, "title": "安装", "slug": "安装" }, { "level": 3, "title": "使用", "slug": "使用" }, { "level": 3, "title": "配置选项", "slug": "配置选项" }, { "level": 3, "title": "选项", "slug": "选项" }, { "level": 4, "title": "sidebarLinkSelector", "slug": "sidebarlinkselector" }, { "level": 4, "title": "headerAnchorSelect", "slug": "headeranchorselect" }, { "level": 3, "title": "2. @vuepress/plugin-back-to-top", "slug": "_2-vuepress-plugin-back-to-top" }, { "level": 3, "title": "安装", "slug": "安装-2" }, { "level": 3, "title": "使用", "slug": "使用-2" }, { "level": 2, "title": "九、Markdown首行缩进", "slug": "九、markdown首行缩进" }, { "level": 2, "title": "十、自定义容器", "slug": "十、自定义容器" }, { "level": 3, "title": "在你的 VuePress 站点中注册新的 Markdown 容器。", "slug": "在你的-vuepress-站点中注册新的-markdown-容器。" }, { "level": 4, "title": "安装", "slug": "安装-3" }, { "level": 4, "title": "使用", "slug": "使用-3" }, { "level": 4, "title": "配置项", "slug": "配置项" }, { "level": 5, "title": "type", "slug": "type" }, { "level": 5, "title": "defaultTitle", "slug": "defaulttitle" }, { "level": 5, "title": "before", "slug": "before" }, { "level": 5, "title": "after", "slug": "after" }, { "level": 5, "title": "validate", "slug": "validate" }, { "level": 5, "title": "render", "slug": "render" }, { "level": 5, "title": "marker", "slug": "marker" }, { "level": 5, "title": "演示", "slug": "演示" }, { "level": 2, "title": "十一、 Markdown文档常用字体及颜色设置", "slug": "十一、-markdown文档常用字体及颜色设置" }, { "level": 3, "title": "1、字体、字号、颜色设置", "slug": "_1、字体、字号、颜色设置" }, { "level": 3, "title": "2、加粗、斜体设置", "slug": "_2、加粗、斜体设置" }, { "level": 3, "title": "3、背景色设置", "slug": "_3、背景色设置" }, { "level": 3, "title": "4、文字的居中", "slug": "_4、文字的居中" }, { "level": 2, "title": "十二、在Markdown中打出上标、下标和一些特殊符号", "slug": "十二、在markdown中打出上标、下标和一些特殊符号" }, { "level": 3, "title": "上标", "slug": "上标" }, { "level": 3, "title": "下标", "slug": "下标" }, { "level": 2, "title": "十三、vuepress-login 实现", "slug": "十三、vuepress-login-实现" }, { "level": 2, "title": "配置参考", "slug": "配置参考" }, { "level": 2, "title": "跨域问题", "slug": "跨域问题" }, { "level": 2, "title": "十四、axios拦截器判断401 / 全局给header添加token", "slug": "十四、axios拦截器判断401-全局给header添加token" }, { "level": 2, "title": "十五、v-dialogs", "slug": "十五、v-dialogs" }, { "level": 3, "title": "参考", "slug": "参考" }, { "level": 3, "title": "对话框图标", "slug": "对话框图标" }, { "level": 2, "title": "十六、Markdown 插件的添加", "slug": "十六、markdown-插件的添加" }, { "level": 3, "title": "引入公式插件", "slug": "引入公式插件" }, { "level": 3, "title": "常用公式模板", "slug": "常用公式模板" }, { "level": 2, "title": "十七、在 Markdown 中 使用 Vue", "slug": "十七、在-markdown-中-使用-vue" }, { "level": 3, "title": "浏览器的 API 访问限制", "slug": "浏览器的-api-访问限制" }, { "level": 2, "title": "十八、自定义彩带动画组件", "slug": "十八、自定义彩带动画组件" }, { "level": 2, "title": "十九、集成音乐播放器", "slug": "十九、集成音乐播放器" }, { "level": 3, "title": "方案一", "slug": "方案一" }, { "level": 3, "title": "方案二", "slug": "方案二" }, { "level": 3, "title": "网易云歌词生成工具", "slug": "网易云歌词生成工具" }, { "level": 2, "title": "二十、注释", "slug": "二十、注释" }, { "level": 2, "title": "二十一、静态资源", "slug": "二十一、静态资源" }, { "level": 3, "title": "1. 引用图片", "slug": "_1-引用图片" }, { "level": 3, "title": "2. 把图片存入markdown文件", "slug": "_2-把图片存入markdown文件" }, { "level": 3, "title": "3. 插入网络图片", "slug": "_3-插入网络图片" }, { "level": 2, "title": "二十二、集成md5", "slug": "二十二、集成md5" }, { "level": 3, "title": "安装", "slug": "安装-4" }, { "level": 3, "title": "引用", "slug": "引用" }, { "level": 2, "title": "二十三 网站分析工具实现", "slug": "二十三-网站分析工具实现" }, { "level": 3, "title": "工具名称与范围", "slug": "工具名称与范围" }, { "level": 3, "title": "Install", "slug": "install" }, { "level": 3, "title": "Usage", "slug": "usage" }, { "level": 3, "title": "Options", "slug": "options" }, { "level": 4, "title": "hm", "slug": "hm" }, { "level": 4, "title": "ga", "slug": "ga" }, { "level": 4, "title": "ignore_hash", "slug": "ignore-hash" }, { "level": 3, "title": "Install", "slug": "install-2" }, { "level": 3, "title": "Usage", "slug": "usage-2" }, { "level": 3, "title": "Options", "slug": "options-2" }, { "level": 4, "title": "hm", "slug": "hm-2" }, { "level": 2, "title": "二十三、网站首页添加备案号", "slug": "二十三、网站首页添加备案号" } ], "lastUpdated": "1/10/2021, 7:08:48 PM" }

七、 v-pre

::: v-pre
`{{ This will be displayed as-is }}`
:::

{{ This will be displayed as-is }}

八、官网插件

1. @vuepress/plugin-active-header-links

TIP

页面滚动时自动激活侧边栏链接的插件

安装

yarn add -D @vuepress/plugin-active-header-links
# OR npm install -D @vuepress/plugin-active-header-links

使用

module.exports = {
  plugins: ['@vuepress/active-header-links']
}

配置选项

module.exports = {
  plugins: ['@vuepress/active-header-links', {
    sidebarLinkSelector: '.sidebar-link',
    headerAnchorSelector: '.header-anchor'
  }]
}

选项

sidebarLinkSelector

• 类型: string
• 默认值: .sidebar-link

headerAnchorSelect

• 类型: string
• 默认值: .header-anchor

2. @vuepress/plugin-back-to-top

安装

  yarn add -D @vuepress/plugin-back-to-top
  # OR npm install -D @vuepress/plugin-back-to-top

使用

module.exports = {
  plugins: ['@vuepress/back-to-top']
}

九、Markdown首行缩进

在markdown中有两种方法实现首行缩进：

1. 把输入法由半角改为全角。 两次空格之后就能够有两个汉字的缩进。
2. 在开头的时候，先输入如下片段，然后紧跟着输入文本即可。分号也不要掉。

       

十、自定义容器

::: tip
这是一个提示
:::

::: warning
这是一个警告
:::

::: danger
这是一个危险警告
:::

::: details
这是一个详情块，在 IE / Edge 中不生效
:::

TIP

这是一个提示

WARNING

这是一个警告

WARNING

这是一个危险警告

详情信息

这是一个详情块，在 IE / Edge 中不生效

你也可以自定义块中的标题：

::: danger STOP
危险区域，禁止通行
:::

::: details 点击查看代码
```js
console.log('你好，VuePress！')
```
:::

STOP

危险区域，禁止通行

点击查看代码

console.log('你好，VuePress！')

在你的 VuePress 站点中注册新的 Markdown 容器。

安装

yarn add -D vuepress-plugin-container

使用

// .vuepress/config.js
module.exports = {
  plugins: [
    // 你可以多次使用这个插件
    [
      'vuepress-plugin-container',
      {
        type: 'right',
        defaultTitle: '',
      },
    ],
    [
      'vuepress-plugin-container',
      {
        type: 'theorem',
        before: info => `<div class="theorem"><p class="title">${info}</p>`,
        after: '</div>',
      },
    ],

    // 这是 VuePress 默认主题使用这个插件的方式
    [
      'vuepress-plugin-container',
      {
        type: 'tip',
        defaultTitle: {
          '/': 'TIP',
          '/zh/': '提示',
        },
      },
    ],
    // 自定义details容器
    [
        'vuepress-plugin-container',
        {
            type: 'details',
            before: info => `<details class="custom-block details"><summary class="title">${info}</summary>`,
            after: '</details>',
        },
    ],
  ],
}

// .vuepress/styles/index.styl
.theorem
  margin 1rem 0
  padding .1rem 1.5rem
  border-radius 0.4rem
  background-color #f0f4f8
  .title
    font-weight bold

.custom-block
  &.right
    color transparentify($textColor, 0.4)
    font-size 0.9rem
    text-align right

.custom-block
  &.details
    display block;
    position relative;
    border-radius 2px;
    margin 1.6em 0;
    padding 1.6em;
    background-color #eee;

配置项

type

• 类型: string
• 这是一个必需的选项

容器的类型。举个例子，如果 type 被设置为 foo，则仅有下面的语法会被解析为 markdown 容器：

::: foo bar
随便写点啥 ~
:::

defaultTitle

• 类型: string | Record<string, string>
• 默认值: type 的大写形式

容器的默认标题。如果没有提供标题，则会使用 defaultTitle 作为容器的标题。

提供一个对象作为多语言配置，则默认标题将会基于当前 locale 选取。

before

• 类型: string | ((info: string) => string)
• 默认值: undefined

要插入在容器前的 HTML。

如果设置为一个函数，将传入当前的 info 作为第一个参数。（在上面的例子中，info 的值为 bar。）

如果设置了 before 的值， defaultTitle 将会被忽略。

after

• 类型: string | ((info: string) => string)
• 默认值: undefined

要插入在容器后的 HTML。

如果设置为一个函数，将传入当前的 info 作为第一个参数。（在上面的例子中，info 的值为 bar。）

validate

• 类型: ((params: string) => boolean)
• 默认值: undefined

一个用于判定容器是否结束的函数。当认定容器范围结束时应返回一个 true。
参考 markdown-it-container API (opens new window)

render

• 类型: Function
• 默认值: undefined

容器开头和结束 token 的渲染函数。如果设置了这个值， before, after 和 defaultTitle 都将被忽略。
参考 markdown-it-container API (opens new window)

marker

• 类型: string
• 默认值: ':'

用于分隔符的字符。
参考 markdown-it-container API (opens new window)

演示

输入

::: theorem 牛顿第一定律
假若施加于某物体的外力为零，则该物体的运动速度不变。

::: right
来自 [维基百科](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
:::
:::

::: tip
`@vuepress/theme-default` 的提示容器
:::

输出

牛顿第一定律

假若施加于某物体的外力为零，则该物体的运动速度不变。

来自 维基百科 (opens new window)

TIP

@vuepress/theme-default 的提示容器

参考

• vuepress-plugin-container (opens new window)

十一、 Markdown文档常用字体及颜色设置

1、字体、字号、颜色设置

<font face="微软雅黑" >微软雅黑字体</font>
<font face="黑体" >黑体</font>
<font size=3 >3号字</font>
<font size=4 >4号字</font>
<font color=#FF0000 >红色</font>
<font color=#008000 >绿色</font>
<font color=#0000FF >蓝色</font>

微软雅黑字体
黑体
3号字
4号字
红色
绿色
蓝色

TIP

字体、字号以及颜色可在<font …… 中同时设置，如可对文字“微软雅黑字体”设置格式：

<font face="微软雅黑" size=6 color=#FF0000 >微软雅黑字体</font>

微软雅黑字体

2、加粗、斜体设置

**粗体文字**,或__粗体文字__

显示效果如下：
粗体文字,或__粗体文字__

*斜体文字*,或_斜体文字_

显示效果如下：
斜体文字,或_斜体文字_

3、背景色设置

借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色的功能。

<table><tr><td bgcolor=orange> 背景色是 1 orange</td></tr></table>
<table><tr><td bgcolor= BlueViolet > 背景色2 BlueViolet </td></tr></table>

背景色是 1 orange

背景色2 BlueViolet

4、文字的居中

<center>这一行需要居中</center>  

这一行需要居中

十二、在Markdown中打出上标、下标和一些特殊符号

上标

上标的HTML标签的是< sup >，所以如果要打上标的话就用以下格式：

<sup>xxx</sup>

其中xxx表示上标的内容，看个例子：
我现在想写一个公式：n的平方等于n+1，写法如下：

n<sup>2</sup>=n+1

显示效果就是：
n²=n+1

下标

下标的标签是< sub >，同理我们来实现一个例子： a=log₂b 写法如下：

a=log<sub>2</sub>b

a=log₂b
还有一些特殊的、键盘上没有的符号也可以打出来，比如注册商标的符号：立白®

立白®

立白®
function符号:ƒ可以轻松得打出函数式：ƒ(x)=x+1

ƒ(x)=x+1

ƒ(x)=x+1
角度符号：30°

30°

30°
想要了解更多特殊符号的打法请查阅下面这个链接：
HTML中的特殊符号 (opens new window)

十三、vuepress-login 实现

配置参考

参考源码TerryZ GitHub：vuepress-login (opens new window)
或参考源码SummerGaoBooks Github：vuepress-login (opens new window)

跨域问题

1. 修改：lorawan_server.config 文件

  <<"Access-Control-Allow-Headers">> => <<"Authorization, Content-Type">>,

关机键是添加： Authorization
参考问题 lorawan_server#600： (opens new window)
2. axios配置

axios({
    method: 'get',
    url: url,
    headers: { // 默认添加请求头
        "Authorization": 'Basic ' + btoa(self.username + ':' + self.password)
    },
    responseType: 'json'
}).then(function (response) {
    console.log(response.data);
    if (response.data.code === 0) {
        window.localStorage.setItem(STORAGE_KEY, data);
        self.$emit('close', true);
    } else {
        window.localStorage.setItem(STORAGE_KEY, "");
    }

});

关键是添加：

headers: { // 默认添加请求头
    "Authorization": 'Basic ' + btoa(self.username + ':' + self.password)
},

Axios参考： (opens new window)

十四、axios拦截器判断401 / 全局给header添加token

axios.interceptors.request.use(function (config) {    // 这里的config包含每次请求的内容
    let token = getToken()
    if (token) {
          config.headers.Authorization = 'JWT '+ `${token}`;
    }else {
        window.location.pathname = '/login'
    }
    return config;
}, function (err) {
    return Promise.reject(err);
})
//拦截器
axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 返回 401 清除token信息并跳转到登录页面
          confirm('过期')
          router.replace({
            path: '/login'
          })
          location.reload()
      }
    }
    return Promise.reject(error.response.data)   // 返回接口返回的错误信息
  })

十五、v-dialogs

参考

• v-dialogs文档 (opens new window)

对话框图标

在消息对话框（Alert）中使用的图标来自于 Elegant Themes (opens new window)

操作按钮图标以及边角窗口中使用的图标来自于 IconFont (opens new window)

十六、Markdown 插件的添加

通过安装并配置 markdown-it 插件便可在 Markdown 中使用新的 Mardown 特性
安装

yarn add markdown-it-xxx # or npm install markdown-it-xxx

配置 docs/.vuepress/config.js

module.exports = {
  markdown: {
    extendMarkdown: md => {
      // 使用更多的 markdown-it 插件!
      md.use(require('markdown-it-xxx'))
    }
  }
}

下面推荐几个有用的插件

• markdown-it-mark 在词语两侧添加 == 即可对其实现 高亮 的效果，非常简单实用
• @iktakahiro/markdown-it-katex 可在 Markdown 内解析 ${\KaTeX}$ 但是其依赖 CSS，所以需要额外在 docs/.vuepress/styles/index.styl 中
  添加 @import "https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css"

引入公式插件

1. 安装

yarn add -D markdown-it-katex
yarn add -D @iktakahiro/markdown-it-katex

2. 配置 docs/.vuepress/config.js

//Markdown 插件
markdown: {
    lineNumbers: true,//是否在每个代码块的左侧显示行号
    extractHeaders: [ 'h2', 'h3', 'h4', 'h5' ],//通过这个选项来修改提取出的标题级别,默认值: ['h2', 'h3']
    extendMarkdown: md => {
        // 使用更多的 markdown-it 插件!
        md.use(require('markdown-it-mark'));
        md.use(require('@iktakahiro/markdown-it-katex'));
        // md.use(require('markdown-it-katex'));
    }
},

说明

在 config.js 中配置的 markdown 配置都是在编译时便解析完成的，所以配置 markdown-it-katex 后可能会导致编译时间特别长，但是当前其是一个非常有效的方式 另外也可以使用插件 vuepress-plugin-mathjax （是 vuepress 插件不是 markdown-it 插件）在前端进行渲染，但是我在使用的时候发生了一些问题，尚待解决。

两个$字符之间的任何字符都将被视为TeX数学。开头的$必须在其右边紧跟一个非空格字符，而结尾的$必须在其左边紧接一个非空格字符，并且不能紧跟一个数字。因此，$ 20,000和$ 30,000不会解析为数学。如果您出于某种原因需要将文本括在$字符中，请使用反斜杠将其转义，这样它们就不会被视为数学定界符

katex-docs公式文档： (opens new window)
katex-demo编辑器： (opens new window)

常用公式模板

$\LARGE i=\dfrac{r}{m}$

$\LARGE i=\dfrac{r}{m}$

\LARGE i_{eff}=(1+\dfrac{r}{m})^m-1

$\LARGE i_{eff}=(1+\dfrac{r}{m})^m-1$

十七、在 Markdown 中 使用 Vue

浏览器的 API 访问限制

当你在开发一个 VuePress 应用时，由于所有的页面在生成静态 HTML 时都需要通过 Node.js 服务端渲染，因此所有的 Vue 相关代码都应当 遵循 编写通用代码 (opens new window) 的要求。简而言之，请确保只在 beforeMount 或者 mounted 访问浏览器 /DOM 的 API。
如果你正在使用，或者需要展示一个对于 SSR 不怎么友好的组件（比如包含了自定义指令），你可以将它们包裹在内置的 <ClientOnly> 组件中：

<ClientOnly>
  <NonSSRFriendlyComponent/>
</ClientOnly>

请注意，这并不能解决一些组件或库在导入时就试图访问浏览器 API 的问题 —— 如果需要使用这样的组件或库，你需要在合适的生命周期钩子中动态导入它们：

<script>
export default {
  mounted () {
    import('./lib-that-access-window-on-import').then(module => {
      // use code
    })
  }
}
</script>

如果你的模块通过 export default 导出一个 Vue 组件，那么你可以动态注册它：

<template>
  <component v-if="dynamicComponent" :is="dynamicComponent"></component>
</template>
<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted () {
    import('./lib-that-access-window-on-import').then(module => {
      this.dynamicComponent = module.default
    })
  }
}
</script>

参考:

• vuepress官方文档： (opens new window)
• Vue.js > 动态组件: (opens new window)

十八、自定义彩带动画组件

<ribbon-anim></ribbon-anim>

十九、集成音乐播放器

方案一

• GitHub： (opens new window)
• 文档： (opens new window)

<ClientOnly>
   <aplayer/>
</ClientOnly> 

方案二

• GitHub： (opens new window)
• 文档： (opens new window)

<ClientOnly>
   <vue-aplayer></vue-aplayer>
</ClientOnly> 

网易云歌词生成工具

• GitHub: (opens new window)

二十、注释

[注释]:这里写注释
<!-- [注释]:这里写注释 -->

二十一、静态资源

1. 引用图片

所有的 Markdown 文件都会被 webpack 编译成 Vue 组件，因此你可以，并且应该更倾向于使用相对路径 （Relative URLs）来引用所有的静态资源：

![An image](./image.png)    

举例：

![An image](./images/1.png)   

同样地，这在 *.vue 文件的模板中一样可以工作，图片将会被 url-loader 和 file-loader 处理，在 运行生成静态文件的构建任务时，文件会被复制到正确的位置。

除此之外，你也使用 ~ 前缀来明确地指出这是一个 webpack 的模块请求，这将允许你通过 webpack 别 名来引用文件或者 npm 的依赖：

![Image from alias](~@alias/image.png)
![Image from dependency](~some-dependency/image.png)

Webpack 的别名可以通过 .vuepress/config.js 中 configureWebpack (opens new window) 来配置，如：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@alias': 'path/to/some/dir'
      }
    }
  }
}

原文地址： (opens new window)

2. 把图片存入markdown文件

用base64转码工具把图片转成一段字符串，然后把字符串填到基础格式中链接的那个位置。

![base64str](data:image/png;base64,iVBOR......)

参考： (opens new window)
在线任意图片转Base64编码工具 - aTool在线工具： (opens new window)

3. 插入网络图片

只需要在基础语法的括号中填入图片的网络链接即可，现在已经有很多免费/收费图床和方便传图的小工具可选。

![avatar](https://cdn.balkan.app/shared/9.jpg)

二十二、集成md5

安装

yarn add -D js-md5

引用

import md5 from 'js-md5';

二十三 网站分析工具实现

工具名称与范围

• Google Analytics (GA)：国际免费工具 - http://analytics.google.com
• 百度统计：国内免费工具 - http://tongji.baidu.com
• CNZZ统计：国内免费工具 - http://quanjing.cnzz.com
• Adobe Analytics：国外付费工具 - http://www.adobe.com
• Folks Analytics：国际付费工具 - http://www.folksanalytics.com/
• 小富分析：国内付费工具 - http://www.folksanalytics.net/

vuepress-plugin-baidu-google-analytics

Google analytics and Baidu tongji plugin for vuepress

Install

yarn add -D vuepress-plugin-baidu-google-analytics
# OR
npm install -D vuepress-plugin-baidu-google-analytics

Usage

module.exports = {
  plugins: [
    ['vuepress-plugin-baidu-google-analytics', {
      hm: 'abcdefghijklmnopqrstuvwxyz123456',
      ga: 'abcdefghijklmnopqrstuvwxyz123456',
      ignore_hash: false
    }]
  ]
}

Options

hm

• Type: string
• Default: undefined

Provide the Baidu Tongji ID to enable Baidu Tongji.

ga

• Type: string
• Default: undefined

Provide the Google Analytics ID to enable Google Analytics.

ignore_hash

• Type: boolean
• Default: false

If enable, same page with different hash (after #) will not be count multiple times.

vuepress-baidu-tongji

Install

yarn add -D vuepress-baidu-tongji
# OR npm install -D vuepress-baidu-tongji

Usage

module.exports = {
  plugins: ['vuepress-baidu-tongji', {
    hm: 'abcdefghijklmnopqrstuvwxyz123456'
  }]
}

Options

hm

• Type: string
• Default: undefined

Provide the Baidu Tongji ID to enable integration.

二十三、网站首页添加备案号

1、注释掉：footer

---
home: true
# footer: 鲁ICP备XXXXXX号
# ↑↑↑ 把 footer 注释掉 ↑↑↑
---    

2、添加如下代码：

<div class="footer">
    <div>
        <p><span>MIT Licensed | Copyright</span><span> © </span><span>2018-present </span><a href="http://www.summergao.com" target="_blank">SummerGao</a></p>
        <p><a href="https://beian.miit.gov.cn/" target="_blank">鲁ICP备XXXXXX号</a></p>
    </div>
</div>