Add ability to see tags on a post

[unlikenesses]

Feature request

It would be very useful if a post could display its tags. At the moment as far as I can see tags are only viewable on their own 'tags' page. I would suggest displaying tags as "pills" underneath posts on the list page and on the individual post page.

What problem does this feature solve?

Currently you can't see what tags belong to a post. This would solve that problem.

What does the proposed API look like?

How should this be implemented in your opinion?

Are you willing to work on this yourself?

[dorsy99]

I have been looking for this as well, but I think it should go a little further and show a "Head" to a post which has the Title, date, author AND tags from Frontmatter. I'm happy to have a look and see if I can do it but I'm very new to Vue AND Vuepress/blog.

[Kocal]

I was able to do this by using $page.frontmatter.tags:

It's totally not practical, but you can use this as a current workaround:

---
title: The title
tags:
  - php
  - node.js
  - aws
  - chrome
---

# {{ $page.frontmatter.title }}

<PostTags :tags="$page.frontmatter.tags"/>

.vuepress/components/PostTags.vue:

<template>
  <div class="post-tags">
    <PostTag v-for="tag in tags" :tag="tag" />
  </div>
</template>

<script>
export default {
  name: 'PostTags',
  props: {
    tags: {
      type: Array,
      required: true,
    },
  },
};
</script>

<style scoped lang="stylus">
.post-tags
  display: flex
</style>

.vuepress/components/PostTag.vue:

<template>
  <span class="post-tag">
    <router-link :to="'/tag/' + tag">
      #{{ tag }}
    </router-link>
  </span>
</template>

<script>
export default {
  name: 'PostTag',
  props: {
    tag: {
      type: String,
      required: true,
    },
  },
};
</script>

<style scoped lang="stylus">
.post-tag
  margin-right: 4px

  a
    padding: 3px 8px
    border-radius: 25px
    background-color: $accentColor
    color: #fff
    font-size: .8rem
    text-decoration: none !important

    &:hover
      background-color: darken($accentColor, 10%)
</style>

[billyyyyy3320]

Hi @Kocal, would you like to open a pull request? Or I'm going to work on it.

[Kocal]

Hey :)

I prefer you to work on this, I'm really not familiar with Vuepress theme development and this theme either :D