diff --git a/src/api/like.js b/src/api/like.js
new file mode 100644
index 0000000000000000000000000000000000000000..e611eec90dd06f9d14a33cb936e9ea3e26359c49
--- /dev/null
+++ b/src/api/like.js
@@ -0,0 +1,34 @@
+import request from '@/util/request'
+
+// 关注
+export function like(id) {
+  return request(({
+    url: `/post/like`,
+    method: 'get',
+    params: {
+        topic_id: id
+    }
+  }))
+}
+
+// 关注
+export function unLike(id) {
+  return request(({
+    url: `/post/unlike`,
+    method: 'get',
+    params: {
+        topic_id: id
+    }
+  }))
+}
+
+// 验证是否关注
+export function hasLiked(id) {
+  return request(({
+    url: `/post/hasliked`,
+    method: 'get',
+    params: {
+        topic_id: id
+    }
+  }))
+}
\ No newline at end of file
diff --git a/src/api/post.js b/src/api/post.js
index 84d46265b769d927b99471dcf744386201f794f0..69e0c7d1ecb06dbe5bfb4a31f7cb28ba8b92a3d4 100644
--- a/src/api/post.js
+++ b/src/api/post.js
@@ -1,13 +1,14 @@
 import request from '@/util/request'
 
-export function getList(pageNo, size, tab) {
+export function getList(pageNo, size, tab, userid) {
     return request(({
         url: '/post/list',
         method: 'get',
         params: {
             pageNo: pageNo,
             size: size,
-            tab: tab
+            tab: tab,
+            userid:userid
         }
     }))
 }
diff --git a/src/assets/app.css b/src/assets/app.css
index 252ef00357497487121859f3d695696c10ec810f..def002df534de85d78125998d8c99dbea02d13f0 100644
--- a/src/assets/app.css
+++ b/src/assets/app.css
@@ -159,6 +159,36 @@ a:hover {
   font-size: 14px !important;
 }
 
+.like{
+  color: rgb(64, 158, 255);
+  background: rgb(205, 228, 255);
+  height: 30px;
+  width: 110px;
+  border-radius: 15px;
+  border:1px;
+  }
+
+.like:hover
+{
+  color: rgb(255, 255, 255);
+  background: rgb(64, 158, 255);
+}
+
+.liked{
+  color: rgb(255, 255, 255);
+  background: rgb(64, 158, 255);
+  height: 30px;
+  width: 110px;
+  border-radius: 15px;
+  border:1px;
+  }
+
+.liked:hover
+{
+  color: rgb(255, 255, 255);
+  background: rgb(0, 128, 255);
+}
+
 .center {
   width: 100%;
   height: 100%;
diff --git a/src/i18n/lang/en.js b/src/i18n/lang/en.js
index f2e5a732c8f8627738c6fc8d64a0c45b15c4db04..b9dc989de2a90a4f743a32970990dbe02d17e4f4 100644
--- a/src/i18n/lang/en.js
+++ b/src/i18n/lang/en.js
@@ -58,6 +58,8 @@ export default {
     posting: 'Publish idea',
     settled: 'Sign up',
     signIn: 'Sign in',
+    changeBillboard: 'Change billboard',
+    changeSentence: 'Change daliy sentence',
     promotion: 'Promotion',
     detail: 'Not received related promotion!',
     sentence: 'Daily sentence'
@@ -83,7 +85,8 @@ export default {
     latest: 'Latest topics',
     release: 'Released',
     view: 'Views',
-    hot: 'Hot Topics'
+    hot: 'Hot Topics',
+    star: 'Favourites'
   },
   user: {
     score: 'Score',
@@ -117,7 +120,6 @@ export default {
     placeholder: 'Add a comment...',
     submit: 'Submit',
     success: 'Comment successfully',
-    empty: 'Comment cannot be empty',
     failed: 'Cannot comment to this post, {0}'
   },
   common: {
diff --git a/src/i18n/lang/zh.js b/src/i18n/lang/zh.js
index 4923c5f50cf2846592cb26cadab3ca114eb6e07b..fd218e6ef73c0541bd4a3ad2e2f99cefa79584e9 100644
--- a/src/i18n/lang/zh.js
+++ b/src/i18n/lang/zh.js
@@ -58,6 +58,8 @@ export default {
     posting: '发表想法',
     settled: '马上入驻',
     signIn: '社区登入',
+    changeBillboard: '修改公告栏',
+    changeSentence: '修改每日一句',
     promotion: '推广',
     detail: '未收到有关推广！',
     sentence: '每日一句'
@@ -83,7 +85,8 @@ export default {
     latest: '最新主题',
     release: '发布于',
     view: '浏览',
-    hot: '热门主题'
+    hot: '热门主题',
+    star: '收藏夹'
   },
   user: {
     score: '积分',
@@ -117,7 +120,6 @@ export default {
     placeholder: '此处输入评论...',
     submit: '提交',
     success: '评论成功',
-    empty: '评论不能为空',
     failed: '无法在此帖发表评论, {0}'
   },
   common: {
diff --git a/src/view/post/Author.vue b/src/view/post/Author.vue
index 9a57feeaf68fedc3f8b2562213fe98173c69b0d0..77687fe8289422f0d2e36d7e48d48b0535218e85 100644
--- a/src/view/post/Author.vue
+++ b/src/view/post/Author.vue
@@ -52,6 +52,7 @@
 </template>
 
 <script>
+import { like, hasLiked, unLike } from '@/api/like'
 import { follow, hasFollow, unFollow } from '@/api/follow'
 import { mapGetters } from "vuex";
 export default {
@@ -64,7 +65,7 @@ export default {
   },
   data() {
     return {
-      hasFollow: false,
+      hasLiked: false,
     };
   },
   mounted() {
@@ -77,9 +78,13 @@ export default {
     fetchInfo() {
       if(this.token != null && this.token !== '')
       {
-        hasFollow(this.user.id).then(value => {
+        hasLiked(this.user.id).then(value => {
           const { data } = value
-          this.hasFollow = data.hasFollow
+          this.hasLiked = data.hasLiked
+        })
+        hasFollow(this.user.id).then(value => {
+            const { data } = value
+            this.hasFollow = data.hasFollow
         })
       }
     },
diff --git a/src/view/post/Detail.vue b/src/view/post/Detail.vue
index 9ba65ea9772f066e424323baa885c2ec93145948..977d84d2df6effd9d8d9a8fce21852819c24a7f6 100644
--- a/src/view/post/Detail.vue
+++ b/src/view/post/Detail.vue
@@ -5,6 +5,7 @@
     </div>
     <!-- 文章 -->
     <div class="column is-three-quarters">
+
       <!--主题-->
       <el-card class="box-card" shadow="never">
         <div slot="header" class="has-text-centered">
@@ -33,6 +34,18 @@
 
         <!-- MarkDown-->
         <div id="preview" />
+        <!-- <span>
+            <a @click="()=>{{item.Supports+=1};addLikeNum(item.Id)}">
+              <a-icon
+                type="like-o"
+                theme="twoTone"
+                :two-tone-color="hasExisted(item.Id)?'#d32':''"
+                style="margin-right:18px"
+                @click="addLikeNum(item.Id)"
+              />
+              {{item.Supports}}
+            </a>
+          </span> -->
 
         <!--标签-->
         <nav class="level has-text-grey is-size-7 mt-6">
@@ -51,6 +64,11 @@
               </b-taglist>
             </p>
           </div>
+
+          <!-- 点赞收藏功能 -->
+          <button class="like" v-show="!liked" @click="liking(topic.id)"><i class="fa fa-thumbs-o-up"> </i> 点赞并收藏</button>
+          <button class="liked" v-show="liked" @click="unliking(topic.id)"> 已收藏</button>
+
           <div v-if="token && user.id === topicUser.id" class="level-right">
             <router-link
               class="level-item"
@@ -76,6 +94,7 @@ import Author from "@/view/post/Author";
 import Comment from '@/component/Comment/Comment';
 import Vditor from "vditor";
 import "vditor/dist/index.css";
+import { like, hasLiked, unLike } from '@/api/like'
 
 export default {
   name: "TopicDetail",
@@ -85,6 +104,8 @@ export default {
   },
   data() {
     return {
+      liked:false,
+      clickedDate:[],
       flag: false,
       topic: {
         content: "",
@@ -96,6 +117,7 @@ export default {
   },
   mounted() {
     this.fetchTopic();
+    this.fetchInfo();
   },
   methods: {
     renderMarkdown(md) {
@@ -119,6 +141,41 @@ export default {
         this.flag = true;
       });
     },
+
+    fetchInfo() {
+    if(this.token != null && this.token !== '')
+    {
+      hasLiked(this.topic.id).then(value => {
+        console.log(value)
+        if(value.data!=null)this.liked = true;
+        else this.liked = false;
+      })
+    }
+  },
+    handleLike: function(id) {
+    if(this.token != null && this.token !== '')
+    {
+      like(id).then(response => {
+        const { message } = response
+        this.$message.success(message)
+        this.hasLiked = !this.hasLiked
+        this.user.followerCount = parseInt(this.user.followerCount) + 1
+      })
+    }
+    else{
+      this.$message.error('请先登录')
+      this.$router.push({ path: this.redirect || "/login" });
+    }
+  },
+    handleunLike: function(id) {
+      unLike(id).then(response => {
+        const { message } = response
+        this.$message.success(message)
+        this.hasLiked = !this.hasLiked
+        this.user.followerCount = parseInt(this.user.followerCount) - 1
+      })
+    },
+
     handleDelete(id) {
       deletePost(id).then((value) => {
         const { code, message } = value;
@@ -133,6 +190,16 @@ export default {
         }
       });
     },
+    //like and star
+    liking(id){
+      this.liked = true;
+      this.handleLike(id);
+    },
+    //cancel like
+    unliking(id){
+      this.liked = false;
+      this.handleunLike(id);
+    }
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/view/post/Index.vue b/src/view/post/Index.vue
index abb31377a5358c9588b4cc50b322443ee0fa3cff..be7cdfeb22a68d4c892a0244fdac91e724dfb442 100644
--- a/src/view/post/Index.vue
+++ b/src/view/post/Index.vue
@@ -133,6 +133,71 @@
               <div class="media-right" />
             </article>
           </el-tab-pane>
+          <el-tab-pane :label="$t('post.star')" name="star">
+            <article
+              v-for="(item, index) in articleList"
+              :key="index"
+              class="media"
+            >
+              <div class="media-left">
+                <figure class="image is-48x48">
+                  <img
+                    :src="`https://cn.gravatar.com/avatar/${item.userId}?s=164&d=monsterid`"
+                    style="border-radius: 5px"
+                  />
+                </figure>
+              </div>
+              <div class="media-content">
+                <div class="">
+                  <p class="ellipsis is-ellipsis-1">
+                    <el-tooltip
+                      class="item"
+                      effect="dark"
+                      :content="item.title"
+                      placement="top"
+                    >
+                      <router-link
+                        :to="{ name: 'post-detail', params: { id: item.id } }"
+                      >
+                        <span class="is-size-6">{{ item.title }}</span>
+                      </router-link>
+                    </el-tooltip>
+                  </p>
+                </div>
+                <nav class="level has-text-grey is-mobile is-size-7 mt-2">
+                  <div class="level-left">
+                    <div class="level-left">
+                      <router-link
+                        class="level-item"
+                        :to="{ path: `/member/${item.username}/home` }"
+                      >
+                        {{ item.alias }}
+                      </router-link>
+
+                      <span class="mr-1">
+                        {{ $t('post.release') }}:{{ dayjs(item.createTime).format("YYYY/MM/DD") }}
+                      </span>
+
+                      <span
+                        v-for="(tag, index) in item.tags"
+                        :key="index"
+                        class="tag is-hidden-mobile is-success is-light mr-1"
+                      >
+                        <router-link
+                          :to="{ name: 'tag', params: { name: tag.name } }"
+                        >
+                          {{ "#" + tag.name }}
+                        </router-link>
+                      </span>
+
+                      <span class="is-hidden-mobile">{{ $t('post.view') }}:{{ item.view }}</span>
+                    </div>
+                  </div>
+                </nav>
+              </div>
+              <div class="media-right" />
+            </article>
+          </el-tab-pane>
         </el-tabs>
       </div>
 
@@ -151,6 +216,8 @@
 
 <script>
 import { getList } from "@/api/post";
+
+import { mapGetters } from "vuex";
 import Pagination from "@/component/Pagination";
 
 export default {
@@ -168,12 +235,15 @@ export default {
       },
     };
   },
+  computed: {
+    ...mapGetters(["user"]),
+  },
   created() {
     this.init(this.tab);
   },
   methods: {
     init(tab) {
-      getList(this.page.current, this.page.size, tab).then((response) => {
+      getList(this.page.current, this.page.size, tab, this.user.id).then((response) => {
         const { data } = response;
         this.page.current = data.current;
         this.page.total = data.total;