怎么使用vuepress写笔记

理清怎么去写一个文章的方法。文章的各个结构应该怎么去生成。

用什么文件去写文章
文章的结构划分
文章里的路径
vuepress里配置文件config.js里的路径
让文章进入分类和标签里
内链文章
外链文章

# 用什么文件去写文章

是md文件。vuepress自动会解析里面的内容生成静态HTML文件。
vuepress支持vue2；但是vue3的话我们使用vitepress写笔记。https://vitepress.vuejs.org/ (opens new window)

# 文章的结构划分

# 头部

头部写什么？头部包含什么？有什么作用？

# 头部写什么？

头部写 YAML front matter：https://vuepress.vuejs.org/zh/guide/markdown.html#front-matter (opens new window) 语法。YAML front matter语法里写的都是key:value 形式的键值对。其中key是变量名，value是对应的值。
①——这些变量可以用在主题里面（vuepress自己的主题，docs.vuepress\theme 目录下的vue文件里）；
这些变量在vue文件里的js里可以使用this.$key获取。例如tags变量，可以使用this.$tags获取。

②--还可以在vue模板里使用$frontmatter.key取得。例如主题下的home.vue文件里使用$frontmatter.heroImage取到了docs目录下的子文件README.md里的heroImage变量。当然还有其他全局计算属性可以在主题下的vue文件里使用，参考https://vuepress.vuejs.org/zh/guide/global-computed.html#site (opens new window)

  ---
    title: 怎么使用vuepress写笔记  //文章题目。添加文章的题目和日期有助于头部导航的时间线内容的自动生成
    date: 2020-04-02
    tags:  // 配置文章标签。我们只需要配置这里，然后文章自动会被头部导航的标签页收录进去。
        - 笔记
        - vuepress
    categories: // 配置文章分类。我们只需要配置这里，然后文章自动会被头部导航的分类进对应的分类里去。
        - 前端
    keys:   // 文章加密
    - 'vuepressnote'
    isShowComments: true  // 是否展示评论区
    publish: true   // 文章是否发布。值为false的时候，文章不会出现在分类里面。
    sticky: 1    // 文章在分类列表的顺序
  ---

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 新增加分类

我们直接在上面的categories配置项下配写类名即可，重新打包的时候，新的分类会自动添加到分类导航的下面。

# 标签 Boxx

展示名人名句用的。参考http://zpj80231.gitee.io/znote/views/frontend/vuepress-plugin-boxx.html (opens new window)

  <!-- 直接在md文件里引入即可 -->
  <Bpxx>

1
2

# 给文章添加摘要

在之前的文本会被展示为文章的摘要，文章摘要会在分离的列表里显示出来。参考
是摘要的结束标志，需要写出来。

# 当前页标题 [[toc]]

会自动的在文章里列出本页的所有标题并且添加连接。就和当前页这里的目录一样http://localhost:8080/codenote/other/usevuepresswitenote.html#文章的结构划分 (opens new window)。

# 主体内容

写的内容都可以使用哪些写法去写

# 第一种写法：直接使用MD文档的写法去写，以及还有相应的扩展

参考https://vuepress.vuejs.org/zh/guide/markdown.html# (opens new window) 语法不再赘述

# 第二种写法：使用 vue的语法去写

1、直接使用主题下提供的插件。https://vuepress.vuejs.org/zh/guide/using-vue.html#使用组件 (opens new window)

2、些自己的vue代码。https://vuepress.vuejs.org/zh/guide/using-vue.html# (opens new window) 如下：


<template>
  <div>
    娃哈哈222
  </div>
  
</template>
<script>
    // 这里是js语法，写法和vue2一样
</script>
<style>
    //这里写样式。不过注意的是vuepress只是内置了stylus，其他的还要自己扩展。参考<https://vuepress.vuejs.org/zh/guide/using-vue.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 文章里的路径

/:代表 docs文件夹所在目录；以及 docs/.vuepress/public 所在目录。我们可以查看打包好的文件的目录结构。

# vuepress里配置文件config.js里的路径

# 让文章进入分类和标签里

文章的分类和标签都是自动加入的(只要文章头部有分类和标签)
整个项目重建一次才可以看见文章进入分类和标签里

# 内链文章

直接按照前端的路径去写即可。
对应的文件以 .md 或者 .html 结尾都可。

# 外链文章

我们从其他地方收集的文章，使用外链。
外链文章可以放在：https://gitee.com/wangluoshihuang/static_article 这里

打赏一下

「真诚赞赏，手留余香」

# 打赏记录

打赏者	打助金额 (元)	支付方式	时间	备注
John	12	微信	2020-06-09	tip of you
艾斯	32	支付宝	2020-07-11	火拳赞赏
HickSalmon	15	微信	2020-09-21	有赏交流

helenNote

Choose mode