Skip to content

Commit 907eb70

Browse files
committed
:octocat: add tags and fix bugs
1 parent 025a4f6 commit 907eb70

File tree

6 files changed

+119
-29
lines changed

6 files changed

+119
-29
lines changed

docs/.vuepress/nav/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,9 @@ module.exports = [
5757
items: [
5858
{
5959
text: 'Project',
60-
link: '/project/'
60+
items: [
61+
{ text: 'Project', link: '/project/'},
62+
]
6163
},
6264
{
6365
text: 'Tools Sharing',

docs/.vuepress/theme/components/Comments.vue

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,6 @@ export default {
4141
this.createValine()
4242
}, 180)
4343
}
44-
45-
/**
46-
* TODO:
47-
* 1. 使用其他方法更新评论组件 或者使用其他较为好用的评论组件
48-
* 2. 添加categories and tag
49-
* 3. 更换其他主题
50-
*/
5144
}
5245
}
5346
}

docs/.vuepress/theme/components/DropdownLink.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,12 +102,12 @@ export default {
102102
font-size 0.9em
103103
a
104104
display block
105-
line-height 1.7rem
105+
line-height 1.5rem
106106
position relative
107107
border-bottom none
108108
font-weight 400
109109
margin-bottom 0
110-
padding 0 1.5rem 0 1.25rem
110+
padding 0 1.2rem 0 1.8rem
111111
&:hover
112112
color $accentColor
113113
&.router-link-active
@@ -144,7 +144,7 @@ export default {
144144
line-height 2rem
145145
.dropdown-subitem
146146
font-size 14px
147-
padding-left 1rem
147+
padding-left 0.2rem
148148
149149
@media (min-width: $MQMobile)
150150
.dropdown-wrapper

docs/.vuepress/theme/global-components/Archives.vue

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1+
<!--
2+
* @Description: Achieve Archives
3+
* @Author: finen
4+
* @LastEditors: Please set LastEditors
5+
* @Date: 2019-03-20 21:33:36
6+
* @LastEditTime: 2019-03-24 02:36:15
7+
-->
8+
19
<template>
210
<div class="archives-content" style="margin-top: 50px">
11+
<div class="content-top">嗯..! 目前共计 {{ArchivesArrayLength}} 篇日志!继续努力。</div>
312
<div class="block">
413
<el-timeline :reverse="true">
514
<el-timeline-item
@@ -10,10 +19,10 @@
1019
>
1120
<el-card>
1221
<p class="article-title">
13-
<router-link :to="item.regularPath">{{ item.frontmatter.title}}</router-link>
22+
<router-link :to="item.regularPath">{{ item.frontmatter.title }}</router-link>
1423
</p>
1524
<p>Finen于{{ item.frontmatter.date}}发布该文章</p>
16-
<!-- <el-tag>原创</el-tag><br/> -->
25+
<el-tag>原创</el-tag><br/>
1726
<div class="archives-tag">
1827
<p class="article-tag">
1928
Tags:
@@ -38,19 +47,19 @@ export default {
3847
},
3948
data() {
4049
return {
41-
ArchivesArray: []
50+
ArchivesArray: [],
51+
ArchivesArrayLength: 0
4252
};
4353
},
4454
mounted: function() {
4555
this.filterArchivesList();
4656
},
47-
computed: {
48-
// 用于刷选frontmatter中有post: true的数据
49-
filterList() {}
50-
51-
//将筛选出来的数据进行时间排序
52-
},
5357
methods: {
58+
/**
59+
* @description: select post=true
60+
* @param {type}
61+
* @return:
62+
*/
5463
filterArchivesList() {
5564
this.pages.forEach(element => {
5665
if (element.frontmatter.post == true) {
@@ -61,7 +70,14 @@ export default {
6170
});
6271
// 通过时间进行排序
6372
this.ArchivesArray.sort(this.compare("ArticleDate"));
73+
// count Archives length
74+
this.ArchivesArrayLength = this.ArchivesArray.length;
6475
},
76+
/**
77+
* @description: format date
78+
* @param {type}
79+
* @return:
80+
*/
6581
formatDate(time) {
6682
var dateTime = new Date(new Date(time).getTime());
6783
var y = dateTime.getFullYear();
@@ -71,6 +87,11 @@ export default {
7187
var sendDate = y + "-" + m + "-" + d;
7288
return sendDate;
7389
},
90+
/**
91+
* @description: 对时间进行排序
92+
* @param {type}
93+
* @return:
94+
*/
7495
compare(pro) {
7596
return function (obj1, obj2) {
7697
var val1 = obj1[pro];
@@ -88,6 +109,13 @@ export default {
88109
};
89110
</script>
90111
<style>
112+
.archives-content>.content-top{
113+
margin: 5px 0 15px 0px;
114+
font-size: 18px;
115+
font-weight: 500;
116+
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
117+
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
118+
}
91119
.el-timeline-item__content > .el-card > .el-card__body {
92120
text-align: left;
93121
}

docs/.vuepress/theme/global-components/HomeLayout.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<hr>
2323
<div class="footer">
24-
<p>Copyright © 2017-2018 Finen</p>
24+
<p>Copyright © 2017-2019 Finen</p>
2525
</div>
2626
</div>
2727
</template>
Lines changed: 75 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,35 @@
11
<template>
22
<div class="tag-content">
33
<div class="tags-cloud">
4-
<el-badge :value="5" class="item" >
5-
<el-button size="small">git</el-button>
4+
<el-badge v-for="item in TagsCount" value="" class="item" >
5+
<el-button size="medium" @click="filterArticle(item.tagName)"><strong>#{{item.tagName}}</strong> @({{item.number}})</el-button>
66
</el-badge>
77
</div>
8+
<div class="tag-article">
9+
<div class="block">
10+
<el-timeline :reverse="true">
11+
<el-timeline-item
12+
v-for="items in selectArticle"
13+
placement="top"
14+
icon="el-icon-loading"
15+
>
16+
<el-card>
17+
<p class="article-title">
18+
<router-link :to="items.regularPath">{{ items.frontmatter.title }}</router-link>
19+
</p>
20+
<p>Finen于{{ items.frontmatter.date}}发布该文章</p>
21+
<!-- <el-tag>原创</el-tag><br/> -->
22+
<div class="archives-tag">
23+
<p class="article-tag">
24+
Tags:
25+
<el-tag v-for="tag in items.frontmatter.tags">{{tag}}</el-tag>
26+
</p>
27+
</div>
28+
</el-card>
29+
</el-timeline-item>
30+
</el-timeline>
31+
</div>
32+
</div>
833
</div>
934
</template>
1035

@@ -19,27 +44,69 @@ export default {
1944
},
2045
data() {
2146
return {
22-
TagsArray: [],
23-
tagsCloud: []
47+
tagsCloud: [], // Tags的所有数据的数组
48+
TagsCount: [], // 统计完成的Tags
49+
selectArticle: [], // 通过tag选择出来的文章
2450
};
2551
},
2652
mounted: function() {
2753
this.filterTagsList();
54+
this.getTagsCloud();
55+
2856
},
2957
methods: {
3058
filterTagsList() {
3159
this.pages.forEach(element => {
60+
// filter data
3261
if (element.frontmatter.post == true) {
33-
this.TagsArray.push(element);
34-
element.tags = element.frontmatter.tags;
3562
element.frontmatter.tags.forEach(item => {
3663
this.tagsCloud.push(item);
3764
});
3865
}
3966
});
40-
console.log(this.tagsCloud);
41-
console.log(this.tagsCloud.length);
67+
},
68+
/**
69+
* tags count
70+
*/
71+
getTagsCloud () {
72+
let map = this.tagsCloud.reduce((m, x) => m.set(x, (m.get(x) || 0) + 1), new Map())
73+
let arrLength = Array.from(map.values()).length;
74+
for (let index = 0; index < arrLength; index++) {
75+
let jsonTag = {};
76+
jsonTag.tagName = Array.from(map.keys())[index];
77+
jsonTag.number = Array.from(map.values())[index];
78+
this.TagsCount.push(jsonTag);
79+
}
80+
},
81+
filterArticle (tag) {
82+
this.selectArticle = [];
83+
this.pages.forEach(element => {
84+
if (element.frontmatter.post == true && element.frontmatter.tags.includes(tag)) {
85+
this.selectArticle.push(element);
86+
}
87+
});
4288
}
4389
}
4490
};
4591
</script>
92+
93+
<style>
94+
.tags-cloud>.el-badge>.el-button{
95+
margin: 0px 5px 12px 33px;
96+
}
97+
.el-card > .el-card__body > .article-title {
98+
font-size: 20px;
99+
font-weight: 600;
100+
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
101+
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
102+
}
103+
.archives-tag > .article-tag {
104+
font-size: 14px;
105+
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
106+
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
107+
}
108+
.archives-tag > .article-tag > .el-tag {
109+
margin-left: 5px;
110+
}
111+
</style>
112+

0 commit comments

Comments
 (0)