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

v1.5.0

This commit is contained in:
xugaoyi 2020-09-26 13:59:34 +08:00
parent 35eba2ecb8
commit e14d02f952
54 changed files with 1145 additions and 1374 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.MD
View File

@ -57,8 +57,7 @@ npm run dev # or yarn dev
## :sparkling_heart:支持这个项目
我尽己所能地进行开源，并且我尽量回复每个在使用项目时需要帮助的人。很明显，这需要时间，但你可以免费享受这些。
然而, 如果你正在使用这个项目并感觉良好，或只是想要支持我继续开发，你可以通过如下方式支持我：
如果你正在使用这个项目并感觉良好，或只是想要支持我继续开发，你可以通过如下任意方式支持我：
- **Star** 并 分享这个项目 :rocket:
- 保留主题 footer(页脚) 的主题链接 :D

2
docs/.vuepress/config.js
View File

@ -174,7 +174,7 @@ module.exports = {
options: {
clientID: 'a6e1355287947096b88b',
clientSecret: 'f0e77d070fabfcd5af95bebb82b2d574d7248d71',
repo: 'vuepress-theme-vdoing', // GitHub 仓库
repo: 'blog-gitalk-comment', // GitHub 仓库
owner: 'xugaoyi', // GitHub仓库所有者
admin: ['xugaoyi'], // 对仓库有写权限的人
// distractionFreeMode: true,

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

@ -23,7 +23,8 @@ article: false
### 🐼Me
落魄Web前端工程师
web前端小学生
#### 技能
* 熟悉 JavaScript、HTML、CSS、Vue 的拼写
* 了解 Linux、windows、macOS 的开关机方式
@ -39,7 +40,8 @@ article: false
- **WeChat or QQ**: <a :href="qqUrl" class='qq'>894072666</a>
- **Email**: <a href="mailto:894072666@qq.com">894072666@qq.com</a>
- **GitHub**: <https://github.com/xugaoyi>
- **Vdoing官方交流QQ群**：694387113
- **Vdoing主题文档：**<https://doc.xugaoyi.com/vuepress-theme-vdoing-doc/>
- **Vdoing交流QQ群**：694387113
<script>
export default {

2
package.json
View File

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

13
theme-vdoing/components/AlgoliaSearchBox.vue
View File

@ -8,7 +8,7 @@
id="algolia-search-input"
class="search-query"
:placeholder="placeholder"
>
/>
</form>
</template>
@ -34,7 +34,7 @@ export default {
import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
]).then(([docsearch]) => {
docsearch = docsearch.default
const { algoliaOptions = {}} = userOptions
const { algoliaOptions = {} } = userOptions
docsearch(Object.assign(
{},
userOptions,
@ -127,8 +127,7 @@ export default {
.ds-cursor .algolia-docsearch-suggestion--content
background-color #e7edf3 !important
color var(--textColor)
@media (min-width: $MQMobile)
@media (min-width $MQMobile)
.algolia-search-wrapper
.algolia-autocomplete
.algolia-docsearch-suggestion
@ -144,8 +143,7 @@ export default {
vertical-align top
.ds-dropdown-menu
min-width 515px !important
@media (max-width: $MQMobile)
@media (max-width $MQMobile)
.algolia-search-wrapper
.ds-dropdown-menu
min-width calc(100vw - 4rem) !important
@ -156,12 +154,11 @@ export default {
padding 0 !important
background white !important
.algolia-docsearch-suggestion--subcategory-column-text:after
content " > "
content ' > '
font-size 10px
line-height 14.4px
display inline-block
width 5px
margin -3px 3px 0
vertical-align middle
</style>

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

@ -2,13 +2,14 @@
<div class="custom-page archives-page">
<div class="theme-vdoing-wrapper">
<h1>
<img :src="currentBadge" v-if="$themeConfig.titleBadge === false ? false : true">
<img
:src="currentBadge"
v-if="$themeConfig.titleBadge === false ? false : true"
/>
{{this.$page.title}}
</h1>
<ul>
<template
v-for="(item, index) in postsList"
>
<template v-for="(item, index) in postsList">
<li
class="year"
v-if="(year = getYear(index)) !== getYear(index-1)"
@ -16,13 +17,9 @@
>
<h2>{{year}}</h2>
</li>
<li
:key="index"
>
<li :key="index">
<router-link :to="item.path">
<span>
{{ getDate(item) }}
</span>
<span>{{ getDate(item) }}</span>
{{item.title}}
</router-link>
</li>
@ -39,7 +36,7 @@ import TitleBadgeMixin from '../mixins/titleBadge'
export default {
mixins: [TitleBadgeMixin],
data() {
data () {
return {
postsList: [],
@ -47,20 +44,20 @@ export default {
currentPage: 1// 当前页
}
},
created() {
created () {
this.getPageData()
},
mounted() {
mounted () {
window.addEventListener('scroll', debounce(() => {
if(this.postsList.length < this.$sortPostsByDate.length) {
if (this.postsList.length < this.$sortPostsByDate.length) {
const docEl = document.documentElement
const docBody = document.body
const scrollTop = docEl.scrollTop || docBody.scrollTop;
const clientHeight = docEl.clientHeight || docBody.clientHeight;
const scrollHeight = docEl.scrollHeight || docBody.scrollHeight;
if(scrollHeight > clientHeight && scrollTop + clientHeight >= scrollHeight-250) {
if (scrollHeight > clientHeight && scrollTop + clientHeight >= scrollHeight - 250) {
this.loadmore()
}
}
@ -68,27 +65,27 @@ export default {
}, 200))
},
methods: {
getPageData() {
getPageData () {
const currentPage = this.currentPage
const perPage = this.perPage
this.postsList = this.postsList.concat(this.$sortPostsByDate.slice((currentPage-1)*perPage, currentPage*perPage))
this.postsList = this.postsList.concat(this.$sortPostsByDate.slice((currentPage - 1) * perPage, currentPage * perPage))
},
loadmore() {
this.currentPage = this.currentPage+1
loadmore () {
this.currentPage = this.currentPage + 1
this.getPageData()
},
getYear(index) {
getYear (index) {
const item = this.postsList[index]
if (!item) {
return
}
const {frontmatter: { date }} = item
const { frontmatter: { date } } = item
if (date && type(date) === 'string') {
return date.split(" ")[0].slice(0, 4)
}
},
getDate(item) {
const {frontmatter: { date }} = item
getDate (item) {
const { frontmatter: { date } } = item
if (date && type(date) === 'string') {
return date.split(" ")[0].slice(5, 10)
}
@ -100,14 +97,13 @@ export default {
<style lang='stylus'>
@require '../styles/wrapper.styl'
.archives-page
.theme-vdoing-wrapper
@extend $vdoing-wrapper
position relative
@media (min-width $contentWidth + 80)
margin-top 1.5rem!important
ul,li
margin-top 1.5rem !important
ul, li
margin 0
padding 0
li
@ -120,39 +116,35 @@ export default {
&.year:not(:first-child)
margin-top 3.5rem
h2
margin-bottom .8rem
margin-bottom 0.8rem
font-weight 400
padding .5rem 0
padding 0.5rem 0
a
display block
color var(--textColor)
transition padding .3s
padding .5rem 2rem
transition padding 0.3s
padding 0.5rem 2rem
line-height 1.2rem
&:hover
padding-left 2.5rem
color $accentColor
background lighten($accentColor, 90%)
background #f9f9f9
@media (max-width $contentWidth + 80)
padding .5rem 1rem
font-weight: normal;
padding 0.5rem 1rem
font-weight normal
&:hover
padding-left 1.5rem
span
opacity .6
font-size .85rem
opacity 0.6
font-size 0.85rem
font-weight 400
margin-right .3rem
margin-right 0.3rem
.loadmore
text-align center
margin-top 1rem
opacity .5
.theme-mode-dark .archives-page .theme-vdoing-wrapper li a:hover,
.theme-mode-read .archives-page .theme-vdoing-wrapper li a:hover
opacity 0.5
.theme-mode-dark .archives-page .theme-vdoing-wrapper li a:hover, .theme-mode-read .archives-page .theme-vdoing-wrapper li a:hover
background var(--customBlockBg)
.hide-navbar
.archives-page
.theme-vdoing-wrapper

103
theme-vdoing/components/ArticleInfo.vue
View File

@ -1,33 +1,79 @@
<template>
<div class="articleInfo-wrap">
<div class="articleInfo">
<ul class="breadcrumbs" v-if="articleInfo.classify1 && articleInfo.classify1 !== '_posts'">
<ul
class="breadcrumbs"
v-if="articleInfo.classify1 && articleInfo.classify1 !== '_posts'"
>
<li>
<router-link to="/" class="iconfont icon-home" title="首页" />
<router-link
to="/"
class="iconfont icon-home"
title="首页"
/>
</li>
<li>
<router-link v-if="articleInfo.cataloguePermalink" :to="articleInfo.cataloguePermalink" :title="articleInfo.classify1+'-目录页'">{{articleInfo.classify1}}</router-link>
<router-link v-else-if="$themeConfig.category !== false" :to="`/categories/?category=${articleInfo.classify1}`" title="分类">{{articleInfo.classify1}}</router-link>
<router-link
v-if="articleInfo.cataloguePermalink"
:to="articleInfo.cataloguePermalink"
:title="articleInfo.classify1+'-目录页'"
>{{articleInfo.classify1}}</router-link>
<router-link
v-else-if="$themeConfig.category !== false"
:to="`/categories/?category=${encodeURIComponent(articleInfo.classify1)}`"
title="分类"
>{{articleInfo.classify1}}</router-link>
<span v-else>{{ articleInfo.classify1 }}</span>
</li>
<li v-if="articleInfo.classify2">
<router-link v-if="articleInfo.cataloguePermalink" :to="articleInfo.cataloguePermalink + '/#' + encodeUrl(articleInfo.classify2)" :title="articleInfo.classify1+'#'+articleInfo.classify2">{{articleInfo.classify2}}</router-link>
<router-link v-else-if="$themeConfig.category !== false" :to="`/categories/?category=${articleInfo.classify2}`" title="分类">{{articleInfo.classify2}}</router-link>
<router-link
v-if="articleInfo.cataloguePermalink"
:to="articleInfo.cataloguePermalink + '/#' + articleInfo.classify2"
:title="articleInfo.classify1+'#'+articleInfo.classify2"
>{{articleInfo.classify2}}</router-link>
<router-link
v-else-if="$themeConfig.category !== false"
:to="`/categories/?category=${encodeURIComponent(articleInfo.classify2)}`"
title="分类"
>{{articleInfo.classify2}}</router-link>
<span v-else>{{articleInfo.classify2}}</span>
</li>
</ul>
<div class="info">
<div class="author iconfont icon-touxiang" title="作者" v-if="articleInfo.author">
<a :href="articleInfo.author.href || articleInfo.author.link" v-if="articleInfo.author.href || articleInfo.author.link && typeof(articleInfo.author.link) === 'string'" target="_blank" class="beLink" title="作者">{{articleInfo.author.name}}</a>
<a v-else href="javascript:;">{{articleInfo.author.name || articleInfo.author}}</a>
<div
class="author iconfont icon-touxiang"
title="作者"
v-if="articleInfo.author"
>
<a
:href="articleInfo.author.href || articleInfo.author.link"
v-if="articleInfo.author.href || articleInfo.author.link && typeof(articleInfo.author.link) === 'string'"
target="_blank"
class="beLink"
title="作者"
>{{articleInfo.author.name}}</a>
<a
v-else
href="javascript:;"
>{{articleInfo.author.name || articleInfo.author}}</a>
</div>
<div class="date iconfont icon-riqi" title="创建时间" v-if="articleInfo.date">
<a href="javascript:;" >{{articleInfo.date}}</a>
<div
class="date iconfont icon-riqi"
title="创建时间"
v-if="articleInfo.date"
>
<a href="javascript:;">{{articleInfo.date}}</a>
</div>
<div class="date iconfont icon-wenjian" title="分类" v-if="$themeConfig.category !== false && !(articleInfo.classify1 && articleInfo.classify1 !== '_posts') && articleInfo.categories">
<router-link :to="`/categories/?category=${item}`" v-for="(item, index) in articleInfo.categories" :key="index">
{{item}}
</router-link>
<div
class="date iconfont icon-wenjian"
title="分类"
v-if="$themeConfig.category !== false && !(articleInfo.classify1 && articleInfo.classify1 !== '_posts') && articleInfo.categories"
>
<router-link
:to="`/categories/?category=${encodeURIComponent(item)}`"
v-for="(item, index) in articleInfo.categories"
:key="index"
>{{item + ' '}}</router-link>
</div>
</div>
</div>
@ -35,25 +81,22 @@
</template>
<script>
import encodeMixin from '../mixins/encodeUrl'
export default {
mixins: [encodeMixin],
data() {
data () {
return {
articleInfo: {}
}
},
created() {
created () {
this.articleInfo = this.getPageInfo()
},
watch: {
'$route.path'() {
'$route.path' () {
this.articleInfo = this.getPageInfo()
}
},
methods: {
getPageInfo() {
getPageInfo () {
const pageInfo = this.$page
const { relativePath } = pageInfo
const { sidebar } = this.$themeConfig
@ -90,19 +133,19 @@ export default {
.articleInfo-wrap
@extend $wrapper
position: relative
z-index: 1
position relative
z-index 1
color #888
.articleInfo
overflow hidden
font-size .92rem
font-size 0.92rem
.breadcrumbs
margin 0
padding 0
overflow hidden
display inline-block
line-height 2rem
@media (max-width: 960px)
@media (max-width 960px)
width 100%
li
list-style-type none
@ -118,7 +161,7 @@ export default {
a
color #888
&:before
font-size .92rem
font-size 0.92rem
&:hover
color $accentColor
.icon-home
@ -126,13 +169,13 @@ export default {
.info
float right
line-height 32px
@media (max-width: 960px)
@media (max-width 960px)
float left
div
float left
margin-left 20px
font-size .8rem
@media (max-width: 960px)
font-size 0.8rem
@media (max-width 960px)
margin 0 20px 0 0
&:before
margin-right 3px

28
theme-vdoing/components/BloggerBar.vue
View File

@ -1,9 +1,16 @@
<template>
<aside class="blogger-wrapper card-box">
<div class="avatar">
<img :src="blogger.avatar" alt="头像" title="我好看吗">
<img
:src="blogger.avatar"
alt="头像"
title="我好看吗"
/>
</div>
<div class="icons" v-if="social">
<div
class="icons"
v-if="social"
>
<a
v-for="(item, index) in social.icons"
:key="index"
@ -15,12 +22,8 @@
/>
</div>
<div class="blogger">
<span class="name">
{{blogger.name}}
</span>
<span class="slogan">
{{blogger.slogan}}
</span>
<span class="name">{{blogger.name}}</span>
<span class="slogan">{{blogger.slogan}}</span>
</div>
</aside>
</template>
@ -28,10 +31,10 @@
<script>
export default {
computed: {
blogger() {
blogger () {
return this.$themeConfig.blogger
},
social() {
social () {
return this.$themeConfig.social
}
}
@ -64,15 +67,14 @@ export default {
display block
float left
text-align center
opacity .8
opacity 0.8
&:hover
color $accentColor
.blogger
margin 12px 0 2px 0
.name
font-size 1.4rem
display: block
display block
margin-bottom 6px
.slogan
color var(--textColor)

13
theme-vdoing/components/BodyBgImg.vue
View File

@ -1,17 +1,20 @@
<template>
<div class="body-bg" :style="`background: url(${bgImg}) center center / cover no-repeat;opacity:${opacity}`"></div>
<div
class="body-bg"
:style="`background: url(${bgImg}) center center / cover no-repeat;opacity:${opacity}`"
></div>
</template>
<script>
import { type } from '../util'
export default {
data() {
data () {
return {
bgImg: '',
opacity: 0.5
}
},
mounted() {
mounted () {
let { bodyBgImg, bodyBgImgOpacity } = this.$themeConfig
if (type(bodyBgImg) === 'string') {
@ -23,7 +26,7 @@ export default {
this.bgImg = bodyBgImg[count]
clearInterval(timer)
timer = setInterval(() => {
if (++count >= bodyBgImg.length ) {
if (++count >= bodyBgImg.length) {
count = 0
}
this.bgImg = bodyBgImg[count]
@ -46,5 +49,5 @@ export default {
z-index -999999
height 100vh
width 100vw
transition background .5s
transition background 0.5s
</style>

162
theme-vdoing/components/Buttons.vue
View File

@ -22,16 +22,20 @@
@click="showModeBox = true"
>
<transition name="mode">
<ul class="select-box" ref="modeBox" v-show="showModeBox" @click.stop @touchstart.stop>
<ul
class="select-box"
ref="modeBox"
v-show="showModeBox"
@click.stop
@touchstart.stop
>
<li
v-for="item in modeList"
:key="item.KEY"
class="iconfont"
:class="[item.icon, {active: item.KEY === currentMode}]"
@click="toggleMode(item.KEY)"
>
{{item.name}}
</li>
v-for="item in modeList"
:key="item.KEY"
class="iconfont"
:class="[item.icon, {active: item.KEY === currentMode}]"
@click="toggleMode(item.KEY)"
>{{item.name}}</li>
</ul>
</transition>
</div>
@ -44,7 +48,7 @@ import storage from 'good-storage' // 本地存储
const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
export default {
data() {
data () {
return {
threshold: 100,
scrollTop: null,
@ -101,7 +105,7 @@ export default {
this.showModeBox = false
}
window.addEventListener('scroll', debounce(() => {
if(this.showModeBox) {
if (this.showModeBox) {
this.showModeBox = false
}
}, 100))
@ -112,10 +116,10 @@ export default {
const buttons = document.querySelectorAll('.buttons .button')
for (let i = 0; i < buttons.length; i++) {
const button = buttons[i]
button.addEventListener('touchstart', function(){
button.addEventListener('touchstart', function () {
button.classList.add('hover')
})
button.addEventListener('touchend', function(){
button.addEventListener('touchend', function () {
setTimeout(() => {
button.classList.remove('hover')
}, 150)
@ -129,7 +133,7 @@ export default {
}
},
methods: {
toggleMode(key){
toggleMode (key) {
this.currentMode = key
this.$emit('toggle-theme-mode', key)
},
@ -151,21 +155,21 @@ export default {
this.showCommentBut = this.$frontmatter.comment !== false && this.$frontmatter.home !== true
this.commentTop = commentEl.offsetTop - 58
}
},500)
}, 500)
},
scrollToComment() {
scrollToComment () {
window.scrollTo({ top: this.commentTop, behavior: 'smooth' })
this._textareaEl = document.querySelector(this.COMMENT_SELECTOR_1 + ' textarea') || document.querySelector(this.COMMENT_SELECTOR_2 + ' input') || document.querySelector(this.COMMENT_SELECTOR_3 + ' textarea')
if( this._textareaEl && this.getScrollTop() !== this._recordScrollTop) {
if (this._textareaEl && this.getScrollTop() !== this._recordScrollTop) {
document.addEventListener("scroll", this._handleListener)
} else if (this._textareaEl && this.getScrollTop() === this._recordScrollTop) {
this._handleFocus()
}
},
_handleListener() {
_handleListener () {
clearTimeout(this._scrollTimer)
this._scrollTimer = setTimeout(() => {
document.removeEventListener('scroll', this._handleListener)
@ -174,7 +178,7 @@ export default {
}, 30)
},
_handleFocus() {
_handleFocus () {
this._textareaEl.focus()
this._textareaEl.classList.add('yellowBorder')
setTimeout(() => {
@ -183,7 +187,7 @@ export default {
}
},
watch: {
'$route.path'() {
'$route.path' () {
this.showCommentBut = false
this.getCommentTop()
}
@ -192,69 +196,67 @@ export default {
</script>
<style lang='stylus'>
.yellowBorder
// border: #FFE089 1px solid!important
border-radius 5px
box-shadow 0 0 15px #FFE089!important
.buttons
position fixed
right 2rem
bottom 2.5rem
z-index 11
@media (max-width: $MQNarrow)
right 1rem
bottom 1.5rem
.button
width 2.2rem
height 2.2rem
line-height 2.2rem
border-radius 50%
box-shadow 0 2px 6px rgba(0,0,0,.15)
margin-top .9rem
text-align center
cursor pointer
transition all .5s
background var(--blurBg)
&.hover
.yellowBorder
// border: #FFE089 1px solid!important
border-radius 5px
box-shadow 0 0 15px #FFE089 !important
.buttons
position fixed
right 2rem
bottom 2.5rem
z-index 11
@media (max-width $MQNarrow)
right 1rem
bottom 1.5rem
.button
width 2.2rem
height 2.2rem
line-height 2.2rem
border-radius 50%
box-shadow 0 2px 6px rgba(0, 0, 0, 0.15)
margin-top 0.9rem
text-align center
cursor pointer
transition all 0.5s
background var(--blurBg)
&.hover
background $accentColor
box-shadow 0 0 15px $accentColor
&:before
color #fff
@media (any-hover hover)
&:hover
background $accentColor
box-shadow 0 0 15px $accentColor
&:before
color #fff
@media (any-hover: hover)
.select-box
margin 0
padding 0.8rem 0
position absolute
bottom 0rem
right 1.5rem
background var(--mainBg)
border 1px solid var(--borderColor)
width 120px
border-radius 6px
box-shadow 0 0 15px rgba(255, 255, 255, 0.2)
li
list-style none
line-height 2rem
font-size 0.95rem
&:hover
background $accentColor
box-shadow 0 0 15px $accentColor
&:before
color #fff
.select-box
margin 0
padding .8rem 0
position absolute
bottom 0rem
right 1.5rem
background var(--mainBg)
border 1px solid var(--borderColor)
width 120px
border-radius 6px
box-shadow 0 0 15px rgba(255,255,255,.2)
li
list-style none
line-height 2rem
font-size .95rem
&:hover
color $accentColor
&.active
background-color rgba(150,150,150,.2)
color $accentColor
.mode-enter-active, .mode-leave-active
transition all .3s
.mode-enter, .mode-leave-to
opacity 0
transform scale(.8)
.fade-enter-active, .fade-leave-active
transition opacity .2s
.fade-enter, .fade-leave-to
opacity 0
color $accentColor
&.active
background-color rgba(150, 150, 150, 0.2)
color $accentColor
.mode-enter-active, .mode-leave-active
transition all 0.3s
.mode-enter, .mode-leave-to
opacity 0
transform scale(0.8)
.fade-enter-active, .fade-leave-active
transition opacity 0.2s
.fade-enter, .fade-leave-to
opacity 0
</style>

66
theme-vdoing/components/Catalogue.vue
View File

@ -4,27 +4,45 @@
<img :src="$withBase(pageData.imgUrl)" />
<dl class="column-info">
<dt class="title">{{pageData.title}}</dt>
<dd class="description" v-html="pageData.description"></dd>
<dd
class="description"
v-html="pageData.description"
></dd>
</dl>
</div>
<div class="catalogue-wrapper" v-if="isStructuring">
<div
class="catalogue-wrapper"
v-if="isStructuring"
>
<div class="catalogue-title">目录</div>
<div class="catalogue-content">
<template v-for="(item, index) in getCatalogueList()">
<dl v-if="type(item) === 'array'" :key="index" class="inline">
<dl
v-if="type(item) === 'array'"
:key="index"
class="inline"
>
<dt>
<router-link :to="item[2]">{{`${index+1}. ${item[1]}`}}</router-link>
</dt>
</dl>
<dl v-else-if="type(item) === 'object'" :key="index">
<dt :id="anchorText = encodeUrl(item.title)">
<a :href="`#${anchorText}`" class="header-anchor">#</a>
<dl
v-else-if="type(item) === 'object'"
:key="index"
>
<dt :id="anchorText = item.title">
<a
:href="`#${anchorText}`"
class="header-anchor"
>#</a>
{{`${index+1}. ${item.title}`}}
</dt>
<dd>
<router-link :to="s[2]" v-for="(s, i) in item.children" :key="i">
{{`${index+1}-${i+1}. ${s[1]}`}}
</router-link>
<router-link
:to="s[2]"
v-for="(s, i) in item.children"
:key="i"
>{{`${index+1}-${i+1}. ${s[1]}`}}</router-link>
</dd>
</dl>
</template>
@ -34,16 +52,14 @@
</template>
<script>
import encodeMixin from '../mixins/encodeUrl'
export default {
mixins: [encodeMixin],
data() {
data () {
return {
pageData: null,
isStructuring: true
}
},
created() {
created () {
this.getPageData()
const sidebar = this.$themeConfig.sidebar
@ -53,7 +69,7 @@ export default {
}
},
methods: {
getPageData() {
getPageData () {
const pageComponent = this.$frontmatter.pageComponent
if (pageComponent && pageComponent.data) {
this.pageData = {
@ -64,23 +80,23 @@ export default {
console.error('请在front matter中设置pageComponent和pageComponent.data数据')
}
},
getCatalogueList() {
getCatalogueList () {
const { sidebar } = this.$site.themeConfig
const key = this.$frontmatter.pageComponent.data.key
const catalogueList = sidebar[`/${key}/`]
if(!catalogueList) {
if (!catalogueList) {
console.error('未获取到目录数据，请查看front matter中设置的key是否正确。')
}
return catalogueList
},
type(o) { // 数据类型检查
type (o) { // 数据类型检查
return Object.prototype.toString.call(o).match(/\[object (.*?)\]/)[1].toLowerCase()
}
},
watch: {
'$route.path'() {
'$route.path' () {
this.getPageData()
}
}
@ -88,7 +104,7 @@ export default {
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
dl,dd
dl, dd
margin 0
.column-wrapper
margin-top 1rem
@ -105,8 +121,8 @@ dl,dd
font-size 1.6rem
.description
color var(--textColor)
opacity .8
margin .5rem 0
opacity 0.8
margin 0.5rem 0
.catalogue-wrapper
.catalogue-title
font-size 1.45rem
@ -118,7 +134,7 @@ dl,dd
display inline-block
width 50%
margin-bottom 1rem
@media (max-width: $MQMobileNarrow)
@media (max-width $MQMobileNarrow)
width 100%
a
width 100%
@ -131,11 +147,11 @@ dl,dd
&:hover .header-anchor
opacity 1
dd
margin-top .7rem
margin-top 0.7rem
a:not(.header-anchor)
margin-bottom .5rem
margin-bottom 0.5rem
display inline-block
width 50%
@media (max-width: $MQMobileNarrow)
@media (max-width $MQMobileNarrow)
width 100%
</style>

55
theme-vdoing/components/CategoriesBar.vue
View File

@ -1,12 +1,14 @@
<template>
<div class="categories-wrapper card-box">
<router-link to="/categories/" class="title iconfont icon-wenjianjia" title="全部分类">
{{ length === 'all' ? '全部分类' : '文章分类' }}
</router-link>
<router-link
to="/categories/"
class="title iconfont icon-wenjianjia"
title="全部分类"
>{{ length === 'all' ? '全部分类' : '文章分类' }}</router-link>
<div class="categories">
<router-link
:to="`/categories/?category=${item.key}`"
:to="`/categories/?category=${encodeURIComponent(item.key)}`"
v-for="(item, index) in categories"
:key="index"
:class="{active: item.key === category}"
@ -14,9 +16,11 @@
{{item.key}}
<span>{{item.length}}</span>
</router-link>
<router-link to="/categories/" v-if="length !== 'all' && length < categoriesData.length" class="more">
更多...
</router-link>
<router-link
to="/categories/"
v-if="length !== 'all' && length < categoriesData.length"
class="more"
>更多...</router-link>
</div>
</div>
</template>
@ -38,7 +42,7 @@ export default {
}
},
computed: {
categories() {
categories () {
if (this.length === 'all') {
return this.categoriesData
} else {
@ -56,48 +60,47 @@ export default {
opacity 0.9
font-size 1.2rem
.categories
margin-top .6rem
margin-top 0.6rem
a
display block
padding 8px .3rem 7px .3rem
padding 8px 0.3rem 7px 0.3rem
color var(--textColor)
opacity .8
font-size .95rem
line-height .95rem
opacity 0.8
font-size 0.95rem
line-height 0.95rem
position relative
transition all .3s
transition all 0.3s
border-bottom 1px solid var(--borderColor)
margin-top -1px
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@media (max-width: $MQMobile)
overflow hidden
white-space nowrap
text-overflow ellipsis
@media (max-width $MQMobile)
font-weight 400
&.more
color $accentColor
&:hover
color $accentColor
padding-left .6rem
padding-left 0.6rem
span
opacity .8
opacity 0.8
span
float right
background-color var(--textColor)
color var(--mainBg)
border-radius 8px
padding 0 .13rem
padding 0 0.13rem
min-width 1rem
height 1rem
line-height 1rem
font-size .6rem
font-size 0.6rem
text-align center
opacity .6
transition opacity .3s
opacity 0.6
transition opacity 0.3s
&.active
background $accentColor
color var(--mainBg)
padding-left .8rem
padding-left 0.8rem
border-radius 1px
border-color transparent
</style>

31
theme-vdoing/components/CategoriesPage.vue
View File

@ -38,7 +38,7 @@ import Pagination from '@theme/components/Pagination'
import CategoriesBar from '@theme/components/CategoriesBar'
export default {
data(){
data () {
return {
category: '',
total: 0, // 总长
@ -47,7 +47,7 @@ export default {
}
},
components: { MainLayout, PostList, Pagination, CategoriesBar },
mounted() {
mounted () {
const queryCategory = this.$route.query.category
if (queryCategory) {
this.category = queryCategory
@ -70,12 +70,12 @@ export default {
}
},
methods: {
handlePagination(i) { // 分页
handlePagination (i) { // 分页
this.currentPage = i
}
},
watch: {
'$route.query.category'() {
'$route.query.category' () {
this.category = this.$route.query.category
if (this.category) {
this.total = this.$groupPosts.categories[this.category].length
@ -93,39 +93,38 @@ export default {
.categories-page
.categories-wrapper
position sticky
top ($navbarHeight + .9rem)
top ($navbarHeight + 0.9rem)
max-height calc(100vh - 10rem)
min-height 4.2rem
@media (max-width: $MQMobile)
@media (max-width $MQMobile)
display none
.categories
padding-right .5rem
padding-right 0.5rem
max-height calc(100vh - 14rem)
min-height 2.2rem
overflow-y auto
transition all .2s
transition all 0.2s
position relative
&::-webkit-scrollbar-track-piece
background-color:rgba(0,0,0,.05)
background-color rgba(0, 0, 0, 0.05)
&::-webkit-scrollbar-thumb:vertical
background-color:rgba(0,0,0,.15)
background-color rgba(0, 0, 0, 0.15)
&:hover
&::-webkit-scrollbar-track-piece
background-color:rgba(0,0,0,.1)
background-color rgba(0, 0, 0, 0.1)
&::-webkit-scrollbar-thumb:vertical
background-color:rgba(0,0,0,.25)
background-color rgba(0, 0, 0, 0.25)
.categories-page
.main-left
.categories-wrapper
position relative
top 0
padding .9rem 1.5rem
margin-bottom .9rem
padding 0.9rem 1.5rem
margin-bottom 0.9rem
max-height 15rem
border-radius 0
display none
@media (max-width: $MQMobile)
@media (max-width $MQMobile)
display block
.categories
max-height 12.3rem

39
theme-vdoing/components/DropdownLink.vue
View File

@ -9,8 +9,15 @@
:aria-label="dropdownAriaLabel"
@click="toggle"
>
<router-link v-if="item.link" :to="item.link" class="link-title">{{ item.text }}</router-link>
<span class="title" v-show="!item.link">{{ item.text }}</span>
<router-link
v-if="item.link"
:to="item.link"
class="link-title"
>{{ item.text }}</router-link>
<span
class="title"
v-show="!item.link"
>{{ item.text }}</span>
<span
class="arrow"
:class="open ? 'down' : 'right'"
@ -44,7 +51,8 @@
isLastItemOfArray(subItem, item.items) &&
toggle()
"
:item="childSubItem"/>
:item="childSubItem"
/>
</li>
</ul>
@ -85,7 +93,7 @@ export default {
return this.item.ariaLabel || this.item.text
}
},
beforeMount(){
beforeMount () {
this.isMQMobile = window.innerWidth < 720 ? true : false;
window.addEventListener('resize', () => {
@ -94,9 +102,9 @@ export default {
},
methods: {
toggle () {
if(this.isMQMobile){
this.open = !this.open
}
if (this.isMQMobile) {
this.open = !this.open
}
},
isLastItemOfArray (item, array) {
@ -158,7 +166,7 @@ export default {
&.router-link-active
color $accentColor
&::after
content ""
content ''
width 0
height 0
border-left 5px solid $accentColor
@ -171,8 +179,7 @@ export default {
margin-top 0
padding-top 0
border-top 0
@media (max-width: $MQMobile)
@media (max-width $MQMobile)
.dropdown-wrapper
&.open .dropdown-title
margin-bottom 0.5rem
@ -184,9 +191,9 @@ export default {
.link-title
display none
.title
display inline-block!important
display inline-block !important
.nav-dropdown
transition height .1s ease-out
transition height 0.1s ease-out
overflow hidden
.dropdown-item
h4
@ -199,12 +206,10 @@ export default {
.dropdown-subitem
font-size 14px
padding-left 1rem
@media (min-width: $MQMobile)
@media (min-width $MQMobile)
.dropdown-wrapper
height 1.8rem
&:hover .nav-dropdown,
&.open .nav-dropdown
&:hover .nav-dropdown, &.open .nav-dropdown
// override the inline style.
display block !important
&.open:blur
@ -219,7 +224,7 @@ export default {
display none
// Avoid height shaked by clicking
height auto !important
box-sizing border-box;
box-sizing border-box
max-height calc(100vh - 2.7rem)
overflow-y auto
position absolute

3
theme-vdoing/components/DropdownTransition.vue
View File

@ -5,7 +5,7 @@
@after-enter="unsetHeight"
@before-leave="setHeight"
>
<slot/>
<slot />
</transition>
</template>
@ -29,5 +29,4 @@ export default {
<style lang="stylus">
.dropdown-enter, .dropdown-leave-to
height 0 !important
</style>

36
theme-vdoing/components/Footer.vue
View File

@ -1,6 +1,9 @@
<template>
<div class="footer">
<div class="icons" v-if="social && social.icons">
<div
class="icons"
v-if="social && social.icons"
>
<a
:href="item.link"
:title="item.title"
@ -8,15 +11,21 @@
v-for="(item, index) in social.icons"
:key="index"
target="_blank"
>
</a>
></a>
</div>
<!--Vdoing主题遵循MIT协议，完全开源且免费。如果您对主题的修改并不大，希望您保留主题的链接。-->
Theme by <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
Theme by
<a
href="https://github.com/xugaoyi/vuepress-theme-vdoing"
target="_blank"
title="本站主题"
>Vdoing</a>
<template v-if="footer">
| Copyright © {{ footer.createYear }}-{{ new Date().getFullYear() }}
<span v-html="footer.copyrightInfo"></span>
| Copyright © {{ footer.createYear }}-{{ new Date().getFullYear() }}
<span
v-html="footer.copyrightInfo"
></span>
</template>
</div>
</template>
@ -24,10 +33,10 @@
<script>
export default {
computed: {
social() {
social () {
return this.$themeConfig.social
},
footer() {
footer () {
return this.$themeConfig.footer
}
}
@ -36,14 +45,13 @@ export default {
<style lang='stylus'>
// $mobileSidebarWidth = $sidebarWidth * 0.82
.footer
padding 5rem 1.5rem 2.5rem
text-align center
color #666
box-sizing border-box
font-size .85rem
transition all .2s ease
font-size 0.85rem
transition all 0.2s ease
.icons
margin-bottom 12px
.iconfont
@ -53,18 +61,14 @@ export default {
color inherit
&:hover
color $accentColor
@media (min-width: ($MQMobile + 1px))
@media (min-width ($MQMobile + 1px))
.sidebar-open .footer
width auto
padding-left ($sidebarWidth + 1.5rem)
@media (min-width 1520px)
.have-rightmenu .footer
padding-right ($rightMenuWidth + 1.5rem)
.no-sidebar .footer
width auto
padding-left 1.5rem
</style>

54
theme-vdoing/components/Home.vue
View File

@ -377,12 +377,11 @@ export default {
font-size 3.2rem
.description, .action
margin 1.5rem auto
.description
max-width 40rem
font-size 1.1rem
line-height 1.3
opacity .9
opacity 0.9
.action-button
display inline-block
font-size 1.2rem
@ -424,17 +423,15 @@ export default {
padding-bottom 0
p
opacity 0.8
padding 0 .8rem
padding 0 0.8rem
.feature:hover
.feature-img
animation-play-state: running
h2,p
animation-play-state running
h2, p
color $accentColor
// 移动端滑动图标
.slide-banner
margin-top: 2rem;
margin-top 2rem
.banner-wrapper
position relative
.slide-banner-scroll
@ -460,7 +457,7 @@ export default {
padding-bottom 0
p
opacity 0.8
padding 0 .8rem
padding 0 0.8rem
.docs-wrapper
position absolute
bottom 25px
@ -473,22 +470,20 @@ export default {
height 8px
border-radius 50%
background var(--textColor)
opacity .9
opacity 0.9
&.active
opacity .5
opacity 0.5
// 分页不在第一页时，隐藏banner栏
.main-wrapper
margin-top 2rem
.banner.hide-banner
display none
& + .main-wrapper
margin-top ($navbarHeight + .9rem)
margin-top ($navbarHeight + 0.9rem)
.main-wrapper
.main-left
.card-box
margin-bottom .9rem
margin-bottom 0.9rem
.pagination
margin-bottom 4rem
.theme-vdoing-content
@ -498,13 +493,13 @@ export default {
padding-top 2rem
&>:last-child
padding-bottom 2rem
@keyframes heart
from{transform:translate(0,0)}
to{transform:translate(0,8px)}
from
transform translate(0, 0)
to
transform translate(0, 8px)
// 1025px以下
@media (max-width: 1025px)
@media (max-width 1025px)
.home-wrapper
.banner
.banner-conent
@ -520,38 +515,33 @@ export default {
.feature-img
width 9rem
height 9rem
// 719px以下
@media (max-width: $MQMobile)
@media (max-width $MQMobile)
.home-wrapper
.banner
.banner-conent
.features
display none!important
display none !important
// 419px以下
@media (max-width: $MQMobileNarrow)
@media (max-width $MQMobileNarrow)
.home-wrapper
.banner-conent
padding-left 1.5rem
padding-right 1.5rem
.hero
img
max-height 210px
margin 2rem auto 1.2rem
h1
font-size: 2rem
font-size 2rem
h1, .description, .action
margin: 1.2rem auto
margin 1.2rem auto
.description
font-size: 1.2rem
font-size 1.2rem
.action-button
font-size 1rem
padding 0.6rem 1.2rem
.feature
h2
font-size: 1.25rem
font-size 1.25rem
</style>

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

@ -13,7 +13,7 @@
.main-wrapper
margin 1.5rem auto 0 auto
max-width $homePageWidth
padding 0 .9rem
padding 0 0.9rem
box-sizing border-box
position relative
display flex
@ -22,7 +22,7 @@
width 72%
.theme-vdoing-content.card-box
padding 1rem 1.5rem
margin-bottom .9rem
margin-bottom 0.9rem
.home-content
padding 1rem 1.5rem 0
.main-right
@ -32,13 +32,12 @@
@media (max-width 900px)
width 235px
.card-box
margin 0 0 .9rem .9rem
padding .95rem
margin 0 0 0.9rem 0.9rem
padding 0.95rem
// 719px以下
@media (max-width: $MQMobile)
@media (max-width $MQMobile)
.main-wrapper
margin .9rem 0
margin 0.9rem 0
padding 0
display block
.main-left
@ -53,7 +52,7 @@
.blogger-wrapper
display none
.card-box
margin 0 0 .9rem 0
margin 0 0 0.9rem 0
border-radius 0
width 100%
</style>

2
theme-vdoing/components/NavLink.vue
View File

@ -15,7 +15,7 @@
:rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'"
>
{{ item.text }}
<OutboundLink/>
<OutboundLink />
</a>
</template>

11
theme-vdoing/components/NavLinks.vue
View File

@ -28,7 +28,7 @@
rel="noopener noreferrer"
>
{{ repoLabel }}
<OutboundLink/>
<OutboundLink />
</a>
</nav>
</template>
@ -134,19 +134,16 @@ export default {
margin-left 0
.repo-link
margin-left 1.5rem
// 959
@media (max-width: $MQNarrow)
@media (max-width $MQNarrow)
.nav-links
.nav-item
margin-left 1.2rem
@media (max-width: $MQMobile)
@media (max-width $MQMobile)
.nav-links
.nav-item, .repo-link
margin-left 0
@media (min-width: $MQMobile)
@media (min-width $MQMobile)
.nav-links a
&:hover, &.router-link-active
color var(--textColor)

24
theme-vdoing/components/Navbar.vue
View File

@ -1,6 +1,6 @@
<template>
<header class="navbar blur">
<SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
<SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
<router-link
:to="$localePath"
@ -11,7 +11,7 @@
v-if="$site.themeConfig.logo"
:src="$withBase($site.themeConfig.logo)"
:alt="$siteTitle"
>
/>
<span
ref="siteName"
class="site-name"
@ -30,8 +30,10 @@
v-if="isAlgoliaSearch"
:options="algolia"
/>
<SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"/>
<NavLinks class="can-hide"/>
<SearchBox
v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"
/>
<NavLinks class="can-hide" />
</div>
</header>
</template>
@ -88,7 +90,6 @@ function css (el, property) {
<style lang="stylus">
$navbar-vertical-padding = 0.7rem
$navbar-horizontal-padding = 1.5rem
.navbar
padding $navbar-vertical-padding $navbar-horizontal-padding
line-height $navbarHeight - 1.4rem
@ -115,20 +116,17 @@ $navbar-horizontal-padding = 1.5rem
top $navbar-vertical-padding
display flex
.search-box
flex: 0 0 auto
flex 0 0 auto
vertical-align top
.hide-navbar
.navbar
transform translateY(-100%)
.navbar
transform translateY(-100%)
// 959
@media (max-width: $MQNarrow)
@media (max-width $MQNarrow)
.navbar
.site-name
display none
@media (max-width: $MQMobile)
@media (max-width $MQMobile)
.navbar
padding-left 4rem
.can-hide

85
theme-vdoing/components/Page.vue
View File

@ -3,21 +3,26 @@
<main class="page">
<slot name="top" />
<div :class="`theme-vdoing-wrapper ${bgStyle}`" >
<div :class="`theme-vdoing-wrapper ${bgStyle}`">
<ArticleInfo v-if="isArticle()" />
<component class="theme-vdoing-content" v-if="pageComponent" :is="pageComponent" />
<component
class="theme-vdoing-content"
v-if="pageComponent"
:is="pageComponent"
/>
<div class="content-wrapper">
<RightMenu v-if="showRightMenu"/>
<RightMenu v-if="showRightMenu" />
<h1 v-if="showTitle">
<img :src="currentBadge" v-if="$themeConfig.titleBadge === false ? false : true">
<img
:src="currentBadge"
v-if="$themeConfig.titleBadge === false ? false : true"
/>
{{this.$page.title}}
</h1>
<Content class="theme-vdoing-content" />
</div>
<PageEdit />
<PageNav v-bind="{ sidebarItems }" />
</div>
@ -30,7 +35,6 @@
<slot name="bottom" />
</main>
</div>
</template>
@ -46,28 +50,28 @@ import TitleBadgeMixin from '../mixins/titleBadge'
export default {
mixins: [TitleBadgeMixin],
data() {
data () {
return {
updateBarConfig: null
}
},
props: ['sidebarItems'],
components: { PageEdit, PageNav, ArticleInfo, Catalogue, UpdateArticle, RightMenu},
created() {
components: { PageEdit, PageNav, ArticleInfo, Catalogue, UpdateArticle, RightMenu },
created () {
this.updateBarConfig = this.$themeConfig.updateBar
},
computed: {
bgStyle(){
bgStyle () {
const { contentBgStyle } = this.$themeConfig
return contentBgStyle ? 'bg-style-' + contentBgStyle : ''
},
isShowUpdateBar() {
isShowUpdateBar () {
return this.updateBarConfig && this.updateBarConfig.showToArticle === false ? false : true
},
showTitle() {
showTitle () {
return !this.$frontmatter.pageComponent
},
showRightMenu(){
showRightMenu () {
return this.$page.headers && (this.$frontmatter && this.$frontmatter.sidebar && this.$frontmatter.sidebar !== false) !== false
},
pageComponent () {
@ -75,7 +79,7 @@ export default {
}
},
methods: {
isArticle() {
isArticle () {
return this.$frontmatter.article !== false
}
}
@ -88,13 +92,12 @@ export default {
.page
padding-bottom 2rem
display block
@media (max-width $MQMobile)
padding-top ($navbarHeight)
@media (min-width $MQMobile)
@media (max-width $MQMobile)
padding-top $navbarHeight
@media (min-width $MQMobile)
padding-top ($navbarHeight + 1.5rem)
>*
@extend $vdoing-wrapper
.theme-vdoing-wrapper
.content-wrapper
position relative
@ -102,48 +105,42 @@ export default {
margin-bottom -0.2rem
max-width 2.2rem
max-height 2.2rem
.theme-vdoing-wrapper
--linesColor: rgba(50, 0, 0, 0.05)
--linesColor rgba(50, 0, 0, 0.05)
&.bg-style-1 // 方格
background-image: linear-gradient(90deg, var(--linesColor) 3%, transparent 3%), linear-gradient(0deg, var(--linesColor) 3%, transparent 3%)
background-position: center center
background-size: 20px 20px
background-image linear-gradient(90deg, var(--linesColor) 3%, transparent 3%), linear-gradient(0deg, var(--linesColor) 3%, transparent 3%)
background-position center center
background-size 20px 20px
&.bg-style-2 // 横线
background-image: repeating-linear-gradient(0, var(--linesColor) 0, var(--linesColor) 1px, transparent 0, transparent 50%);
background-size: 30px 30px
background-image repeating-linear-gradient(0, var(--linesColor) 0, var(--linesColor) 1px, transparent 0, transparent 50%)
background-size 30px 30px
&.bg-style-3 // 竖线
background-image: repeating-linear-gradient(90deg, var(--linesColor) 0, var(--linesColor) 1px, transparent 0, transparent 50%);
background-size: 30px 30px
background-image repeating-linear-gradient(90deg, var(--linesColor) 0, var(--linesColor) 1px, transparent 0, transparent 50%)
background-size 30px 30px
&.bg-style-4 // 左斜线
background-image: repeating-linear-gradient(-45deg, var(--linesColor) 0, var(--linesColor) 1px, transparent 0, transparent 50%);
background-size: 20px 20px
background-image repeating-linear-gradient(-45deg, var(--linesColor) 0, var(--linesColor) 1px, transparent 0, transparent 50%)
background-size 20px 20px
&.bg-style-5 // 右斜线
background-image: repeating-linear-gradient(45deg, var(--linesColor) 0, var(--linesColor) 1px, transparent 0, transparent 50%);
background-size: 20px 20px
background-image repeating-linear-gradient(45deg, var(--linesColor) 0, var(--linesColor) 1px, transparent 0, transparent 50%)
background-size 20px 20px
&.bg-style-6 // 点状
background-image: radial-gradient(var(--linesColor) 1px, transparent 1px);
background-size: 10px 10px
background-image radial-gradient(var(--linesColor) 1px, transparent 1px)
background-size 10px 10px
// 背景纹适应深色模式
.theme-mode-dark
.theme-vdoing-wrapper
--linesColor: rgba(125,125,125, 0.05)
--linesColor rgba(125, 125, 125, 0.05)
/**
* 右侧菜单的自适应
*/
@media (min-width: 720px) and (max-width: 1279px)
@media (min-width 720px) and (max-width 1279px)
.have-rightmenu
.page
padding-right .8rem!important
@media (max-width: 1279px)
padding-right 0.8rem !important
@media (max-width 1279px)
.right-menu-wrapper
display none
@media (min-width: 1280px)
@media (min-width 1280px)
.sidebar .sidebar-sub-headers
display none
</style>

54
theme-vdoing/components/PageEdit.vue
View File

@ -1,17 +1,33 @@
<template>
<div class="page-edit">
<div class="edit-link" v-if="editLink">
<a :href="editLink" target="_blank" rel="noopener noreferrer">{{ editLinkText }}</a>
<div
class="edit-link"
v-if="editLink"
>
<a
:href="editLink"
target="_blank"
rel="noopener noreferrer"
>{{ editLinkText }}</a>
<OutboundLink />
</div>
<div class="tags" v-if="$themeConfig.tag !== false && tags && tags[0]">
<router-link :to="`/tags/?tag=${encodeUrl(item)}`" v-for="(item, index) in tags" :key="index" title="标签">
#{{item}}
</router-link>
<div
class="tags"
v-if="$themeConfig.tag !== false && tags && tags[0]"
>
<router-link
:to="`/tags/?tag=${encodeURIComponent(item)}`"
v-for="(item, index) in tags"
:key="index"
title="标签"
>#{{item}}</router-link>
</div>
<div class="last-updated" v-if="lastUpdated">
<div
class="last-updated"
v-if="lastUpdated"
>
<span class="prefix">{{ lastUpdatedText }}:</span>
<span class="time">{{ lastUpdated }}</span>
</div>
@ -20,13 +36,11 @@
<script>
import isNil from 'lodash/isNil'
import { endingSlashRE, outboundRE } from '../util'
import encodeMixin from '../mixins/encodeUrl'
export default {
mixins: [encodeMixin],
name: 'PageEdit',
computed: {
tags() {
tags () {
return this.$frontmatter.tags
},
@ -114,43 +128,39 @@ export default {
padding-top 1rem
padding-bottom 1rem
overflow auto
.edit-link
display inline-block
float left
margin 0 2rem .5rem 0
margin 0 2rem 0.5rem 0
a
margin-right 0.25rem
.tags
float left
a
margin 0 .8rem .5rem 0
margin 0 0.8rem 0.5rem 0
display inline-block
color var(--textLightenColor)
padding 0.2rem 0.7rem
font-size 0.9em
background-color rgba(128,128,128,0.08)
background-color rgba(128, 128, 128, 0.08)
border-radius 3px
opacity .8
opacity 0.8
.last-updated
float right
font-size 0.9em
.prefix
font-weight 500
color var(--textColor)
opacity .8
opacity 0.8
.time
font-weight 400
color #aaa
@media (max-width: $MQMobile)
@media (max-width $MQMobile)
.page-edit
.edit-link,.tags
margin-bottom .5rem
.edit-link, .tags
margin-bottom 0.5rem
.last-updated
width 100%
font-size 0.8em
text-align left
</style>

66
theme-vdoing/components/PageNav.vue
View File

@ -1,7 +1,10 @@
<template>
<div class="page-nav-wapper">
<!-- 页面中间左右翻页 -->
<div class="page-nav-centre-wrap" v-if="$themeConfig.pageButton !== false && (prev || next)">
<div
class="page-nav-centre-wrap"
v-if="$themeConfig.pageButton !== false && (prev || next)"
>
<router-link
class="page-nav-centre page-nav-centre-prev"
v-if="prev"
@ -9,12 +12,9 @@
@mouseenter.native="showTooltip($event)"
@mousemove.native="showTooltip($event)"
>
<div class="tooltip">
{{ prev.title || prev.path }}
</div>
<div class="tooltip">{{ prev.title || prev.path }}</div>
</router-link>
<router-link
class="page-nav-centre page-nav-centre-next"
v-if="next"
@ -22,23 +22,36 @@
@mouseenter.native="showTooltip($event)"
@mousemove.native="showTooltip($event)"
>
<div class="tooltip">
{{ next.title || next.path }}
</div>
<div class="tooltip">{{ next.title || next.path }}</div>
</router-link>
</div>
<!-- 底部翻页按钮 -->
<div class="page-nav" v-if="prev || next">
<div
class="page-nav"
v-if="prev || next"
>
<p class="inner">
<span v-if="prev" class="prev">
<span
v-if="prev"
class="prev"
>
←
<router-link v-if="prev" class="prev" :to="prev.path">{{ prev.title || prev.path }}</router-link>
<router-link
v-if="prev"
class="prev"
:to="prev.path"
>{{ prev.title || prev.path }}</router-link>
</span>
<span v-if="next" class="next">
<router-link v-if="next" :to="next.path">{{ next.title || next.path }}</router-link>
→
<span
v-if="next"
class="next"
>
<router-link
v-if="next"
:to="next.path"
>{{ next.title || next.path }}</router-link>→
</span>
</p>
</div>
@ -62,7 +75,7 @@ export default {
}
},
methods: {
showTooltip(e) {
showTooltip (e) {
const clientW = document.body.clientWidth
const X = e.clientX
@ -72,7 +85,7 @@ export default {
}
const tooltipEleStyle = tooltipEle.style
if (X < clientW/2) {
if (X < clientW / 2) {
tooltipEleStyle.right = null
tooltipEleStyle.left = X + 10 + 'px'
} else {
@ -165,8 +178,6 @@ function flatten (items, res) {
overflow auto // clear float
.next
float right
.page-nav-centre-wrap
.page-nav-centre
position fixed
@ -175,21 +186,21 @@ function flatten (items, res) {
height 70px
margin-top -35px
outline 0
transition all .2s
transition all 0.2s
border-radius 3px
opacity .55
opacity 0.55
z-index 99
@media (max-width: 1340px)
@media (max-width 1340px)
width 50px
@media (max-width: 960px)
@media (max-width 960px)
display none
&:hover
background rgba(153, 153, 153, .15)
background rgba(153, 153, 153, 0.15)
opacity 1
.tooltip
display block
&:before
content: ""
content ''
display block
width 10px
height 10px
@ -203,7 +214,7 @@ function flatten (items, res) {
margin auto
.tooltip
display none
background rgba(0, 0, 0, .5)
background rgba(0, 0, 0, 0.5)
color #fff
padding 4px 8px
font-size 13px
@ -211,19 +222,16 @@ function flatten (items, res) {
position fixed
max-width 200px
z-index 99
.page-nav-centre-prev
left 0
&:before
transform rotate(-135deg)
.page-nav-centre-next
right: 0
right 0
&:before
transform rotate(45deg)
.sidebar-open .page-nav-centre-wrap .page-nav-centre-prev
left $sidebarWidth
.no-sidebar .page-nav-centre-wrap .page-nav-centre-prev
left 0
</style>

160
theme-vdoing/components/Pagination.vue
View File

@ -1,80 +1,86 @@
<template>
<div class="pagination">
<span class="card-box prev iconfont icon-jiantou-zuo"
:class="{disabled: currentPage === 1}"
@click="goPrex()"
<span
class="card-box prev iconfont icon-jiantou-zuo"
:class="{disabled: currentPage === 1}"
@click="goPrex()"
>
<p>上一页</p>
</span>
<!-- 分页在5页及以下时 -->
<div class="pagination-list" v-if="pages <= 5">
<span class="card-box"
v-for="item in pages"
:key="item"
:class="{active: currentPage === item}"
@click="goIndex(item)"
>
{{item}}
</span>
<div
class="pagination-list"
v-if="pages <= 5"
>
<span
class="card-box"
v-for="item in pages"
:key="item"
:class="{active: currentPage === item}"
@click="goIndex(item)"
>{{item}}</span>
</div>
<!-- 分页在5页以上 -->
<div class="pagination-list" v-else>
<div
class="pagination-list"
v-else
>
<!-- 一号位 -->
<span class="card-box"
:class="{active: currentPage === 1}"
@click="goIndex(1)"
>
1
</span>
<span
class="card-box"
:class="{active: currentPage === 1}"
@click="goIndex(1)"
>1</span>
<!-- 二号位 -->
<span class="ellipsis ell-two"
v-show="currentPage > 3"
@click="goIndex(currentPage - 2)"
title="上两页"
<span
class="ellipsis ell-two"
v-show="currentPage > 3"
@click="goIndex(currentPage - 2)"
title="上两页"
/>
<!--这里没有使用v-if的原因是因为部署版本在当前页大于3时刷新页面出现了一些bug-->
<span class="card-box"
v-show="currentPage <= 3"
:class="{active: currentPage === 2}"
@click="goIndex(2)"
<!--这里没有使用v-if的原因是因为部署版本在当前页大于3时刷新页面出现了一些bug-->
<span
class="card-box"
v-show="currentPage <= 3"
:class="{active: currentPage === 2}"
@click="goIndex(2)"
>2</span>
<!-- 三号位 -->
<span class="card-box"
:class="{active: currentPage >= 3 && currentPage <= (pages - 2)}"
@click="goIndex(threeNum())"
>
{{ threeNum() }}
</span>
<span
class="card-box"
:class="{active: currentPage >= 3 && currentPage <= (pages - 2)}"
@click="goIndex(threeNum())"
>{{ threeNum() }}</span>
<!-- 四号位 -->
<span class="ellipsis ell-four"
v-show="currentPage < (pages - 2)"
@click="goIndex(currentPage + 2)"
title="下两页"
<span
class="ellipsis ell-four"
v-show="currentPage < (pages - 2)"
@click="goIndex(currentPage + 2)"
title="下两页"
/>
<span class="card-box"
v-show="currentPage >= (pages - 2)"
:class="{active: currentPage === pages-1}"
@click="goIndex(pages-1)"
>
{{ pages-1 }}
</span>
<span
class="card-box"
v-show="currentPage >= (pages - 2)"
:class="{active: currentPage === pages-1}"
@click="goIndex(pages-1)"
>{{ pages-1 }}</span>
<!-- 五号位 -->
<span class="card-box"
:class="{active: currentPage === pages}"
@click="goIndex(pages)"
>
{{pages}}
</span>
<span
class="card-box"
:class="{active: currentPage === pages}"
@click="goIndex(pages)"
>{{pages}}</span>
</div>
<span class="card-box next iconfont icon-jiantou-you"
:class="{disabled: currentPage === pages}"
@click="goNext()"
<span
class="card-box next iconfont icon-jiantou-you"
:class="{disabled: currentPage === pages}"
@click="goNext()"
>
<p>下一页</p>
</span>
@ -98,12 +104,12 @@ export default {
}
},
computed: {
pages() { // 总页数
pages () { // 总页数
return Math.ceil(this.total / this.perPage)
}
},
methods: {
threeNum() { // 三号位页码计算
threeNum () { // 三号位页码计算
let num = 3
const currentPage = this.currentPage
const pages = this.pages
@ -116,19 +122,19 @@ export default {
}
return num
},
goPrex() {
goPrex () {
let currentPage = this.currentPage
if (currentPage > 1) {
this.handleEmit(--currentPage)
}
},
goNext() {
goNext () {
let currentPage = this.currentPage
if (currentPage < this.pages) {
this.handleEmit(++currentPage)
}
},
goIndex(i) {
goIndex (i) {
if (i !== this.currentPage) {
this.handleEmit(i)
}
@ -147,16 +153,16 @@ export default {
text-align center
span
line-height 1rem
opacity .9
opacity 0.9
cursor pointer
&:hover
color $accentColor
&.ellipsis
opacity .5
opacity 0.5
&::before
content '...'
font-size 1.2rem
@media (any-hover: hover)
@media (any-hover hover)
&.ell-two
&:hover
&::before
@ -165,14 +171,13 @@ export default {
&:hover
&::before
content '»'
> span
position absolute
top 0
padding 1rem 1.2rem
font-size .95rem
font-size 0.95rem
&.disabled
color rgba(125,125,125,.5)
color rgba(125, 125, 125, 0.5)
&.prev
left 0
border-top-right-radius 32px
@ -183,49 +188,46 @@ export default {
border-bottom-left-radius 32px
&::before
float right
margin-left .3rem
margin-left 0.3rem
p
display inline
line-height .95rem
line-height 0.95rem
.pagination-list
span
display inline-block
width 2.5rem
height 2.5rem
line-height 2.5rem
margin .3rem
margin 0.3rem
&.active
background $accentColor
color var(--mainBg)
@media (max-width: 800px)
@media (max-width 800px)
.pagination
> span
padding 1rem 1.5rem
p
display none
// 719px
@media (max-width: $MQMobile)
@media (max-width $MQMobile)
.pagination
> span // 左右按钮
padding .9rem 1.5rem
padding 0.9rem 1.5rem
.pagination-list
span
width 2.3rem
height 2.3rem
line-height 2.3rem
margin .25rem
@media (max-width: 390px)
margin 0.25rem
@media (max-width 390px)
.pagination
> span // 左右按钮
padding .8rem 1.3rem
padding 0.8rem 1.3rem
.pagination-list
span
width 2rem
height 2rem
line-height 2rem
margin .1rem
margin-top .3rem
margin 0.1rem
margin-top 0.3rem
</style>

147
theme-vdoing/components/PostList.vue
View File

@ -1,46 +1,77 @@
<template>
<div class="post-list" ref="postList">
<transition-group tag="div" name="post">
<div class="post card-box" :class="item.frontmatter.sticky && 'iconfont icon-zhiding'" v-for="item in sortPosts" :key="item.key">
<div
class="post-list"
ref="postList"
>
<transition-group
tag="div"
name="post"
>
<div
class="post card-box"
:class="item.frontmatter.sticky && 'iconfont icon-zhiding'"
v-for="item in sortPosts"
:key="item.key"
>
<div class="title-wrapper">
<h2>
<router-link :to="item.path">{{item.title}}</router-link>
</h2>
<div class="article-info">
<a title="作者" class="iconfont icon-touxiang" target="_blank"
v-if="item.author && item.author.href"
:href="item.author.href"
>
{{ item.author.name ? item.author.name : item.author }}
</a>
<span title="作者" class="iconfont icon-touxiang"
<a
title="作者"
class="iconfont icon-touxiang"
target="_blank"
v-if="item.author && item.author.href"
:href="item.author.href"
>{{ item.author.name ? item.author.name : item.author }}</a>
<span
title="作者"
class="iconfont icon-touxiang"
v-else-if="item.author"
>
{{ item.author.name ? item.author.name : item.author }}
</span>
>{{ item.author.name ? item.author.name : item.author }}</span>
<span title="创建时间" class="iconfont icon-riqi" v-if="item.frontmatter.date">
{{ item.frontmatter.date.split(' ')[0]}}
<span
title="创建时间"
class="iconfont icon-riqi"
v-if="item.frontmatter.date"
>{{ item.frontmatter.date.split(' ')[0]}}</span>
<span
title="分类"
class="iconfont icon-wenjian"
v-if="$themeConfig.category !== false && item.frontmatter.categories"
>
<router-link
:to="`/categories/?category=${encodeURIComponent(c)}`"
v-for="(c, index) in item.frontmatter.categories"
:key="index"
>{{c}}</router-link>
</span>
<span title="分类" class="iconfont icon-wenjian" v-if="$themeConfig.category !== false && item.frontmatter.categories">
<router-link :to="`/categories/?category=${encodeUrl(c)}`" v-for="(c, index) in item.frontmatter.categories" :key="index">
{{c}}
</router-link>
</span>
<span title="标签" class="iconfont icon-biaoqian tags" v-if="$themeConfig.tag !== false && item.frontmatter.tags && item.frontmatter.tags[0]">
<router-link :to="`/tags/?tag=${encodeUrl(t)}`" v-for="(t, index) in item.frontmatter.tags" :key="index">
{{t}}
</router-link>
<span
title="标签"
class="iconfont icon-biaoqian tags"
v-if="$themeConfig.tag !== false && item.frontmatter.tags && item.frontmatter.tags[0]"
>
<router-link
:to="`/tags/?tag=${encodeURIComponent(t)}`"
v-for="(t, index) in item.frontmatter.tags"
:key="index"
>{{t}}</router-link>
</span>
</div>
</div>
<div class="excerpt-wrapper" v-if="item.excerpt">
<div class="excerpt" v-html="item.excerpt">
</div>
<router-link :to="item.path" class="readmore iconfont icon-jiantou-you">
阅读全文
</router-link>
<div
class="excerpt-wrapper"
v-if="item.excerpt"
>
<div
class="excerpt"
v-html="item.excerpt"
></div>
<router-link
:to="item.path"
class="readmore iconfont icon-jiantou-you"
>阅读全文</router-link>
</div>
</div>
</transition-group>
@ -48,10 +79,7 @@
</template>
<script>
import encodeMixin from '../mixins/encodeUrl'
export default {
mixins: [encodeMixin],
props: {
category: {
type: String,
@ -70,20 +98,20 @@ export default {
default: 10
}
},
data() {
data () {
return {
sortPosts: [],
postListOffsetTop: 0
}
},
created() {
created () {
this.setPosts()
},
mounted() {
mounted () {
// this.postListOffsetTop = this.getElementToPageTop(this.$refs.postList) - 240
},
watch: {
currentPage() {
currentPage () {
if (this.$route.query.p != this.currentPage) { // 此判断防止添加相同的路由信息（如浏览器回退时触发的）
this.$router.push({
query: {
@ -97,28 +125,28 @@ export default {
// },0)
this.setPosts()
},
category() {
category () {
this.setPosts()
},
tag() {
tag () {
this.setPosts()
}
},
methods: {
setPosts() {
setPosts () {
const currentPage = this.currentPage
const perPage = this.perPage
let posts = []
if (this.category) {
posts = this.$groupPosts.categories[this.category]
} else if(this.tag){
} else if (this.tag) {
posts = this.$groupPosts.tags[this.tag]
}else {
} else {
posts = this.$sortPosts
}
this.sortPosts = posts.slice((currentPage-1)*perPage, currentPage*perPage)
this.sortPosts = posts.slice((currentPage - 1) * perPage, currentPage * perPage)
},
// getElementToPageTop(el) {
// if(el && el.parentElement) {
@ -137,39 +165,39 @@ export default {
position relative
padding 1rem 1.5rem
margin-bottom 0.9rem
transition: all 0.3s
transition all 0.3s
&.post-leave-active
display none
&.post-enter
opacity: 0
transform: translateX(-20px)
opacity 0
transform translateX(-20px)
&::before
position absolute
top -1px
right 0
font-size 2.5rem
color $accentColor
opacity .85
opacity 0.85
.title-wrapper
a
color var(--textColor)
&:hover
color $accentColor
h2
margin .5rem 0
margin 0.5rem 0
font-size 1.4rem
border none
a
@media (max-width: $MQMobile)
@media (max-width $MQMobile)
font-weight 400
.article-info
> a, > span
opacity .7
font-size .8rem
opacity 0.7
font-size 0.8rem
margin-right 1rem
cursor pointer
&::before
margin-right .3rem
margin-right 0.3rem
a
margin 0
&:not(:first-child)
@ -177,19 +205,18 @@ export default {
content '/'
.tags a:not(:first-child)::before
content '、'
.excerpt-wrapper
border-top 1px solid var(--borderColor)
margin .5rem 0
margin 0.5rem 0
overflow hidden
.excerpt
margin-bottom .3rem
margin-bottom 0.3rem
font-size 0.92rem
h1,h2,h3
h1, h2, h3
display none
img
max-height 280px
max-width 100%!important
max-width 100% !important
margin 0 auto
.readmore
float right
@ -197,6 +224,6 @@ export default {
line-height 1rem
&::before
float right
font-size .8rem
margin .1rem 0 0 .2rem
font-size 0.8rem
margin 0.1rem 0 0 0.2rem
</style>

36
theme-vdoing/components/RightMenu.vue
View File

@ -3,12 +3,12 @@
<div class="right-menu-margin">
<div class="right-menu-content">
<div
:class="['right-menu-item', 'level'+item.level, { active: item.slug === hashText }]"
v-for="(item, i) in headers"
:key="i"
>
<a :href="'#'+item.slug">{{item.title}}</a>
</div>
:class="['right-menu-item', 'level'+item.level, { active: item.slug === hashText }]"
v-for="(item, i) in headers"
:key="i"
>
<a :href="'#'+item.slug">{{item.title}}</a>
</div>
</div>
</div>
</div>
@ -16,27 +16,27 @@
<script>
export default {
data() {
data () {
return {
headers: [],
hashText: ''
}
},
mounted() {
mounted () {
this.getHeadersData()
this.getHashText()
},
watch: {
$route() {
$route () {
this.headers = this.$page.headers
this.getHashText()
}
},
methods: {
getHeadersData() {
getHeadersData () {
this.headers = this.$page.headers
},
getHashText() {
getHashText () {
this.hashText = decodeURIComponent(window.location.hash.slice(1))
}
}
@ -44,14 +44,13 @@ export default {
</script>
<style lang='stylus'>
.right-menu-wrapper
width $rightMenuWidth
float right
margin-right -($rightMenuWidth + 60px)
position sticky
top 0
font-size .9rem
font-size 0.9rem
.right-menu-margin
margin-top ($navbarHeight + 1rem)
.right-menu-content
@ -61,12 +60,12 @@ export default {
&::-webkit-scrollbar-track-piece
background none
&::-webkit-scrollbar-thumb:vertical
background-color hsla(0,0%,49%,.3)
background-color hsla(0, 0%, 49%, 0.3)
&:hover
overflow-y auto
.right-menu-item
padding 4px 15px
border-left .15rem solid var(--borderColor)
border-left 0.15rem solid var(--borderColor)
&.level3
padding-left 28px
&.active
@ -81,17 +80,16 @@ export default {
width ($rightMenuWidth - 30px)
&:hover
color $accentColor
.have-body-img
.right-menu-wrapper
.right-menu-margin
padding .3rem 0
padding 0.3rem 0
background var(--sidebarBg)
border-radius 5px
.right-menu-item
border-color transparent
&.active
border-left .2rem solid $accentColor
border-left 0.2rem solid $accentColor
&:hover
border-left .2rem solid $accentColor
border-left 0.2rem solid $accentColor
</style>

42
theme-vdoing/components/Sidebar.vue
View File

@ -1,11 +1,17 @@
<template>
<aside class="sidebar">
<div class="blogger" v-if="blogger">
<img :src="blogger.avatar">
<div
class="blogger"
v-if="blogger"
>
<img :src="blogger.avatar" />
<div class="blogger-info">
<h3>{{blogger.name}}</h3>
<div class="icons" v-if="blogger.social">
<div
class="icons"
v-if="blogger.social"
>
<a
:href="item.link"
:title="item.title"
@ -13,18 +19,18 @@
v-for="(item, index) in blogger.social.icons"
:key="index"
target="_blank"
>
</a>
></a>
</div>
<span v-else>
{{blogger.slogan}}
</span>
<span v-else>{{blogger.slogan}}</span>
</div>
</div>
<NavLinks/>
<slot name="top"/>
<SidebarLinks :depth="0" :items="items"/>
<slot name="bottom"/>
<NavLinks />
<slot name="top" />
<SidebarLinks
:depth="0"
:items="items"
/>
<slot name="bottom" />
</aside>
</template>
@ -40,7 +46,7 @@ export default {
props: ['items'],
computed: {
blogger() {
blogger () {
return this.$themeConfig.blogger
}
}
@ -73,7 +79,7 @@ export default {
line-height 1.7
font-weight bold
& > li:not(:first-child)
margin-top .75rem
margin-top 0.75rem
.blogger
display none
border-bottom 1px solid var(--borderColor)
@ -81,17 +87,17 @@ export default {
width 60px
height 60px
border-radius 5px
margin .75rem 1rem
margin 0.75rem 1rem
.blogger-info
flex 1
h3
margin .95rem 0 .7rem
margin 0.95rem 0 0.7rem
font-size 1.1rem
.icons .iconfont
font-size 1.2rem
padding-right .6rem
padding-right 0.6rem
color #777
@media (max-width: $MQMobile)
@media (max-width $MQMobile)
.sidebar
.blogger
display flex

27
theme-vdoing/components/SidebarButton.vue
View File

@ -1,7 +1,21 @@
<template>
<div class="sidebar-button" @click="$emit('toggle-sidebar')" title="目录">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512">
<path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path>
<div
class="sidebar-button"
@click="$emit('toggle-sidebar')"
title="目录"
>
<svg
class="icon"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
role="img"
viewBox="0 0 448 512"
>
<path
fill="currentColor"
d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
class
/>
</svg>
</div>
</template>
@ -16,14 +30,13 @@
padding 0.6rem
top 0.6rem
left 1rem
@media (max-width: $MQMobile)
@media (max-width $MQMobile)
display block
.icon
display block
width 1.25rem
height 1.25rem
@media (min-width: ($MQMobile + 1px))
@media (min-width ($MQMobile + 1px))
$mobileSidebarWidth = $sidebarWidth * 0.82
.sidebar-button
width 40px
@ -38,7 +51,7 @@
color #888
border-radius 50%
padding 0
transition left .2s ease
transition left 0.2s ease
&:hover
background $accentColor
color #fff

16
theme-vdoing/components/SidebarGroup.vue
View File

@ -23,8 +23,8 @@
<span
class="arrow"
v-if="collapsable"
:class="open ? 'down' : 'right'">
</span>
:class="open ? 'down' : 'right'"
></span>
</router-link>
<p
@ -37,8 +37,8 @@
<span
class="arrow"
v-if="collapsable"
:class="open ? 'down' : 'right'">
</span>
:class="open ? 'down' : 'right'"
></span>
</p>
<DropdownTransition>
@ -90,15 +90,14 @@ export default {
& > .sidebar-group-items
padding-left 1rem
& > li > .sidebar-link
font-size: 0.95em;
font-size 0.95em
border-left none
&.depth-2
& > .sidebar-heading
border-left none
.sidebar-heading
color var(--textColor)
transition color .15s ease
transition color 0.15s ease
cursor pointer
font-size 1.1em
font-weight bold
@ -121,9 +120,8 @@ export default {
border-left-color $accentColor
&:hover
color $accentColor
.sidebar-group-items
transition height .1s ease-out
transition height 0.1s ease-out
font-size 0.95em
overflow hidden
</style>

5
theme-vdoing/components/SidebarLink.vue
View File

@ -97,7 +97,6 @@ function renderExternal (h, to, text) {
.sidebar .sidebar-sub-headers
padding-left 1rem
font-size 0.95em
a.sidebar-link
font-size 1em
font-weight 400
@ -106,8 +105,8 @@ a.sidebar-link
border-left 0.25rem solid transparent
padding 0.35rem 1rem 0.35rem 1.25rem
line-height 1.4
width: 100%
box-sizing: border-box
width 100%
box-sizing border-box
&:hover
color $accentColor
&.active

5
theme-vdoing/components/SidebarLinks.vue
View File

@ -3,7 +3,10 @@
class="sidebar-links"
v-if="items.length"
>
<li v-for="(item, i) in items" :key="i">
<li
v-for="(item, i) in items"
:key="i"
>
<SidebarGroup
v-if="item.type === 'group'"
:item="item"

49
theme-vdoing/components/TagsBar.vue
View File

@ -1,23 +1,24 @@
<template>
<div class="tags-wrapper card-box">
<router-link to="/tags/" class="title iconfont icon-biaoqian1" title="全部标签">
{{ length === 'all' ? '全部标签' : '热门标签' }}
</router-link>
<router-link
to="/tags/"
class="title iconfont icon-biaoqian1"
title="全部标签"
>{{ length === 'all' ? '全部标签' : '热门标签' }}</router-link>
<div class="tags">
<template v-for="(item, index) in tags" >
<template v-for="(item, index) in tags">
<router-link
:to="`/tags/?tag=${item.key}`"
:to="`/tags/?tag=${encodeURIComponent(item.key)}`"
:key="index"
:style="tagStyleList[index]"
:class="{active: item.key === tag}"
>
{{item.key}}
</router-link>
<span :key="index+tags.length"/>
>{{item.key}}</router-link>
<span :key="index+tags.length" />
</template>
<router-link to="/tags/" v-if="length !== 'all' && tagsData.length > length">
更多...
</router-link>
<router-link
to="/tags/"
v-if="length !== 'all' && tagsData.length > length"
>更多...</router-link>
</div>
</div>
</template>
@ -38,19 +39,19 @@ export default {
default: 'all'
}
},
data() {
data () {
return {
tagBgColor: ['#11a8cd', '#F8B26A', '#67CC86', '#E15B64', '#F47E60', '#849B87'],
tagStyleList: []
}
},
created() {
created () {
for (let i = 0, tagH = this.tags.length; i < tagH; i++) {
this.tagStyleList.push(this.getTagStyle())
}
},
computed: {
tags() {
tags () {
if (this.length === 'all') {
return this.tagsData
} else {
@ -59,7 +60,7 @@ export default {
}
},
methods: {
getTagStyle() {
getTagStyle () {
const tagBgColor = this.tagBgColor
const randomColor = tagBgColor[Math.floor(Math.random() * tagBgColor.length)]
return `background: ${randomColor};--randomColor:${randomColor};`
@ -76,29 +77,29 @@ export default {
font-size 1.2rem
.tags
text-align justify
padding .8rem .5rem .5rem .5rem
padding 0.8rem 0.5rem 0.5rem 0.5rem
margin 0 -0.5rem -0.5rem -0.5rem
a
opacity .8
opacity 0.8
display inline-block
padding .2rem .4rem
transition all .4s
padding 0.2rem 0.4rem
transition all 0.4s
background-color var(--textColor)
color var(--mainBg)
border-radius 3px
margin 0 .3rem .5rem 0
margin 0 0.3rem 0.5rem 0
min-width 2rem
height 1rem
line-height 1rem
font-size .8rem
font-size 0.8rem
text-align center
@media (max-width: $MQMobile)
@media (max-width $MQMobile)
font-weight 400
&:hover
opacity 1
transform scale(1.1)
&.active
box-shadow: 0 5px 10px -5px var(--randomColor, rgba(0,0,0,0.15));
box-shadow 0 5px 10px -5px var(--randomColor, rgba(0, 0, 0, 0.15))
transform scale(1.22)
opacity 1
&:hover

32
theme-vdoing/components/TagsPage.vue
View File

@ -38,7 +38,7 @@ import Pagination from '@theme/components/Pagination'
import TagsBar from '@theme/components/TagsBar'
export default {
data(){
data () {
return {
tag: '',
total: 0, // 总长
@ -47,7 +47,7 @@ export default {
}
},
components: { MainLayout, PostList, Pagination, TagsBar },
mounted() {
mounted () {
const queryTag = this.$route.query.tag
if (queryTag) {
@ -61,13 +61,13 @@ export default {
}
},
methods: {
handlePagination(i) { // 分页
handlePagination (i) { // 分页
this.currentPage = i
}
},
watch: {
'$route.query.tag'() {
this.tag = this.$route.query.tag
'$route.query.tag' () {
this.tag = decodeURIComponent(this.$route.query.tag)
if (this.tag) {
this.total = this.$groupPosts.tags[this.tag].length
} else {
@ -84,40 +84,38 @@ export default {
.tags-page
.tags-wrapper
position sticky
top ($navbarHeight + .9rem)
top ($navbarHeight + 0.9rem)
max-height calc(100vh - 10rem)
min-height 4.2rem
@media (max-width: $MQMobile)
@media (max-width $MQMobile)
display none
.tags
max-height calc(100vh - 14rem)
min-height 2.2rem
overflow-x hidden
overflow-y auto
transition all .2s
transition all 0.2s
&::-webkit-scrollbar-track-piece
background-color:rgba(0,0,0,.05)
background-color rgba(0, 0, 0, 0.05)
&::-webkit-scrollbar-thumb:vertical
background-color:rgba(0,0,0,.15)
background-color rgba(0, 0, 0, 0.15)
&:hover
&::-webkit-scrollbar-track-piece
background-color:rgba(0,0,0,.1)
background-color rgba(0, 0, 0, 0.1)
&::-webkit-scrollbar-thumb:vertical
background-color:rgba(0,0,0,.25)
background-color rgba(0, 0, 0, 0.25)
.tags-page
.main-left
.tags-wrapper
position relative
top 0
padding .9rem 1.5rem
margin-bottom .9rem
padding 0.9rem 1.5rem
margin-bottom 0.9rem
max-height 15rem
border-radius 0
display none
@media (max-width: $MQMobile)
@media (max-width $MQMobile)
display block
.tags
max-height 11.5rem
</style>

226
theme-vdoing/components/Timeline(弃用).vue
View File

@ -1,226 +0,0 @@
<template>
<div class="timeline-wrapper theme-vdoing-content">
<div class="tags">
<a href="#全部" :class="{active: currentTag === '全部'}" :style="randomBgcolor()" @click="toggleTag('全部')">全部</a>
<a
:class="{active: currentTag === key}"
v-for="(item, key) of getPages.tagGroup"
:style="randomBgcolor()"
@click="toggleTag(key)"
:key="key"
:href="'#'+key"
>
{{key}}
</a>
</div>
<div class="timeline">
<transition-group tag="ul">
<li class="desc" key="0">{{pageData.slogan}}</li>
<template v-for="yearItem in tagPages()">
<li :key="yearItem.year">
<h3 class="year">{{yearItem.year}}</h3>
<div class="year-wrapper">
<transition-group tag="span">
<router-link :to="item.path" v-for="item in yearItem.pageList" :key="item.path.slice(-6)">
<span class="date">{{item.formatDay}}</span>
<span class="title">{{item.title}}</span>
</router-link>
</transition-group>
</div>
</li>
</template>
</transition-group>
</div>
</div>
</template>
<script>
import { getPagesList } from '../util/getArticleDate'
export default {
data() {
return {
pageData: {
tagBgColor: ['#11a8cd', '#F8B26A', '#67CC86', '#E15B64', '#F47E60', '#849B87'],
slogan: '只争朝夕，不负韶华！( •̀ ω •́ )✧'
},
currentTag: "",
posts: [],
}
},
created() {
},
mounted() {
const fmData = this.$frontmatter.pageComponent.data
if(fmData && fmData.slogan) {
this.pageData.slogan = fmData.slogan
}
this.posts = this.$site.pages
document.body.style="overflow-y: scroll;" // 解决切换tag页面高度不满屏出现跳动的问题
this.handleHashTag()
window.onhashchange = () => {
this.handleHashTag()
}
},
computed: {
getPages() {
return getPagesList(this.posts)
}
},
watch: {
currentTag(tag) {
document.body.setAttribute('id', tag); // 用于解决vue-router在处理描点元素定位时的报错
}
},
methods: {
handleHashTag() {
const hashTag = decodeURIComponent(window.location.hash.slice(1))
this.currentTag = hashTag ? hashTag : '全部'
},
// 根据标签获取数据
tagPages() {
if (this.currentTag === "全部") {
return this.getPages.allPage
} else {
return this.getPages.tagGroup[this.currentTag]
}
},
// 切换标签
toggleTag(tag) {
this.currentTag = tag
},
// 随机背景色
randomBgcolor() {
const tagBgColor = this.pageData.tagBgColor
return { background: `${tagBgColor[Math.floor(Math.random() * tagBgColor.length)]}`}
},
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
.timeline-wrapper
padding-top 1rem
.tags
margin-bottom 30px
a
vertical-align: middle;
margin: 4px 4px 10px;
padding: 5px 8px;
display: inline-block;
cursor: pointer;
border-radius: .25rem;
background: #E15B64;
color: #fff;
line-height: 13px;
font-size: 13px;
transition: all .5s;
opacity: 0.9;
box-shadow: 0px 0px 8px rgba(80,80,80,.3);
&.active
transform: scale(1.2);
opacity: 1;
&:hover
text-decoration: none!important;
&:not(.active):hover
transform: scale(1.05);
.v-enter{
opacity: 0;
transform: translateY(-30px);
}
.v-leave-active{
display:none;
}
.v-leave{
opacity: 0;
}
ul
list-style: none;
.timeline ul
box-sizing: border-box;
margin: 4rem auto;
position: relative;
&:after
content: " ";
position: absolute;
top: 14px;
left: 0;
// z-index: -1;
margin-left: -2px;
width: 4px;
height: 100%;
background: var(--borderColor);
>li
transition: all .25s ease-in-out;
margin-bottom: 55px;
.year
margin: 0;
font-weight: 700;
font-size: 26px;
.desc,.year
position: relative;
.desc:before,.year:before
content: " ";
position: absolute;
z-index: 2;
left: -20px;
top: 50%;
margin-left: -4px;
margin-top: -4px;
width: 8px;
height: 8px;
background: #fff;
border: 1px solid var(--borderColor);
border-radius: 50%;
.year-wrapper
padding-left: 0!important;
a
display: flex;
padding: 30px 0 10px;
list-style: none;
border-bottom: 1px dashed var(--borderColor);
position: relative;
color: var(--textColor)
transition: all 0.25s ease-in-out;
.title
opacity .9
.date
min-width: 40px;
line-height: 30px;
font-size: 13px;
margin-right: 5px;
color: #999;
&:before
content: " ";
position: absolute;
left: -19px;
top: 41px;
width: 6px;
height: 6px;
margin-left: -4px;
background: #fff;
border-radius: 50%;
border: 1px solid var(--borderColor);
z-index: 2;
&:hover
text-decoration:none
color: $accentColor
.date
color: $accentColor
.date:before
background: $accentColor
</style>

158
theme-vdoing/components/UpdateArticle.vue
View File

@ -1,13 +1,21 @@
<template>
<div :class="['article-list',{'no-article-list': isShowArticle}]">
<div class="article-title">
<router-link :to="moreArticle || '/archives/'" class="iconfont icon-bi">最近更新</router-link>
<router-link
:to="moreArticle || '/archives/'"
class="iconfont icon-bi"
>最近更新</router-link>
</div>
<div class="article-wrapper">
<dl v-for="(item, index) in topPublishPosts" :key="index">
<dl
v-for="(item, index) in topPublishPosts"
:key="index"
>
<dd>{{getNum(index)}}</dd>
<dt>
<router-link :to="item.path"><div>{{item.title}}</div></router-link>
<router-link :to="item.path">
<div>{{item.title}}</div>
</router-link>
<span>{{getDate(item)}}</span>
</dt>
</dl>
@ -15,11 +23,13 @@
<dl>
<dd></dd>
<dt>
<router-link :to="moreArticle || '/archives/'" class="more">更多文章></router-link>
<router-link
:to="moreArticle || '/archives/'"
class="more"
>更多文章></router-link>
</dt>
</dl>
</div>
</div>
</template>
@ -34,19 +44,19 @@ export default {
},
moreArticle: String
},
data() {
data () {
return {
posts: [],
currentPath: ''
}
},
created() {
created () {
this.posts = this.$site.pages
this.currentPath = this.$page.path
},
computed: {
topPublishPosts() {
return this.$sortPostsByDate ? this.$sortPostsByDate.filter( post => {
topPublishPosts () {
return this.$sortPostsByDate ? this.$sortPostsByDate.filter(post => {
const { path } = post
return path !== this.currentPath
}).slice(0, this.length) : []
@ -58,15 +68,15 @@ export default {
}
},
methods: {
getNum(index) {
getNum (index) {
return index < 9 ? '0' + (index + 1) : index + 1
},
getDate(item) {
return item.frontmatter.date ? item.frontmatter.date.split(" ")[0].slice(5,10) : ''
getDate (item) {
return item.frontmatter.date ? item.frontmatter.date.split(" ")[0].slice(5, 10) : ''
}
},
watch: {
$route() {
$route () {
this.currentPath = this.$page.path
}
}
@ -74,68 +84,68 @@ export default {
</script>
<style lang='stylus'>
// @require '../styles/wrapper.styl'
.article-list
// @extend $wrapper
padding 1rem 2rem
@media (max-width: $MQNarrow)
padding 1rem 1.5rem
&.no-article-list
display none
.article-title
border-bottom 1px solid var(--borderColor)
font-size 1.3rem
padding 1rem
a
font-size 1.2rem
color var(--textColor)
opacity 0.9
&:before
margin-right .4rem
font-size 1.1rem
.article-wrapper
overflow hidden
dl
border-bottom 1px dotted var(--borderColor)
float left
display flex
padding 8px 0
// @require '../styles/wrapper.styl'
.article-list
// @extend $wrapper
padding 1rem 2rem
@media (max-width $MQNarrow)
padding 1rem 1.5rem
&.no-article-list
display none
.article-title
border-bottom 1px solid var(--borderColor)
font-size 1.3rem
padding 1rem
a
font-size 1.2rem
color var(--textColor)
opacity 0.9
&:before
margin-right 0.4rem
font-size 1.1rem
.article-wrapper
overflow hidden
dl
border-bottom 1px dotted var(--borderColor)
float left
display flex
padding 8px 0
margin 0
height 50px
width 100%
dd
font-size 1.1rem
color #F17229
width 50px
text-align center
margin 0
height 50px
width 100%
dd
font-size 1.1rem
color #F17229
width 50px
text-align center
margin 0
line-height 50px
dt
line-height 50px
dt
flex 1
display flex
a
color var(--textColor)
flex 1
display flex
a
color var(--textColor)
flex 1
display flex
height 50px
align-items center
font-weight normal
div
overflow hidden
white-space normal
text-overflow ellipsis
display -webkit-box
-webkit-line-clamp 2
-webkit-box-orient vertical
&:hover
text-decoration underline
&.more
color $accentColor
span
width 50px
margin-right 15px
color #999
text-align right
font-size .9rem
line-height 50px
height 50px
align-items center
font-weight normal
div
overflow hidden
white-space normal
text-overflow ellipsis
display -webkit-box
-webkit-line-clamp 2
-webkit-box-orient vertical
&:hover
text-decoration underline
&.more
color $accentColor
span
width 50px
margin-right 15px
color #999
text-align right
font-size 0.9rem
line-height 50px
</style>

12
theme-vdoing/enhanceApp.js
View File

@ -9,7 +9,7 @@ export default ({
// 修复ISO8601时间格式为普通时间格式，以及添加作者信息
siteData.pages.map(item => {
const { frontmatter: { date, author } } = item
if (typeof date === 'string' && date.charAt(date.length-1) === 'Z') {
if (typeof date === 'string' && date.charAt(date.length - 1) === 'Z') {
item.frontmatter.date = repairUTCDate(date)
}
if (author) {
@ -26,14 +26,14 @@ export default ({
}
// 修复ISO8601时间格式为普通时间格式
function repairUTCDate(date) {
// 修复ISO8601时间格式为普通时间格式
function repairUTCDate (date) {
if (!(date instanceof Date)) {
date = new Date(date)
}
return `${date.getUTCFullYear()}-${zero(date.getUTCMonth()+1)}-${zero(date.getUTCDate())} ${zero(date.getUTCHours())}:${zero(date.getUTCMinutes())}:${zero(date.getUTCSeconds())}`;
return `${date.getUTCFullYear()}-${zero(date.getUTCMonth() + 1)}-${zero(date.getUTCDate())} ${zero(date.getUTCHours())}:${zero(date.getUTCMinutes())}:${zero(date.getUTCSeconds())}`;
}
// 小于10补0
function zero(d){
return d.toString().padStart(2,'0')
function zero (d) {
return d.toString().padStart(2, '0')
}

2
theme-vdoing/global-components/Badge.vue
View File

@ -36,7 +36,7 @@ export default {
&.tip, &.green
background-color #42b983
&.error
background-color #DA5961 //#f66
background-color #DA5961 // #f66
&.warning, &.warn, &.yellow
background-color darken(#ffe564, 35%)
& + &

84
theme-vdoing/index.js
View File

@ -1,7 +1,7 @@
const path = require('path')
const setFrontmatter = require('./node_utils/setFrontmatter')
const getSidebarData = require('./node_utils/getSidebarData')
const {createPage, deletePage} = require('./node_utils/handlePage')
const { createPage, deletePage } = require('./node_utils/handlePage')
const chalk = require('chalk') // 命令行打印美化
const yaml = require('js-yaml') // yaml转js
const log = console.log
@ -19,10 +19,10 @@ module.exports = (options, ctx) => {
// 自动生成结构化侧边栏
const sidebar = themeConfig.sidebar
if(sidebar === 'structuring' || sidebar && sidebar.mode === 'structuring') {
if (sidebar === 'structuring' || sidebar && sidebar.mode === 'structuring') {
const collapsable = themeConfig.sidebar.collapsable === false ? false : true
const sidebarData = getSidebarData(sourceDir, collapsable)
if(sidebarData) {
if (sidebarData) {
themeConfig.sidebar = sidebarData
log(chalk.blue('tip ') + chalk.green('add sidebar data. 侧边栏数据成功生成。'))
} else {
@ -56,8 +56,8 @@ module.exports = (options, ctx) => {
const isAlgoliaSearch = (
themeConfig.algolia
|| Object
.keys(siteConfig.locales && themeConfig.locales || {})
.some(base => themeConfig.locales[base].algolia)
.keys(siteConfig.locales && themeConfig.locales || {})
.some(base => themeConfig.locales[base].algolia)
)
const enableSmoothScroll = themeConfig.smoothScroll === true
@ -77,6 +77,13 @@ module.exports = (options, ctx) => {
'@vuepress/plugin-nprogress',
['smooth-scroll', enableSmoothScroll],
['container', {
type: 'note',
defaultTitle: {
'/': '笔记',
'/en/': 'NOTE'
}
}],
['container', {
type: 'tip',
defaultTitle: {
@ -129,7 +136,7 @@ module.exports = (options, ctx) => {
'container',
{
type: CARD_LIST,
render: (tokens, idx) => {
render: (tokens, idx) => {
// tokens 是整个md文件的虚拟dom结构数组
// idx 是tokens中':::' 所在的索引，而且是当前指定type的':::'，分别有开始和结束两次的idx
// if (tokens[idx].nesting === 1) { // 开头的 ':::' 标记
@ -146,7 +153,7 @@ module.exports = (options, ctx) => {
'container',
{
type: CARD_IMG_LIST,
render: (tokens, idx) => {
render: (tokens, idx) => {
return renderCardList(tokens, idx, CARD_IMG_LIST)
}
},
@ -159,20 +166,20 @@ module.exports = (options, ctx) => {
// 渲染md容器的卡片列表
function renderCardList(tokens, idx, type) {
function renderCardList (tokens, idx, type) {
const END_TYPE = `container_${type}_close`,
_tokens$idx = tokens[idx],
nesting = _tokens$idx.nesting,
info = _tokens$idx.info;
_tokens$idx = tokens[idx],
nesting = _tokens$idx.nesting,
info = _tokens$idx.info;
if (nesting === 1) { // 渲染开头的 ':::' 标记
let yamlStr = '';
for (let i = idx; i < tokens.length; i++) {
let _tokens$i = tokens[i],
type = _tokens$i.type,
content = _tokens$i.content,
_info = _tokens$i.info;
type = _tokens$i.type,
content = _tokens$i.content,
_info = _tokens$i.info;
if (type === END_TYPE) break; // 遇到结束的 ':::' 时
if (!content) continue;
if (type === 'fence' && _info === 'yaml') { // 是代码块类型，并且是yaml代码
@ -188,7 +195,7 @@ function renderCardList(tokens, idx, type) {
dataList = Array.isArray(dataObj) ? dataObj : dataObj.list
}
if (dataList && dataList.length) { // 有列表数据
if (dataList && dataList.length) { // 有列表数据
// 每行显示几个
let row = Number(info.split(' ').pop())
@ -203,7 +210,7 @@ function renderCardList(tokens, idx, type) {
listDOM = getCardImgListDOM(dataList, row)
}
return `<div class="${type}Container"><div class="card-list">${ listDOM }</div>`
return `<div class="${type}Container"><div class="card-list">${listDOM}</div>`
}
}
} else { // 渲染':::' 结尾
@ -213,14 +220,14 @@ function renderCardList(tokens, idx, type) {
// 将数据解析成DOM结构 - 普通卡片列表
function getCardListDOM(dataList, row) {
function getCardListDOM (dataList, row) {
let listDOM = ''
dataList.forEach(item => {
listDOM += `
<${item.link ? 'a href="' + item.link +'" target="_blank"' : 'span' } class="card-item ${ row ? 'row-' + row : '' }"
style="${ item.bgColor ? 'background-color:' + item.bgColor + ';--randomColor:'+ item.bgColor +';': '--randomColor: var(--bodyBg);' }${ item.textColor ? 'color:' + item.textColor + ';': '' }"
<${item.link ? 'a href="' + item.link + '" target="_blank"' : 'span'} class="card-item ${row ? 'row-' + row : ''}"
style="${item.bgColor ? 'background-color:' + item.bgColor + ';--randomColor:' + item.bgColor + ';' : '--randomColor: var(--bodyBg);'}${item.textColor ? 'color:' + item.textColor + ';' : ''}"
>
${ item.avatar ? '<img src="'+ item.avatar +'" class="no-zoom">' : '' }
${item.avatar ? '<img src="' + item.avatar + '" class="no-zoom">' : ''}
<div>
<p class="name">${item.name}</p>
<p class="desc">${item.desc}</p>
@ -233,32 +240,25 @@ function getCardListDOM(dataList, row) {
// 将数据解析成DOM结构 - 图文卡片列表
function getCardImgListDOM(dataList, row) {
function getCardImgListDOM (dataList, row) {
let listDOM = ''
dataList.forEach(item => {
listDOM += `
<div class="card-item ${ row ? 'row-' + row : '' }" >
<div class="box-img">
<a href="${item.link}" target="_blank">
<img src="${item.img}" class="no-zoom">
</a>
</div>
<div class="box-info">
<a href="${item.link}" target="_blank">
<p class="name">${item.name}</p>
${item.desc ? `<p class="desc">${item.desc}</p>` : ''}
</a>
</div>
<div class="card-item ${row ? 'row-' + row : ''}" >
<a href="${item.link}" target="_blank">
<div class="box-img">
<img src="${item.img}" class="no-zoom">
</div>
<div class="box-info">
<p class="name">${item.name}</p>
${item.desc ? `<p class="desc">${item.desc}</p>` : ''}
</div>
${item.avatar || item.author
? `<div class="box-footer">
<a href="${item.link}" target="_blank">
${item.avatar ? `<img src="${item.avatar}" class="no-zoom">` : ''}
${item.author ? `<span>${item.author}</span>` : ''}
</a>
</div>`
: ''
}
${item.avatar || item.author ? `<div class="box-footer">
${item.avatar ? `<img src="${item.avatar}" class="no-zoom">` : ''}
${item.author ? `<span>${item.author}</span>` : ''}
</div>`: ''}
</a>
</div>
`
})

40
theme-vdoing/layouts/Layout.vue
View File

@ -31,16 +31,16 @@
</Sidebar>
<!-- 首页 -->
<Home v-if="$page.frontmatter.home"/>
<Home v-if="$page.frontmatter.home" />
<!-- 分类页 -->
<CategoriesPage v-else-if="$page.frontmatter.categoriesPage"/>
<CategoriesPage v-else-if="$page.frontmatter.categoriesPage" />
<!-- 标签页 -->
<TagsPage v-else-if="$page.frontmatter.tagsPage"/>
<TagsPage v-else-if="$page.frontmatter.tagsPage" />
<!-- 归档页 -->
<ArchivesPage v-else-if="$page.frontmatter.archivesPage"/>
<ArchivesPage v-else-if="$page.frontmatter.archivesPage" />
<!-- 文章页或其他页 -->
<Page
@ -97,10 +97,10 @@ export default {
themeMode: 'light'
}
},
beforeMount(){
beforeMount () {
// 引入图标库
const social = this.$themeConfig.social
if(social && social.iconfontCssFile ) {
if (social && social.iconfontCssFile) {
let linkElm = document.createElement("link")
linkElm.setAttribute('rel', 'stylesheet');
linkElm.setAttribute("type", "text/css")
@ -109,7 +109,7 @@ export default {
}
},
computed: {
showRightMenu() {
showRightMenu () {
const { headers } = this.$page
return (
!this.$frontmatter.home
@ -169,16 +169,16 @@ export default {
]
}
},
created() {
created () {
const sidebarOpen = this.$themeConfig.sidebarOpen
if (sidebarOpen === false) {
this.isSidebarOpen = sidebarOpen
}
},
beforeMount() {
beforeMount () {
this.isSidebarOpenOfclientWidth()
const mode = storage.get('mode') // 不放在created是因为vuepress不能在created访问浏览器api，如window
if(!mode || mode === 'auto') { // 当未切换过模式，或模式处于'跟随系统'时
if (!mode || mode === 'auto') { // 当未切换过模式，或模式处于'跟随系统'时
this._autoMode()
} else {
this.themeMode = mode
@ -204,30 +204,30 @@ export default {
// 向下滚动收起导航栏
let p = 0, t = 0;
window.addEventListener('scroll', _.throttle(() => {
if(!this.isSidebarOpen) { // 侧边栏关闭时
if (!this.isSidebarOpen) { // 侧边栏关闭时
p = this.getScrollTop()
if(t < p && p > NAVBAR_HEIGHT) { // 向下滚动
if (t < p && p > NAVBAR_HEIGHT) { // 向下滚动
this.hideNavbar = true
} else { // 向上
this.hideNavbar = false
}
setTimeout(() => {t = p},0)
setTimeout(() => { t = p }, 0)
}
}, 300))
},
watch: {
isSidebarOpen() {
if(this.isSidebarOpen) { // 侧边栏打开时，恢复导航栏显示
isSidebarOpen () {
if (this.isSidebarOpen) { // 侧边栏打开时，恢复导航栏显示
this.hideNavbar = false
}
},
themeMode() {
themeMode () {
this.setBodyClass()
}
},
methods: {
setBodyClass() {
setBodyClass () {
document.body.className = 'theme-mode-' + this.themeMode
},
getScrollTop () {
@ -235,7 +235,7 @@ export default {
|| document.documentElement.scrollTop
|| document.body.scrollTop || 0
},
isSidebarOpenOfclientWidth() {
isSidebarOpenOfclientWidth () {
if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
this.isSidebarOpen = false
}
@ -245,14 +245,14 @@ export default {
this.$emit('toggle-sidebar', this.isSidebarOpen)
},
_autoMode () {
if(window.matchMedia('(prefers-color-scheme: dark)').matches){ // 系统处于深色模式
if (window.matchMedia('(prefers-color-scheme: dark)').matches) { // 系统处于深色模式
this.themeMode = 'dark'
} else {
this.themeMode = 'light'
}
},
toggleThemeMode (key) {
if(key === 'auto') {
if (key === 'auto') {
this._autoMode()
} else {
this.themeMode = key

9
theme-vdoing/mixins/encodeUrl.js
View File

@ -1,9 +0,0 @@
export default {
methods: {
encodeUrl(str) {
str = str + ''
str = str.replace(/ |((?=[\x21-\x7e]+)[^A-Za-z0-9])/g, '-')
return str
},
}
}

10
theme-vdoing/mixins/posts.js
View File

@ -2,19 +2,19 @@ import { filterPosts, sortPosts, sortPostsByDate, groupPosts, categoriesAndTags
export default {
computed: {
$filterPosts() { // 过滤非文章页和首页的文章数据
$filterPosts () { // 过滤非文章页和首页的文章数据
return filterPosts(this.$site.pages)
},
$sortPosts() { // 按置顶和时间排序的文章数据
$sortPosts () { // 按置顶和时间排序的文章数据
return sortPosts(this.$filterPosts)
},
$sortPostsByDate() { // 仅按时间排序的文章数据
$sortPostsByDate () { // 仅按时间排序的文章数据
return sortPostsByDate(this.$filterPosts)
},
$groupPosts() { // 按分类和标签分组的文章数据
$groupPosts () { // 按分类和标签分组的文章数据
return groupPosts(this.$sortPosts)
},
$categoriesAndTags() { // 所有分类和标签数据
$categoriesAndTags () { // 所有分类和标签数据
return categoriesAndTags(this.$groupPosts)
}
}

8
theme-vdoing/mixins/titleBadge.js
View File

@ -1,5 +1,5 @@
export default {
data() {
data () {
return {
badges: [
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABGpJREFUSA3tVVtoXFUU3fvOI53UlmCaKIFmwEhsE7QK0ipFEdHEKpXaZGrp15SINsXUWvBDpBgQRKi0+KKoFeJHfZA+ED9KKoIU2gYD9UejTW4rVIzm0VSTziPzuNu1z507dibTTjL4U/DAzLn3nL3X2o91ziX6f9wMFdh6Jvbm9nNSV0msViVO6tN1Rm7NMu2OpeJ9lWBUTDxrJbYTS0hInuwciu9eLHlFxCLCZEk3MegsJmZ5K/JD6t7FkFdEvGUo1g7qJoG3MHImqRIn8/nzY1K9UPKKiJmtnUqHVE3Gbuay6vJE/N2FEmuxFjW2nUuE0yQXRRxLiTUAzs36zhZvOXJPdX850EVnnLZkB8prodQoM5JGj7Xk2mvC7JB8tG04Ef5PiXtG0UtxupRQSfTnBoCy554x18yJHI6I+G5Eru4LHmPJZEQsrvPUbMiA8G/WgMK7w7I+ez7++o2ANfbrjvaOl1tFMs+htG3IrZH9/hDX1Pr8Tc0UvH8tcX29KzAgIGcEkINyW5BF9x891hw6VYqgJHEk0huccS7vh3C6gTiODL+26huuBtbct8eZnqLML8PkxGYpuPZBqtqwkSjgc4mB5gbgig5i+y0UDK35LMxXisn9xQtK+nd26gTIHsHe/oblK/b29fUmN/8Y+9jAQrnBp56m1LcDlDp9irKTExSKduXJVWSqdBMA08pEJnEIOB3FPPMybu/oeV8zFeYN3xx576Q6RH+VmplE4ncQV5v+5rzSoyOU7PuEAg8g803PwBJ0CExno/jcMbN8tONYeOmHiuUNryvm3fRUy4tMPVLdAGkUhNWuggGrJcXPv+ouCjz0MKUHz1J2/E8IC9nqTabcxgaBYM0hPhD5Y65FsbxRQKxCQrDjDctW7PUM3HuZunFyifSAqEfuzCp48Il24luWUWZoyJCaPR82jE0+kFA643wRFVni4RYSq3ohJO2pZ7B5dO4xkDWbEpossJPLSrPjYID8rS2UHTlvyNxqIGsg674XJJ7vnh5L7PNwC4hh2sjCI96mzszOTpxLF0T7l88Yz7lAuK6OnL8gXLOnTvpzSb22YG8W7us3jSebFHeeqnXRG1vt+MoUM84LQIBmMsCTAcOauTh0T0l0neQK7m2bLMt2mGxU3HYssS0J2cdv5wljlPsrIuZLAG/2DOZIXgCYT8uMGZN+e2kSirfxZOPCsC0f24nTZzspnVn9VePS1Z5vubmAGGXG8ZFno9Hel0yfA5ZPhF7Dh972BQJ2qCpgH67lmWtBYbvk6sz02wjky2vXyz0XErP/kFB619js1BtwfOV4OPRqOQBjy3Qbk18vigUPPSD5ceHnwck7W9bhAqZdd7SuG7w4/P2F/GaJh8c7e9qgow+Q7cGBo+98WsLkuktFqiZabtXuQTu/Y5ETbR0v7tNSFnvrmu6pjdoan2KjMu8q/Hmj1EfCO2ZGfEIbIXKUlw8qaX9/b2oeSJmFksSeT/Fn0V3nSypChh4Gjh74ybO9aeZ/AN2dwciu2/MhAAAAAElFTkSuQmCC',
@ -9,19 +9,19 @@ export default {
currentBadge: ''
}
},
created() {
created () {
if (this.$themeConfig.titleBadgeIcons) {
this.badges = this.$themeConfig.titleBadgeIcons
}
this.currentBadge = this.getBadge()
},
watch: {
'$route.path'() {
'$route.path' () {
this.currentBadge = this.getBadge()
}
},
methods: {
getBadge() {
getBadge () {
return this.badges[Math.floor(Math.random() * this.badges.length)]
}
}

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

@ -11,13 +11,13 @@ let catalogueData = {}; // 目录页数据
* @param {String} sourceDir .md文件所在源目录(一般是docs目录)
* @param {Boolean} collapsable 是否可折叠
*/
function createSidebarData(sourceDir, collapsable){
function createSidebarData (sourceDir, collapsable) {
const sidebarData = {};
const tocs = readTocs(sourceDir);
tocs.forEach(toc => { // toc是每个目录的绝对路径
const tocArr = toc.split('\\')
if (tocArr[tocArr.length -1] === '_posts') { // 碎片化文章
if (tocArr[tocArr.length - 1] === '_posts') { // 碎片化文章
// 注释说明：碎片化文章不需要生成结构化侧边栏 2020.05.01
// const sidebarArr = mapTocToPostSidebar(toc);
@ -44,7 +44,7 @@ module.exports = createSidebarData;
* 读取指定目录下的文件绝对路径
* @param {String} root 指定的目录
*/
function readTocs(root){
function readTocs (root) {
const result = [];
const files = fs.readdirSync(root); // 读取目录,返回数组，成员是root底下所有的目录名 (包含文件夹和文件)
files.forEach(name => {
@ -61,7 +61,7 @@ function readTocs(root){
* 将碎片化文章目录(_posts)映射为对应的侧边栏配置数据
* @param {String} root
*/
function mapTocToPostSidebar(root){
function mapTocToPostSidebar (root) {
let postSidebar = [] // 碎片化文章数据
const files = fs.readdirSync(root); // 读取目录（文件和文件夹）,返回数组
@ -74,7 +74,7 @@ function mapTocToPostSidebar(root){
log(chalk.yellow(`warning: 该文件 "${file}" 在_posts文件夹中，不应有序号，且文件名中间不应有'.'`))
return
}
if(stat.isDirectory()){ // 是文件夹目录
if (stat.isDirectory()) { // 是文件夹目录
// log(chalk.yellow(`warning: 该目录 "${file}" 内文件无法生成侧边栏，_posts文件夹里面不能有二级目录。`))
return
}
@ -88,7 +88,7 @@ function mapTocToPostSidebar(root){
const contentStr = fs.readFileSync(file, 'utf8') // 读取md文件内容，返回字符串
const { data } = matter(contentStr) // 解析出front matter数据
const permalink = data.permalink || ''
postSidebar.push([filename, title, permalink ]); // [<路径>, <文件标题>, <永久链接>]
postSidebar.push([filename, title, permalink]); // [<路径>, <文件标题>, <永久链接>]
})
return postSidebar
@ -102,7 +102,7 @@ function mapTocToPostSidebar(root){
* @param {String} prefix
*/
function mapTocToSidebar(root, collapsable, prefix){
function mapTocToSidebar (root, collapsable, prefix) {
prefix = prefix || '';
let sidebar = [];
const files = fs.readdirSync(root); // 读取目录（文件和文件夹）,返回数组
@ -119,7 +119,7 @@ function mapTocToSidebar(root, collapsable, prefix){
if (sidebar[order]) { // 判断序号是否已经存在
log(chalk.yellow(`warning: 该文件 "${file}" 的序号在同一级别中重复出现，将会被覆盖`))
}
if(stat.isDirectory()){ // 是文件夹目录
if (stat.isDirectory()) { // 是文件夹目录
sidebar[order] = {
title,
collapsable, // 是否可折叠，默认true
@ -133,7 +133,7 @@ function mapTocToSidebar(root, collapsable, prefix){
const contentStr = fs.readFileSync(file, 'utf8') // 读取md文件内容，返回字符串
const { data } = matter(contentStr) // 解析出front matter数据
const permalink = data.permalink || ''
sidebar[order] = [prefix + filename, title, permalink ]; // [<路径>, <文件标题>, <永久链接>]
sidebar[order] = [prefix + filename, title, permalink]; // [<路径>, <文件标题>, <永久链接>]
// 目录页和永久链接，用于给面包屑提供数据
const pageComponent = data.pageComponent

26
theme-vdoing/node_utils/handlePage.js
View File

@ -6,7 +6,7 @@ const chalk = require('chalk') // 命令行打印美化
const { type } = require('./modules/fn');
const log = console.log
function createPage(sourceDir, page) {
function createPage (sourceDir, page) {
const dirPath = path.join(sourceDir, '@pages') // 生成的文件夹路径
// 文件夹不存在时
@ -21,30 +21,30 @@ function createPage(sourceDir, page) {
return
}
// 注意：反引号字符串的格式会映射到文件
let content = ''
if (page.indexOf('categories') > -1) {
content = `---
// 注意：反引号字符串的格式会映射到文件
let content = ''
if (page.indexOf('categories') > -1) {
content = `---
categoriesPage: true
title: 分类
permalink: /categories/
article: false
---`
} else if (page.indexOf('tags') > -1){
content = `---
} else if (page.indexOf('tags') > -1) {
content = `---
tagsPage: true
title: 标签
permalink: /tags/
article: false
---`
} else if (page.indexOf('archives') > -1){
content = `---
} else if (page.indexOf('archives') > -1) {
content = `---
archivesPage: true
title: 归档
permalink: /archives/
article: false
---`
}
}
if (content) {
fs.writeFileSync(pagePath, content)
@ -53,7 +53,7 @@ article: false
}
// 删除页面文件
function deletePage(sourceDir, page) {
function deletePage (sourceDir, page) {
const dirPath = path.join(sourceDir, '@pages') // 文件夹路径
const pagePath = path.join(dirPath, `${page}.md`) // 文件路径
@ -66,10 +66,10 @@ function deletePage(sourceDir, page) {
}
// 删除文件夹
function deleteDir(dirPath) {
function deleteDir (dirPath) {
if (fs.existsSync(dirPath)) {
const files = fs.readdirSync(dirPath)
if( type(files) === 'array' && files.length === 0) {
if (type(files) === 'array' && files.length === 0) {
fs.rmdirSync(dirPath)
log(chalk.blue('tip ') + chalk.green(`delete dir(删除目录): ${dirPath}`))
}

14
theme-vdoing/node_utils/modules/fn.js
View File

@ -1,21 +1,21 @@
// 类型判断
exports.type = function (o){
exports.type = function (o) {
var s = Object.prototype.toString.call(o)
return s.match(/\[object (.*?)\]/)[1].toLowerCase()
}
// 修复date时区格式的问题
exports.repairDate = function (date) {
// 修复date时区格式的问题
exports.repairDate = function (date) {
date = new Date(date);
return `${date.getUTCFullYear()}-${zero(date.getUTCMonth()+1)}-${zero(date.getUTCDate())} ${zero(date.getUTCHours())}:${zero(date.getUTCMinutes())}:${zero(date.getUTCSeconds())}`;
return `${date.getUTCFullYear()}-${zero(date.getUTCMonth() + 1)}-${zero(date.getUTCDate())} ${zero(date.getUTCHours())}:${zero(date.getUTCMinutes())}:${zero(date.getUTCSeconds())}`;
}
// 日期的格式
exports.dateFormat = function (date) {
return `${date.getFullYear()}-${zero(date.getMonth()+1)}-${zero(date.getDate())} ${zero(date.getHours())}:${zero(date.getMinutes())}:${zero(date.getSeconds())}`
return `${date.getFullYear()}-${zero(date.getMonth() + 1)}-${zero(date.getDate())} ${zero(date.getHours())}:${zero(date.getMinutes())}:${zero(date.getSeconds())}`
}
// 小于10补0
function zero(d){
return d.toString().padStart(2,'0')
function zero (d) {
return d.toString().padStart(2, '0')
}

52
theme-vdoing/node_utils/modules/readFileList.js
View File

@ -6,36 +6,36 @@ const path = require('path'); // 路径模块
const chalk = require('chalk') // 命令行打印美化
const log = console.log
function readFileList(dir, filesList = []) {
function readFileList (dir, filesList = []) {
const files = fs.readdirSync(dir);
files.forEach( (item, index) => {
let filePath = path.join(dir, item);
const stat = fs.statSync(filePath);
if (stat.isDirectory() && item !== '.vuepress' && item !== '@pages') {
readFileList(path.join(dir, item), filesList); //递归读取文件
} else {
if(path.basename(dir) !== 'docs'){ // 过滤docs目录级下的文件
files.forEach((item, index) => {
let filePath = path.join(dir, item);
const stat = fs.statSync(filePath);
if (stat.isDirectory() && item !== '.vuepress' && item !== '@pages') {
readFileList(path.join(dir, item), filesList); //递归读取文件
} else {
if (path.basename(dir) !== 'docs') { // 过滤docs目录级下的文件
const fileNameArr = path.basename(filePath).split('.')
let name = null, type = null;
if (fileNameArr.length === 2) { // 没有序号的文件
name = fileNameArr[0]
type = fileNameArr[1]
} else if (fileNameArr.length === 3) { // 有序号的文件
name = fileNameArr[1]
type = fileNameArr[2]
} else { // 超过两个‘.’的
log(chalk.yellow(`warning: 该文件 "${filePath}" 没有按照约定命名，将忽略生成相应数据。`))
return
}
if(type === 'md'){ // 过滤非md文件
filesList.push({
name,
filePath
});
}
const fileNameArr = path.basename(filePath).split('.')
let name = null, type = null;
if (fileNameArr.length === 2) { // 没有序号的文件
name = fileNameArr[0]
type = fileNameArr[1]
} else if (fileNameArr.length === 3) { // 有序号的文件
name = fileNameArr[1]
type = fileNameArr[2]
} else { // 超过两个‘.’的
log(chalk.yellow(`warning: 该文件 "${filePath}" 没有按照约定命名，将忽略生成相应数据。`))
return
}
if (type === 'md') { // 过滤非md文件
filesList.push({
name,
filePath
});
}
}
}
});
return filesList;
}

26
theme-vdoing/node_utils/setFrontmatter.js
View File

@ -4,7 +4,7 @@ const jsonToYaml = require('json2yaml')
const chalk = require('chalk') // 命令行打印美化
// const arg = process.argv.splice(2)[0]; // 获取命令行传入的参数
const readFileList = require('./modules/readFileList');
const { type, repairDate, dateFormat} = require('./modules/fn');
const { type, repairDate, dateFormat } = require('./modules/fn');
const log = console.log
const path = require('path');
@ -14,7 +14,7 @@ const PREFIX = '/pages/'
/**
* 给.md文件设置frontmatter(标题、日期、永久链接等数据)
*/
function setFrontmatter(sourceDir, themeConfig) {
function setFrontmatter (sourceDir, themeConfig) {
const isCategory = themeConfig.category
const isTag = themeConfig.tag
@ -33,16 +33,16 @@ function setFrontmatter(sourceDir, themeConfig) {
const dateStr = dateFormat(getBirthtime(stat));// 文件的创建时间
const categories = getCategories(file, categoryText)
// 注意下面这些反引号字符串的格式会映射到文件
const cateStr = isCategory === false ? '' : `
// 注意下面这些反引号字符串的格式会映射到文件
const cateStr = isCategory === false ? '' : `
categories:
- ${categories[0]}${categories[1] ? '\r\n - '+ categories[1] : ''}`;
- ${categories[0]}${categories[1] ? '\r\n - ' + categories[1] : ''}`;
const tagsStr = isTag === false ? '' : `
const tagsStr = isTag === false ? '' : `
tags:
- `;
const fmData = `---
const fmData = `---
title: ${file.name}
date: ${dateStr}
permalink: ${getPermalink()}${file.filePath.indexOf('_posts') > -1 ? '\r\nsidebar: auto' : ''}${cateStr}${tagsStr}
@ -77,7 +77,7 @@ permalink: ${getPermalink()}${file.filePath.indexOf('_posts') > -1 ? '\r\nsideba
mark = true;
}
if ( !matterData.hasOwnProperty('pageComponent') && matterData.article !== false ) { // 是文章页才添加分类和标签
if (!matterData.hasOwnProperty('pageComponent') && matterData.article !== false) { // 是文章页才添加分类和标签
if (isCategory !== false && !matterData.hasOwnProperty('categories')) { // 分类
matterData.categories = getCategories(file, categoryText)
mark = true;
@ -90,10 +90,10 @@ permalink: ${getPermalink()}${file.filePath.indexOf('_posts') > -1 ? '\r\nsideba
}
if (mark) {
if(matterData.date && type(matterData.date) === 'date') {
if (matterData.date && type(matterData.date) === 'date') {
matterData.date = repairDate(matterData.date) // 修复时间格式
}
const newData = jsonToYaml.stringify(matterData).replace(/\n\s{2}/g,"\n").replace(/"/g,"") + '---\r\n' + fileMatterObj.content;
const newData = jsonToYaml.stringify(matterData).replace(/\n\s{2}/g, "\n").replace(/"/g, "") + '---\r\n' + fileMatterObj.content;
fs.writeFileSync(file.filePath, newData); // 写入
log(chalk.blue('tip ') + chalk.green(`write frontmatter(写入frontmatter)：${file.filePath} `))
}
@ -103,7 +103,7 @@ permalink: ${getPermalink()}${file.filePath.indexOf('_posts') > -1 ? '\r\nsideba
}
// 获取分类数据
function getCategories(file, categoryText) {
function getCategories (file, categoryText) {
let categories = []
if (file.filePath.indexOf('_posts') === -1) { // 不在_posts文件夹
@ -120,13 +120,13 @@ function getCategories(file, categoryText) {
}
// 获取文件创建时间
function getBirthtime(stat){
function getBirthtime (stat) {
// 在一些系统下无法获取birthtime属性的正确时间，使用atime代替
return stat.birthtime.getFullYear() != 1970 ? stat.birthtime : stat.atime
}
// 定义永久链接数据
function getPermalink() {
function getPermalink () {
return `${PREFIX + (Math.random() + Math.random()).toString(16).slice(2, 8)}/`
}

14
theme-vdoing/package.json
View File

@ -1,6 +1,6 @@
{
"name": "vuepress-theme-vdoing",
"version": "1.4.4",
"version": "1.5.0",
"description": "Vdoing theme for VuePress. 一个基于VuePress的知识管理兼博客主题。",
"author": {
"name": "gaoyi(Evan) Xu"
@ -19,7 +19,7 @@
"@vuepress/plugin-active-header-links": "^1.2.0",
"@vuepress/plugin-nprogress": "^1.2.0",
"@vuepress/plugin-search": "^1.2.0",
"chalk": "^4.0.0",
"chalk": "^4.0.0",
"json2yaml": "^1.1.0",
"js-yaml": "^3.13.1",
"docsearch.js": "^2.5.2",
@ -40,10 +40,8 @@
],
"license": "MIT",
"main": "index.js",
"maintainers": [
{
"name": "Evan xu",
"email": "894072666@qq.com"
}
]
"maintainers": [{
"name": "Evan xu",
"email": "894072666@qq.com"
}]
}

9
theme-vdoing/styles/custom-blocks.styl
View File

@ -4,7 +4,7 @@
margin-bottom .2rem
p
margin 0
&.tip, &.warning, &.danger
&.tip, &.warning, &.danger, &.note
padding .5rem 1.5rem
border-left-width .5rem
border-left-style solid
@ -29,6 +29,10 @@
color darken(red, 40%)
a
color var(--textColor)
&.note
background-color #E8F5FA
border-color #157BAE
color darken(#157BAE, 40%)
&.right
color var(--textColor)
font-size 0.9rem
@ -78,3 +82,6 @@
color darken(red, 50%)
a
color $accentColor
&.note
background-color rgba(243, 245, 247, .2)
color darken(#157BAE, 0%)

21
theme-vdoing/styles/markdown-container.styl
View File

@ -37,7 +37,7 @@ h1, h2, h3, h4, h5, h6
&:hover
text-decoration none
box-shadow: 0 10px 20px -10px var(--randomColor, rgba(0,0,0,0.15));
transform: translateY(-5px)
transform: translateY(-3px) scale(1.01, 1.01)
img
// transform rotate(8deg) scale(1.1, 1.1)
box-shadow 3px 2px 7px rgba(0, 0, 0, 0.15)
@ -96,7 +96,7 @@ h1, h2, h3, h4, h5, h6
width calc(100%/3 - 1rem)
margin .5rem
background var(--mainBg)
border 1px solid rgba(0,0,0,0.08)
border 1px solid rgba(0,0,0,0.1)
box-sizing: border-box
border-radius 3px
overflow hidden
@ -107,9 +107,10 @@ h1, h2, h3, h4, h5, h6
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
transition: box-shadow .3s
transition: all .4s
&:hover
box-shadow 1px 1px 20px rgba(0,0,0,.07)
box-shadow 1px 1px 20px rgba(0,0,0,.1)
transform: translateY(-3px)
.box-img
overflow hidden
position relative
@ -119,15 +120,15 @@ h1, h2, h3, h4, h5, h6
width 100%
height auto
transition: all .3s
&:hover
img
transform: scale(1.1, 1.1)
opacity .75
// &:hover
// img
// transform: scale(1.1, 1.1)
// opacity .75
a
color var(--textColor)
transition: color .3s
&:hover
color $accentColor
// color $accentColor
text-decoration none
.box-info
padding: .8rem 1rem
@ -141,7 +142,7 @@ h1, h2, h3, h4, h5, h6
.box-footer
overflow hidden
padding: .8rem 1rem
border-top: 1px solid rgba(0,0,0,0.05)
border-top: 1px solid rgba(0,0,0,0.1)
img
width 1.8rem
height 1.8rem

118
theme-vdoing/util/getArticleDate(弃用).js
View File

@ -1,118 +0,0 @@
const re = /.*\/(.*?)\.(html|md)/
export function getPagesList(posts) {
let pagesList = {}
let tagGroup = {}
// 过滤非文章页
posts = filterNotArticle(posts)
// 对页面数据二次处理和排序
const pages = posts.map(post => {
// const execs = re.exec(post.relativePath)
const date = new Date(post.frontmatter.date || post.lastUpdated)
const pathArr = post.relativePath.split('/')
return {
// ...post,
title: post.title,
path: post.path,
// lastUpdated: post.lastUpdated,
updateTimestamp: date.getTime(), // 更新日期的时间戳
// filename: execs ? execs['1'] : '',
formatDay: formatDate(date),
year: date.getFullYear(),
tag: /\./g.test(pathArr[0]) ? pathArr[1].split('.')[1] : pathArr[0] // 区分是单独合集的笔记还是文章
}
}).sort((a, b) => b.updateTimestamp - a.updateTimestamp)
// 根据年份对数据分组
let pageYearArr = []
let pageYearObj = {}
pages.forEach( page => {
// 全部
if (!pageYearObj[page.year]){
pageYearArr.push({
year: page.year,
pageList: [page]
})
pageYearObj[page.year] = page
} else {
pageYearArr.forEach(ele => {
if (ele.year == page.year){
ele.pageList.push(page)
}
})
}
// 加入标签属性
if (!tagGroup[page.tag]) {
tagGroup[page.tag] = []
}
})
// 根据标签分组
for (let item in tagGroup) { // 循环标签
for(let i in pageYearArr) { // 循环全部
const filterTag = pageYearArr[i].pageList.filter(page => { // 按标签过滤
return page.tag === item
})
if (filterTag.length) { // 该年份中有数据才加入
tagGroup[item].push({
year: pageYearArr[i].year,
pageList: filterTag
})
}
}
}
pagesList.tagGroup = tagGroup
pagesList.allPage = pageYearArr // 加入全部
return pagesList
}
export function getTopKPosts(posts, len, currentPath) {
return filterNotArticle(posts, currentPath)
.map(post => {
const execs = re.exec(post.relativePath)
return {
...post,
updateTimestamp: (new Date(post.frontmatter.date || post.lastUpdated)).getTime(), // 更新日期的时间戳
filename: execs ? execs['1'] : '',
formatDay: formatDate(new Date(post.frontmatter.date || post.lastUpdated))
}
})
.sort((a, b) => b.updateTimestamp - a.updateTimestamp)
.slice(0,len)
}
// 过滤没有frontmatter数据的 和 非文章页面的,
function filterNotArticle(posts, currentPath){
return posts.filter(post => {
const { frontmatter, path } = post;
if (currentPath) { // 过滤是当前页面的
return frontmatter && frontmatter.permalink && frontmatter.title && frontmatter.article !== false && path !== currentPath;
} else {
return frontmatter && frontmatter.permalink && frontmatter.title && frontmatter.article !== false;
}
})
}
// 日期格式化
function formatDate(date) {
if (!(date instanceof Date)) {
return
}
// return `${date.getFullYear()}/${zero(date.getMonth() + 1)}/${zero(date.getDate())}`
return `${zero(date.getMonth() + 1)}-${zero(date.getDate())}`
}
// 补0
function zero(d) {
return d.toString().padStart(2,'0')
}

12
theme-vdoing/util/index.js
View File

@ -246,22 +246,22 @@ function resolveItem (item, pages, base, groupDepth = 1) {
// 类型判断
export function type(o){
export function type (o) {
const s = Object.prototype.toString.call(o)
return s.match(/\[object (.*?)\]/)[1].toLowerCase()
}
// 日期格式化(只获取年月日)
export function dateFormat(date) {
export function dateFormat (date) {
if (!(date instanceof Date)) {
date = new Date(date)
}
return `${date.getUTCFullYear()}-${zero(date.getUTCMonth()+1)}-${zero(date.getUTCDate())}`
return `${date.getUTCFullYear()}-${zero(date.getUTCMonth() + 1)}-${zero(date.getUTCDate())}`
}
// 小于10补0
export function zero(d){
return d.toString().padStart(2,'0')
export function zero (d) {
return d.toString().padStart(2, '0')
}
// 获取时间的时间戳
@ -280,7 +280,7 @@ export function compareDate (a, b) {
}
// 将特殊符号编码（应用于url）
export function encodeUrl(str) {
export function encodeUrl (str) {
str = str + ''
str = str.replace(/ |((?=[\x21-\x7e]+)[^A-Za-z0-9])/g, '-')
return str

28
theme-vdoing/util/postData.js
View File

@ -1,4 +1,4 @@
import { type, compareDate, encodeUrl } from './index'
import { type, compareDate } from './index'
/**
* 过滤非文章页
@ -6,7 +6,7 @@ import { type, compareDate, encodeUrl } from './index'
*/
export function filterPosts (posts) {
posts = posts.filter(item => {
const { frontmatter: { pageComponent, article, home }} = item
const { frontmatter: { pageComponent, article, home } } = item
return !(pageComponent || article === false || home === true) // 存在页面组件、article字段为false，以及首页
})
return posts
@ -47,31 +47,29 @@ export function sortPostsByDate (posts) {
* 按分类和标签分组
* @param {Array} posts 按时间排序之后的文章数据
*/
export function groupPosts(posts) {
export function groupPosts (posts) {
const categoriesObj = {}
const tagsObj = {}
for (let i = 0, postsL = posts.length; i < postsL; i++) {
const { frontmatter: { categories, tags }} = posts[i]
const { frontmatter: { categories, tags } } = posts[i]
if (type(categories) === 'array') {
categories.forEach(item => {
if (item) { // 分类值是有效的
const encodeItem = encodeUrl(item)
if (!categoriesObj[encodeItem]) {
categoriesObj[encodeItem] = []
if (!categoriesObj[item]) {
categoriesObj[item] = []
}
categoriesObj[encodeItem].push(posts[i])
categoriesObj[item].push(posts[i])
}
})
}
if (type(tags) === 'array') {
tags.forEach(item => {
if (item) { // 标签值是有效的
const encodeItem = encodeUrl(item)
if (!tagsObj[encodeItem]) {
tagsObj[encodeItem] = []
if (!tagsObj[item]) {
tagsObj[item] = []
}
tagsObj[encodeItem].push(posts[i])
tagsObj[item].push(posts[i])
}
})
}
@ -86,18 +84,18 @@ export function groupPosts(posts) {
* 获取所有分类和标签
* @param {Object} groupPosts 按分类和标签分组之后的文章数据
*/
export function categoriesAndTags(groupPosts) {
export function categoriesAndTags (groupPosts) {
const categoriesArr = []
const tagsArr = []
for(let key in groupPosts.categories) {
for (let key in groupPosts.categories) {
categoriesArr.push({
key,
length: groupPosts.categories[key].length
})
}
for(let key in groupPosts.tags) {
for (let key in groupPosts.tags) {
tagsArr.push({
key,
length: groupPosts.tags[key].length