43 |
68 |
69 | 
6 |
5 |
6 |
A VuePress-next template to build a static web site as blog and knowledge management system.
9 | 10 | ## Introduction 11 | *"Two dishes one fish"* is a smart cuisine using different part of one fish to make two delicious dishes, inspired by it I want to build web site as a blog and a knowledge management system, with the same Markdown files system. 12 | 13 | I choose [VuePress](https://v2.vuepress.vuejs.org/) as the generator to compile the Markdown files to HTML files and deploy the static site to Github Page. 14 | 15 | VuePress is so easy to use by the out-of-the-box default theme just [setting some configurations](https://v2.vuepress.vuejs.org/reference/default-theme/config.html). My major work is to optimise the experience of browser the website and post: 16 | 17 | * the Markdown files can classify into tow types, it can be a blog post and a note at the same time, or just as a note. 18 | * add a blog posts navigation page, the blog post show as cards, user can browser the posts in three mode: cards grid mode, cards masonry mode, and posts list mode. 19 | * add a notes navigation page, all Markdown files will be notes, the notes show in a grid layout as the same structure as they save in the files system, powering by [D3.js](https://d3js.org/), you can also browser the notes in a tree chart. 20 | * support to add tags to Markdown file and filter the posts or notes in navigation page. 21 | * follow the RWD, responsive web design, principle, you can browser the website in different screen size. 22 | ## Demo 23 | * Live Demo: [Collection](https://benbinbin.github.io/Collection/) 24 | * Video Demo: [Youtube](https://youtu.be/cTJmWhbQ9Qg) | [Bilibili](https://www.bilibili.com/video/BV1W64y1X7ok) 25 | ## Wiki 26 | * Checkout the [Documentation](https://github.com/Benbinbin/two-dishes-one-fish/wiki/Documentation) of [wiki](https://github.com/Benbinbin/two-dishes-one-fish/wiki) to use this template and build your own site. 27 | * 根据 wiki 的[使用说明](https://github.com/Benbinbin/two-dishes-one-fish/wiki/%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E)或[少数派的文章](https://sspai.com/post/67518)的步骤搭建自己的网站。在 wiki 的[开发日志](https://github.com/Benbinbin/two-dishes-one-fish/wiki/%E5%BC%80%E5%8F%91%E6%97%A5%E5%BF%97)或[掘金的文章](https://juejin.cn/post/6980134339434512421)可查看该项目的开发笔记。 28 | 29 | ## License 30 | 31 | [MIT](./LICENSE) 32 | -------------------------------------------------------------------------------- /docs/.vuepress/components/SideBar.vue: -------------------------------------------------------------------------------- 1 | 2 | 41 | 42 | 43 | 93 | 94 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 2 | 68 | 69 | 70 | 99 | 100 | -------------------------------------------------------------------------------- /docs/.vuepress/plugins/generateListPages.js: -------------------------------------------------------------------------------- 1 | const { createPage } = require('@vuepress/core') 2 | 3 | const generateListPages = (options, app) => { 4 | let postClassifications = { 5 | all: { 6 | posts: [], 7 | tags: [] 8 | } 9 | } 10 | options.postClassifications.forEach(classification => { 11 | postClassifications[classification] = { 12 | posts: [], 13 | tags: [] 14 | } 15 | }) 16 | 17 | return { 18 | name: 'vuepress-plugin-generateListPages', 19 | async onInitialized(app) { 20 | // rearrange posts to different classification type 21 | app.pages.forEach((page) => { 22 | let classification = ''; 23 | if (page.frontmatter.show && page.filePathRelative) { 24 | classification = page.filePathRelative.split("/")[0] 25 | if (!(classification in postClassifications)) return 26 | } else { 27 | return 28 | } 29 | 30 | const post = { 31 | title: page.title, 32 | path: page.path, 33 | pathRelative: page.htmlFilePathRelative, 34 | filePathRelative: page.filePathRelative, 35 | tags: page.frontmatter.tags || [], 36 | createdTime: page.frontmatter.createdTime || null, 37 | updatedTime: page.frontmatter.updatedTime || null, 38 | date: page.frontmatter.date || null, 39 | summary: page.frontmatter.summary || '', 40 | collection: page.frontmatter.collection || '', 41 | collectionOrder: page.frontmatter.collectionOrder || 0, 42 | cover: page.frontmatter.cover || '' 43 | } 44 | 45 | postClassifications.all.posts.push(post); 46 | postClassifications.all.tags = [...new Set([...postClassifications.all.tags, ...post.tags])] 47 | 48 | 49 | postClassifications[classification].posts.push(post); 50 | postClassifications[classification].tags = [...new Set([...postClassifications[classification].tags, ...post.tags])] 51 | }) 52 | 53 | // add classification navigation pages 54 | let listOptions = [{ 55 | path: '/postslist/all', 56 | frontmatter: { 57 | layout: 'ClassificationLayout', 58 | classification: 'all', 59 | } 60 | }]; 61 | 62 | options.postClassifications.forEach(item => { 63 | listOptions.push({ 64 | path: `/postslist/${item}`, 65 | frontmatter: { 66 | layout: 'ClassificationLayout', 67 | classification: item 68 | } 69 | }) 70 | }) 71 | 72 | let listPagesPromise = [] 73 | listOptions.forEach(option => { 74 | listPagesPromise.push(createPage(app, option)) 75 | }) 76 | 77 | const listPages = await Promise.all(listPagesPromise) 78 | 79 | listPages.forEach(page => { 80 | app.pages.push(page) 81 | }); 82 | }, 83 | extendsPageData: (page, app) => { 84 | // add data to each classification navigation pages 85 | if (page.frontmatter.classification) { 86 | return { 87 | postsList: postClassifications[page.frontmatter.classification] 88 | } 89 | } else { 90 | return {} 91 | } 92 | }, 93 | } 94 | } 95 | 96 | module.exports = generateListPages -------------------------------------------------------------------------------- /docs/.vuepress/components/Catalog.vue: -------------------------------------------------------------------------------- 1 | 2 |{{ heading.text }}
50 | 51 |