├── .eslintrc.js ├── .gitignore ├── .npmignore ├── .prettierrc ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── components ├── Footer.vue ├── Header.vue ├── HeaderCover.vue ├── Info.vue ├── InfoContent.vue ├── InfoNav.vue ├── List.vue ├── NavLink.vue ├── Pagination.vue └── TagsList.vue ├── docs ├── .vuepress │ ├── config.js │ └── public │ │ └── favicon.ico ├── README.md ├── guide │ ├── README.md │ ├── options.md │ └── use.md ├── plugin │ ├── README.md │ ├── blog-multidir.md │ ├── img-lazy.md │ └── reading-progress.md └── zh │ ├── README.md │ ├── guide │ ├── README.md │ ├── options.md │ └── use.md │ └── plugin │ ├── README.md │ ├── blog-multidir.md │ ├── img-lazy.md │ └── reading-progress.md ├── enhanceApp.js ├── examples ├── .vuepress │ ├── config.js │ ├── public │ │ ├── cover.jpg │ │ └── logo.png │ └── styles │ │ └── index.styl ├── about │ └── index.md ├── doc │ ├── vuepress-plugin-blog-multidir.md │ ├── vuepress-plugin-img-lazy.md │ └── vuepress-theme-ououe.md └── posts │ ├── 1.md │ ├── 2.md │ ├── 3.md │ ├── 4.md │ ├── 5.md │ └── 6.md ├── index.js ├── layouts ├── 404.vue ├── GlobalLayout.vue ├── Layout.vue ├── Page.vue └── Tag.vue ├── lib ├── themeConfig.js └── util.js ├── package.json └── styles ├── base.styl ├── code.styl ├── content.styl ├── flex.styl ├── index.styl ├── palette.styl ├── plugins.styl └── public.styl /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: ["plugin:vue/essential", "@vue/prettier"], 7 | rules: { 8 | "no-console": process.env.NODE_ENV === "production" ? "error" : "off", 9 | "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", 10 | "quotes": ['error', 'single'], 11 | "semi": ['error', 'never'] 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .npmignore 3 | .gitignore 4 | .editorconfig 5 | 6 | node_modules/ 7 | test/ 8 | dist/ 9 | npm-debug.log 10 | yarn-error.log 11 | yarn.lock 12 | package-lock.json 13 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .npmignore 3 | .gitignore 4 | .editorconfig 5 | .eslintrc.js 6 | .prettierrc 7 | 8 | node_modules/ 9 | test/ 10 | dist/ 11 | docs/ 12 | examples/ 13 | npm-debug.log 14 | yarn-error.log 15 | yarn.lock 16 | package-lock.json 17 | 18 | *.test.js 19 | .travis.yml 20 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "eslintIntegration": true, 3 | "singleQuote": true, 4 | "semi": false 5 | } 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - lts/* 4 | install: 5 | - yarn 6 | cache: 7 | directories: 8 | - node_modules 9 | script: 10 | - yarn build:docs 11 | deploy: 12 | committer_from_gh: true 13 | provider: pages 14 | skip-cleanup: true 15 | local_dir: dist 16 | github-token: $GITHUB_TOKEN 17 | keep-history: true 18 | on: 19 | branch: master -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | [README](README.md) | [CHANGELOG](CHANGELOG.md) 4 | 5 | ## 1.5.3 6 | 7 | - optimizing styles 8 | 9 | ## 1.5.2 10 | 11 | - improve typography for print media 12 | 13 | ## 1.5.1 14 | 15 | - fix vssue styles 16 | - fix pwa styles 17 | 18 | ## 1.5.0 19 | 20 | - fix pwa styles 21 | - Compatible [Base URL](https://vuepress.vuejs.org/guide/assets.html#rBase%20URL) 22 | - update dependencies version 23 | 24 | ## 1.4.2 25 | 26 | - fix styles 27 | - fix bug 28 | 29 | ## 1.4.1 30 | 31 | - add options for `postTime` 32 | - fix vssue bug and styles 33 | 34 | ## 1.4.0 35 | 36 | - add transition animation 37 | - control the img of the theme through the `vuepress-plugin-img-lazy` config 38 | - add [vuepress-plugin-reading-progress](https://github.com/tolking/vuepress-plugin-reading-progress) 39 | 40 | ## 1.3.8 41 | 42 | - fix styles without `frontmatter.image` 43 | - adjust the header text of the list page 44 | - optimizing the tags styles 45 | 46 | ## 1.3.7 47 | 48 | - optimizing styles 49 | - change the `TagsList` sort 50 | - add [vuepress-plugin-img-lazy](https://github.com/tolking/vuepress-plugin-img-lazy) 51 | 52 | ## 1.3.6 53 | 54 | - optimizing styles 55 | - add `showThemeButton` to control the chose theme button display 56 | - setting `defaultTheme` by hours 57 | 58 | ``` js 59 | defaultTheme: { dark: [18, 6] } 60 | ``` 61 | 62 | ## 1.3.5 63 | 64 | - fix css-prefers-color-scheme 65 | 66 | ## 1.3.4 67 | 68 | - add `backgroundImage` (background image on posts pages) 69 | - optimizing styles 70 | 71 | ## 1.3.3 72 | 73 | - add `false` in defaultTheme 74 | 75 | ## 1.3.2 76 | 77 | - optimizing dark theme styles 78 | 79 | ## 1.3.1 80 | 81 | - fix error of partial styles 82 | 83 | ## 1.3.0 84 | 85 | - add dark theme (change theme using switch button on the left) 86 | - you need to add a postcss plugins to your config file 87 | 88 | ``` js 89 | // .vuepress -> config.js 90 | module.exports = { 91 | theme: 'ououe', 92 | themeConfig: { 93 | // ... 94 | }, 95 | 96 | // add 97 | postcss: { 98 | plugins: [ 99 | require('css-prefers-color-scheme/postcss'), 100 | require('autoprefixer') 101 | ] 102 | } 103 | } 104 | ``` 105 | 106 | ## 1.2.3 107 | 108 | - fix error styles on 1.0 109 | - optimizing styles 110 | 111 | ## 1.2.2 112 | 113 | - change styles 114 | 115 | ## 1.2.1 116 | 117 | - add 404 page 118 | - change styles 119 | 120 | ## 1.2.0 121 | 122 | - optimizing html 123 | - change styles 124 | - fix bug 125 | 126 | ## 1.1.2 127 | 128 | - change styles 129 | 130 | ## 1.1.1 131 | 132 | - add last and next link for post 133 | - change styles 134 | - add [vssue](https://vssue.js.org/guide/vuepress.html) for comment system 135 | 136 | **You must install it before using it** 137 | 138 | ## 1.1.0 139 | 140 | - add tags and categories 141 | - add pagination 142 | - **You don't need to create a `index.md(or README.md)` file in a folder that needs Pagination** 143 | 144 | ## 1.0.1 145 | 146 | - add time info in the post page 147 | - fix styles 148 | 149 | ## 1.0.0 150 | 151 | - Initial version 152 | - [Documentation](https://tolking.github.io/vuepress-theme-ououe) 153 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013-2019 Ghost Foundation 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > [!WARNING] 2 | > This library is no longer maintained, you can choose to migrate to [vitepress-theme-ououe](https://github.com/tolking/vitepress-theme-ououe) 3 | 4 | # vuepress-theme-ououe 5 | 6 | > A blog theme for VuePress 7 | 8 | Live Demo: [My Blog](https://ououe.com) 9 | 10 | [Documentation](https://tolking.github.io/vuepress-theme-ououe) 11 | 12 | Uses [vuepress-theme-ououe-template](https://github.com/tolking/vuepress-theme-ououe-template) to starter 13 | 14 | --- 15 | 16 | ## Installation 17 | 18 | ``` sh 19 | yarn add vuepress-theme-ououe 20 | # or 21 | npm i vuepress-theme-ououe 22 | ``` 23 | 24 | ## Usage 25 | 26 | ``` js 27 | // .vuepress -> config.js 28 | module.exports = { 29 | theme: 'ououe', 30 | themeConfig: { 31 | // ... 32 | } 33 | } 34 | ``` 35 | 36 | ## License 37 | 38 | [MIT](http://opensource.org/licenses/MIT) 39 | -------------------------------------------------------------------------------- /components/Footer.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 27 | 28 | 49 | -------------------------------------------------------------------------------- /components/Header.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 41 | 42 | 104 | -------------------------------------------------------------------------------- /components/HeaderCover.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 46 | 47 | 80 | -------------------------------------------------------------------------------- /components/Info.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 45 | 46 | 63 | -------------------------------------------------------------------------------- /components/InfoContent.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 76 | 77 | 132 | -------------------------------------------------------------------------------- /components/InfoNav.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 37 | 38 | 103 | -------------------------------------------------------------------------------- /components/List.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 54 | 55 | 170 | -------------------------------------------------------------------------------- /components/NavLink.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 32 | -------------------------------------------------------------------------------- /components/Pagination.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 84 | 85 | 120 | -------------------------------------------------------------------------------- /components/TagsList.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 40 | 41 | 94 | -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | base: '/vuepress-theme-ououe/', 3 | title: 'vuepress-theme-ououe', 4 | description: 'A blog theme for VuePress', 5 | dest: 'dist/', 6 | evergreen: true, 7 | theme: 'default-prefers-color-scheme', 8 | head: [ 9 | ['link', { rel: 'icon', href: '/favicon.ico' }], 10 | ['meta', { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge,chrome=1' }], 11 | ['meta', { name: 'renderer', content: 'webkit' }], 12 | ['meta', { name: 'force-rendering', content: 'webkit' }], 13 | ['meta', { name: 'applicable-device', content: 'pc,mobile' }], 14 | ['meta', { name: 'author', content: 'tolking ' }] 15 | ], 16 | locales: { 17 | '/': { 18 | lang: 'en-US', 19 | title: 'vuepress-theme-ououe', 20 | description: 'A blog theme for VuePress' 21 | }, 22 | '/zh/': { 23 | lang: 'zh-CN', 24 | title: 'vuepress-theme-ououe', 25 | description: '为 vuepress 制作的一款主题' 26 | } 27 | }, 28 | themeConfig: { 29 | repo: 'tolking/vuepress-theme-ououe', 30 | docsDir: 'docs', 31 | editLinks: true, 32 | locales: { 33 | '/': { 34 | selectText: 'Languages', 35 | label: 'English', 36 | editLinkText: 'Edit this page on GitHub', 37 | lastUpdated: 'Last Updated', 38 | serviceWorker: { 39 | updatePopup: { 40 | message: "New content is available.", 41 | buttonText: "Refresh" 42 | } 43 | }, 44 | nav: [ 45 | { text: 'Guide', link: '/guide/' }, 46 | { text: 'Plugin', link: '/plugin/' } 47 | ], 48 | sidebar: { 49 | '/guide/': [ 50 | '', 51 | 'use', 52 | 'options' 53 | ], 54 | '/plugin/': [ 55 | '', 56 | ['blog-multidir', 'blog-multidir'], 57 | ['img-lazy', 'img-lazy'], 58 | ['reading-progress', 'reading-progress'] 59 | ] 60 | } 61 | }, 62 | '/zh/': { 63 | selectText: '选择语言', 64 | label: '简体中文', 65 | editLinkText: '在 GitHub 上编辑此页', 66 | lastUpdated: '最后更新时间', 67 | serviceWorker: { 68 | updatePopup: { 69 | message: "发现新内容可用.", 70 | buttonText: "刷新" 71 | } 72 | }, 73 | nav: [ 74 | { text: '指南', link: '/zh/guide/' }, 75 | { text: '插件', link: '/zh/plugin/' } 76 | ], 77 | sidebar: { 78 | '/zh/guide/': [ 79 | ['', '介绍'], 80 | ['use', '使用'], 81 | ['options', '配置'] 82 | ], 83 | '/zh/plugin/': [ 84 | ['', '插件'], 85 | ['blog-multidir', 'blog-multidir'], 86 | ['img-lazy', 'img-lazy'], 87 | ['reading-progress', 'reading-progress'] 88 | ] 89 | } 90 | } 91 | } 92 | }, 93 | plugins: [ 94 | 'img-lazy', 95 | 'reading-progress' 96 | ] 97 | } 98 | -------------------------------------------------------------------------------- /docs/.vuepress/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tolking/vuepress-theme-ououe/14ca0b0e2d37366f285ce73560836f789b394d67/docs/.vuepress/public/favicon.ico -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroText: vuepress-theme-ououe 4 | tagline: A blog theme for VuePress 5 | actionText: Get Started → 6 | actionLink: /guide/use 7 | footer: Copyright © theme by tolking 8 | --- 9 | 10 | ![preview](https://ououe.com/img/vuepress-theme-ououe.jpg) 11 | -------------------------------------------------------------------------------- /docs/guide/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction 3 | description: A blog theme for VuePress 4 | --- 5 | 6 | # Introduction 7 | 8 | > A blog theme for VuePress, Take [TryGhost/Casper](https://github.com/TryGhost/Casper) as a reference 9 | 10 | Live Demo: [My Blog](https://ououe.com) 11 | 12 | Uses [vuepress-theme-ououe-template](https://github.com/tolking/vuepress-theme-ououe-template) to starter 13 | 14 | ## Features 15 | 16 | - prefers-color-scheme or custom default theme color 17 | - sadaptive computer and mobile 18 | - image lazy-loading 19 | - support for multi folder blogs 20 | - a filtered list of home pages 21 | - compatible [Base URL](https://vuepress.vuejs.org/guide/assets.html#rBase%20URL) 22 | -------------------------------------------------------------------------------- /docs/guide/options.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: options 3 | description: options of the vuepress-theme-ououe 4 | --- 5 | 6 | # Options 7 | 8 | ### defaultTheme 9 | 10 | - Type: `string`, `object` 11 | - Required: `false` 12 | 13 | ::: tip 14 | By default, light or dark themes are displayed by [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme), You can change it by `defaultTheme` 15 | ::: 16 | 17 | support `light`, `dark` or `{ theme: [begin hours, end hours] }` 18 | 19 | ``` js {4,6,8,13} 20 | module.exports = { 21 | theme: 'ououe', 22 | themeConfig: { 23 | defaultTheme: 'dark', 24 | // or 25 | defaultTheme: { dark: [18, 6] }, 26 | // or 27 | defaultTheme: { light: [6, 18], dark: [18, 6] }, 28 | }, 29 | // When using `defaultTheme`, you need to add a postcss plugins to your config.js 30 | postcss: { 31 | plugins: [ 32 | require('css-prefers-color-scheme/postcss'), 33 | require('autoprefixer') 34 | ] 35 | } 36 | } 37 | ``` 38 | 39 | ### showThemeButton 40 | 41 | - Type: `boolean` 42 | - Default: `true` 43 | 44 | `showThemeButton` to control the chose theme button display 45 | 46 | ::: tip 47 | The display of the theme is determined by 48 | 49 | **`botton chose theme` -> `defaultTheme` -> `prefers-color-scheme`** 50 | ::: 51 | 52 | ### cover 53 | 54 | - Type: `string`, `object` 55 | - Default: `''` 56 | 57 | ``` js 58 | cover: '/cover.jpg' 59 | // or { base: img, path: img } 60 | cover: { 61 | base: '/cover.jpg', 62 | '/posts/': '/posts.jpg' 63 | // ... 64 | } 65 | ``` 66 | 67 | Show in the header of the index page 68 | 69 | ### logo 70 | 71 | - Type: `string` 72 | - Default: `''` 73 | 74 | ### search 75 | 76 | - Type: `boolean` 77 | - Default: `true` 78 | 79 | ### backgroundImage 80 | 81 | - Type: `boolean` 82 | - Default: `true` 83 | 84 | background image on posts pages 85 | 86 | ### pageGroup 87 | 88 | - Type: `number` 89 | - Default: `5` 90 | 91 | Number of pages Pagination 92 | 93 | ### postTime 94 | 95 | - Type: `object` 96 | - Default: 97 | 98 | ``` js 99 | postTime: { 100 | createTime: 'Create Time', 101 | lastUpdated: 'Last Updated', 102 | options: { dateStyle: 'medium' } 103 | } 104 | ``` 105 | 106 | Time displayed at the bottom of the posts pages 107 | 108 | ::: tip 109 | #### createTime / lastUpdated 110 | 111 | - Type: `string`, `boolean(false)` 112 | - Default: `Create Time / Last Updated` 113 | 114 | using `false` will not display time 115 | 116 | #### options 117 | 118 | - Type: `object` 119 | - Default: `{ dateStyle: 'medium' }` 120 | 121 | Config of format time [options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) 122 | ::: 123 | 124 | ### nav 125 | 126 | - Type: `array` 127 | - Default: `[]` 128 | 129 | ``` js 130 | nav: [ 131 | { text: 'Home', link: '/' }, 132 | { text: 'Posts', link: '/posts/' }, 133 | { text: 'Tags', link: '/tag/' }, 134 | { text: 'Categories', link: '/category/' }, 135 | { text: 'About', link: '/about/' } 136 | // ... 137 | ] 138 | ``` 139 | 140 | ### footer 141 | 142 | - Type: `array` 143 | - Default: `[]` 144 | 145 | ``` js 146 | footer: [ 147 | { text: 'link', link: '/' } 148 | // ... 149 | ] 150 | ``` 151 | 152 | ### useVssue 153 | 154 | - Type: `boolean` 155 | - Default: `false` 156 | 157 | Use `vssue` for comment system 158 | 159 | ::: tip 160 | **You must install it before using it** 161 | 162 | How to use [vssue](https://vssue.js.org/guide/vuepress.html) 163 | 164 | then, in frontmatter 165 | 166 | ``` md 167 | --- 168 | vssue-title: vssue-title 169 | vssue-id: vssue-id 170 | --- 171 | ``` 172 | 173 | #### vssue-title 174 | 175 | - Type: `string` 176 | - Default: as same as title 177 | - Required: `false` 178 | 179 | #### vssue-id 180 | 181 | - Type: `string` 182 | - Required: `false` 183 | ::: 184 | 185 | ## Other 186 | 187 | [plugin](../plugin/blog-multidir) 188 | -------------------------------------------------------------------------------- /docs/guide/use.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: how to use 3 | description: how to used vuepress-theme-ououe 4 | --- 5 | 6 | # How to use 7 | 8 | ## Installation 9 | 10 | ``` sh 11 | yarn add vuepress-theme-ououe 12 | # or 13 | npm i vuepress-theme-ououe 14 | ``` 15 | 16 | ## Usage 17 | 18 | ``` js 19 | // .vuepress -> config.js 20 | module.exports = { 21 | theme: 'ououe', 22 | themeConfig: { 23 | // ... 24 | } 25 | } 26 | ``` 27 | 28 | ## Structure directores 29 | 30 | ``` sh 31 | +- blog 32 | +- .vuepress 33 | +- config.js 34 | +- posts 35 | +- test.md 36 | ... 37 | +- about 38 | +- index.md #(or README.md) 39 | ... 40 | ``` 41 | 42 | ::: tip 43 | **You don't need to create a `README.md(or index.md)` file in a folder that needs Pagination** 44 | 45 | **or set `layout` like `about`** 46 | 47 | ``` md 48 | 49 | --- 50 | layout: Page 51 | --- 52 | ``` 53 | 54 | ::: 55 | 56 | ## frontmatter 57 | 58 | ``` md 59 | 60 | --- 61 | title: How to use 62 | display: home 63 | image: ... 64 | date: 2019-02-22 65 | tags: 66 | - vuepress 67 | - vuepress-themt-ououe 68 | categories: 69 | - blog 70 | - theme 71 | 72 | tag: vuepress 73 | category: blog 74 | --- 75 | ``` 76 | 77 | ### display 78 | 79 | - type: `string` 80 | - Required: `false` 81 | 82 | support `home` or `none` 83 | 84 | ::: tip 85 | use `display: home`, The current article will be displayed in the list on the home page. 86 | 87 | use `display: none`, It will not be displayed. However, you can still access it through the right path. 88 | ::: 89 | 90 | ### image 91 | 92 | - type: `string` 93 | - Required: `false` 94 | 95 | Pictures displayed in list and article backgrounds 96 | 97 | ### Change theme 98 | 99 | ``` sh 100 | +- blog 101 | +- .vuepress 102 | +- styles 103 | +- palette.styl 104 | +- index.styl 105 | ``` 106 | 107 | - You should write custom styles in `index.styl` 108 | - If you wish to apply simple color overrides to the styling of the [default preset](https://github.com/tolking/vuepress-theme-ououe/blob/master/styles/palette.styl) or define some color variables for using later. 109 | - `$accentColor` and `$accentDarkColor` are best changed together 110 | -------------------------------------------------------------------------------- /docs/plugin/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: plugin 3 | description: vuepress-theme-ououe use plugin 4 | --- 5 | 6 | # plugin 7 | 8 | > These plugins included in theme 9 | 10 | - [back-to-top](https://vuepress.vuejs.org/zh/plugin/official/plugin-back-to-top.html) 11 | - [last-updated](https://vuepress.vuejs.org/zh/plugin/official/plugin-last-updated.html) 12 | - [nprogress](https://vuepress.vuejs.org/zh/plugin/official/plugin-nprogress.html) 13 | - [search](https://vuepress.vuejs.org/zh/plugin/official/plugin-search.html) 14 | - [blog-multidir](./blog-multidir.md) 15 | - [img-lazy](./img-lazy.md) 16 | - [reading-progres](./reading-progres.md) 17 | -------------------------------------------------------------------------------- /docs/plugin/blog-multidir.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: vuepress-plugin-blog-multidir 3 | description: Build your blog through multiple folders for vuepress 4 | --- 5 | 6 | # vuepress-plugin-blog-multidir 7 | 8 | ::: tip 9 | You can modify the plugin options, or just use 10 | ::: 11 | 12 | [Source code](https://github.com/tolking/vuepress-plugin-blog-multidir) 13 | 14 | ## Modify 15 | 16 | ``` js 17 | module.exports = { 18 | plugins: [ 19 | [ 20 | 'blog-multidir', 21 | { /* options */ } 22 | ] 23 | ] 24 | } 25 | ``` 26 | 27 | [Vuepress documentation](https://vuepress.vuejs.org/zh/plugin/using-a-plugin.html) 28 | 29 | ## Options 30 | 31 | ### aliasesRoot 32 | 33 | - Type: `string` 34 | - default: `:root` 35 | 36 | **Can't have the same name as your folder** (For internal use only). 37 | 38 | ### categoryIndexPageUrl 39 | 40 | - Type: `string` 41 | - Default: `/category/` 42 | 43 | ### tagIndexPageUrl 44 | 45 | - Type: `string` 46 | - Default: `/tag/` 47 | 48 | ### categoryLayout 49 | 50 | - Type: `string` 51 | - Default: `Tag` 52 | 53 | ### tagLayout 54 | 55 | - Type: `string` 56 | - Default: `Tag` 57 | 58 | ### postLayout 59 | 60 | - Type: `string` 61 | - Default: `Page` 62 | 63 | ### postsDir 64 | 65 | - Type: `string`, `array`, `Object` 66 | - Default: `posts` 67 | 68 | **Configures the permalink generated for you folder.** 69 | 70 | example 71 | 72 | ``` js 73 | postsDir: 'posts' 74 | // or { path: permalink } `better` 75 | postsDir: { 76 | posts: 'posts/:year/:month/:day/:slug', 77 | other: 'other/:year/:month/:day/:slug' 78 | } 79 | ``` 80 | 81 | ### permalink 82 | 83 | - Type: `string`, `boolean(false)` 84 | - Default: `false` 85 | 86 | See [Permalinks](https://vuepress.vuejs.org/guide/permalinks.html#template-variables) for a list of valid variables. 87 | 88 | ### postsSorter 89 | 90 | - Type: `function` 91 | - Default: 92 | 93 | ``` js 94 | postsSorter: ((prev, next) => { 95 | const prevTime = new Date(prev.frontmatter.date).getTime() 96 | const nextTime = new Date(next.frontmatter.date).getTime() 97 | return prevTime - nextTime > 0 ? -1 : 1 98 | }) 99 | ``` 100 | 101 | ### paginationDir 102 | 103 | - Type: `boolean`, `string`, `array` 104 | - Default: `true` 105 | 106 | example 107 | 108 | ``` js 109 | paginationDir: true // Enable all paging 110 | // or 111 | paginationDir: false // Cancel all pages 112 | // or 113 | paginationDir: 'posts' // Enable single paging for `posts` folder 114 | // or 115 | paginationDir: ['posts1', 'posts2'] // Enable multiple paging 116 | ``` 117 | 118 | ### paginationLimit 119 | 120 | - Type: `number` 121 | - Default: `12` 122 | 123 | ### paginatioPath 124 | 125 | - Type: `string` 126 | - Default: `page/` 127 | 128 | Path to be added for paging list 129 | 130 | ::: tip 131 | The first page will not use it 132 | ::: 133 | 134 | ## computed 135 | 136 | ::: tip 137 | In general, you will not use these properties unless you need to create some new components. 138 | 139 | you can create a [issues](https://github.com/tolking/vuepress-theme-ououe/issues) 140 | ::: 141 | 142 | ### $pluginConfig 143 | 144 | Plugin config information 145 | 146 | ### $tags 147 | 148 | Page information sorted by tags 149 | 150 | ### $categories 151 | 152 | Page information sorted by categories 153 | 154 | ### $lists 155 | 156 | Page information sorted by folders 157 | 158 | ### $list 159 | 160 | If you are in the pagination page. you can get 161 | 162 | ``` js 163 | { 164 | pageKeys, 165 | pagination, 166 | path, 167 | posts 168 | } 169 | ``` 170 | 171 | or If you are in the post page. you can get 172 | 173 | ``` js 174 | { 175 | index, 176 | total, 177 | dir, 178 | lastPost, 179 | nextPost 180 | } 181 | ``` 182 | 183 | from `this.$list` 184 | -------------------------------------------------------------------------------- /docs/plugin/img-lazy.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: vuepress-plugin-img-lazy 3 | description: a vuepress plugin to better supporting image lazy loading 4 | --- 5 | 6 | # vuepress-plugin-img-lazy 7 | 8 | ::: tip 9 | You can modify the plugin options, or just use 10 | 11 | [Base URL](https://vuepress.vuejs.org/guide/assets.html#rBase%20URL) already included by default 12 | ::: 13 | 14 | [Live Demo](https://tolking.github.io/vuepress-plugin-img-lazy/preview.html) 15 | 16 | [Source code](https://github.com/tolking/vuepress-plugin-img-lazy) 17 | 18 | ::: tip 19 | You need to know how to use it. 20 | ::: 21 | 22 | ``` md 23 | ![img](/img.jpg) 24 | 25 | ![img](/img.jpg =500x300) 26 | 27 | 28 | ``` 29 | 30 | ## Modify 31 | 32 | ::: tip 33 | You can control the img of markdown and theme (^1.4.0) 34 | ::: 35 | 36 | ``` js 37 | module.exports = { 38 | plugins: [ 39 | [ 40 | 'img-lazy', 41 | { /* options */ } 42 | ] 43 | ] 44 | } 45 | ``` 46 | 47 | ## Options 48 | 49 | ### useNative 50 | - Type: `Boolean` 51 | - Default: `true` 52 | - Required: `false` 53 | 54 | Use the native image lazy-loading for the web 55 | 56 | ::: tip 57 | In general, using native lazy loading will load more pictures than not using 58 | ::: 59 | 60 | ### selector 61 | - Type: `string` 62 | - Default: `lazy` 63 | - Required: `false` 64 | 65 | Default class name for image 66 | 67 | ### rootMargin 68 | - Type: `String` 69 | - Default: `200px` 70 | - Required: `false` 71 | 72 | rootMargin for IntersectionObserver 73 | 74 | ### prefix 75 | - Type: `string` `Function` 76 | - Default: `src => src && src.charAt(0) === '/' && !src.startsWith(ctx.base) ? ctx.base + src.slice(1) : src` 77 | - Required: `false` 78 | 79 | Config prefix for src in images 80 | -------------------------------------------------------------------------------- /docs/plugin/reading-progress.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: vuepress-plugin-reading-progress 3 | description: add reading progress bar for vuepress 4 | --- 5 | 6 | # vuepress-plugin-reading-progress 7 | 8 | ::: tip 9 | You can modify the plugin options, or just use, *or disable the plugin* 10 | 11 | ``` js 12 | module.exports = { 13 | plugins: [ 14 | ['reading-progress', false] 15 | ] 16 | } 17 | ``` 18 | 19 | ::: 20 | 21 | [Source code](https://github.com/tolking/vuepress-plugin-reading-progress) 22 | 23 | ## Modify 24 | 25 | ``` js 26 | module.exports = { 27 | plugins: [ 28 | [ 29 | 'reading-progress', 30 | { /* options */ } 31 | ] 32 | ] 33 | } 34 | ``` 35 | 36 | ## Options 37 | 38 | ::: tip 39 | The default options of the theme is (display the reading progress bar only on the posts page) 40 | 41 | ``` js 42 | module.exports = { 43 | plugins: [ 44 | ['reading-progress', { readingDir: /[^/]+$/ }] 45 | ] 46 | } 47 | ``` 48 | 49 | ::: 50 | 51 | ### readingDir 52 | 53 | - Type: `null`, `string`, `array`, `object`, `RegExp` 54 | - Default: `null` 55 | 56 | Specify regularPath that display reading progress bar 57 | 58 | example 59 | 60 | ``` js 61 | { 62 | readingDir: null, // Display reading progress bar on all pages 63 | // or 64 | readingDir: 'posts' 65 | // or 66 | readingDir: ['posts1', 'posts2', 'posts3'] 67 | // or { dir: fixed } 68 | readingDir: { 69 | posts1: 'top', 70 | posts2: 'bottom', 71 | posts3: 'left' 72 | } 73 | // or RegExp 74 | readingDir: /[^/]+$/ // exclude regularPath end with `/` 75 | // or 76 | readingDir: new RegExp('[^/]+$') 77 | } 78 | ``` 79 | 80 | ### fixed 81 | 82 | - Type: `string` 83 | - Default: `top` 84 | 85 | support `top`, `bottom`, `left`, `right` 86 | 87 | set position for reading progress bar 88 | 89 | ## Front matter 90 | 91 | Change the reading progress bar display of the current page by use `readingShow` 92 | 93 | - Type: `string`, `boolean` 94 | - Default: `null` 95 | - one of `top`, `bottom`, `left`, `right`, `true`, `false` 96 | 97 | ``` md 98 | --- 99 | readingShow: false 100 | --- 101 | ``` 102 | 103 | ## Style 104 | 105 | If you wish to apply simple color overrides to the styling 106 | 107 | ``` sh 108 | +- .vuepress 109 | +- styles 110 | +- palette.styl 111 | ``` 112 | 113 | ``` styl 114 | $readingBgColor = transparent 115 | $readingZIndex = 1000 116 | $readingSize = 3px 117 | $readingProgressColor = $accentColor 118 | $readingProgressImage = none 119 | ``` 120 | 121 | example 122 | 123 | ``` styl 124 | $readingProgressImage = linear-gradient(-120deg, #E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%, #3BB4D7 60%, #2F4D9E 75%, #71378A 80%) 125 | ``` 126 | -------------------------------------------------------------------------------- /docs/zh/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroText: vuepress-theme-ououe 4 | tagline: 基于 VuePress 的一个博客主题 5 | actionText: 快速上手 → 6 | actionLink: /zh/guide/use 7 | footer: Copyright © theme by tolking 8 | --- 9 | 10 | ![preview](https://ououe.com/img/vuepress-theme-ououe.jpg) 11 | -------------------------------------------------------------------------------- /docs/zh/guide/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 介绍 3 | description: 关于 vuepress-theme-ououe 4 | --- 5 | 6 | # 介绍 7 | 8 | > 基于 VuePress 的一个博客主题，部分设计参考 [TryGhost/Casper](https://github.com/TryGhost/Casper) 9 | 10 | 在线演示: [My Blog](https://ououe.com) 11 | 12 | 使用我准备好的模板 [vuepress-theme-ououe-template](https://github.com/tolking/vuepress-theme-ououe-template) 快速开始 13 | 14 | ## 特色 15 | 16 | - 浅色与深色主题自适应或者自定义默认主题颜色 17 | - 界面自适应电脑与手机 18 | - 图片懒加载包括 `md` 文件里面的图片 19 | - 支持多文件夹的博客 20 | - 一个筛选过的主页列表 21 | - 兼容 [基础路径](https://vuepress.vuejs.org/zh/guide/assets.html#%E5%9F%BA%E7%A1%80%E8%B7%AF%E5%BE%84) -------------------------------------------------------------------------------- /docs/zh/guide/options.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 主题配置 3 | description: vuepress-theme-ououe 的主题配置 4 | --- 5 | 6 | # 主题配置 7 | 8 | ### defaultTheme 9 | 10 | - 类型: `string`, `object` 11 | - 可省略 12 | 13 | ::: tip 14 | 默认情况下，显示 `浅色` 或者 `深色` 主题由 [prefers-color-scheme](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme) 决定。通过使用 `defaultTheme` 可以设置一个默认值 15 | ::: 16 | 17 | 支持 `light`, `dark` 或者 `{ theme: [begin hours, end hours] }` 18 | 19 | ``` js {4,6,8,13} 20 | module.exports = { 21 | theme: 'ououe', 22 | themeConfig: { 23 | defaultTheme: 'dark', 24 | // 或者 25 | defaultTheme: { dark: [18, 6] }, 26 | // 或者 27 | defaultTheme: { light: [6, 18], dark: [18, 6] }, 28 | }, 29 | // 当你使用 defaultTheme 时，你需要增加一个如下的 postcss 插件 30 | postcss: { 31 | plugins: [ 32 | require('css-prefers-color-scheme/postcss'), 33 | require('autoprefixer') 34 | ] 35 | } 36 | } 37 | ``` 38 | 39 | ### showThemeButton 40 | 41 | - 类型: `boolean` 42 | - 默认值: `true` 43 | 44 | 用来控制是否显示切换浅色与深色主题的按钮，需要指定 `defaultTheme` 45 | 46 | ::: tip 47 | 显示浅色或者深色主题又下面几项决定 48 | 49 | **`botton chose theme` -> `defaultTheme` -> `prefers-color-scheme`** 50 | ::: 51 | 52 | ### cover 53 | 54 | - 类型: `string`, `object` 55 | - 默认值: `''` 56 | 57 | 在列表页面头部显示的图片 58 | 59 | ``` js 60 | cover: '/cover.jpg' 61 | // or { base: img, path: img } 62 | cover: { 63 | base: '/cover.jpg', 64 | '/posts/': '/posts.jpg' 65 | // ... 66 | } 67 | ``` 68 | 69 | ### logo 70 | 71 | - 类型: `string` 72 | - 默认值: `''` 73 | 74 | 显示在列表页面 `cover` 上的图片 75 | 76 | ### search 77 | 78 | - 类型: `boolean` 79 | - 默认值: `true` 80 | 81 | 是否显示搜索框 82 | 83 | ### backgroundImage 84 | 85 | - 类型: `boolean` 86 | - 默认值: `true` 87 | 88 | 是否显示文章页面的背景图片 89 | 90 | ### pageGroup 91 | 92 | - 类型: `number` 93 | - 默认值: `5` 94 | 95 | 分页组件显示的分页数 96 | 97 | ### postTime 98 | 99 | - 类型: `object` 100 | - 默认值: 101 | 102 | ``` js 103 | postTime: { 104 | createTime: 'Create Time', 105 | lastUpdated: 'Last Updated', 106 | options: { dateStyle: 'medium' } 107 | } 108 | ``` 109 | 110 | 显示在文章底部的时间 111 | 112 | ::: tip 113 | #### createTime / lastUpdated 114 | 115 | - 类型: `string`, `boolean(false)` 116 | - 默认值: `Create Time / Last Updated` 117 | 118 | 显示的文本，使用 `false` 将不会显示时间 119 | 120 | #### options 121 | 122 | - 类型: `object` 123 | - 默认值: `{ dateStyle: 'medium' }` 124 | 125 | 格式化时间的配置 [参考](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) 126 | ::: 127 | 128 | ### nav 129 | 130 | - 类型: `array` 131 | - 默认值: `[]` 132 | 133 | ``` js 134 | nav: [ 135 | { text: 'Home', link: '/' }, 136 | { text: 'Posts', link: '/posts/' }, 137 | { text: 'Tags', link: '/tag/' }, 138 | { text: 'Categories', link: '/category/' }, 139 | { text: 'About', link: '/about/' } 140 | // ... 141 | ] 142 | ``` 143 | 144 | ### footer 145 | 146 | - 类型: `array` 147 | - 默认值: `[]` 148 | 149 | ``` js 150 | footer: [ 151 | { text: 'link', link: '/' } 152 | // ... 153 | ] 154 | ``` 155 | 156 | ### useVssue 157 | 158 | - 类型: `boolean` 159 | - 默认值: `false` 160 | 161 | 使用 `vssue` 做为评论系统 162 | 163 | ::: tip 164 | **在使用之前你需要安装它** 165 | 166 | 前往 [vssue](https://vssue.js.org/guide/vuepress.html) 了解如何使用 167 | 168 | 然后你可以在 frontmatter 中配置参数 169 | 170 | ``` md 171 | --- 172 | vssue-title: vssue-title 173 | vssue-id: vssue-id 174 | --- 175 | ``` 176 | 177 | #### vssue-title 178 | 179 | - 类型: `string` 180 | - 默认值: 与 title 保持一致 181 | - 可省略 182 | 183 | #### vssue-id 184 | 185 | - 类型: `string` 186 | - 可省略 187 | ::: 188 | 189 | ## 其它配置 190 | 191 | 请参考 [plugin](../plugin/blog-multidir) 192 | -------------------------------------------------------------------------------- /docs/zh/guide/use.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 如何使用 3 | description: 如何使用 vuepress-theme-ououe 4 | --- 5 | 6 | # 如何使用 7 | 8 | ## 安装 9 | 10 | ``` sh 11 | yarn add vuepress-theme-ououe 12 | # 或者 13 | npm i vuepress-theme-ououe 14 | ``` 15 | 16 | ## 配置 17 | 18 | ``` js 19 | // .vuepress -> config.js 20 | module.exports = { 21 | theme: 'ououe', 22 | themeConfig: { 23 | // ... 24 | } 25 | } 26 | ``` 27 | 28 | ## 建议目录结构 29 | 30 | ``` sh 31 | +- blog 32 | +- .vuepress 33 | +- config.js 34 | +- posts 35 | +- test.md 36 | ... 37 | +- about 38 | +- index.md #(or README.md) 39 | ... 40 | ``` 41 | 42 | ::: tip 43 | **你不需要在文件夹的目录下创建 `README.md(or index.md)`，因为这个页面将被自动生成用来展示当前目录下博客的分页数据** 44 | 45 | **如果你不需要展示文件夹下的分页数据，例如 `about` 你需要配置 `layout`** 46 | 47 | ``` md 48 | 49 | --- 50 | layout: Page 51 | --- 52 | ``` 53 | 54 | ::: 55 | 56 | ## 配置 frontmatter 57 | 58 | ``` md 59 | 60 | --- 61 | title: How to use 62 | display: home 63 | image: ... 64 | date: 2019-02-22 65 | tags: 66 | - vuepress 67 | - vuepress-themt-ououe 68 | categories: 69 | - blog 70 | - theme 71 | 72 | tag: vuepress 73 | category: blog 74 | --- 75 | ``` 76 | 77 | ### display 78 | 79 | - 类型: `string` 80 | - 可省略 81 | 82 | 支持 `home` 或者 `none` 83 | 84 | ::: tip 85 | 使用 `display: home` 时，当前文章将会主页的列表中显示 86 | 87 | 使用 `display: none` 时，当前文章将不会显示在任何列表中，但你仍然可以通过正确的路由来访问它 88 | ::: 89 | 90 | ### image 91 | 92 | - 类型: `string` 93 | - 可省略 94 | 95 | 显示在列表和文章背景中的图片 96 | 97 | ## 修改样式 98 | 99 | ``` sh 100 | +- blog 101 | +- .vuepress 102 | +- styles 103 | +- palette.styl 104 | +- index.styl 105 | ``` 106 | 107 | - 你应该将自定义样式写到 `index.styl` 里面 108 | - 通过 `palette.styl` 文件主题的颜色参数，参考 [default preset](https://github.com/tolking/vuepress-theme-ououe/blob/master/styles/palette.styl) 109 | - `$accentColor` 与 `$accentDarkColor` 最好一起被修改 110 | -------------------------------------------------------------------------------- /docs/zh/plugin/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 插件 3 | description: vuepress-theme-ououe 引用的 vuepress 插件 4 | --- 5 | 6 | # 插件 7 | 8 | > 主题引用的插件 9 | 10 | - [back-to-top](https://vuepress.vuejs.org/zh/plugin/official/plugin-back-to-top.html) 11 | - [last-updated](https://vuepress.vuejs.org/zh/plugin/official/plugin-last-updated.html) 12 | - [nprogress](https://vuepress.vuejs.org/zh/plugin/official/plugin-nprogress.html) 13 | - [search](https://vuepress.vuejs.org/zh/plugin/official/plugin-search.html) 14 | - [blog-multidir](./blog-multidir.md) 15 | - [img-lazy](./img-lazy.md) 16 | - [reading-progres](./reading-progres.md) 17 | -------------------------------------------------------------------------------- /docs/zh/plugin/blog-multidir.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: vuepress-plugin-blog-multidir 3 | description: 为 vuepress 提供多文件夹的博客插件 4 | --- 5 | 6 | # vuepress-plugin-blog-multidir 7 | 8 | ::: tip 9 | 内置插件，此插件你可以直接使用或者修改插件配置 10 | ::: 11 | 12 | [源码](https://github.com/tolking/vuepress-plugin-blog-multidir) 13 | 14 | ## 修改配置 15 | 16 | ``` js 17 | module.exports = { 18 | plugins: [ 19 | [ 20 | 'blog-multidir', 21 | { /* options */ } 22 | ] 23 | ] 24 | } 25 | ``` 26 | 27 | [Vuepress documentation](https://vuepress.vuejs.org/zh/plugin/using-a-plugin.html) 28 | 29 | ## 插件配置 30 | 31 | ### aliasesRoot 32 | 33 | - 类型: `string` 34 | - 默认值: `:root` 35 | 36 | **不能够有同名的文件夹**（仅供内部使用） 37 | 38 | ### categoryIndexPageUrl 39 | 40 | - 类型: `string` 41 | - 默认值: `/category/` 42 | 43 | 配置 `类别` 的默认路径 44 | 45 | ### tagIndexPageUrl 46 | 47 | - 类型: `string` 48 | - 默认值: `/tag/` 49 | 50 | 配置 `标签` 的默认路径 51 | 52 | ### categoryLayout 53 | 54 | - 类型: `string` 55 | - 默认值: `Tag` 56 | 57 | 配置 `类别` 页面的引用组件 58 | 59 | ### tagLayout 60 | 61 | - 类型: `string` 62 | - 默认值: `Tag` 63 | 64 | 配置 `标签` 页面的引用组件 65 | 66 | ### postLayout 67 | 68 | - 类型: `string` 69 | - 默认值: `Page` 70 | 71 | 配置 `文章` 页面的引用组件 72 | 73 | ### postsDir 74 | 75 | - 类型: `string`, `Object` 76 | - 默认值: `posts` 77 | 78 | 配置需要使用 `Permalink` 的文件夹，或者采用对象方式直接配置 79 | 80 | 例如: 81 | 82 | ``` js 83 | postsDir: 'posts' 84 | // or { path: permalink } `最佳` 85 | postsDir: { 86 | posts: 'posts/:year/:month/:day/:slug', 87 | other: 'other/:year/:month/:day/:slug' 88 | } 89 | ``` 90 | 91 | ### permalink 92 | 93 | - 类型: `string`, `boolean(false)` 94 | - 默认值: `false` 95 | 96 | 配置 [Permalink](https://vuepress.vuejs.org/zh/guide/permalinks.html#template-variables) 97 | 98 | ::: tip 99 | 默认将在 `posts` 文件夹内部文件生效，如果需要多个文件夹请使用上面的配置方式 100 | ::: 101 | 102 | ### postsSorter 103 | 104 | - 类型: `function` 105 | - 默认值: 106 | 107 | ``` js 108 | postsSorter: ((prev, next) => { 109 | const prevTime = new Date(prev.frontmatter.date).getTime() 110 | const nextTime = new Date(next.frontmatter.date).getTime() 111 | return prevTime - nextTime > 0 ? -1 : 1 112 | }) 113 | ``` 114 | 115 | 文章列表的排序方式 116 | 117 | ### paginationDir 118 | 119 | - 类型: `boolean`, `string`, `array` 120 | - 默认值: `true` 121 | 122 | 配置需要分页的文件夹 123 | 124 | 例如: 125 | 126 | ``` js 127 | paginationDir: true // 全部分页 128 | // or 129 | paginationDir: false // 取消全部分页 130 | // or 131 | paginationDir: 'posts' // 仅对 `posts` 文件夹分页 132 | // or 133 | paginationDir: ['posts1', 'posts2'] // 对多个文件夹分页 134 | ``` 135 | 136 | ### paginationLimit 137 | 138 | - 类型: `number` 139 | - 默认值: `12` 140 | 141 | 每个分页的数据条数 142 | 143 | ### paginatioPath 144 | 145 | - 类型: `string` 146 | - 默认值: `page/` 147 | 148 | 分页列表需要增加的路径 149 | 150 | ::: tip 151 | 第一页不会增加这个值 152 | ::: 153 | 154 | ## 全局计算属性 155 | 156 | ::: tip 157 | 一般你不会用到这些属性，除非你需要新建一些组件 158 | 159 | 当然你也可以提 [建议](https://github.com/tolking/vuepress-theme-ououe/issues) 160 | ::: 161 | 162 | ### $pluginConfig 163 | 164 | 插件的配置信息 165 | 166 | ### $tags 167 | 168 | 按标签排序的页面信息 169 | 170 | ### $categories 171 | 172 | 按分类排序的页面信息 173 | 174 | ### $lists 175 | 176 | 按文件夹排序的页面信息 177 | 178 | ### $list 179 | 180 | 通过 `this.$list` 181 | 182 | 在列表页面，你会获取到 183 | 184 | ``` js 185 | { 186 | pageKeys, 187 | pagination, 188 | path, 189 | posts 190 | } 191 | ``` 192 | 193 | 或者在文章页面，你会获取到 194 | 195 | ``` js 196 | { 197 | index, 198 | total, 199 | dir, 200 | lastPost, 201 | nextPost 202 | } 203 | ``` 204 | -------------------------------------------------------------------------------- /docs/zh/plugin/img-lazy.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: vuepress-plugin-img-lazy 3 | description: 一个为了更好地支持图片懒加载的 vuepress 插件 4 | --- 5 | 6 | # vuepress-plugin-img-lazy 7 | 8 | ::: tip 9 | 内置插件，此插件你可以直接使用或者修改插件配置 10 | 11 | 已经默认包含 [基础路径](https://vuepress.vuejs.org/zh/guide/assets.html#%E5%9F%BA%E7%A1%80%E8%B7%AF%E5%BE%84) 12 | ::: 13 | 14 | [演示](https://tolking.github.io/vuepress-plugin-img-lazy/preview.html) 15 | 16 | [源码](https://github.com/tolking/vuepress-plugin-img-lazy) 17 | 18 | ::: tip 19 | 一般情况下，你只需要了解如何在 markdown 文档下使用即可 20 | ::: 21 | 22 | ``` md 23 | ![img](/img.jpg) 24 | 25 | ![img](/img.jpg =500x300) 26 | 27 | 28 | ``` 29 | 30 | ## 修改配置 31 | 32 | ::: tip 33 | 在 `1.4.0` 以上的版本时，你可以同时控制 markdown 文档与主题的图片 34 | ::: 35 | 36 | ``` js 37 | module.exports = { 38 | plugins: [ 39 | [ 40 | 'img-lazy', 41 | { /* 配置 */ } 42 | ] 43 | ] 44 | } 45 | ``` 46 | 47 | ## 配置 48 | 49 | ### useNative 50 | - Type: `Boolean` 51 | - Default: `true` 52 | - Required: `false` 53 | 54 | 是否使用基于原生的懒加载 55 | 56 | ::: tip 57 | 一般情况下使用原生的懒加载会比不使用加载更多的图片 58 | ::: 59 | 60 | ### selector 61 | - Type: `string` 62 | - Default: `lazy` 63 | - Required: `false` 64 | 65 | 默认的懒加载类名 66 | 67 | ### rootMargin 68 | - Type: `String` 69 | - Default: `200px` 70 | - Required: `false` 71 | 72 | IntersectionObserver 的 rootMargin 配置，useNative: false 时可用 73 | 74 | ### prefix 75 | - Type: `string` `Function` 76 | - Default: `src => src && src.charAt(0) === '/' && !src.startsWith(ctx.base) ? ctx.base + src.slice(1) : src` 77 | - Required: `false` 78 | 79 | 配置图片src的前缀 80 | -------------------------------------------------------------------------------- /docs/zh/plugin/reading-progress.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: vuepress-plugin-reading-progress 3 | description: 为 vuepress 增加阅读进度条 4 | --- 5 | 6 | # vuepress-plugin-reading-progress 7 | 8 | ::: tip 9 | 内置插件，此插件你可以直接使用或者修改插件配置，*或者禁用这个插件* 10 | 11 | ``` js 12 | module.exports = { 13 | plugins: [ 14 | ['reading-progress', false] 15 | ] 16 | } 17 | ``` 18 | 19 | ::: 20 | 21 | [源码](https://github.com/tolking/vuepress-plugin-reading-progress) 22 | 23 | ## 修改配置 24 | 25 | ``` js 26 | module.exports = { 27 | plugins: [ 28 | [ 29 | 'reading-progress', 30 | { /* 配置 */ } 31 | ] 32 | ] 33 | } 34 | ``` 35 | 36 | ## 配置 37 | 38 | ::: tip 39 | 主题采用的默认配置为（仅在文章详情页面显示阅读进度条） 40 | 41 | ``` js 42 | module.exports = { 43 | plugins: [ 44 | ['reading-progress', { readingDir: /[^/]+$/ }] 45 | ] 46 | } 47 | ``` 48 | 49 | ::: 50 | 51 | ### readingDir 52 | 53 | - Type: `null`, `string`, `array`, `object`, `RegExp` 54 | - Default: `null` 55 | 56 | 筛选需要显示阅读进度条的文件 57 | 58 | 例如: 59 | 60 | ``` js 61 | { 62 | readingDir: null, // 将在所有页面显示阅读进度条 63 | // 或者 64 | readingDir: 'posts' 65 | // 或者 66 | readingDir: ['posts1', 'posts2', 'posts3'] 67 | // 或者 { dir: fixed } 68 | readingDir: { 69 | posts1: 'top', 70 | posts2: 'bottom', 71 | posts3: 'left' 72 | } 73 | // 或者 RegExp 74 | readingDir: /[^/]+$/ // 排除以 `/` 结尾的 regularPath 75 | // 或者 76 | readingDir: new RegExp('[^/]+$') 77 | } 78 | ``` 79 | 80 | ### fixed 81 | 82 | - Type: `string` 83 | - Default: `top` 84 | 85 | 支持 `top`, `bottom`, `left`, `right` 86 | 87 | 设置进度条的显示位置 88 | 89 | ## Front matter 90 | 91 | 使用 `readingShow` 控制当前页面的阅读进度条显示 92 | 93 | - Type: `string`, `boolean` 94 | - Default: `null` 95 | - 支持 `top`, `bottom`, `left`, `right`, `true`, `false` 96 | 97 | ``` md 98 | --- 99 | readingShow: false 100 | --- 101 | ``` 102 | 103 | ## 样式 104 | 105 | 如果希望对样式应用简单的颜色替代 106 | 107 | ``` sh 108 | +- .vuepress 109 | +- styles 110 | +- palette.styl 111 | ``` 112 | 113 | ``` styl 114 | $readingBgColor = transparent 115 | $readingZIndex = 1000 116 | $readingSize = 3px 117 | $readingProgressColor = $accentColor 118 | $readingProgressImage = none 119 | ``` 120 | 121 | 例如: 122 | 123 | ``` styl 124 | $readingProgressImage = linear-gradient(-120deg, #E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%, #3BB4D7 60%, #2F4D9E 75%, #71378A 80%) 125 | ``` 126 | -------------------------------------------------------------------------------- /enhanceApp.js: -------------------------------------------------------------------------------- 1 | import themeConfig from '@theme/lib/themeConfig' 2 | import { objectDeepMerge } from '@theme/lib/util' 3 | import ImgLazy from 'vuepress-plugin-img-lazy/ImgLazy' 4 | 5 | export default ({ Vue }) => { 6 | Vue.component(ImgLazy.name, ImgLazy) 7 | Vue.mixin({ 8 | computed: { 9 | $themeConfig() { 10 | return objectDeepMerge(themeConfig, this.$site.themeConfig) 11 | }, 12 | $cover() { 13 | const item = this.$themeConfig.cover 14 | if (this.$frontmatter.image) { 15 | return this.$frontmatter.image 16 | } else if (typeof item === 'string') { 17 | return item 18 | } else if (item[this.$route.path]) { 19 | return item[this.$route.path] 20 | } else { 21 | return item.base || '' 22 | } 23 | }, 24 | $isHome() { 25 | return ( 26 | this.$localePath === this.$page.regularPath || 27 | this.$page.regularPath.startsWith( 28 | '/' + this.$pluginConfig.paginatioPath 29 | ) 30 | ) 31 | } 32 | } 33 | }) 34 | } 35 | -------------------------------------------------------------------------------- /examples/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: 'Theme', 3 | description: 'theme for Vuepress', 4 | base: '/', 5 | dest: 'dist/', 6 | theme: require.resolve('../../'), 7 | themeConfig: { 8 | // defaultTheme: { dark: [19, 6] }, 9 | showThemeButton: false, 10 | cover: '/cover.jpg', 11 | logo: '/logo.png', 12 | search: true, 13 | backgroundImage: false, 14 | pageGroup: 5, 15 | // postTime: { 16 | // createTime: 'Create Time', 17 | // lastUpdated: 'Last Updated', 18 | // options: { 19 | // dateStyle: 'full', 20 | // timeStyle: 'short', 21 | // hour12: false, 22 | // weekday: 'long' 23 | // } 24 | // }, 25 | nav: [ 26 | { text: 'Home', link: '/' }, 27 | { text: 'Posts', link: '/posts/' }, 28 | { text: 'Doc', link: '/doc/' }, 29 | { text: 'Tags', link: '/tag/' }, 30 | { text: 'Categories', link: '/category/' }, 31 | { text: 'About', link: '/about/' } 32 | ], 33 | footer: [ 34 | { text: 'Github', link: 'https://github.com/tolking' } 35 | ] 36 | }, 37 | // postcss: { 38 | // plugins: [ 39 | // require('css-prefers-color-scheme/postcss'), 40 | // require('autoprefixer') 41 | // ] 42 | // } 43 | } 44 | -------------------------------------------------------------------------------- /examples/.vuepress/public/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tolking/vuepress-theme-ououe/14ca0b0e2d37366f285ce73560836f789b394d67/examples/.vuepress/public/cover.jpg -------------------------------------------------------------------------------- /examples/.vuepress/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tolking/vuepress-theme-ououe/14ca0b0e2d37366f285ce73560836f789b394d67/examples/.vuepress/public/logo.png -------------------------------------------------------------------------------- /examples/.vuepress/styles/index.styl: -------------------------------------------------------------------------------- 1 | .tip, 2 | .warning, 3 | .danger 4 | padding 1rem 1.5rem 5 | border-left-width .5rem 6 | border-left-style solid 7 | margin 1rem 0 8 | .title 9 | font-weight bold 10 | .tip 11 | background-color #f3f5f7 12 | border-color #42b983 13 | @media (prefers-color-scheme: dark) 14 | background-color #3e3b3b 15 | .warning 16 | background-color rgba(255,229,100,.3) 17 | border-color darken(#ffe564, 35%) 18 | color darken(#ffe564, 70%) 19 | @media (prefers-color-scheme: dark) 20 | background-color rgba(185, 174, 119, 0.3) 21 | .title 22 | color darken(#ffe564, 50%) 23 | .danger 24 | background-color #ffe6e6 25 | border-color darken(red, 20%) 26 | color darken(red, 70%) 27 | @media (prefers-color-scheme: dark) 28 | background-color rgba(255, 214, 214, 0.3) 29 | .title 30 | color darken(red, 40%) 31 | .right 32 | p 33 | color transparentify($textColor, 0.5) 34 | font-size 0.9rem 35 | text-align right 36 | @media (prefers-color-scheme: dark) 37 | color transparentify(#fff, 0.5) 38 | 39 | @media print 40 | .tip, .warning, .danger 41 | background-color transparent 42 | -------------------------------------------------------------------------------- /examples/about/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | layout: Page 4 | --- 5 | 6 | # A blog theme for VuePress 7 | 8 | > This theme is for Vuepress 1.0 9 | 10 | Live Demo: [My Blog](https://ououe.com) 11 | -------------------------------------------------------------------------------- /examples/doc/vuepress-plugin-blog-multidir.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: vuepress-plugin-blog-multidir 3 | lang: en-US 4 | display: home 5 | description: Build your blog through multiple folders for vuepress 6 | image: https://picsum.photos/1920/1080/?random&date=2019-03-09 7 | date: 2019-03-09 8 | tags: 9 | - vue 10 | - vuepress 11 | categories: 12 | - documentation 13 | --- 14 | 15 | > Build your blog through multiple folders 16 | 17 | **This plugin is for Vuepress 1.0** 18 | 19 | 20 | 21 | ## Installation 22 | 23 | ``` sh 24 | yarn add vuepress-plugin-blog-multidir 25 | # or 26 | npm i vuepress-plugin-blog-multidir 27 | ``` 28 | 29 | ## Usage 30 | 31 | ``` js {3} 32 | module.exports = { 33 | plugins: [ 34 | 'blog-multidir' 35 | ] 36 | } 37 | ``` 38 | 39 | [ Vuepress documentation](https://v1.vuepress.vuejs.org/plugin/using-a-plugin.html) 40 | 41 | 42 | ## Options 43 | 44 | ### aliasesRoot 45 | - Type: `string` 46 | - default: `:root` 47 | 48 | **Can't have the same name as your folder** (For internal use only). 49 | 50 | ### categoryIndexPageUrl 51 | - Type: `string` 52 | - Default: `/category/` 53 | 54 | ### tagIndexPageUrl 55 | - Type: `string` 56 | - Default: `/tag/` 57 | 58 | ### categoryLayout 59 | - Type: `string` 60 | - Default: `Tag` 61 | 62 | ### tagLayout 63 | - Type: `string` 64 | - Default: `Tag` 65 | 66 | ### postLayout 67 | - Type: `string` 68 | - Default: `Page` 69 | 70 | ### postsDir 71 | - Type: `string`, `array`, `Object` 72 | - Default: `posts` 73 | 74 | **Configures the permalink generated for you folder.** 75 | 76 | example 77 | ``` js 78 | postsDir = 'posts' 79 | // or 80 | postsDir = ['posts1', 'posts2', 'posts3'] 81 | // or { path: permalink } 82 | postsDir = { 83 | posts1: ':year', 84 | posts2: ':month' 85 | } 86 | ``` 87 | 88 | ### permalink 89 | - Type: `string`, `boolean(false)` 90 | - Default: `false` 91 | 92 | See [Permalinks](https://v1.vuepress.vuejs.org/guide/permalinks.html#template-variables) for a list of valid variables. 93 | 94 | ### postsSorter 95 | - Type: `function` 96 | - Default: 97 | ``` js 98 | ((prev, next) => { 99 | const prevTime = new Date(prev.frontmatter.date).getTime() 100 | const nextTime = new Date(next.frontmatter.date).getTime() 101 | return prevTime - nextTime > 0 ? -1 : 1 102 | }) 103 | ``` 104 | 105 | ### paginationDir 106 | - Type: `boolean`, `string`, `array` 107 | - Default: `true` 108 | 109 | example 110 | ``` js 111 | { 112 | paginationDir: true // Enable all paging 113 | // or 114 | paginationDir: false // Cancel all pages 115 | // or 116 | paginationDir: 'posts' // Enable single paging for `posts` folder 117 | // or 118 | paginationDir: ['posts1', 'posts2'] // Enable multiple paging 119 | } 120 | ``` 121 | 122 | ### paginationLimit 123 | - Type: `number` 124 | - Default: `12` 125 | 126 | ### paginatioPath 127 | - Type: `string` 128 | - Default: `page/` 129 | 130 | ## computed 131 | 132 | ### $pluginConfig 133 | 134 | Plugin config information 135 | 136 | ### $tags 137 | 138 | Page information sorted by tags 139 | 140 | ### $categories 141 | 142 | Page information sorted by categories 143 | 144 | ### $lists 145 | 146 | Page information sorted by folders 147 | 148 | ### $list 149 | 150 | If you are in the pagination page. you can get 151 | ``` js 152 | { 153 | pageKeys, 154 | pagination, 155 | path, 156 | posts 157 | } 158 | ``` 159 | 160 | or If you are in the post page. you can get 161 | ``` js 162 | { 163 | index, 164 | total, 165 | dir, 166 | lastPost, 167 | nextPost 168 | } 169 | ``` 170 | from `this.$list` 171 | 172 | ## attention 173 | 174 | ::: tip TIP 175 | **You don't need to create a `index.md(or README.md)` file in a folder that needs Pagination** 176 | ::: 177 | 178 | ``` 179 | +- blog 180 | +- posts 181 | +- test.md 182 | ... 183 | ... 184 | +- about 185 | +- index.md 186 | ``` 187 | 188 | or set `layout` 189 | 190 | ``` md 191 | // about -> index.md 192 | 193 | --- 194 | layout: Page 195 | --- 196 | ``` 197 | 198 | --- 199 | 200 | You need to use `display` to control where the current article is displayed 201 | 202 | ``` md 203 | // posts -> test.md 204 | 205 | --- 206 | display: home 207 | --- 208 | ``` 209 | 210 | A list of home pages will displayed. 211 | 212 | ``` md 213 | // posts -> test.md 214 | 215 | --- 216 | display: none 217 | --- 218 | ``` 219 | 220 | It will not be displayed. 221 | 222 | However, you can still access it through the right path. 223 | 224 | --- 225 | 226 | If you are in the pagination page. you can get the current page by `this.$route.meta.current`. 227 | 228 | ## License 229 | 230 | [MIT](http://opensource.org/licenses/MIT) 231 | 232 | ## Keywords 233 | 234 | vue vuepress plugin blog blog-multidir 235 | -------------------------------------------------------------------------------- /examples/doc/vuepress-plugin-img-lazy.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: vuepress-plugin-img-lazy 3 | lang: en-US 4 | description: a markdown-it plugin to better supporting image lazy loading 5 | image: https://picsum.photos/536/354?random&date=2019-09-21 6 | date: 2019-09-21 7 | vssue-title: vuepress-plugin-img-lazy 8 | tags: 9 | - vue 10 | - vuepress 11 | categories: 12 | - documentation 13 | --- 14 | 15 | > a vuepress plugin to better supporting image lazy loading 16 | 17 | 18 | 19 | base on [markdown-it-img-lazy](https://github.com/tolking/markdown-it-img-lazy) and [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize) and [lozad](https://github.com/ApoorvSaxena/lozad.js) 20 | 21 | [Live Demo](https://tolking.github.io/vuepress-plugin-img-lazy/preview.html) 22 | 23 | ## Installation 24 | 25 | ``` sh 26 | yarn add vuepress-plugin-img-lazy 27 | # or 28 | npm i vuepress-plugin-img-lazy 29 | ``` 30 | 31 | ## Usage 32 | 33 | ``` js 34 | module.exports = { 35 | plugins: [ 36 | 'img-lazy' 37 | ] 38 | } 39 | ``` 40 | 41 | ``` md 42 | ![img](img.jpg) 43 | 44 | ![img](img.jpg =500x300) 45 | 46 | 47 | ``` 48 | 49 | ## Options 50 | 51 | ### useLoading 52 | - Type: `Boolben` 53 | - Default: `true` 54 | 55 | Use the native image [lazy-loading](https://caniuse.com/#feat=loading-lazy-attr) for the web 56 | 57 | ### selector 58 | - Type: `string` 59 | - Default: `lazy` 60 | 61 | Default class name for image 62 | -------------------------------------------------------------------------------- /examples/doc/vuepress-theme-ououe.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: vuepress-theme-ououe 3 | lang: en-US 4 | display: home 5 | description: A blog theme for VuePress 6 | image: https://picsum.photos/1920/1080/?random&date=2019-02-22 7 | date: 2019-02-22 8 | tags: 9 | - vue 10 | - vuepress 11 | categories: 12 | - documentation 13 | --- 14 | 15 | > A blog theme for VuePress 16 | 17 | **This plugin is for Vuepress 1.0** 18 | 19 | 20 | 21 | Live Demo: [My Blog](https://ououe.com) 22 | 23 | Uses [vuepress-theme-ououe-template](https://github.com/tolking/vuepress-theme-ououe-template) to starter 24 | 25 | Take [TryGhost/Casper](https://github.com/TryGhost/Casper) as a reference 26 | 27 | [Source code](https://github.com/tolking/vuepress-theme-ououe) 28 | 29 | --- 30 | 31 | ## Installation 32 | 33 | ``` sh 34 | yarn add vuepress-theme-ououe 35 | # or 36 | npm i vuepress-theme-ououe 37 | ``` 38 | 39 | ## Usage 40 | 41 | ``` js {3} 42 | // .vuepress -> config.js 43 | module.exports = { 44 | theme: 'ououe', 45 | themeConfig: { 46 | // ... 47 | } 48 | } 49 | ``` 50 | 51 | ## Options 52 | 53 | ### defaultTheme 54 | - Type: `string`, `object` 55 | - Default: `undefined` 56 | 57 | ::: tip 58 | By default, light or dark themes are displayed by [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme), You can change it by `defaultTheme` 59 | ::: 60 | 61 | support `light`, `dark` or `{ theme: [begin hours, end hours] }` 62 | 63 | ``` js {4,6,8} 64 | module.exports = { 65 | theme: 'ououe', 66 | themeConfig: { 67 | defaultTheme: 'dark', 68 | // or 69 | defaultTheme: { dark: [18, 6] }, 70 | // or 71 | defaultTheme: { light: [6, 18], dark: [18, 6] }, 72 | }, 73 | // When using `light theme` or `dark theme`, you need to add a postcss plugins to your config.js 74 | postcss: { 75 | plugins: [ 76 | require('css-prefers-color-scheme/postcss'), 77 | require('autoprefixer') 78 | ] 79 | } 80 | } 81 | ``` 82 | 83 | ### showThemeButton 84 | - Type: `boolean` 85 | - Default: `true` 86 | 87 | `showThemeButton` to control the chose theme button display 88 | 89 | ::: tip 90 | The display of the theme is determined by 91 | **`botton chose theme` -> `defaultTheme` -> `prefers-color-scheme`** 92 | ::: 93 | 94 | ### cover 95 | - Type: `string`, `object` 96 | - Default: `''` 97 | 98 | ``` js 99 | cover: '/cover.jpg' 100 | // or { base: img, path: img } 101 | cover: { 102 | base: '/cover.jpg', 103 | '/posts/': '/posts.jpg' 104 | // ... 105 | } 106 | ``` 107 | 108 | Show in the header of the index page 109 | 110 | ### logo 111 | - Type: `string` 112 | - Default: `''` 113 | 114 | ### search 115 | - Type: `boolean` 116 | - Default: `true` 117 | 118 | ### pageGroup 119 | - Type: `number` 120 | - Default: `5` 121 | 122 | Number of pages Pagination 123 | 124 | ### postTime 125 | - Type: `object` 126 | - Default: 127 | 128 | ``` js 129 | { 130 | createTime: 'Create Time', 131 | lastUpdated: 'Last Updated' 132 | } 133 | ``` 134 | 135 | ### nav 136 | - Type: `array` 137 | - Default: `[]` 138 | 139 | ``` js 140 | { 141 | text: 'Home', 142 | link: '/' 143 | }, 144 | { 145 | text: 'Posts', 146 | link: '/posts/' 147 | }, 148 | { 149 | text: 'About', 150 | link: '/about/' 151 | } 152 | // ... 153 | ``` 154 | 155 | ### footer 156 | - Type: `array` 157 | - Default: `[]` 158 | 159 | ``` js 160 | { 161 | text: 'link', 162 | link: '/' 163 | } 164 | // ... 165 | ``` 166 | 167 | ### useVssue 168 | - Type: `boolean` 169 | - Default: `false` 170 | 171 | Use [vssue](https://vssue.js.org/guide/vuepress.html) for comment system 172 | 173 | **You must install it before using it** 174 | 175 | ## Structure directores 176 | ``` 177 | +- blog 178 | +- .vuepress 179 | +- config.js 180 | +- posts 181 | +- test.md 182 | ... 183 | +- about 184 | +- index.md 185 | ... 186 | ``` 187 | 188 | ::: tip TIP 189 | **You don't need to create a `index.md(or README.md)` file in a folder that needs Pagination** 190 | ::: 191 | 192 | or set `layout` 193 | 194 | ``` md 195 | // about -> index.md 196 | 197 | --- 198 | layout: Page 199 | --- 200 | ``` 201 | 202 | ## frontmatter 203 | 204 | ``` md 205 | // posts -> test.md 206 | 207 | --- 208 | title: How to use 209 | display: home 210 | image: ... 211 | date: 2019-02-22 212 | tags: 213 | - vuepress 214 | - vuepress-themt-ououe 215 | categories: 216 | - blog 217 | --- 218 | ``` 219 | 220 | You need to use `display` to control where the current article is displayed 221 | 222 | ``` md 223 | // posts -> test.md 224 | 225 | --- 226 | display: home 227 | --- 228 | ``` 229 | 230 | A list of home pages will displayed. 231 | 232 | ``` md 233 | // posts -> test.md 234 | 235 | --- 236 | display: none 237 | --- 238 | ``` 239 | 240 | It will not be displayed. 241 | 242 | However, you can still access it through the right path. 243 | 244 | ## Other 245 | 246 | ### Partitioning some function into [vuepress-plugin-blog-multidir](https://github.com/tolking/vuepress-plugin-blog-multidir) 247 | 248 | You can change the default options. 249 | 250 | ``` js 251 | // .vuepress -> config.js 252 | module.exports = { 253 | theme: 'ououe', 254 | themeConfig: { 255 | // ... 256 | }, 257 | plugins: { 258 | 'blog-multidir': { 259 | //... 260 | } 261 | } 262 | } 263 | ``` 264 | 265 | [default options](https://github.com/tolking/vuepress-plugin-blog-multidir) 266 | 267 | ### Change theme 268 | 269 | ``` 270 | +- blog 271 | +- .vuepress 272 | +- styles 273 | +- palette.styl 274 | +- index.styl 275 | ``` 276 | 277 | #### palette.styl 278 | 279 | If you wish to apply simple color overrides to the styling of the [default preset](https://github.com/tolking/vuepress-theme-ououe/blob/master/styles/palette.styl) or define some color variables for using later. 280 | 281 | #### index.styl 282 | 283 | add styles 284 | 285 | [Theme Inheritance](https://v1.vuepress.vuejs.org/theme/inheritance.html) 286 | 287 | ## License 288 | 289 | [MIT](http://opensource.org/licenses/MIT) 290 | 291 | ## Keywords 292 | 293 | vue vuepress blog blog-theme vuepress-theme light-theme dark-theme 294 | -------------------------------------------------------------------------------- /examples/posts/1.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: How to use 3 | display: home 4 | image: https://picsum.photos/1920/1080/?random&date=2017-01-22 5 | date: 2019-01-22 6 | tags: 7 | - about 8 | - test 9 | categories: 10 | - futurama 11 | --- 12 | 13 | The post intro uses the `` tag 14 | 15 | 16 | 17 | # h1 18 | ## h2 19 | ### h3 20 | #### h4 21 | ##### h5 22 | ###### h6 23 | 24 | ``` sh 25 | 26 | npm i vuepress-theme-ououe 27 | ``` 28 | 29 | ``` js{2} 30 | const app = 'app' 31 | console.log(app) 32 | ``` 33 | 34 | --- 35 | 36 | ![An image](/cover.jpg) 37 | 38 | 39 | 40 | | Tables | Are | Cool | 41 | | ------------- |:-------------:| -----:| 42 | | col 3 is | right-aligned | $1600 | 43 | | col 2 is | centered | $12 | 44 | | zebra stripes | are neat | $1 | 45 | 46 | 47 | ::: tip 48 | This is a tip 49 | ::: 50 | 51 | ::: warning 52 | This is a warning 53 | ::: 54 | 55 | ::: danger 56 | This is a dangerous warning 57 | ::: 58 | 59 | > **using [vuepress-plugin-container](https://vuepress.github.io/zh/plugins/container/) instead** -------------------------------------------------------------------------------- /examples/posts/2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: without display-home 3 | image: https://picsum.photos/1920/1080/?random&date=2019-02-20 4 | date: 2019-02-20 5 | tags: 6 | - display 7 | - test 8 | categories: 9 | - futurama 10 | --- 11 | 12 | without `display: home` 13 | 14 | This page will not be displayed on the home page. -------------------------------------------------------------------------------- /examples/posts/3.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: display-none 3 | display: none 4 | image: https://picsum.photos/1920/1080/?random&date=2019-02-20 5 | date: 2019-02-20 6 | tags: 7 | - display 8 | categories: 9 | - futurama 10 | --- 11 | 12 | with `display: none` 13 | 14 | It will not be displayed. 15 | 16 | However, you can still access it through the right path. -------------------------------------------------------------------------------- /examples/posts/4.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: How to use 3 | display: home 4 | image: https://picsum.photos/1920/1080/?random&date=2017-01-22 5 | date: 2019-01-22 6 | tags: 7 | - about 8 | - test 9 | categories: 10 | - futurama 11 | --- 12 | 13 | The post intro uses the `` tag 14 | 15 | 16 | 17 | # h1 18 | ## h2 19 | ### h3 20 | #### h4 21 | ##### h5 22 | ###### h6 23 | 24 | ``` sh 25 | 26 | npm i vuepress-theme-ououe 27 | ``` 28 | 29 | ``` js{2} 30 | const app = 'app' 31 | console.log(app) 32 | ``` 33 | 34 | --- 35 | 36 | ![An image](/cover.jpg) 37 | 38 | | Tables | Are | Cool | 39 | | ------------- |:-------------:| -----:| 40 | | col 3 is | right-aligned | $1600 | 41 | | col 2 is | centered | $12 | 42 | | zebra stripes | are neat | $1 | 43 | 44 | 45 | ::: tip 46 | This is a tip 47 | ::: 48 | 49 | ::: warning 50 | This is a warning 51 | ::: 52 | 53 | ::: danger 54 | This is a dangerous warning 55 | ::: 56 | 57 | > **using [vuepress-plugin-container](https://vuepress.github.io/zh/plugins/container/) instead** -------------------------------------------------------------------------------- /examples/posts/5.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: How to use 3 | display: home 4 | image: https://picsum.photos/1920/1080/?random&date=2017-01-22 5 | date: 2019-01-22 6 | tags: 7 | - about 8 | - test 9 | categories: 10 | - futurama 11 | --- 12 | 13 | The post intro uses the `` tag 14 | 15 | 16 | 17 | # h1 18 | ## h2 19 | ### h3 20 | #### h4 21 | ##### h5 22 | ###### h6 23 | 24 | ``` sh 25 | 26 | npm i vuepress-theme-ououe 27 | ``` 28 | 29 | ``` js{2} 30 | const app = 'app' 31 | console.log(app) 32 | ``` 33 | 34 | --- 35 | 36 | ![An image](/cover.jpg) 37 | 38 | | Tables | Are | Cool | 39 | | ------------- |:-------------:| -----:| 40 | | col 3 is | right-aligned | $1600 | 41 | | col 2 is | centered | $12 | 42 | | zebra stripes | are neat | $1 | 43 | 44 | 45 | ::: tip 46 | This is a tip 47 | ::: 48 | 49 | ::: warning 50 | This is a warning 51 | ::: 52 | 53 | ::: danger 54 | This is a dangerous warning 55 | ::: 56 | 57 | > **using [vuepress-plugin-container](https://vuepress.github.io/zh/plugins/container/) instead** -------------------------------------------------------------------------------- /examples/posts/6.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: How to use 3 | display: home 4 | image: https://picsum.photos/1920/1080/?random&date=2017-01-22 5 | date: 2019-01-22 6 | tags: 7 | - about 8 | - test 9 | categories: 10 | - futurama 11 | --- 12 | 13 | The post intro uses the `` tag 14 | 15 | 16 | 17 | # h1 18 | ## h2 19 | ### h3 20 | #### h4 21 | ##### h5 22 | ###### h6 23 | 24 | ``` sh 25 | 26 | npm i vuepress-theme-ououe 27 | ``` 28 | 29 | ``` js{2} 30 | const app = 'app' 31 | console.log(app) 32 | ``` 33 | 34 | --- 35 | 36 | ![An image](/cover.jpg) 37 | 38 | | Tables | Are | Cool | 39 | | ------------- |:-------------:| -----:| 40 | | col 3 is | right-aligned | $1600 | 41 | | col 2 is | centered | $12 | 42 | | zebra stripes | are neat | $1 | 43 | 44 | 45 | ::: tip 46 | This is a tip 47 | ::: 48 | 49 | ::: warning 50 | This is a warning 51 | ::: 52 | 53 | ::: danger 54 | This is a dangerous warning 55 | ::: 56 | 57 | > **using [vuepress-plugin-container](https://vuepress.github.io/zh/plugins/container/) instead** -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | layoutDir: 'layouts', 3 | globalLayout: '/layouts/GlobalLayout', 4 | plugins: [ 5 | '@vuepress/back-to-top', 6 | '@vuepress/search', 7 | '@vuepress/plugin-nprogress', 8 | ['@vuepress/last-updated', { transformer: timestamp => timestamp }], 9 | 'blog-multidir', 10 | 'img-lazy', 11 | ['reading-progress', { readingDir: /[^/]+$/ }] 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /layouts/404.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 52 | -------------------------------------------------------------------------------- /layouts/GlobalLayout.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 122 | 123 | 128 | 185 | -------------------------------------------------------------------------------- /layouts/Layout.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | 21 | 26 | -------------------------------------------------------------------------------- /layouts/Page.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /layouts/Tag.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /lib/themeConfig.js: -------------------------------------------------------------------------------- 1 | export default { 2 | defaultTheme: false, 3 | showThemeButton: true, 4 | cover: '', 5 | logo: '', 6 | search: true, 7 | backgroundImage: true, 8 | useVssue: false, 9 | pageGroup: 5, 10 | postTime: { 11 | createTime: 'Create Time', 12 | lastUpdated: 'Last Updated', 13 | options: { 14 | dateStyle: 'medium' 15 | } 16 | }, 17 | nav: [], 18 | footer: [] 19 | } 20 | -------------------------------------------------------------------------------- /lib/util.js: -------------------------------------------------------------------------------- 1 | export const checkUrl = url => /^((ht|f)tps?):\/\/?/.test(url) 2 | 3 | export const objectDeepMerge = (obj1, obj2) => { 4 | let key 5 | for (key in obj2) { 6 | obj1[key] = 7 | obj1[key] && obj1[key].toString() === '[object Object]' 8 | ? objectDeepMerge(obj1[key], obj2[key]) 9 | : (obj1[key] = obj2[key]) 10 | } 11 | return obj1 12 | } 13 | 14 | export const getCategories = item => { 15 | if (item.categories) { 16 | return item.categories 17 | } else if (item.category) { 18 | return [item.category] 19 | } else { 20 | return [] 21 | } 22 | } 23 | 24 | export const getTags = item => { 25 | if (item.tags) { 26 | return item.tags 27 | } else if (item.tag) { 28 | return [item.tags] 29 | } else { 30 | return [] 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuepress-theme-ououe", 3 | "version": "1.5.3", 4 | "main": "index.js", 5 | "description": "A blog theme for VuePress by tolking", 6 | "author": "tolking ", 7 | "license": "MIT", 8 | "repository": "https://github.com/tolking/vuepress-theme-ououe", 9 | "bugs": { 10 | "url": "https://github.com/tolking/vuepress-theme-ououe/issues" 11 | }, 12 | "homepage": "https://github.com/tolking/vuepress-theme-ououe", 13 | "doc": "https://tolking.github.io/vuepress-theme-ououe", 14 | "keywords": [ 15 | "vue", 16 | "vuepress", 17 | "blog", 18 | "blog-theme", 19 | "vuepress-theme", 20 | "light-theme", 21 | "dark-theme" 22 | ], 23 | "scripts": { 24 | "dev": "vuepress dev examples", 25 | "serve": "vuepress dev examples", 26 | "build": "vuepress build examples", 27 | "dev:docs": "vuepress dev docs", 28 | "build:docs": "vuepress build docs" 29 | }, 30 | "dependencies": { 31 | "@vuepress/plugin-back-to-top": "^1.3.1", 32 | "@vuepress/plugin-last-updated": "^1.3.1", 33 | "@vuepress/plugin-nprogress": "^1.3.1", 34 | "@vuepress/plugin-search": "^1.3.1", 35 | "@vuepress/shared-utils": "^1.3.1", 36 | "css-prefers-color-scheme": "^3.1.1", 37 | "vuepress": "^1.3.1", 38 | "vuepress-plugin-blog-multidir": "^1.0.4", 39 | "vuepress-plugin-img-lazy": "^1.0.4", 40 | "vuepress-plugin-reading-progress": "^1.0.10" 41 | }, 42 | "devDependencies": { 43 | "@vue/eslint-config-prettier": "^4.0.1", 44 | "eslint": "^5.16.0", 45 | "eslint-plugin-vue": "^5.2.2", 46 | "vuepress-theme-default-prefers-color-scheme": "^2.0.0" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /styles/base.styl: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 2 | margin: 0; 3 | padding: 0; 4 | border: 0; 5 | outline: 0; 6 | font-size: 100%; 7 | background: transparent; 8 | } 9 | // ol, ul { 10 | // list-style: none; 11 | // } 12 | blockquote, q { 13 | quotes: none; 14 | } 15 | blockquote:before, blockquote:after, q:before, q:after { 16 | content: ''; 17 | content: none; 18 | } 19 | :focus { 20 | outline: 0; 21 | } 22 | ins { 23 | text-decoration: none; 24 | } 25 | del { 26 | text-decoration: line-through; 27 | } 28 | table { 29 | border-collapse: collapse; 30 | border-spacing: 0; 31 | } 32 | a:link, a:visited, a:hover, a:active { 33 | text-decoration: none; 34 | outline: none; 35 | } 36 | article, aside, details, figcaption, figure, footer, header, menu, nav, section { 37 | display: block; 38 | } 39 | img { 40 | border: none; 41 | } 42 | img[src=""] { 43 | opacity: 0; 44 | } 45 | input { 46 | padding: 0; 47 | } -------------------------------------------------------------------------------- /styles/code.styl: -------------------------------------------------------------------------------- 1 | .content 2 | code 3 | color lighten($textColor, 20%) 4 | padding 0.25rem 0.5rem 5 | margin 0 6 | font-size .85em 7 | background-color rgba(27,31,35,0.05) 8 | border-radius 3px 9 | transition all .5s ease-in-out 10 | @media (prefers-color-scheme: dark) 11 | color #578dc1 12 | background-color #444 13 | @media print 14 | color $textColor 15 | background-color transparent 16 | page-break-inside avoid 17 | .token 18 | &.deleted 19 | color #EC5975 20 | &.inserted 21 | color $accentColor 22 | 23 | .content 24 | pre, pre[class*="language-"] 25 | line-height 1.4 26 | padding 1.25rem 1.5rem 27 | margin 0.85rem 0 28 | background-color $codeBgColor 29 | border-radius 6px 30 | overflow auto 31 | @media print 32 | background-color transparent 33 | page-break-inside avoid 34 | code 35 | color #eee 36 | padding 0 37 | background-color transparent 38 | border-radius 0 39 | @media print 40 | color $textColor 41 | white-space pre-wrap 42 | page-break-inside avoid 43 | 44 | div[class*="language-"] 45 | position relative 46 | background-color $codeBgColor 47 | border-radius 6px 48 | .highlight-lines 49 | user-select none 50 | padding-top 1.3rem 51 | position absolute 52 | top 0 53 | left 0 54 | width 100% 55 | line-height 1.4 56 | .highlighted 57 | background-color rgba(0, 0, 0, 50%) 58 | @media print 59 | background-color transparent 60 | page-break-inside avoid 61 | pre, pre[class*="language-"] 62 | background transparent 63 | position relative 64 | z-index 1 65 | &::before 66 | position absolute 67 | z-index 3 68 | top 0.8em 69 | right 1em 70 | font-size 0.85em 71 | color rgba(255, 255, 255, 0.4) 72 | @media print 73 | color $textColor 74 | page-break-inside avoid 75 | &:not(.line-numbers-mode) 76 | .line-numbers-wrapper 77 | display none 78 | &.line-numbers-mode 79 | .highlight-lines .highlighted 80 | position relative 81 | &:before 82 | content ' ' 83 | position absolute 84 | z-index 3 85 | left 0 86 | top 0 87 | display block 88 | width $lineNumbersWrapperWidth 89 | height 100% 90 | background-color rgba(0, 0, 0, 66%) 91 | @media print 92 | background-color transparent 93 | pre 94 | padding-left $lineNumbersWrapperWidth + 1 rem 95 | vertical-align middle 96 | .line-numbers-wrapper 97 | position absolute 98 | top 0 99 | width $lineNumbersWrapperWidth 100 | text-align center 101 | color rgba(255, 255, 255, 0.3) 102 | padding 1.25rem 0 103 | line-height 1.4 104 | @media print 105 | color $textColor 106 | br 107 | user-select none 108 | .line-number 109 | position relative 110 | z-index 4 111 | user-select none 112 | font-size 0.85em 113 | &::after 114 | content '' 115 | position absolute 116 | z-index 2 117 | top 0 118 | left 0 119 | width $lineNumbersWrapperWidth 120 | height 100% 121 | border-radius 6px 0 0 6px 122 | border-right 1px solid rgba(0, 0, 0, 66%) 123 | background-color $codeBgColor 124 | @media print 125 | border-right 0 126 | page-break-inside avoid 127 | 128 | for lang in $codeLang 129 | div{'[class~="language-' + lang + '"]'} 130 | &:before 131 | content ('' + lang) 132 | 133 | div[class~="language-javascript"] 134 | &:before 135 | content "js" 136 | 137 | div[class~="language-typescript"] 138 | &:before 139 | content "ts" 140 | 141 | div[class~="language-markup"] 142 | &:before 143 | content "html" 144 | 145 | div[class~="language-markdown"] 146 | &:before 147 | content "md" 148 | 149 | div[class~="language-json"]:before 150 | content "json" 151 | 152 | div[class~="language-ruby"]:before 153 | content "rb" 154 | 155 | div[class~="language-python"]:before 156 | content "py" 157 | 158 | div[class~="language-bash"]:before 159 | content "sh" 160 | 161 | div[class~="language-php"]:before 162 | content "php" 163 | 164 | .token.block-comment, 165 | .token.cdata, 166 | .token.comment, 167 | .token.doctype, 168 | .token.prolog 169 | color #999 170 | 171 | .token.punctuation 172 | color #ccc 173 | 174 | .token.attr-name, 175 | .token.deleted, 176 | .token.namespace, 177 | .token.tag 178 | color #e2777a 179 | 180 | .token.function-name 181 | color #6196cc 182 | 183 | .token.boolean, 184 | .token.function, 185 | .token.number 186 | color #f08d49 187 | 188 | .token.class-name, 189 | .token.constant, 190 | .token.property, 191 | .token.symbol 192 | color #f8c555 193 | 194 | .token.atrule, 195 | .token.builtin, 196 | .token.important, 197 | .token.keyword, 198 | .token.selector 199 | color #cc99cd 200 | 201 | .token.attr-value, 202 | .token.char, 203 | .token.regex, 204 | .token.string, 205 | .token.variable 206 | color #7ec699 207 | 208 | .token.entity, 209 | .token.operator, 210 | .token.url 211 | color #67cdcc 212 | 213 | .token.bold, 214 | .token.important 215 | font-weight:700 216 | 217 | .token.italic 218 | font-style:italic 219 | 220 | .token.entity 221 | cursor:help 222 | 223 | .token.inserted 224 | color green 225 | 226 | .token.deleted 227 | color #ec5975 228 | 229 | .token.content 230 | padding: 0 -------------------------------------------------------------------------------- /styles/content.styl: -------------------------------------------------------------------------------- 1 | .content, 2 | .markdown-body 3 | padding: 3rem 4 | font-size: 16px 5 | a 6 | font-weight 500 7 | color $accentColor 8 | text-decoration none 9 | transition color .5s ease-in-out 10 | @media (prefers-color-scheme: dark) 11 | color $accentDarkColor 12 | @media print 13 | color $accentColor 14 | &[href^="http://"]::after 15 | &[href^="https://"]::after 16 | content " [" attr(href) "] " 17 | .icon.outbound 18 | display none 19 | 20 | p a code 21 | font-weight 400 22 | color $accentColor 23 | transition color .5s ease-in-out 24 | @media (prefers-color-scheme: dark) 25 | color: $accentDarkColor 26 | @media print 27 | color $accentColor 28 | 29 | kbd 30 | padding 0 0.15em 31 | border solid 0.15rem $borderColor 32 | border-bottom solid 0.25rem $borderColor 33 | border-radius 0.15rem 34 | background #eee 35 | transition all .5s ease-in-out 36 | @media (prefers-color-scheme: dark) 37 | border solid 0.15rem $borderDarkColor 38 | border-bottom solid 0.25rem $borderDarkColor 39 | @media print 40 | border solid 0.15rem $borderColor 41 | border-bottom solid 0.25rem $borderColor 42 | 43 | blockquote 44 | font-size 1em 45 | color #999 46 | border-left .5rem solid $accentColor 47 | margin 0.5rem 0 48 | padding .25rem 0 .25rem 1rem 49 | @media (prefers-color-scheme: dark) 50 | border-left .5rem solid $accentDarkColor 51 | & > p 52 | margin 0 53 | 54 | ul, ol 55 | padding-left 1.2em 56 | li 57 | font-size 1em 58 | color $textColor 59 | transition color .5s ease-in-out 60 | @media (prefers-color-scheme: dark) 61 | color $textDarkColor 62 | @media print 63 | color $textColor 64 | 65 | strong 66 | font-weight 600 67 | 68 | h1, h2, h3, h4, h5, h6 69 | color $titleColor 70 | font-weight 600 71 | line-height 1.25 72 | transition color .5s ease-in-out 73 | @media (prefers-color-scheme: dark) 74 | color $titleDarkColor 75 | &:hover .header-anchor 76 | opacity: 1 77 | @media print 78 | color $titleColor 79 | page-break-after avoid 80 | page-break-before avoid 81 | 82 | h1 83 | margin: 1.5rem 0 84 | font-size 2em 85 | 86 | h2 87 | margin: 1.5rem 0 1rem 88 | font-size 1.65em 89 | &+p 90 | @media print 91 | page-break-before avoid 92 | 93 | h3 94 | margin: 1rem 0 95 | font-size 1.35em 96 | 97 | h4 98 | margin: .5rem 0 99 | font-size 1.3em 100 | 101 | h5 102 | margin: .5rem 0 103 | font-size 1.2em 104 | 105 | h6 106 | margin: .5rem 0 107 | font-size 1em 108 | 109 | a.header-anchor 110 | font-size 0.85em 111 | float left 112 | margin-left -0.87em 113 | padding-right 0.23em 114 | margin-top 0.125em 115 | opacity 0 116 | &:hover 117 | text-decoration none 118 | 119 | code, kbd, .line-number 120 | font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace 121 | 122 | p, ul, ol 123 | margin: .6rem 0 124 | line-height 1.6 125 | 126 | p 127 | font-size 1em 128 | color $textColor 129 | transition color .5s ease-in-out 130 | @media (prefers-color-scheme: dark) 131 | color $textDarkColor 132 | @media print 133 | color $textColor 134 | 135 | img 136 | max-width: 100% 137 | @media print 138 | page-break-inside avoid 139 | 140 | hr 141 | border 0 142 | border-top 1px solid $borderColor 143 | transition border .5s ease-in-out 144 | @media (prefers-color-scheme: dark) 145 | border-top 1px solid $borderDarkColor 146 | 147 | table 148 | border-collapse collapse 149 | margin 1rem 0 150 | display: block 151 | overflow-x: auto 152 | @media print 153 | page-break-inside avoid 154 | 155 | tr 156 | border-top 1px solid $shadowColor 157 | transition all .5s ease-in-out 158 | &:nth-child(2n) 159 | background-color #f6f8fa 160 | @media (prefers-color-scheme: dark) 161 | background-color #444 162 | @media print 163 | background-color transparent 164 | 165 | th, td 166 | padding .6em 1em 167 | border 1px solid $shadowColor 168 | color $textColor 169 | transition all .5s ease-in-out 170 | @media (prefers-color-scheme: dark) 171 | border 1px solid $shadowDarkColor 172 | color $textDarkColor 173 | @media print 174 | color $textColor 175 | 176 | .theme-container 177 | &.sidebar-open 178 | .sidebar-mask 179 | display: block 180 | &.no-navbar 181 | .content:not(.custom) > h1, h2, h3, h4, h5, h6 182 | margin-top 1.5rem 183 | padding-top 0 184 | .sidebar 185 | top 0 186 | @media (max-width $phoneWidth) 187 | .content 188 | .markdown-body 189 | padding: 1rem 0 190 | font-size: 15px -------------------------------------------------------------------------------- /styles/flex.styl: -------------------------------------------------------------------------------- 1 | .flex-xb 2 | display flex 3 | justify-content space-between 4 | .flex-xbc 5 | display flex 6 | justify-content space-between 7 | align-items center 8 | .flex-xcc 9 | display flex 10 | justify-content center 11 | align-items center 12 | 13 | .flex-y 14 | display flex 15 | flex-direction column 16 | .flex-ysc 17 | display flex 18 | flex-direction column 19 | justify-content flex-start 20 | align-items center 21 | .flex-yb 22 | display flex 23 | flex-direction column 24 | justify-content space-between 25 | .flex-ycc 26 | display flex 27 | flex-direction column 28 | justify-content center 29 | align-items center 30 | 31 | .flex-w 32 | display flex 33 | flex-wrap wrap 34 | .flex-wac 35 | display flex 36 | flex-wrap wrap 37 | justify-content space-around 38 | align-items center 39 | .flex-wbc 40 | display flex 41 | flex-wrap wrap 42 | justify-content space-between 43 | align-items center 44 | .flex-wcc 45 | display flex 46 | flex-wrap wrap 47 | justify-content center 48 | align-items center -------------------------------------------------------------------------------- /styles/index.styl: -------------------------------------------------------------------------------- 1 | @require './palette' 2 | @require './base' 3 | @require './flex' 4 | @require './plugins' 5 | -------------------------------------------------------------------------------- /styles/palette.styl: -------------------------------------------------------------------------------- 1 | // colors 2 | $accentColor ?= #3eaf7c 3 | $titleColor ?= #333 4 | $textColor ?= #2c3e50 5 | $borderColor ?= #eaecef 6 | $bgColor ?= #f4f8fb 7 | $codeBgColor ?= #282c34 8 | $arrowBgColor ?= #ccc 9 | $shadowColor ?= rgba(0, 0, 0, .3) 10 | $maskColor ?= rgba(0, 0, 0, 0.8) 11 | $whiteColor ?= #fff 12 | $blackColor ?= #000 13 | $transColor ?= transparent 14 | 15 | // darkColors 16 | $accentDarkColor ?= $accentColor 17 | $titleDarkColor ?= #eaecef 18 | $textDarkColor ?= #ccc 19 | $borderDarkColor ?= #4e4e4e 20 | $bgDarkColor ?= #282c34 21 | $codeBgDarkColor ?= #282c34 22 | $arrowBgDarkColor ?= #ccc 23 | $shadowDarkColor ?= rgba(0, 0, 0, .3) 24 | $maskDarkColor ?= rgba(0, 0, 0, 0.8) 25 | $whiteDarkColor ?= #222 26 | $blackDarkColor ?= #eaecef 27 | 28 | // size 29 | $mainWidth ?= 68.75rem 30 | $phoneWidth ?= 37.5rem 31 | $headerHeight ?= 3.5rem 32 | $coverHeight ?= 25rem 33 | $listCardHeight ?= 19rem 34 | $lineNumbersWrapperWidth ?= 2.5rem 35 | -------------------------------------------------------------------------------- /styles/plugins.styl: -------------------------------------------------------------------------------- 1 | // vssue 2 | .page .info .vssue 3 | margin-top 3rem 4 | padding 2rem 5 | border-radius 1rem 6 | background $whiteColor 7 | box-shadow 0px 0px 8px $shadowColor 8 | color $textColor 9 | @media (max-width $phoneWidth) 10 | padding 1rem 11 | @media print 12 | display none 13 | :not(.vssue-comment-content) 14 | a 15 | color $accentColor 16 | hr 17 | border-top-color $borderColor 18 | .vssue-button 19 | color $accentColor 20 | border-color $borderColor 21 | &:disabled 22 | color $borderColor 23 | border-color $borderColor 24 | .vssue-icon 25 | fill $borderColor 26 | &:not(:disabled) 27 | &.vssue-button-default 28 | color lighten($textColor, 20%) 29 | border-color lighten($textColor, 20%) 30 | &.vssue-button-primary 31 | color $accentColor 32 | border-color $accentColor 33 | .vssue-icon 34 | fill $accentColor 35 | .vssue-notice 36 | .vssue-alert 37 | color $accentColor 38 | border-color lighten($accentColor, 70%) 39 | background-color lighten($accentColor, 95%) 40 | .vssue-progress 41 | background-color $accentColor 42 | .vssue-status 43 | color $accentColor 44 | .vssue-header 45 | border-bottom-color $borderColor 46 | .vssue-new-comment 47 | border-bottom-color $borderColor 48 | .vssue-new-comment-footer 49 | .vssue-current-user 50 | color lighten($textColor, 20%) 51 | .vssue-logout 52 | color lighten($textColor, 20%) 53 | .vssue-new-comment-input 54 | color $textColor 55 | background-color $bgColor 56 | border-color $borderColor 57 | &:disabled 58 | background-color lighten($bgColor, 10%) 59 | &:focus 60 | background-color $bgColor 61 | border-color lighten($accentColor, 50%) 62 | box-shadow 0 0 1px 1px lighten($accentColor, 50%) 63 | &::placeholder 64 | color lighten($textColor, 20%) 65 | transition all .5s ease-in-out 66 | .vssue-comments 67 | .vssue-comment 68 | &.vssue-comment-edit-mode 69 | .vssue-comment-main 70 | border-color lighten($accentColor, 50%) 71 | box-shadow 0 0 1px 1px lighten($accentColor, 50%) 72 | &.vssue-comment-disabled 73 | .vssue-comment-body 74 | background-color lighten($borderColor, 70%) 75 | .vssue-comment-header 76 | border-color $borderColor 77 | .vssue-comment-created-at 78 | color lighten($textColor, 20%) 79 | .vssue-comment-main 80 | border-color $borderColor 81 | .vssue-comment-footer 82 | border-color $borderColor 83 | .vssue-comment-hint 84 | color lighten($textColor, 20%) 85 | .vssue-comment-reactions 86 | .vssue-comment-reaction 87 | color $accentColor 88 | .vssue-comment-operations 89 | color $accentColor 90 | .vssue-comment-operation 91 | &.vssue-comment-operation-muted 92 | color lighten($textColor, 20%) 93 | .vssue-icon 94 | fill lighten($textColor, 20%) 95 | transition all .5s ease-in-out 96 | @media (prefers-color-scheme: dark) 97 | background $whiteDarkColor 98 | box-shadow 0px 0px 8px $shadowDarkColor 99 | color $textDarkColor 100 | :not(.vssue-comment-content) 101 | a 102 | color $accentDarkColor 103 | hr 104 | border-top-color $borderDarkColor 105 | .vssue-button 106 | color $accentDarkColor 107 | border-color $borderDarkColor 108 | &:disabled 109 | color $borderDarkColor 110 | border-color $borderDarkColor 111 | .vssue-icon 112 | fill $borderDarkColor 113 | &:not(:disabled) 114 | &.vssue-button-default 115 | color darken($textDarkColor, 20%) 116 | border-color darken($textDarkColor, 20%) 117 | &.vssue-button-primary 118 | color $accentDarkColor 119 | border-color $accentDarkColor 120 | .vssue-icon 121 | fill $accentDarkColor 122 | .vssue-notice 123 | .vssue-alert 124 | color $accentDarkColor 125 | border-color lighten($accentDarkColor, 70%) 126 | background-color lighten($accentDarkColor, 95%) 127 | .vssue-progress 128 | background-color $accentDarkColor 129 | .vssue-status 130 | color $accentDarkColor 131 | .vssue-header 132 | border-bottom-color $borderDarkColor 133 | .vssue-new-comment 134 | border-bottom-color $borderDarkColor 135 | .vssue-new-comment-footer 136 | .vssue-current-user 137 | color darken($textDarkColor, 20%) 138 | .vssue-logout 139 | color darken($textDarkColor, 20%) 140 | .vssue-new-comment-input 141 | color $textDarkColor 142 | background-color $bgDarkColor 143 | border-color $borderDarkColor 144 | &:disabled 145 | background-color darken($bgDarkColor, 10%) 146 | &:focus 147 | background-color $bgDarkColor 148 | border-color lighten($accentDarkColor, 50%) 149 | box-shadow 0 0 1px 1px lighten($accentDarkColor, 50%) 150 | &::placeholder 151 | color darken($textDarkColor, 20%) 152 | .vssue-comments 153 | .vssue-comment 154 | &.vssue-comment-edit-mode 155 | .vssue-comment-main 156 | border-color lighten($accentDarkColor, 50%) 157 | box-shadow 0 0 1px 1px lighten($accentDarkColor, 50%) 158 | &.vssue-comment-disabled 159 | .vssue-comment-body 160 | background-color lighten($borderDarkColor, 70%) 161 | .vssue-comment-header 162 | border-color $borderDarkColor 163 | .vssue-comment-created-at 164 | color darken($textDarkColor, 20%) 165 | .vssue-comment-main 166 | border-color $borderDarkColor 167 | .vssue-comment-footer 168 | border-color $borderDarkColor 169 | .vssue-comment-hint 170 | color darken($textDarkColor, 20%) 171 | .vssue-comment-reactions 172 | .vssue-comment-reaction 173 | color $accentDarkColor 174 | .vssue-comment-operations 175 | color $accentDarkColor 176 | .vssue-comment-operation 177 | &.vssue-comment-operation-muted 178 | color darken($textDarkColor, 20%) 179 | .vssue-icon 180 | fill darken($textDarkColor, 20%) 181 | .vssue-pagination 182 | .vssue-pagination-select 183 | color $textDarkColor 184 | background-image url("data:image/svg+xml;charset=utf8,%3Csvg fill='#fff' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cstyle/%3E%3C/defs%3E%3Cpath d='M676.395 432.896a21.333 21.333 0 0 0-30.166 0L511.061 568.021 377.728 434.645a21.333 21.333 0 0 0-30.165 30.166l148.394 148.48a21.419 21.419 0 0 0 30.208 0l150.23-150.187a21.333 21.333 0 0 0 0-30.208'/%3E%3C/svg%3E") 185 | &:focus, 186 | option 187 | background-color $whiteDarkColor 188 | 189 | // markdown-body 190 | .markdown-body 191 | padding: 0 192 | color $textColor 193 | @media (prefers-color-scheme: dark) 194 | color $textDarkColor 195 | -------------------------------------------------------------------------------- /styles/public.styl: -------------------------------------------------------------------------------- 1 | html 2 | font-size 16px 3 | 4 | body, 5 | input, 6 | textarea, 7 | button, 8 | select 9 | font-family -apple-system,BlinkMacSystemFont,Microsoft YaHei,Segoe UI,Roboto,Source Han Sans SC,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neu,PingFang SC,sans-serif 10 | 11 | .pointer 12 | cursor pointer 13 | user-select none 14 | 15 | .inblock 16 | display inline-block 17 | vertical-align top 18 | 19 | .img 20 | width 100% 21 | height 100% 22 | 23 | .main 24 | margin 0 auto 25 | width 100% 26 | max-width $mainWidth 27 | @media (max-width $phoneWidth) 28 | padding: 0 .5rem 29 | width auto 30 | 31 | .search-box 32 | input 33 | border 1px solid $borderColor 34 | background-color $bgColor 35 | transition all .5s ease-in-out 36 | &:focus 37 | border-color $accentColor 38 | .suggestions 39 | background $bgColor 40 | border-color darken($borderColor, 10%) 41 | .suggestion 42 | a 43 | color lighten($textColor, 35%) 44 | &.focused 45 | background-color darken($bgColor, 10%) 46 | a 47 | color $accentColor 48 | @media (prefers-color-scheme: dark) 49 | input 50 | border 1px solid $borderDarkColor 51 | background-color $bgDarkColor 52 | &:focus 53 | border-color $accentDarkColor 54 | .suggestions 55 | background $bgDarkColor 56 | border-color lighten($bgDarkColor, 5%) 57 | .suggestion 58 | a 59 | color lighten($textDarkColor, 35%) 60 | &.focused 61 | background-color darken($bgDarkColor, 10%) 62 | a 63 | color $accentDarkColor 64 | @media (max-width $phoneWidth) 65 | margin-right 0 66 | input 67 | left 0 !important 68 | 69 | // 页面过渡动画 70 | .fade-transform-leave-active, 71 | .fade-transform-enter-active { 72 | transition: all .2s; 73 | } 74 | .fade-transform-enter { 75 | opacity: 0; 76 | transform: scale(.99); 77 | } 78 | .fade-transform-leave-to { 79 | opacity: 0; 80 | transform: scale(1.01); 81 | } 82 | 83 | .global-ui 84 | .go-to-top 85 | z-index 100 86 | // pwa 87 | .sw-update-popup 88 | border-color $accentColor !important 89 | background $bgColor !important 90 | color $textColor !important 91 | button 92 | color #fff !important 93 | background-color $accentColor !important 94 | border-color $accentColor !important 95 | &:hover 96 | background-color lighten($accentColor, 10%) !important 97 | @media (prefers-color-scheme: dark) 98 | border-color $accentDarkColor !important 99 | background $bgDarkColor !important 100 | color $textDarkColor !important 101 | button 102 | background-color $accentDarkColor !important 103 | border-color $accentDarkColor !important 104 | &:hover 105 | background-color darken($accentDarkColor, 10%) !important 106 | 107 | // scroll bar 108 | @media (min-width: $MQMobile) 109 | ::-webkit-scrollbar 110 | max-width 6px 111 | max-height 12px 112 | background-color $bgColor 113 | @media (prefers-color-scheme: dark) 114 | background-color $bgDarkColor 115 | 116 | ::-webkit-scrollbar-thumb 117 | background-color $textColor 118 | border-radius 6px 119 | @media (prefers-color-scheme: dark) 120 | background-color $textDarkColor 121 | --------------------------------------------------------------------------------