Components

The plugin provides several components that you can use when writing blog. The components are named with the prefix Sb for consistency.

To customize your own styles, you can refer to and use the Client APIs provided by the plugin.

SbArticleList

EXAMPLE

Hello World

<h1 id="hello-world" tabindex="-1"><a class="header-anchor" href="#hello-world" aria-hidden="true">#</a> Hello World</h1> <SbTagsInArticle></SbTagsInArticle><p>Hi, This is my first post.</p> <p><RouterLink to="/guide/">Click here to back to the Guide</RouterLink>.</p>

testtest1

Using TailwindCSS in Vuepress2

<h1 id="using-tailwindcss-in-vuepress2" tabindex="-1"><a class="header-anchor" href="#using-tailwindcss-in-vuepress2" aria-hidden="true">#</a> Using TailwindCSS in Vuepress2</h1> <SbTagsInArticle></SbTagsInArticle><p>TailwindCSS is the best CSS framework that I recommand you to use.</p> <p>In vuepress, there is a <strong>easy way</strong>...</p> <p><RouterLink to="/guide/">Click here to back to the Guide</RouterLink>.</p>

vuepress2tailwindcss

Test

<h1 id="test" tabindex="-1"><a class="header-anchor" href="#test" aria-hidden="true">#</a> Test</h1> <SbTagsInArticle></SbTagsInArticle><div class="language-bash line-numbers-mode" data-ext="sh"><pre v-pre class="language-bash"><code><span class="token function">npm</span> init <span class="token function">npm</span> <span class="token function">install</span> vuepress </code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>add <code v-pre>config.js</code></p> <div class="language-javascript line-numbers-mode" data-ext="js"><pre v-pre class="language-javascript"><code>sssssss <span class="token punctuation">{</span> <span class="token punctuation">}</span> </code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><RouterLink to="/guide/">Click here to back to the Guide</RouterLink>.</p>

my-testtest1

SbArticleList show all articles in a list. You can add the components in your .md or .vue file by yourselfs.

Usage

<sb-article-list></sb-article-list>

<!-- or -->
<SbArticleList></SbArticleList>

 

SbArticleListByTag

EXAMPLE

<SbArticleListByTag filter="test1" />

SbArticleListByTag show the articles filtered by tag. You can add the components in your .md or .vue file by yourselfs.

Usage

The attribute filter for the component is required. For the example given, it set the filter to test1 for the components.

<sb-article-list-by-tag filter="TAG-NAME"></sb-article-list-by-tag>

<!-- or -->
<SbArticleListByTag filter="TAG-NAME"></SbArticleListByTag>

filter

• type: string
• input: tag name

 

SbTagClouds

EXAMPLE

 

SbTagClouds show all tags the articles used. You can add the components in your .md or .vue file by yourselfs.

Usage

<sb-tag-clouds></sb-tag-clouds>

<!-- or -->
<SbTagClouds></SbTagClouds>

 

SbTagsInArticle

EXAMPLE

 

SbTagsInArticle will show all tags of the current article used. You can add the components in your .md or .vue file by yourselfs.

Usage

<sb-tags-in-article></sb-tags-in-article>

<!-- or -->
<SbTagsInArticle></SbTagsInArticle>