feat: add article sign

add sticky and password icon

sticky article sorted at the top of the list

Author: reco_luan

components/NoteAbstractItem.vue

@@ -1,7 +1,9 @@
 <template>
   <div
     class="abstract-item">
+    <i v-if="item.frontmatter.sticky" class="iconfont reco-place-to-top"></i>
     <div class="title">
+      <i v-if="item.frontmatter.keys" class="iconfont reco-lock"></i>
       <router-link :to="item.path">{{item.title}}</router-link>
     </div>
     <div class="abstract" v-html="item.excerpt"></div>
@@ -27,6 +29,7 @@ export default {
 @require '../styles/recoConfig.styl'
 
 .abstract-item
+  position relative
   margin: 0 auto 20px;
   padding: 16px 20px;
   width 100%
@@ -36,14 +39,26 @@ export default {
   box-sizing: border-box;
   transition all .3s
   background-color $bgColor
+  .reco-place-to-top
+    position absolute
+    top -5px
+    left -3px
+    display inline-block
+    color $accentColor
+    font-size 2.4rem
   &:hover
     box-shadow: $boxShadowHover
   .title
     position: relative;
     font-size: 1.28rem;
     line-height: 36px;
     display: inline-block;
-    :after
+    a
+      color $textColor
+    .reco-lock
+      font-size 1.28rem
+      color $accentColor
+    &:after
       content: "";
       position: absolute;
       width: 100%;
@@ -55,7 +70,9 @@ export default {
       -webkit-transform: scaleX(0);
       transform: scaleX(0);
       transition: .3s ease-in-out;
-    :hover:after
+    &:hover a
+      color $accentColor
+    &:hover:after
       visibility visible
       -webkit-transform: scaleX(1);
       transform: scaleX(1);

example/docs/.vuepress/styles/palette.styl

@@ -1,2 +1,2 @@
-$accentColor = #424242
-$textColor = #232321
+// $accentColor = #424242
+// $textColor = #232321

example/docs/views/category2/2016/121501.md

@@ -5,6 +5,7 @@ tags:
  - tag3
 categories: 
  - category2
+sticky: true
 ---
 
 first page in category2

example/docs/views/category2/2017/092101.md

@@ -5,6 +5,8 @@ tags:
  - tag4
 categories: 
  - category2
+keys:
+ - '1232'
 ---
 
 second page in category2

layouts/Category.vue

@@ -54,8 +54,8 @@ export default {
     // 时间降序后的博客列表
     posts () {
       let posts = this.$currentCategories.pages
-      posts = this._filterPostData(posts)
       this._sortPostData(posts)
+      posts = this._filterPostData(posts)
       this._setPage(1)
       return posts
     },

layouts/Tag.vue

@@ -45,11 +45,11 @@ export default {
     // 时间降序后的博客列表
     posts () {
       let posts = this.$currentTags.pages
-      posts = this._filterPostData(posts)
       this._sortPostData(posts)
+      posts = this._filterPostData(posts)
       this._setPage(1)
       return posts
-    },
+    }
   },
 
   mounted () {

layouts/TimeLines.vue

@@ -54,6 +54,7 @@ export default {
     // 根据分类获取页面数据
     getPages (tag) {
       let pages = this.$site.pages
+      // 时间轴不进行制定处理
       pages = this._filterPostData(pages, true)
       // reverse()是为了按时间最近排序排序
       this.pages = pages.length == 0 ? [] : pages

mixins/index.js

@@ -7,13 +7,18 @@ export default {
       return tagColorArr[index]
     },
     _filterPostData (posts, isTimeline) {
+      const stickyArr = []
       posts = posts.filter(item => {
-        const { title, frontmatter: { home, date, publish }} = item
+        const { title, frontmatter: { home, date, publish, sticky }} = item
+        if (sticky) {
+          stickyArr.unshift(item)
+          return false
+        }
         return isTimeline === true
           ? !(home == true || title == undefined || date === undefined || publish === false)
           : !(home == true || title == undefined || publish === false)
       })
-      return posts
+      return stickyArr.concat(posts)
     },
     _sortPostData (posts) {
       posts.sort((a, b) => {
@@ -37,8 +42,9 @@ export default {
           let posts = articles.reduce((allData, currnetData) => {
             return [...allData, ...currnetData.pages]
           }, [])
-          posts = _filterPostData(posts)
+
           _sortPostData(posts)
+          posts = _filterPostData(posts)
 
           this.$themeConfig.posts = posts
           resolve(posts)