├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── README.md ├── components ├── ArticleAbstractList.vue ├── Navbar.vue ├── Pagination.vue ├── SearchBox │ ├── index.vue │ └── search.svg └── SideBar │ ├── index.vue │ └── menu.svg ├── enhanceAppFile.js ├── global-components ├── Badge.vue └── SiteLayout.vue ├── index.js ├── layouts ├── 404.vue ├── Layout.vue └── Post.vue ├── lib └── new.js ├── package.json ├── styles ├── arrow.styl ├── code.styl ├── config.styl ├── custom-blocks.styl ├── index.styl ├── mobile.styl ├── palette.styl ├── toc.styl └── wrapper.styl ├── util └── index.js └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | es6: true 6 | }, 7 | extends: ['plugin:vue/essential', 'plugin:prettier/recommended'], 8 | rules: { 9 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 10 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 11 | 'vue/require-v-for-key': 'off' 12 | }, 13 | parserOptions: { 14 | parser: 'babel-eslint' 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "printWidth": 100, 5 | "trailingComma": "none" 6 | } 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # @yuicer/vuepress-theme-yuicer 2 | 3 | **[示例项目](https://github.com/yuicer/blog)** 4 | 5 | **[页面预览](https://blog.yuicer.com/)** 6 | 7 | > theme for vuepress 8 | 9 | > 由于之前一直在用 hexo ，所以有些功能会和 hexo 比较类似，比如页面的样式，文件目录结构的约定【 \_post , \_draft 】，脚手架命令【 hexo new xxx】 => 【vuepress new docs xxx】，docs 为你的文档站点目录，等同与 `vuepress dev docs` , `vuepress build docs` 这两条命令中的 docs。 10 | 11 | ## 安装使用 12 | 13 | ```shell 14 | npm i @yuicer/vuepress-theme-yuicer 15 | ``` 16 | 17 | ```js 18 | { 19 | // .vuepress/config.js 20 | ..., 21 | theme: '@yuicer/yuicer', 22 | } 23 | ``` 24 | 25 | ### 目录结构 26 | 27 | ``` 28 | docs 29 | |- .vuepress 30 | | |- config.js 31 | |- _post 32 | | |- post.md 33 | |- _draft 34 | | |- draft.md 35 | ``` 36 | 37 | 由于使用了 plugin-blog 插件，文章请放在 \_post 目录下 38 | 39 | **草稿功能** \_draft 用于存放暂不想发布的文稿，⚠️ 这些文稿不会在博客系统中有入口，但依然会被编译，有可以访问到的链接 url 40 | 41 | ### mathjax 支持 42 | 43 | 主题内置了 [markdown-it-katex](https://github.com/waylonflinn/markdown-it-katex), 用来支持数学公式，例如矩阵等复杂操作，[在线尝试地址](http://waylonflinn.github.io/markdown-it-katex/) 44 | 45 | ### 命令行功能 46 | 47 | 在安装成功本主题后，使用 `vuepress --help` 可看到下面的新命令 new 48 | 49 | ~~全局安装 vuepress 脚手架功能 `npm i vuepress -g`~~ 50 | 51 | 建议在项目的 package.json script 脚本中增加一个命令，依托 npm 命令使用，如 52 | 53 | ``` 54 | "scripts": { 55 | "write": "vuepress new docs", 56 | } 57 | ``` 58 | 59 | `vuepress new [targetDir] [title]` 可以方便生成 md 文件。 targetDir 是你的文件目录，类似与上面目录结构的 docs，因为 vuepress 必须知道目标位置，所以必须有这一个路径参数。 60 | 61 | > A custom command registered by a plugin requires VuePress to locate your site configuration like vuepress dev or vuepress build. 62 | > 63 | > 所以一般使用类似于 `vuepress new docs 一起去散步吧～`。 64 | 65 | 生成的 md 会自动生成 yaml 结构，也可以通过 `--tpl