分类页开发
This commit is contained in:
xugaoyi
parent
c5df3f0197
commit
968d882b63
12
deploy.sh
12
deploy.sh
|
|
@ -28,15 +28,13 @@ git push -f $githubUrl master:gh-pages # 推送到github
|
|||
# deploy to coding
|
||||
echo 'www.xugaoyi.com\nxugaoyi.com' > CNAME # 自定义域名
|
||||
if [ -z "$CODING_TOKEN" ]; then # -z 字符串 长度为0则为true；$CODING_TOKEN来自于github仓库`Settings/Secrets`设置的私密环境变量
|
||||
# codingUrl=git@git.dev.tencent.com:xugaoyi/xugaoyi.git
|
||||
codingUrl=git@e.coding.net:xgy/xgy.git
|
||||
# codingUrl=git@e.coding.net:xgy/xgy.git
|
||||
else
|
||||
# codingUrl=https://xugaoyi:${CODING_TOKEN}@git.dev.tencent.com/xugaoyi/xugaoyi.git
|
||||
codingUrl=https://HmuzsGrGQX:${CODING_TOKEN}@e.coding.net/xgy/xgy.git
|
||||
# codingUrl=https://HmuzsGrGQX:${CODING_TOKEN}@e.coding.net/xgy/xgy.git
|
||||
fi
|
||||
git add -A
|
||||
git commit -m "${msg}"
|
||||
git push -f $codingUrl master # 推送到coding
|
||||
# git add -A
|
||||
# git commit -m "${msg}"
|
||||
# git push -f $codingUrl master # 推送到coding
|
||||
|
||||
|
||||
cd - # 退回开始所在目录
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
<template>
|
||||
<div class="categories-wrapper card-box">
|
||||
<router-link to="/" class="title iconfont icon-wenjianjia" title="全部分类">
|
||||
文章分类
|
||||
<router-link to="/categories/" class="title iconfont icon-wenjianjia" title="全部分类">
|
||||
{{ length === 'all' ? '全部分类' : '文章分类' }}
|
||||
</router-link>
|
||||
|
||||
<div class="categories">
|
||||
<router-link to="/" v-for="(item, index) in categories" :key="index">
|
||||
<router-link :to="`/categories/?key=${item.key}`" v-for="(item, index) in categories" :key="index">
|
||||
{{item.key}}
|
||||
<span>({{item.length}})</span>
|
||||
</router-link>
|
||||
<router-link to="/" v-if="categoriesData.length > 10">
|
||||
<router-link to="/categories/" v-if="length !== 'all'">
|
||||
更多...
|
||||
</router-link>
|
||||
</div>
|
||||
|
|
@ -17,10 +18,24 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: ['categoriesData'],
|
||||
props: {
|
||||
categoriesData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
length: {
|
||||
type: [String, Number],
|
||||
default: 'all'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
categories() {
|
||||
return this.categoriesData.slice(0, 10)
|
||||
if (this.length === 'all') {
|
||||
return this.categoriesData
|
||||
} else {
|
||||
return this.categoriesData.slice(0, this.length)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -28,8 +43,6 @@ export default {
|
|||
|
||||
<style lang='stylus'>
|
||||
.categories-wrapper
|
||||
position sticky
|
||||
top ($navbarHeight + .9rem)
|
||||
.title
|
||||
color var(--textColor)
|
||||
opacity .8
|
||||
|
|
@ -37,13 +50,14 @@ export default {
|
|||
&:hover
|
||||
color $accentColor
|
||||
.categories
|
||||
padding-top .6rem
|
||||
margin-top .6rem
|
||||
a
|
||||
display block
|
||||
padding .25rem 0
|
||||
color var(--textColor)
|
||||
opacity .8
|
||||
font-size .95rem
|
||||
position relative
|
||||
&:hover
|
||||
color $accentColor
|
||||
span
|
||||
|
|
|
|||
|
|
@ -53,4 +53,25 @@ export default {
|
|||
<style lang='stylus'>
|
||||
@require '../styles/custom-page.styl'
|
||||
|
||||
.categories-page
|
||||
.categories-wrapper
|
||||
position sticky
|
||||
top ($navbarHeight + .9rem)
|
||||
max-height calc(100vh - 10rem)
|
||||
min-height 4.2rem
|
||||
.categories
|
||||
padding-right .5rem
|
||||
max-height calc(100vh - 12rem)
|
||||
min-height 2.2rem
|
||||
overflow-y auto
|
||||
transition all .2s
|
||||
&::-webkit-scrollbar-track-piece
|
||||
background-color:rgba(0,0,0,.05)
|
||||
&::-webkit-scrollbar-thumb:vertical
|
||||
background-color:rgba(0,0,0,.15)
|
||||
&:hover
|
||||
&::-webkit-scrollbar-track-piece
|
||||
background-color:rgba(0,0,0,.1)
|
||||
&::-webkit-scrollbar-thumb:vertical
|
||||
background-color:rgba(0,0,0,.25)
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,11 @@
|
|||
</template>
|
||||
<template #mainRight>
|
||||
<BloggerBar v-if="$themeConfig.blogger" />
|
||||
<CategoriesBar :categoriesData="$categoriesAndTags.categories" v-if="$categoriesAndTags.categories.length" />
|
||||
<CategoriesBar
|
||||
v-if="$categoriesAndTags.categories.length"
|
||||
:categoriesData="$categoriesAndTags.categories"
|
||||
:length="10"
|
||||
/>
|
||||
<TagsBar :tagsData="$categoriesAndTags.tags" v-if="$categoriesAndTags.tags.length" />
|
||||
</template>
|
||||
</MainLayout>
|
||||
|
|
|
|||
|
|
@ -23,14 +23,14 @@
|
|||
{{ item.frontmatter.date.split(' ')[0]}}
|
||||
</span>
|
||||
<span title="分类" class="iconfont icon-wenjian" v-if="item.frontmatter.categories">
|
||||
<a href="javascript:;" v-for="(c, index) in item.frontmatter.categories" :key="index">
|
||||
<router-link :to="`/categories/?key=${c}`" v-for="(c, index) in item.frontmatter.categories" :key="index">
|
||||
{{c}}
|
||||
</a>
|
||||
</router-link>
|
||||
</span>
|
||||
<span title="标签" class="iconfont icon-biaoqian tags" v-if="item.frontmatter.tags && item.frontmatter.tags[0]">
|
||||
<a href="javascript:;" v-for="(t, index) in item.frontmatter.tags" :key="index">
|
||||
<router-link :to="`/tags/?key=${t}`" v-for="(t, index) in item.frontmatter.tags" :key="index">
|
||||
{{t}}
|
||||
</a>
|
||||
</router-link>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,15 +28,15 @@ a,input,button
|
|||
width:6px;
|
||||
height:5px;
|
||||
::-webkit-scrollbar-track-piece
|
||||
background-color:rgba(0,0,0,.15);
|
||||
-webkit-border-radius:3px;
|
||||
background-color:rgba(0,0,0,.15)
|
||||
-webkit-border-radius:3px
|
||||
::-webkit-scrollbar-thumb:vertical
|
||||
height:5px;
|
||||
background-color:hsla(0,0%,49%,.6);
|
||||
background-color:rgba(0,0,0,.28)
|
||||
-webkit-border-radius:3px
|
||||
::-webkit-scrollbar-thumb:horizontal
|
||||
width:5px;
|
||||
background-color:hsla(0,0%,49%,.6);
|
||||
background-color:rgba(0,0,0,.28)
|
||||
-webkit-border-radius:3px
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue