From 7c4ae0ea28c2b7866c325e22cc2c1147dcbb56c2 Mon Sep 17 00:00:00 2001 From: xugaoyi <894072666@qq.com> Date: Thu, 14 May 2020 17:03:57 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.MD | 143 ++---------------- deploy.sh | 18 +-- docs/.vuepress/config.js | 34 ++--- docs/.vuepress/config/nav.js | 2 +- docs/.vuepress/styles/palette.styl | 37 ++--- docs/02.页面/20.CSS/60.CSS-function汇总.md | 10 ++ package.json | 1 + .../components/ArticleInfo.vue | 5 +- vuepress-theme-vdoing/components/Home.vue | 4 + vuepress-theme-vdoing/package.json | 2 +- vuepress-theme-vdoing/styles/index.styl | 8 + 11 files changed, 85 insertions(+), 179 deletions(-) diff --git a/README.MD b/README.MD index aaa42c4..076e64b 100644 --- a/README.MD +++ b/README.MD @@ -16,75 +16,21 @@ -[Evan's blog](https://xugaoyi.com/) | [效果图](https://xugaoyi.com/pages/d557b9a89a215d2e) | [指南 (必读)](https://github.com/xugaoyi/vuepress-theme-vdoing/issues/350) - -温馨提示：目前并非稳定版，因此功能和文档可能会有调整。欢迎star持续关注，一定会有惊喜哟🎉 - -> ←此版本正在开发和测试中，源码未发布，敬请期待！ - -## 初衷 - -这个主题的初衷是打造一个 `结构化` 与 `碎片化` 并存的个人`知识库`。[详情](https://github.com/xugaoyi/vuepress-theme-vdoing/issues/339) - -如果你有什么建议欢迎提**Issues**，喜欢这个项目的欢迎点个**Star**持续关注。 +[使用文档](https://xugaoyi.github.io/vuepress-theme-vdoing-doc/) | [Evan's blog](https://xugaoyi.com/) ## 介绍 - -1. 根据 [VuePress](https://vuepress.vuejs.org/zh/) 的默认主题修改而成，仍以官方配置为主，追求`简洁`同时又不失`美观`。 - -2. 这是一个兼具 `知识管理` & `博客文章` & `技术文档` 的主题。 - -3. 一个`结构化的知识库`，形成一本本像书一样清晰易读的知识库。同时博客功能提供一种`碎片化`形态。 - -4. 添加方便管理学习笔记和技术文档的 `自动生成结构化侧边栏`、`自动生成front matter`、`目录页`、`扩展的搜索框插件`、`面包屑`、`快捷翻页按钮` 等，让你快速定位到任何你想要找的内容 - -
- 查看文档 - -
+1. 这个主题的初衷是打造一个好用的程序员`知识管理工具` +2. 一个`结构化`的知识库，让你的知识海洋像一本本书一样清晰易读。 +3. 博客功能提供一种知识的`碎片化`形态，并支持个性化博客配置。 +4. `简洁高效`，以 Markdown 为中心的项目结构，内置自动化工具，以更少的配置完成更多的事。配合多维索引快速定位每个知识点。 -5. 添加博客相关的 `文章信息栏（作者与创建时间）`、`最近更新栏` 、`博主信息栏`、`页脚版权栏`、`时间轴+分类页`、`评论插件`等。 -
- 查看文档 - -
- -6. 首页样式美化 +## 这个主题可以做什么？ +* 案例1：[知识库兼博客站](https://xugaoyi.com/) +* 案例2：仅知识库(暂无案例) +* 案例3：[仅博客站](https://xugaoyi.github.io/vdoing-demo-blog/) +* 案例4：[文档站](https://xugaoyi.github.io/vuepress-theme-vdoing-doc/) - [首页配置](https://github.com/xugaoyi/vuepress-theme-vdoing/issues/338) - -7. 多种颜色模式供用户选择：`跟随系统`、`浅色模式`、`深色模式`、`阅读模式` - - [palette.styl主题调色板使用说明](https://github.com/xugaoyi/vuepress-theme-vdoing/issues/345) - -8. 提高搬砖效率的辅助工具： [批量操作front matter工具](https://github.com/xugaoyi/vuepress-theme-vdoing/issues/351) ## 快速上手 @@ -102,73 +48,10 @@ npm install # or yarn install npm run dev # or yarn dev ``` -## 插件 - -推荐几款插件 - - -1. 对*前端程序员*很友好`Demo演示模块插件`，很方便的在博客中插入demo，同时可以查看demo源码，跳转到codepen在线编辑。 - - [vuepress-plugin-demo-block](https://www.npmjs.com/package/vuepress-plugin-demo-block) - -2. 代码块一键复制插件 - - [vuepress-plugin-one-click-copy](https://www.npmjs.com/package/vuepress-plugin-one-click-copy) - - -3. 可以添加第三方搜索链接的搜索框插件 - - [vuepress-plugin-thirdparty-search](https://github.com/xugaoyi/vuepress-plugin-thirdparty-search) - - -4. 百度推送和统计插件 - - [vuepress-plugin-baidu-autopush](https://www.npmjs.com/package/vuepress-plugin-baidu-autopush) - - [vuepress-plugin-baidu-tongji](https://www.npmjs.com/package/vuepress-plugin-baidu-tongji) - -5. 更多插件查看官方[Awesome VuePress](https://github.com/vuepressjs/awesome-vuepress) - -## 部署 - -内置 `deploy.sh` 和 [GitHub Actions](https://github.com/features/actions) 两种`自动部署`脚本，一键发布到 GitHub Pages 或 国内访问速度更快的Coding Pages。 - -[自动部署到 github 或 coding](https://github.com/xugaoyi/vuepress-theme-vdoing/issues/325) - - - -## 其他 - -1. 评论模块的搭建 - - [使用Gitalk实现静态博客无后台评论系统](https://xugaoyi.com/pages/1da0bf9a988eafe5/) - -2. 自定义域名及解析，[详情](https://github.com/xugaoyi/vuepress-theme-vdoing/issues/326) - -3. SEO相关 - - ```js - // config.js - module.exports = { - description: '填写网站描述', // 以 标签渲染到页面html中 - head: [ // 注入到页面 中的标签,[tagName, { attrName: attrValue }] - ['meta', { name: 'keywords', content: '填写关键字'}] - ] - } - ``` - -4. 图床 - - [GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床](https://xugaoyi.com/pages/a5f73af5185fdf0a/) - -5. 结合GitHub Actions开发的每天定时百度推送，加快收录 - - [GitHub Actions 定时运行代码：每天定时百度链接推送](https://xugaoyi.com/pages/f44d2f9ad04ab8d3/) - -6. 在线编辑和新增文章的方法，[详情](https://github.com/xugaoyi/vuepress-theme-vdoing/issues/327) - ## 支持 -如果你觉得这个项目帮助到了你，可以为作者贡献一杯82年的雪碧🍸。你任何形式的支持都是对我的肯定，我会坚持初心把这个项目做得更好。 +你任何形式的支持都是对我的肯定，我会坚持初心把这个项目做得更好。当然，你的支持力度越大我会越开心，哈哈😀~~ +如果你觉得这个项目对你有帮助，可以给作者打赏一杯咖啡☕ + | Wechat | Alipay | | :---: | :---: | | Wechat QRcode| Alipay QRcode | diff --git a/deploy.sh b/deploy.sh index e47135f..f43db2c 100644 --- a/deploy.sh +++ b/deploy.sh @@ -26,15 +26,15 @@ git commit -m "${msg}" git push -f $githubUrl master:gh-pages # 推送到github # deploy to coding -# echo 'www.xugaoyi.com\nxugaoyi.com' > CNAME # 自定义域名 -# if [ -z "$CODING_TOKEN" ]; then # -z 字符串 长度为0则为true；$CODING_TOKEN来自于github仓库`Settings/Secrets`设置的私密环境变量 -# codingUrl=git@e.coding.net:xgy/xgy.git -# else -# codingUrl=https://HmuzsGrGQX:${CODING_TOKEN}@e.coding.net/xgy/xgy.git -# fi -# git add -A -# git commit -m "${msg}" -# git push -f $codingUrl master # 推送到coding +echo 'www.xugaoyi.com\nxugaoyi.com' > CNAME # 自定义域名 +if [ -z "$CODING_TOKEN" ]; then # -z 字符串 长度为0则为true；$CODING_TOKEN来自于github仓库`Settings/Secrets`设置的私密环境变量 + codingUrl=git@e.coding.net:xgy/xgy.git +else + codingUrl=https://HmuzsGrGQX:${CODING_TOKEN}@e.coding.net/xgy/xgy.git +fi +git add -A +git commit -m "${msg}" +git push -f $codingUrl master # 推送到coding cd - # 退回开始所在目录 rm -rf docs/.vuepress/dist \ No newline at end of file diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 0e296e8..4bcff23 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -34,31 +34,29 @@ module.exports = { editLinkText: '编辑', // 以下配置是Vdoing主题改动的和新增的配置 - sidebar: 'structuring', // 侧边栏 'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | 自定义 温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页 - - // sidebarOpen: false, // 初始状态是否打开侧边栏，默认true - // updateBar: { // 最近更新栏 - // showToArticle: true, // 显示到文章页底部，默认true - // moreArticle: '/archives' // “更多文章”跳转的页面，默认'/archives' - // }, - // titleBadge: false, // 文章标题前的图标是否显示，默认true - // titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标 - // '图标地址1', - // '图标地址2' - // ], + // category: false, // 是否打开分类功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含分类字段 2.页面中显示与分类相关的信息和模块 3.自动生成分类页面（在@pages文件夹）。如关闭，则反之。 + // tag: false, // 是否打开标签功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含标签字段 2.页面中显示与标签相关的信息和模块 3.自动生成标签页面（在@pages文件夹）。如关闭，则反之。 + // archive: false, // 是否打开归档功能，默认true。 如打开，会做的事情有：1.自动生成归档页面（在@pages文件夹）。如关闭，则反之。 + // categoryText: '随笔', // 碎片化文章（_posts文件夹的文章）预设生成的分类值，默认'随笔' // bodyBgImg: [ // 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175828.jpeg', // 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175845.jpeg', // 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175846.jpeg' // ], // body背景大图，默认无。 单张图片 String || 多张图片 Array, 多张图片时每隔15秒换一张。 + // titleBadge: false, // 文章标题前的图标是否显示，默认true + // titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标 + // '图标地址1', + // '图标地址2' + // ], + sidebar: 'structuring', // 侧边栏 'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | 自定义 温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页 + + // sidebarOpen: false, // 初始状态是否打开侧边栏，默认true + // updateBar: { // 最近更新栏 + // showToArticle: true, // 显示到文章页底部，默认true + // moreArticle: '/archives' // “更多文章”跳转的页面，默认'/archives' + // }, - // categoryText: '随笔', // 碎片化文章（_posts文件夹的文章）预设生成的分类值，默认'随笔' - - // category: false, // 是否打开分类功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含分类字段 2.页面中显示与分类相关的信息和模块 3.自动生成分类页面（在@pages文件夹）。如关闭，则反之。 - // tag: false, // 是否打开标签功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含标签字段 2.页面中显示与标签相关的信息和模块 3.自动生成标签页面（在@pages文件夹）。如关闭，则反之。 - // archive: false, // 是否打开归档功能，默认true。 如打开，会做的事情有：1.自动生成归档页面（在@pages文件夹）。如关闭，则反之。 - author: { // 文章默认的作者信息，可在md文件中单独配置此信息 String | {name: String, href: String} name: 'Evan Xu', // 必需 href: 'https://github.com/xugaoyi' // 可选的 diff --git a/docs/.vuepress/config/nav.js b/docs/.vuepress/config/nav.js index c8541bd..b4feafc 100644 --- a/docs/.vuepress/config/nav.js +++ b/docs/.vuepress/config/nav.js @@ -5,7 +5,7 @@ module.exports = [ link: '/web/', //目录页，vdoing主题新增的配置项，有二级导航时，可以点击一级导航跳到目录页 items: [ {text: '前端文章', items: [ - {text: 'JavaScript', link: '/pages/8143cc480faf9a11/'}, + {text: 'JavaScript', link: '/pages/8143cc480faf9a11/'}, // 注意link结尾有斜杠和没有斜杠的区别 {text: 'Vue', link: '/pages/802a1ca6f7b71c59/'}, ]}, {text: '学习笔记', items:[ diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl index a85903a..d2d95c3 100644 --- a/docs/.vuepress/styles/palette.styl +++ b/docs/.vuepress/styles/palette.styl @@ -4,6 +4,8 @@ //***vdoing主题-变量***// // // 颜色 + +// $bannerTextColor = #fff // 首页banner区(博客标题)文本颜色 // $accentColor = #11A8CD // $arrowBgColor = #ccc // $badgeTipColor = #42b983 @@ -14,48 +16,47 @@ // $navbarHeight = 3.6rem // $sidebarWidth = 18rem // $contentWidth = 860px -// $homePageWidth = 1080px +// $homePageWidth = 1100px // $rightMenuWidth = 230px // 右侧菜单 // // 代码块 // $lineNumbersWrapperWidth = 2.5rem - -// // 响应式节点 -// $cardLayout = 1200px // 卡片式布局响应节点 - // // 浅色模式 // .theme-mode-light -// --bg: #fff +// --badyBg: #f4f4f4 +// --mainBg: rgba(255,255,255,1) +// --sidebarBg: rgba(255,255,255,.8) +// --blurBg: rgba(255,255,255,.9) // --textColor: #004050 // --textLightenColor: #0085AD -// --sidebarBg: rgba(255,255,255,.85) -// --pageBg: rgba(220,220,220,0.2) // --borderColor: rgba(0,0,0,.15) -// --codeBgColor: #f6f6f6 +// --codeBg: #f6f6f6 // --codeColor: #525252 // codeThemeLight() // // 深色模式 // .theme-mode-dark -// --bg: rgb(30,30,34) -// --textColor: rgb(150,150,154) +// --badyBg: rgb(39,39,43) +// --mainBg: rgba(30,30,34,1) +// --sidebarBg: rgba(30,30,34,.8) +// --blurBg: rgba(30,30,34,.8) +// --textColor: rgb(140,140,150) // --textLightenColor: #0085AD -// --sidebarBg: rgba(120,120,120,.1) -// --pageBg: rgba(120,120,120,.1) // --borderColor: #2C2C3A -// --codeBgColor: #252526 +// --codeBg: #252526 // --codeColor: #fff // codeThemeDark() // // 阅读模式 // .theme-mode-read -// --bg: #f5f5d5 +// --badyBg: rgb(240,240,208) +// --mainBg: rgba(245,245,213,1) +// --sidebarBg: rgba(245,245,213,.8) +// --blurBg: rgba(245,245,213,.9) // --textColor: #004050 // --textLightenColor: #0085AD -// --sidebarBg: #f5f5d5 -// --pageBg: rgba(220,220,220,0.1) // --borderColor: rgba(0,0,0,.15) -// --codeBgColor: #282c34 +// --codeBg: #282c34 // --codeColor: #fff // codeThemeDark() \ No newline at end of file diff --git a/docs/02.页面/20.CSS/60.CSS-function汇总.md b/docs/02.页面/20.CSS/60.CSS-function汇总.md index cda9634..ff279cf 100644 --- a/docs/02.页面/20.CSS/60.CSS-function汇总.md +++ b/docs/02.页面/20.CSS/60.CSS-function汇总.md @@ -1 +1,11 @@ +--- +title: CSS-function汇总 +date: 2020-05-12 09:36:44 +permalink: /pages/3da0d7 +categories: + - 页面 + - CSS +tags: + - +--- ![](https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200512161232.jpg) \ No newline at end of file diff --git a/package.json b/package.json index c53cae8..71897d8 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "license": "MIT", "devDependencies": { "inquirer": "^7.1.0", + "json2yaml": "^1.1.0", "moment": "^2.25.3", "vuepress": "^1.4.1", "vuepress-plugin-baidu-autopush": "^1.0.1", diff --git a/vuepress-theme-vdoing/components/ArticleInfo.vue b/vuepress-theme-vdoing/components/ArticleInfo.vue index 84d9558..cb57faa 100644 --- a/vuepress-theme-vdoing/components/ArticleInfo.vue +++ b/vuepress-theme-vdoing/components/ArticleInfo.vue @@ -56,7 +56,7 @@ export default { getPageInfo() { const pageInfo = this.$page const { relativePath } = pageInfo - const { catalogue } = this.$themeConfig.sidebar + const { sidebar } = this.$themeConfig // 分类采用解析文件夹地址名称的方式 const relativePathArr = relativePath.split('/') @@ -64,7 +64,8 @@ export default { const classify1 = classifyArr.length > 1 ? classifyArr[1] : classifyArr[0] // 文章一级分类名称 const classify2 = relativePathArr.length > 2 ? relativePathArr[1].split('.')[1] : undefined// 文章二级分类名称 - const cataloguePermalink = catalogue ? catalogue[classify1] : undefined// 目录页永久链接 + const cataloguePermalink = sidebar && sidebar.catalogue ? sidebar.catalogue[classify1] : undefined// 目录页永久链接 + const author = this.$frontmatter.author || this.$themeConfig.author // 作者 let date = (pageInfo.frontmatter.date || '').split(' ')[0] // 文章创建时间 diff --git a/vuepress-theme-vdoing/components/Home.vue b/vuepress-theme-vdoing/components/Home.vue index 6ab39e6..4162a4b 100644 --- a/vuepress-theme-vdoing/components/Home.vue +++ b/vuepress-theme-vdoing/components/Home.vue @@ -388,6 +388,7 @@ export default { padding-bottom 0 p opacity 0.8 + padding 0 .8rem .feature:hover .feature-img animation-play-state: running @@ -421,6 +422,9 @@ export default { font-weight 500 border-bottom none padding-bottom 0 + p + opacity 0.8 + padding 0 .8rem .docs-wrapper position absolute bottom 25px diff --git a/vuepress-theme-vdoing/package.json b/vuepress-theme-vdoing/package.json index aa08ddf..b88cb09 100644 --- a/vuepress-theme-vdoing/package.json +++ b/vuepress-theme-vdoing/package.json @@ -1,6 +1,6 @@ { "name": "vuepress-theme-vdoing", - "version": "1.0.0-beta.4", + "version": "1.0.0-beta.6", "description": "Vdoing theme for VuePress. 一个基于VuePress的知识管理兼博客主题。", "author": { "name": "gaoyi(Evan) Xu" diff --git a/vuepress-theme-vdoing/styles/index.styl b/vuepress-theme-vdoing/styles/index.styl index 15c9c5e..5eaf082 100644 --- a/vuepress-theme-vdoing/styles/index.styl +++ b/vuepress-theme-vdoing/styles/index.styl @@ -178,6 +178,14 @@ h1, h2, h3, h4, h5, h6 &:hover .header-anchor opacity: 1 + +// 没有h1标签时 +p,pre,.custom-block + {$contentClass}:not(.custom) > & + &:first-child + margin-top 2rem + + h1 font-size 1.8rem {$contentClass}:not(.custom) > & // 页面内容的首个h1标签隐藏