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": {

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

@ -8,7 +8,7 @@
id="algolia-search-input"
class="search-query"
:placeholder="placeholder"
>
/>
</form>
</template>
@ -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>

46
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>
@ -100,7 +97,6 @@ export default {
<style lang='stylus'>
@require '../styles/wrapper.styl'
.archives-page
.theme-vdoing-wrapper
@extend $vdoing-wrapper
@ -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

93
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">
<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,10 +81,7 @@
</template>
<script>
import encodeMixin from '../mixins/encodeUrl'
export default {
mixins: [encodeMixin],
data () {
return {
articleInfo: {}
@ -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

24
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>
@ -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)

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

@ -1,5 +1,8 @@
<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>
@ -46,5 +49,5 @@ export default {
z-index -999999
height 100vh
width 100vw
transition background .5s
transition background 0.5s
</style>

38
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>
>{{item.name}}</li>
</ul>
</transition>
</div>
@ -201,7 +205,7 @@ export default {
right 2rem
bottom 2.5rem
z-index 11
@media (max-width: $MQNarrow)
@media (max-width $MQNarrow)
right 1rem
bottom 1.5rem
.button
@ -209,18 +213,18 @@ export default {
height 2.2rem
line-height 2.2rem
border-radius 50%
box-shadow 0 2px 6px rgba(0,0,0,.15)
margin-top .9rem
box-shadow 0 2px 6px rgba(0, 0, 0, 0.15)
margin-top 0.9rem
text-align center
cursor pointer
transition all .5s
transition all 0.5s
background var(--blurBg)
&.hover
background $accentColor
box-shadow 0 0 15px $accentColor
&:before
color #fff
@media (any-hover: hover)
@media (any-hover hover)
&:hover
background $accentColor
box-shadow 0 0 15px $accentColor
@ -228,7 +232,7 @@ export default {
color #fff
.select-box
margin 0
padding .8rem 0
padding 0.8rem 0
position absolute
bottom 0rem
right 1.5rem
@ -236,25 +240,23 @@ export default {
border 1px solid var(--borderColor)
width 120px
border-radius 6px
box-shadow 0 0 15px rgba(255,255,255,.2)
box-shadow 0 0 15px rgba(255, 255, 255, 0.2)
li
list-style none
line-height 2rem
font-size .95rem
font-size 0.95rem
&:hover
color $accentColor
&.active
background-color rgba(150,150,150,.2)
background-color rgba(150, 150, 150, 0.2)
color $accentColor
.mode-enter-active, .mode-leave-active
transition all .3s
transition all 0.3s
.mode-enter, .mode-leave-to
opacity 0
transform scale(.8)
transform scale(0.8)
.fade-enter-active, .fade-leave-active
transition opacity .2s
transition opacity 0.2s
.fade-enter, .fade-leave-to
opacity 0
</style>

50
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,9 +52,7 @@
</template>
<script>
import encodeMixin from '../mixins/encodeUrl'
export default {
mixins: [encodeMixin],
data () {
return {
pageData: null,
@ -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>

53
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>
@ -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>

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

@ -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

29
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>
@ -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
@ -186,7 +193,7 @@ export default {
.title
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

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

@ -29,5 +29,4 @@ export default {
<style lang="stylus">
.dropdown-enter, .dropdown-leave-to
height 0 !important
</style>

30
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>
<span
v-html="footer.copyrightInfo"
></span>
</template>
</div>
</template>
@ -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>

50
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
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
// 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>

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

@ -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)

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

@ -11,7 +11,7 @@
v-if="$site.themeConfig.logo"
:src="$withBase($site.themeConfig.logo)"
:alt="$siteTitle"
>
/>
<span
ref="siteName"
class="site-name"
@ -30,7 +30,9 @@
v-if="isAlgoliaSearch"
:options="algolia"
/>
<SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"/>
<SearchBox
v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"
/>
<NavLinks class="can-hide" />
</div>
</header>
@ -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%)
// 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

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

@ -4,20 +4,25 @@
<slot name="top" />
<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" />
<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>
@ -89,12 +93,11 @@ export default {
padding-bottom 2rem
display block
@media (max-width $MQMobile)
padding-top ($navbarHeight)
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>

48
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,10 +36,8 @@
<script>
import isNil from 'lodash/isNil'
import { endingSlashRE, outboundRE } from '../util'
import encodeMixin from '../mixins/encodeUrl'
export default {
mixins: [encodeMixin],
name: 'PageEdit',
computed: {
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)
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
margin-bottom 0.5rem
.last-updated
width 100%
font-size 0.8em
text-align left
</style>

62
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>
@ -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>

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

@ -1,6 +1,7 @@
<template>
<div class="pagination">
<span class="card-box prev iconfont icon-jiantou-zuo"
<span
class="card-box prev iconfont icon-jiantou-zuo"
:class="{disabled: currentPage === 1}"
@click="goPrex()"
>
@ -8,71 +9,76 @@
</span>
<!-- 分页在5页及以下时 -->
<div class="pagination-list" v-if="pages <= 5">
<span class="card-box"
<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>
>{{item}}</span>
</div>
<!-- 分页在5页以上 -->
<div class="pagination-list" v-else>
<div
class="pagination-list"
v-else
>
<!-- 一号位 -->
<span class="card-box"
<span
class="card-box"
:class="{active: currentPage === 1}"
@click="goIndex(1)"
>
1
</span>
>1</span>
<!-- 二号位 -->
<span class="ellipsis ell-two"
<span
class="ellipsis ell-two"
v-show="currentPage > 3"
@click="goIndex(currentPage - 2)"
title="上两页"
/>
<!--这里没有使用v-if的原因是因为部署版本在当前页大于3时刷新页面出现了一些bug-->
<span class="card-box"
<span
class="card-box"
v-show="currentPage <= 3"
:class="{active: currentPage === 2}"
@click="goIndex(2)"
>2</span>
<!-- 三号位 -->
<span class="card-box"
<span
class="card-box"
:class="{active: currentPage >= 3 && currentPage <= (pages - 2)}"
@click="goIndex(threeNum())"
>
{{ threeNum() }}
</span>
>{{ threeNum() }}</span>
<!-- 四号位 -->
<span class="ellipsis ell-four"
<span
class="ellipsis ell-four"
v-show="currentPage < (pages - 2)"
@click="goIndex(currentPage + 2)"
title="下两页"
/>
<span class="card-box"
<span
class="card-box"
v-show="currentPage >= (pages - 2)"
:class="{active: currentPage === pages-1}"
@click="goIndex(pages-1)"
>
{{ pages-1 }}
</span>
>{{ pages-1 }}</span>
<!-- 五号位 -->
<span class="card-box"
<span
class="card-box"
:class="{active: currentPage === pages}"
@click="goIndex(pages)"
>
{{pages}}
</span>
>{{pages}}</span>
</div>
<span class="card-box next iconfont icon-jiantou-you"
<span
class="card-box next iconfont icon-jiantou-you"
:class="{disabled: currentPage === pages}"
@click="goNext()"
>
@ -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>

119
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"
<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"
>{{ 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,
@ -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,13 +205,12 @@ 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
display none
@ -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>

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

@ -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>

34
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,17 +19,17 @@
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"/>
<SidebarLinks
:depth="0"
:items="items"
/>
<slot name="bottom" />
</aside>
</template>
@ -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"

37
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">
<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>
>{{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>
@ -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

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

@ -67,7 +67,7 @@ export default {
},
watch: {
'$route.query.tag' () {
this.tag = this.$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>

26
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>
@ -78,7 +88,7 @@ export default {
.article-list
// @extend $wrapper
padding 1rem 2rem
@media (max-width: $MQNarrow)
@media (max-width $MQNarrow)
padding 1rem 1.5rem
&.no-article-list
display none
@ -91,7 +101,7 @@ export default {
color var(--textColor)
opacity 0.9
&:before
margin-right .4rem
margin-right 0.4rem
font-size 1.1rem
.article-wrapper
overflow hidden
@ -136,6 +146,6 @@ export default {
margin-right 15px
color #999
text-align right
font-size .9rem
font-size 0.9rem
line-height 50px
</style>

20
theme-vdoing/index.js
View File

@ -77,6 +77,13 @@ module.exports = (options, ctx) => {
'@vuepress/plugin-nprogress',
['smooth-scroll', enableSmoothScroll],
['container', {
type: 'note',
defaultTitle: {
'/': '笔记',
'/en/': 'NOTE'
}
}],
['container', {
type: 'tip',
defaultTitle: {
@ -238,27 +245,20 @@ function getCardImgListDOM(dataList, row) {
dataList.forEach(item => {
listDOM += `
<div class="card-item ${row ? 'row-' + row : ''}" >
<div class="box-img">
<a href="${item.link}" target="_blank">
<div class="box-img">
<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>
${item.avatar || item.author
? `<div class="box-footer">
<a href="${item.link}" target="_blank">
${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>`
: ''
}
</div>
`
})

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
},
}
}

8
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"
@ -40,10 +40,8 @@
],
"license": "MIT",
"main": "index.js",
"maintainers": [
{
"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')
}

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

@ -1,4 +1,4 @@
import { type, compareDate, encodeUrl } from './index'
import { type, compareDate } from './index'
/**
* 过滤非文章页
@ -56,22 +56,20 @@ export function groupPosts(posts) {
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])
}
})
}