lisang
/
vuepress-theme-vdoing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/master'

This commit is contained in:
Northword 2020-12-16 15:33:35 +08:00
parent ca3a831399 bcd0339353
commit 388fbcb071
12 changed files with 84 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.MD
View File

@ -14,9 +14,8 @@
<h2 align="center">vuepress-theme-vdoing</h2> <h2 align="center">vuepress-theme-vdoing</h2>
* [文档 (国内源)](https://doc.xugaoyi.com/)
* [文档 (github源)](https://xugaoyi.github.io/vuepress-theme-vdoing-doc/) * [文档 (github源)](https://xugaoyi.github.io/vuepress-theme-vdoing-doc/)
* [文档 (国内源)](https://doc.xugaoyi.com/vuepress-theme-vdoing-doc/)
* [效果：Evan's blog](https://xugaoyi.com/) * [效果：Evan's blog](https://xugaoyi.com/)
@ -65,7 +64,7 @@ npm run dev # or yarn dev
期待 [VuePress v2.0](https://github.com/vuepress/vuepress-next) 以及 [VitePress](https://github.com/vuejs/vitepress) 的正式发布... 期待 [VuePress v2.0](https://github.com/vuepress/vuepress-next) 以及 [VitePress](https://github.com/vuejs/vitepress) 的正式发布...
届时，VuePress 1.x 编译慢的缺点将得到极大的改善。我将会视情况把主题升级至 VuePress v2.0 或 VitePress，也可能两个都升级。目前(2020.10.29)来看还需要挺长一段时间才能让大家使用上基于它们的新版本，还希望大家多多 [:sparkling_heart:支持](https://doc.xugaoyi.com/vuepress-theme-vdoing-doc/pages/1b12ed/) 哟，持续关注吧~ 届时，VuePress 1.x 编译慢的缺点将得到极大的改善。我将会视情况把主题升级至 VuePress v2.0 或 VitePress，也可能两个都升级。目前(2020.10.29)来看还需要挺长一段时间才能让大家使用上基于它们的新版本，还希望大家多多 [:sparkling_heart:支持](https://doc.xugaoyi.com/pages/1b12ed/) 哟，持续关注吧~
## :sparkling_heart:支持这个项目 ## :sparkling_heart:支持这个项目
@ -82,7 +81,7 @@ npm run dev # or yarn dev
| :---: | :---: | :---: | | :---: | :---: | :---: |
| <img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200523131533.jpg" alt="赞赏码" width=150> | <img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200410113708.jpg" alt="Wechat QRcode" width=150>| <img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200410113707.jpg" alt="Alipay QRcode" width=150> | | <img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200523131533.jpg" alt="赞赏码" width=150> | <img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200410113708.jpg" alt="Wechat QRcode" width=150>| <img src="https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200410113707.jpg" alt="Alipay QRcode" width=150> |
二维码没有正常显示？点 [这里😎](https://doc.xugaoyi.com/vuepress-theme-vdoing-doc/pages/1b12ed/) 二维码没有正常显示？点 [这里😎](https://doc.xugaoyi.com/pages/1b12ed/)
## 致谢 ## 致谢
:heart:感谢支持这个项目的朋友 :heart:感谢支持这个项目的朋友

2
baiduPush.sh
View File

@ -6,4 +6,4 @@ set -e
# 百度链接推送 # 百度链接推送
curl -H 'Content-Type:text/plain' --data-binary @urls.txt "http://data.zz.baidu.com/urls?site=https://xugaoyi.com&token=T5PEAzhGaPNbjQ2X" curl -H 'Content-Type:text/plain' --data-binary @urls.txt "http://data.zz.baidu.com/urls?site=https://xugaoyi.com&token=T5PEAzhGaPNbjQ2X"
rm -rf urls.txt # 灭迹 rm -rf urls.txt # 删除文件

4
deploy.sh
View File

@ -27,6 +27,8 @@ git push -f $githubUrl master:gh-pages # 推送到github
# deploy to coding # deploy to coding
echo 'www.xugaoyi.com\nxugaoyi.com' > CNAME # 自定义域名 echo 'www.xugaoyi.com\nxugaoyi.com' > CNAME # 自定义域名
echo 'google.com, pub-7828333725993554, DIRECT, f08c47fec0942fa0' > ads.txt # 谷歌广告相关文件
if [ -z "$CODING_TOKEN" ]; then # -z 字符串 长度为0则为true；$CODING_TOKEN来自于github仓库`Settings/Secrets`设置的私密环境变量 if [ -z "$CODING_TOKEN" ]; then # -z 字符串 长度为0则为true；$CODING_TOKEN来自于github仓库`Settings/Secrets`设置的私密环境变量
codingUrl=git@e.coding.net:xgy/xgy.git codingUrl=git@e.coding.net:xgy/xgy.git
else else
@ -37,4 +39,4 @@ git commit -m "${msg}"
git push -f $codingUrl master # 推送到coding git push -f $codingUrl master # 推送到coding
cd - # 退回开始所在目录 cd - # 退回开始所在目录
rm -rf docs/.vuepress/dist rm -rf docs/.vuepress/dist

11
docs/.vuepress/config.js
View File

@ -5,7 +5,6 @@ module.exports = {
description: description:
'web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', // 描述,以 <meta> 标签渲染到页面html中 'web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', // 描述,以 <meta> 标签渲染到页面html中
// base: '/', // '/<github仓库名>/'， 默认'/' // base: '/', // '/<github仓库名>/'， 默认'/'
// <script data-ad-client="ca-pub-7828333725993554" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
head: [ head: [
// 注入到页面<head> 中的标签，格式[tagName, { attrName: attrValue }, innerHTML?] // 注入到页面<head> 中的标签，格式[tagName, { attrName: attrValue }, innerHTML?]
['link', { rel: 'icon', href: '/img/favicon.ico' }], //favicons，资源放在public文件夹 ['link', { rel: 'icon', href: '/img/favicon.ico' }], //favicons，资源放在public文件夹
@ -27,6 +26,16 @@ module.exports = {
src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
}, },
], // 网站关联Google AdSense ], // 网站关联Google AdSense
// <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
[
'script',
{
'custom-element': 'amp-ad',
async: 'async',
src: 'https://cdn.ampproject.org/v0/amp-ad-0.1.js',
},
], // AMP广告
// ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'}], // 移动端阻止页面缩放 // ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'}], // 移动端阻止页面缩放
], ],
markdown: { markdown: {

13
docs/02.页面/20.CSS/45.如何根据系统主题自动响应CSS深色模式.md
View File

@ -3,12 +3,12 @@ title: 如何根据系统主题自动响应CSS深色模式
date: 2020-03-31 14:06:26 date: 2020-03-31 14:06:26
permalink: /pages/5dde351274f1e39d permalink: /pages/5dde351274f1e39d
sticky: 1 sticky: 1
categories: categories:
- 页面 - 页面
- CSS - CSS
tags: tags:
- css - css
author: author:
name: xugaoyi name: xugaoyi
link: https://github.com/xugaoyi link: https://github.com/xugaoyi
--- ---
@ -58,8 +58,6 @@ body {
} }
``` ```
## 添加深色模式自动响应 ## 添加深色模式自动响应
现在我们定义了两组变量。剩下要做的一件事就是将`prefers-color-scheme`媒体查询添加到我们的深色模式变量中。 现在我们定义了两组变量。剩下要做的一件事就是将`prefers-color-scheme`媒体查询添加到我们的深色模式变量中。
@ -115,8 +113,3 @@ window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light)
## 结论 ## 结论
我们不仅可以在布局方面响应不同尺寸屏幕，还可以按系统主题响应深色模式。我相信你的深夜访客，或者那些喜欢深色模式的人，会感谢你的。 我们不仅可以在布局方面响应不同尺寸屏幕，还可以按系统主题响应深色模式。我相信你的深夜访客，或者那些喜欢深色模式的人，会感谢你的。

15
docs/05.关于/01.关于.md
View File

@ -18,7 +18,7 @@ article: false
### 🎨Theme ### 🎨Theme
[<img src="https://github-readme-stats.vercel.app/api/pin/?username=xugaoyi&amp;repo=vuepress-theme-vdoing" alt="ReadMe Card" class="no-zoom">](https://github.com/xugaoyi/vuepress-theme-vdoing) [<img src="https://github-readme-stats.vercel.app/api/pin/?username=xugaoyi&amp;repo=vuepress-theme-vdoing" alt="ReadMe Card" class="no-zoom">](https://github.com/xugaoyi/vuepress-theme-vdoing)
[<img src="https://github-readme-stats.vercel.app/api/pin/?username=xugaoyi&amp;repo=vuepress-theme-vdoing-doc" alt="ReadMe Card" class="no-zoom">](https://doc.xugaoyi.com/vuepress-theme-vdoing-doc/) [<img src="https://github-readme-stats.vercel.app/api/pin/?username=xugaoyi&amp;repo=vuepress-theme-vdoing-doc" alt="ReadMe Card" class="no-zoom">](https://doc.xugaoyi.com/)
本站主题是 [`Vdoing`](https://github.com/xugaoyi/vuepress-theme-vdoing)，这是一款简洁高效的VuePress 知识管理&博客 主题。旨在轻松打造一个`结构化`与`碎片化`并存的个人在线知识库&博客，让你的知识海洋像一本本书一样清晰易读。配合多维索引，让每一个知识点都可以快速定位！ 更多[详情](https://github.com/xugaoyi/vuepress-theme-vdoing)。 本站主题是 [`Vdoing`](https://github.com/xugaoyi/vuepress-theme-vdoing)，这是一款简洁高效的VuePress 知识管理&博客 主题。旨在轻松打造一个`结构化`与`碎片化`并存的个人在线知识库&博客，让你的知识海洋像一本本书一样清晰易读。配合多维索引，让每一个知识点都可以快速定位！ 更多[详情](https://github.com/xugaoyi/vuepress-theme-vdoing)。
@ -44,13 +44,24 @@ web前端小学生
- **WeChat or QQ**: <a :href="qqUrl" class='qq'>894072666</a> - **WeChat or QQ**: <a :href="qqUrl" class='qq'>894072666</a>
- **Email**: <a href="mailto:894072666@qq.com">894072666@qq.com</a> - **Email**: <a href="mailto:894072666@qq.com">894072666@qq.com</a>
- **GitHub**: <https://github.com/xugaoyi> - **GitHub**: <https://github.com/xugaoyi>
- **Vdoing主题文档：**<https://doc.xugaoyi.com/vuepress-theme-vdoing-doc/> - **Vdoing主题文档**：<https://doc.xugaoyi.com>
- **Vdoing交流QQ群**：694387113 - **Vdoing交流QQ群**：694387113
## 前端学习 ## 前端学习
🎉🎉✨与我 <a :href="qqUrl">联系↑</a> 获取前端 [学习资源](https://github.com/xugaoyi/blog-gitalk-comment/wiki/Front-end-Study) 🎉🎉✨与我 <a :href="qqUrl">联系↑</a> 获取前端 [学习资源](https://github.com/xugaoyi/blog-gitalk-comment/wiki/Front-end-Study)
<!-- 广告 -->
<amp-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-7828333725993554"
data-ad-slot="7774950020"
data-auto-format="rspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>
<script> <script>
export default { export default {
data(){ data(){

2
package.json
View File

@ -22,7 +22,7 @@
"vuepress-plugin-one-click-copy": "^1.0.2", "vuepress-plugin-one-click-copy": "^1.0.2",
"vuepress-plugin-thirdparty-search": "^1.0.2", "vuepress-plugin-thirdparty-search": "^1.0.2",
"vuepress-plugin-zooming": "^1.1.7", "vuepress-plugin-zooming": "^1.1.7",
"vuepress-theme-vdoing": "^1.6.3", "vuepress-theme-vdoing": "^1.6.4",
"yamljs": "^0.3.0" "yamljs": "^0.3.0"
}, },
"dependencies": { "dependencies": {

29
theme-vdoing/components/ArchivesPage.vue
View File

@ -113,10 +113,33 @@ export default {
top $navbarHeight top $navbarHeight
z-index 1 z-index 1
width: 80px width: 80px
margin-bottom -1.8rem &+ li
position relative
&::before
content ''
display block
width .5rem
height .5rem
border-radius 50%
border 1px solid $accentColor
position absolute
left 4.25rem
top -2.1rem
a
position relative
&::after
content ''
display block
width 1px
height 1.5rem
background $accentColor
position absolute
left -1px
top -1.5rem
&.year:not(:first-child) &.year:not(:first-child)
margin-top 3.5rem margin-top 3.5rem
h2 h2
margin-top 0
margin-bottom 0.5rem margin-bottom 0.5rem
font-weight 400 font-weight 400
padding 0.5rem 0 padding 0.5rem 0
@ -130,7 +153,7 @@ export default {
transition padding 0.3s transition padding 0.3s
padding 0.4rem 1.2rem padding 0.4rem 1.2rem
margin-left 4.5rem margin-left 4.5rem
border-left 1px solid var(--borderColor) border-left 1px solid $accentColor
line-height 1.2rem line-height 1.2rem
position: relative position: relative
&:hover &:hover
@ -146,7 +169,7 @@ export default {
width .3rem width .3rem
height .3rem height .3rem
border-radius 50% border-radius 50%
background var(--borderColor) background $accentColor
position: absolute; position: absolute;
top .9rem top .9rem
left -0.18rem left -0.18rem

4
theme-vdoing/components/MainLayout.vue
View File

@ -19,7 +19,7 @@
display flex display flex
.main-left .main-left
flex 1 flex 1
width 72% // width 72%
.theme-vdoing-content.card-box .theme-vdoing-content.card-box
padding 1rem 1.5rem padding 1rem 1.5rem
margin-bottom 0.9rem margin-bottom 0.9rem
@ -27,7 +27,7 @@
padding 1rem 1.5rem 0 padding 1rem 1.5rem 0
.main-right .main-right
>* >*
width 255px width 245px
box-sizing border-box box-sizing border-box
@media (max-width 900px) @media (max-width 900px)
width 235px width 235px

30
theme-vdoing/node_utils/getSidebarData.js
View File

@ -88,7 +88,10 @@ function mapTocToPostSidebar (root) {
const contentStr = fs.readFileSync(file, 'utf8') // 读取md文件内容，返回字符串 const contentStr = fs.readFileSync(file, 'utf8') // 读取md文件内容，返回字符串
const { data } = matter(contentStr) // 解析出front matter数据 const { data } = matter(contentStr) // 解析出front matter数据
const permalink = data.permalink || '' const permalink = data.permalink || ''
postSidebar.push([filename, title, permalink]); // [<路径>, <文件标题>, <永久链接>] if (data.title) {
title = data.title
}
postSidebar.push([filename, title, permalink]); // [<路径>, <标题>, <永久链接>]
}) })
return postSidebar return postSidebar
@ -102,12 +105,11 @@ function mapTocToPostSidebar (root) {
* @param {String} prefix * @param {String} prefix
*/ */
function mapTocToSidebar (root, collapsable, prefix) { function mapTocToSidebar (root, collapsable, prefix = '') {
prefix = prefix || ''; let sidebar = []; // 结构化文章侧边栏数据
let sidebar = [];
const files = fs.readdirSync(root); // 读取目录（文件和文件夹）,返回数组 const files = fs.readdirSync(root); // 读取目录（文件和文件夹）,返回数组
files.forEach(filename => { // 结构化文章 files.forEach(filename => {
const file = path.resolve(root, filename); // 方法：将路径或路径片段的序列解析为绝对路径 const file = path.resolve(root, filename); // 方法：将路径或路径片段的序列解析为绝对路径
const stat = fs.statSync(file); // 文件信息 const stat = fs.statSync(file); // 文件信息
let [order, title, type] = filename.split('.'); let [order, title, type] = filename.split('.');
@ -133,18 +135,18 @@ function mapTocToSidebar (root, collapsable, prefix) {
const contentStr = fs.readFileSync(file, 'utf8') // 读取md文件内容，返回字符串 const contentStr = fs.readFileSync(file, 'utf8') // 读取md文件内容，返回字符串
const { data } = matter(contentStr) // 解析出front matter数据 const { data } = matter(contentStr) // 解析出front matter数据
const permalink = data.permalink || '' const permalink = data.permalink || ''
const title2 = data.title || title
if (title2) {
sidebar[order] = [prefix + filename, title2, permalink]; // [<路径>, <front matter.title>, <永久链接>]
} else {
sidebar[order] = [prefix + filename, title, permalink]; // [<路径>, <文件标题>, <永久链接>]
}
// 目录页和永久链接，用于给面包屑提供数据 // 目录页对应的永久链接，用于给面包屑提供链接
const pageComponent = data.pageComponent const { pageComponent } = data
if (pageComponent && pageComponent.name && pageComponent.name === "Catalogue") { if (pageComponent && pageComponent.name === "Catalogue") {
catalogueData[title] = permalink catalogueData[title] = permalink
} }
if (data.title) {
title = data.title
}
sidebar[order] = [prefix + filename, title, permalink]; // [<路径>, <标题>, <永久链接>]
} }
}) })

2
theme-vdoing/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vuepress-theme-vdoing", "name": "vuepress-theme-vdoing",
"version": "1.6.3", "version": "1.6.4",
"description": "Vdoing theme for VuePress. 一个基于VuePress的知识管理兼博客主题。", "description": "Vdoing theme for VuePress. 一个基于VuePress的知识管理兼博客主题。",
"author": { "author": {
"name": "gaoyi(Evan) Xu" "name": "gaoyi(Evan) Xu"

8
theme-vdoing/styles/index.styl
View File

@ -237,11 +237,11 @@ hr
table table
border-collapse collapse border-collapse collapse
margin 1rem 0 margin 1rem 0
display: block
overflow-x: auto overflow-x: auto
width 100% width 100%
//display inline-table display inline-table
@media (max-width: $MQMobile)
display block
tr tr
border-top 1px solid var(--borderColor) border-top 1px solid var(--borderColor)
@ -251,6 +251,8 @@ tr
th, td th, td
border 1px solid var(--borderColor) border 1px solid var(--borderColor)
padding .6em 1em padding .6em 1em
@media (max-width: $MQMobile)
padding .3em .5em
a a
word-break break-all word-break break-all