Vuepress Blog2.10.1


Installation and Configration

If you like the blog built by Vuepress, you can fork or clone it and give me a star.

This is a tutorial may help you:

  1. clone the rep:

    git clone https://github.com/chenweigao/vueblog.git
    

    or fork it, and clone form you repo.

  2. install the yarn: https://yarnpkg.com/lang/zh-hans/docs/install/#windows-stable

  3. run the command:

    yarn
    yarn docs:dev
    

    then you can see the site run at: localhost:8080, you can visit it.

  4. in docs/.vuepress/config.js, modify the title to yours, comment out lin 63 - lin 66(or you could register valine and modify the Comments.vue's config)

  5. in docs/.vuepress/blog, delete all of my post and put your post here(do not delete the directory).

  6. in docs/.vuepress/blog/Others/resume.md, replace it by your own resume.

There, everything about your blog is done!

You can deploy this site via Netlify: This is a tutorial, or you follow this:

  1. fork this repo, or push your clones repo to your GitHub.

  2. visit https://app.netlify.com

  3. registe via GitHub account and then click New site from Git, and chose this repo

  4. then fill the deployment command:

    Build Command: yarn docs:build
    
    Publish directory: docs/.vuepress/dist
    
  5. wait... when the build success, then click Domain settings and custom you domains.

More config information could be found at my blog's post Vuepress Blog

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

也可以在 package.json 中的 scripts 下添加自定义的更新命令。

"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "docs:upgrade": "yarn upgrade @next"
}

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: 5/15/2019, 8:46:06 AM