├── .gitignore ├── README.md ├── docs ├── .vuepress │ ├── components │ │ └── customerComponent.vue │ ├── config.js │ ├── js │ │ └── hello.js │ ├── public │ │ ├── icon.png │ │ └── logo.jpg │ └── style.styl ├── README.md ├── algorithm │ └── README.md ├── books │ ├── 你不知道的javascript上.md │ ├── 你不知道的javascript下.md │ └── 你不知道的javascript中.md ├── common │ ├── README.md │ ├── component.md │ ├── next1.md │ └── next2.md ├── images │ ├── vue │ │ └── 1.png │ └── vuepress │ │ ├── 1.png │ │ ├── 2.png │ │ └── 3.png ├── interview │ └── README.md ├── vue │ └── README.md ├── vuepress │ └── README.md └── webpack │ └── README.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | docs/.vuepress/dist 2 | node_modules 3 | package-lock.json -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 序 2 | 3 | 此仓库提供了一些常用的 VuePress配置案例 4 | 5 | ## 配置截图 6 | 7 | ### 首页 8 | ![首页](docs/images/vuepress/2.png) 9 | ### 基础配置效果 10 | ![首页](docs/images/vuepress/3.png) 11 | ## 目录 12 | ```js 13 | |-- docs 14 | |-- |-- .vuepress 15 | |-- |-- | |--components 16 | |-- |-- | | |--customerComponent.vue 17 | |-- |-- | |--js 18 | |-- |-- | | |--hello.js 19 | |-- |-- | |--public 20 | |-- |-- | | |--icon.png 21 | |-- |-- | | |--logo.jpg 22 | |-- |-- |-- config.js 23 | |-- |-- |-- style.styl 24 | |-- |-- algorithm 25 | |-- |-- |-- README.md 26 | |-- |-- books 27 | |-- |-- |-- 你不知道的javascript上.md 28 | |-- |-- |-- 你不知道的javascript中.md 29 | |-- |-- |-- 你不知道的javascript下.md 30 | |-- |-- interview 31 | |-- |-- |-- README.md 32 | |-- |-- vue 33 | |-- |-- |-- README.md 34 | |-- |-- webpack 35 | |-- |-- |-- README.md 36 | |-- |-- common 37 | |-- |-- |-- README.md 38 | |-- |-- |-- next1.md 39 | |-- |-- |-- next2.md 40 | |-- |-- |-- component.md 41 | |-- |-- images 42 | |-- |-- | |--vue 43 | |-- |-- | | |--1.png 44 | |-- |-- | |--vuepress 45 | |-- |-- | | |--1.png 46 | |-- |-- | | |--2.png 47 | |-- |-- | | |--3.png 48 | |-- |-- README.md 49 | |-- |-- package.json 50 | |-- |-- README.md 51 | ``` 52 | 53 | ## 功能列表 54 | 下面列表展示了此`Demo`详细的配置功能列表 55 | * 首页(已支持) 56 | * 导航栏(已支持) 57 | * 自动生成侧边栏(已支持) 58 | * `icon`配置(已支持) 59 | * 代码块高亮和行号(已支持) 60 | * 端口号(已支持) 61 | * 仓库链接(已支持) 62 | * 最后更新事件(已支持) 63 | * 编辑此页(已支持) 64 | * 静态资源别名(已支持) 65 | * 上一篇/下一篇(已支持) 66 | * 自定义样式(已支持) 67 | * 在Markdown中使用Vue组件(已支持) 68 | * 引用已有的代码片段(已支持) 69 | 70 | ## 安装、启动和打包 71 | 在使用前请先安装VuePress 72 | ```sh 73 | $ npm install -g vuepress 74 | ``` 75 | 76 | 使用`npm run docs:dev`启动项目，启动后在浏览器中使用`localhost:3000`进行访问 77 | ```sh 78 | $ npm run docs:dev 79 | ``` 80 | 81 | 使用`npm run docs:build`打包项目 82 | ```sh 83 | $ npm run docs:build 84 | ``` -------------------------------------------------------------------------------- /docs/.vuepress/components/customerComponent.vue: -------------------------------------------------------------------------------- 1 | 8 | 26 | -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // 页面标题 3 | title: 'VuePress Demo', 4 | // 网页描述 5 | description: '一蓑烟雨、汪汪汪的个人站点', 6 | head: [ 7 | // 页面icon 8 | ['link', { rel: 'icon', href: '/icon.png' }] 9 | ], 10 | // 端口号 11 | port: 3000, 12 | markdown: { 13 | // 代码块行号 14 | lineNumbers: true 15 | }, 16 | themeConfig: { 17 | // 最后更新时间 18 | lastUpdated: '最后更新时间', 19 | // 所有页面自动生成侧边栏 20 | sidebar: 'auto', 21 | // 仓库地址 22 | repo: 'https://github.com/wangtunan/vuepress-blog-demo', 23 | // 仓库链接label 24 | repoLabel: 'Github', 25 | // 编辑链接 26 | editLinks: true, 27 | // 编辑链接label 28 | editLinkText: '编辑此页', 29 | // 导航 30 | nav: [ 31 | { text: '前端面试之道',link: '/interview/'}, 32 | { text: 'JavaScript书籍', items: [ 33 | { text: '你不知道的JavaScript(上)', link: '/books/你不知道的javascript上'}, 34 | { text: '你不知道的JavaScript(中)', link: '/books/你不知道的javascript中'}, 35 | { text: '你不知道的JavaScript(下)', link: '/books/你不知道的javascript下'} 36 | ] 37 | }, 38 | { text: '数据结构和算法', link: '/algorithm/'}, 39 | { text: 'Vue.js', link: '/vue/'}, 40 | { text: 'Webpack',link: '/webpack/'}, 41 | { text: 'VuePress',link: '/vuepress/'}, 42 | { text: '基础配置功能',link: '/common/'} 43 | ]}, 44 | configureWebpack: { 45 | resolve: { 46 | // 静态资源的别名 47 | alias: { 48 | '@vuepress': '../images/vuepress', 49 | '@vue': '../images/vue' 50 | } 51 | } 52 | } 53 | } -------------------------------------------------------------------------------- /docs/.vuepress/js/hello.js: -------------------------------------------------------------------------------- 1 | export default function sayHello () { 2 | console.log('hello, world') 3 | } -------------------------------------------------------------------------------- /docs/.vuepress/public/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangtunan/vuepress-blog-demo/96be5692b932e9c7c8de01638aaafab834633a86/docs/.vuepress/public/icon.png -------------------------------------------------------------------------------- /docs/.vuepress/public/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangtunan/vuepress-blog-demo/96be5692b932e9c7c8de01638aaafab834633a86/docs/.vuepress/public/logo.jpg -------------------------------------------------------------------------------- /docs/.vuepress/style.styl: -------------------------------------------------------------------------------- 1 | .content 2 | code 3 | background-color: #fff5f5; 4 | color: #ff502c; 5 | .customer-page-class 6 | color: #fb3; 7 | background-color: #333; -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | lang: zh-CN 4 | heroText: VuePress Demo 5 | heroImage: /logo.jpg 6 | actionText: 开始 → 7 | actionLink: /interview/ 8 | features: 9 | - title: A Blog 10 | details: 专注写作前端博客，记录日常所得。 11 | - title: For Me 12 | details: 故九万里，则风斯在下矣，而后乃今培风；背负青天，而莫之夭阏者，而后乃今将图南。 13 | - title: For Interview 14 | details: 广州，已入坑ღ( ´･ᴗ･` )比心 15 | footer: Copyright © 2019-present wangtunan 16 | --- -------------------------------------------------------------------------------- /docs/algorithm/README.md: -------------------------------------------------------------------------------- 1 | # 数据结构与算法 -------------------------------------------------------------------------------- /docs/books/你不知道的javascript上.md: -------------------------------------------------------------------------------- 1 | # 你不知道的javascript上 -------------------------------------------------------------------------------- /docs/books/你不知道的javascript下.md: -------------------------------------------------------------------------------- 1 | # 你不知道的javascript下 -------------------------------------------------------------------------------- /docs/books/你不知道的javascript中.md: -------------------------------------------------------------------------------- 1 | # 你不知道的javascript中 -------------------------------------------------------------------------------- /docs/common/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | prev: false 3 | next: /common/next1.md 4 | --- 5 | # 基础配置功能 6 | 7 | ## 自动生成目录 8 | [[toc]] 9 | 10 | ## 代码块高亮及行号 11 | ```js {2, 3, 4} 12 | export default function sayHello () { 13 | console.log('Hello'); 14 | console.log('World'); 15 | console.log('!'); 16 | } 17 | ``` 18 | 19 | ## 静态资源引用 20 | ```md 21 | // 不使用别名引用 22 | ![不使用别名引用](~@vuepess/1.png) 23 | 24 | // 使用别名引用 25 | ![使用别名引用](../images/vuepress/1.png) 26 | 27 | ``` 28 | ### 不使用别名引用 29 | ![不使用别名引用](~@vuepress/1.png) 30 | 31 | ### 使用别名引用 32 | ![使用别名引用](../images/vuepress/1.png) 33 | 34 | ## 使用自定义样式 35 | ::: tip 提醒 36 | 你看到的红色代码块就是自定义样式的效果，它的路径在`.vuepress/style.styl`文件中 37 | ::: 38 | `VuePress` 由两部分组成：一部分是支持用 `Vue` 开发主题的极简静态网站生成器，另一个部分是为书写技术文档而优化的默认主题。它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
39 | 40 | 每一个由 `VuePress` 生成的页面都带有预渲染好的 `HTML`，也因此具有非常好的加载性能和搜索引擎优化（`SEO`）。同时，一旦页面被加载，`Vue` 将接管这些静态内容，并将其转换成一个完整的单页应用（`SPA`），其他的页面则会只在用户浏览到的时候才按需加载。 41 | 42 | ## 在Markdown中使用Vue组件 43 | 查看效果请点击此链接[在Markdown中使用Vue组件](/common/component.md) 44 | 45 | ## 引用已有的代码片段 46 | <<< @/docs/.vuepress/js/hello.js {2} -------------------------------------------------------------------------------- /docs/common/component.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: customerComponent 3 | --- 4 | -------------------------------------------------------------------------------- /docs/common/next1.md: -------------------------------------------------------------------------------- 1 | --- 2 | prev: /common/ 3 | next: /common/next2.md 4 | --- 5 | # 测试一 -------------------------------------------------------------------------------- /docs/common/next2.md: -------------------------------------------------------------------------------- 1 | --- 2 | prev: /common/next1.md 3 | next: false 4 | --- 5 | # 测试一 -------------------------------------------------------------------------------- /docs/images/vue/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangtunan/vuepress-blog-demo/96be5692b932e9c7c8de01638aaafab834633a86/docs/images/vue/1.png -------------------------------------------------------------------------------- /docs/images/vuepress/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangtunan/vuepress-blog-demo/96be5692b932e9c7c8de01638aaafab834633a86/docs/images/vuepress/1.png -------------------------------------------------------------------------------- /docs/images/vuepress/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangtunan/vuepress-blog-demo/96be5692b932e9c7c8de01638aaafab834633a86/docs/images/vuepress/2.png -------------------------------------------------------------------------------- /docs/images/vuepress/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wangtunan/vuepress-blog-demo/96be5692b932e9c7c8de01638aaafab834633a86/docs/images/vuepress/3.png -------------------------------------------------------------------------------- /docs/interview/README.md: -------------------------------------------------------------------------------- 1 | # 前端面试之道 -------------------------------------------------------------------------------- /docs/vue/README.md: -------------------------------------------------------------------------------- 1 | # Vue -------------------------------------------------------------------------------- /docs/vuepress/README.md: -------------------------------------------------------------------------------- 1 | # VuePress -------------------------------------------------------------------------------- /docs/webpack/README.md: -------------------------------------------------------------------------------- 1 | # Webpack -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "docs:dev": "vuepress dev docs", 4 | "docs:build": "vuepress build docs" 5 | } 6 | } 7 | --------------------------------------------------------------------------------