Vuepress Blog Guide

Someone2018年5月10日大约 4 分钟

Reference

This site is built by Vuepress, Vuepress GitHub

A basic tutorial: zero-to-deploy-build-a-documentation-system-with-vue-and-vuepress

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:

clone the rep:

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

or fork it, and clone form you repo.

install the yarn: https://yarnpkg.com/lang/zh-hans/docs/install/#windows-stable
run the command:
```
yarn
yarn docs:dev
```
then you can see the site run at: localhost:8080, you can visit it.
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)
in docs/.vuepress/blog, delete all of my post and put your post here(do not delete the directory).
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:

fork this repo, or push your clones repo to your GitHub.
visit https://app.netlify.com
registe via GitHub account and then click New site from Git, and chose this repo

then fill the deployment command:

Build Command: yarn docs:build

Publish directory: docs/.vuepress/dist

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 中的依赖到最新版本，则可以使用：

yarn upgrade-interactive --latest

需要手动选择升级的依赖包，按空格键选择，a 键切换所有，i 键反选选择。

也可以在 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 nginxig.js:

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

Run Command:

yarn dev:docs # dev model

yarn dev:build # release

Icons

Usng Aliyun icon in vueblog project:

iconfont links
选择图表并加入购物车，生成项目
复制代码，引入 css.
新建 <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"/>

Markdown extend

LeTex Formula

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

Modify your nginxig.js in .vuepress

module.exports = {
...
markdown: {
    extendMarkdown: md => {
    md.use(require("markdown-it-katex"));
    }
}
};

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
:::

vuepress-plugin-tabs

参考这个教程

:::: tabs type:card ::: tab MyTitle

def a:
    return 0

:::

::: tab MyTitle2 this is a tab ::: ::::

Asset Handing/image

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

引入代码块的方法

引入默认折叠的代码块

<RecoDemo :collapse="false">
<template slot="code-python">
  <<< @/docs/.vuepress/code/dfs.py
</template>
</RecoDemo>

引入默认展开的代码块

<RecoDemo :collapse="true">
<template slot="code-python">
  <<< @/docs/.vuepress/code/dfs.py
</template>
</RecoDemo>

更多的折叠方式可以参考官方文档

代码块折叠

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

inline使用

// code

Source code is:

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

//code block

</details>

格式化文件标准

---
title: 烤鸭的做法
date: 2019-08-08
sidebar: 'auto'
category:
 - 烹饪
 - 爱好
tag:
 - 烤
 - 鸭子
keys:
 - '123456' 注意这里用加密文
publish: false
sticky: 2
---

加密算法

如果你的密码是 123456，需要将密码字符串设置为32位的 md5 加密密文。 md5加密

一般写作时复制如下代码：

---
title: 
date: 2018-5-10
tag:
 - vue.js
category:
 - Projects
---

bug fix

momment.js 时区问题

使用 moment.js 在 vuepress 项目中时，会产生时区偏差，在本地正常，在服务器端会产生 8 个小时的偏差。

解决方法（2020年5月14日）：

使用 Moment Timezone。

在项目中安装：yarn add moment-timezone 并在 config.js 中使用；
编写时区代码：

'@vuepress/last-updated',{
  transformer: (timestamp, lang) => {
    // Don't forget to install moment yourself
    // const moment = require('moment')
    var moment = require('moment-timezone');
    moment.locale('zh-cn');
    var jz = moment(timestamp)
    time_res = jz.tz("Asia/Shanghai")
    // return moment(timestamp).moment.tz("Asia/Shanghai").format('llll')
    return time_res.format('llll')
  }
}

如此就成功转换了时区，并格式化为英文。

VueBlog 出现崩溃

时间：2020年5月17日

问题：移动端界面一直卡在加载中，电脑端乱码，原因未知

解决方案：

尝试清除缓存重新 Build，并提交新的 commit，修改成功，bug 原因未知。