Vuepress Blog2.10.1


Vuepress Update

Update Plugin & Vuepress

Update the vuepress:

yarn add vuepress@next -D
yarn add @vuepress/plugin-back-to-top -D
yarn add @vuepress/plugin-last-updated@next -D

Add the back-to-top plugin to config.js:

plugins: ['@vuepress/back-to-top']

Run Command

yarn dev:docs # dev model

yarn dev:build # release

Icons

Usng Aliyun icon in vueblog project:

  1. iconfont links

  2. 选择图表并加入购物车,生成项目

  3. 复制代码,引入 css.

  4. 新建 <i class="iconfont icon_code"></i>

    如果是在 botton 中,则使用 <el-button icon="iconfont icon-liuyan"> Comments</el-button>.

Tags beta 0.10.1+

<Badge text="beta" type="warn"/>
<Badge text="0.10.1+" type="tip"/>

Code Collapsing

The <details> <summary></summary> </details> are from HTML5:

inline使用
// code

Source code is:

<details><summary>inline 使用</summary>

//code block

</details>

Markdown extend

LeTex Formula

  1. Install markdown-it-katex: yarn add markdown-it-katex -D.

  2. Modify your config.js in .vuepress

    module.exports = {
    ...
    markdown: {
        extendMarkdown: md => {
        md.use(require("markdown-it-katex"));
        }
    }
    };
    
  3. Add Katex CSS into your theme or anywhere ( in exact markdown file you want to use Katex, in Layout.vue, ... )

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/github-markdown-css/2.2.1/github-markdown.css"/>
    

Custom Containers


:::tip YOUR LABEL
    YOUR CONTENT
:::

:::warning YOUR LABEL
    YOUR CONTENT
:::

:::danger YOUR LABEL
    YOUR CONTENT
:::

:::vue YOUR LABEL
    YOUR CONTENT
:::

Asset Handing/image

将图片放置于 .vuepress/public 目录下,然后引用 ![Image](/imagename.type).

Last Updated: 1/21/2019, 10:13:39 AM