$pagination API

The $pagination API will return the basic page info for articles. With this API, you can get your articles data everywhere you need.

WARNING

Documents are still wrok in progress, the page is a incompelete version.

$pagination

Type: Array
Parent: usePageData().value

Usage

Use in the page, you just need:

$page.$pagination;

Or in the component, you need to import usePageData:

import { usePageData } from "@vuepress/client";
...
const pagination = usePageData().value.$pagination;

For example, if this is your articles:

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

and you'll get the results like this:

Result

[
  {
    "key": "v-55af5924",
    "url": "/post/hello-world/",
    "title": "Hello World",
    "tags": [
      "test",
      "test1"
    ],
    "content": "<h1 id=\"hello-world\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#hello-world\" aria-hidden=\"true\">#</a> Hello World</h1>\n<SbTagsInArticle></SbTagsInArticle><p>Hi, This is my first post.</p>\n<p><RouterLink to=\"/guide/\">Click here to back to the Guide</RouterLink>.</p>\n",
    "hero": "",
    "date": "2022-01-20",
    "updatedTime": 1689600798000
  },
  {
    "key": "v-0c2c6881",
    "url": "/post/using-tailwindcss-in-vuepress2/",
    "title": "Using TailwindCSS in Vuepress2",
    "tags": [
      "vuepress2",
      "tailwindcss"
    ],
    "content": "<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>\n<SbTagsInArticle></SbTagsInArticle><p>TailwindCSS is the best CSS framework that I recommand you to use.</p>\n<p>In vuepress, there is a <strong>easy way</strong>...</p>\n<p><RouterLink to=\"/guide/\">Click here to back to the Guide</RouterLink>.</p>\n",
    "hero": "/images/tailwindcss.v3.jpg",
    "date": "2022-01-22",
    "updatedTime": 1689572305000
  },
  {
    "key": "v-19b7f932",
    "url": "/post/test/",
    "title": "Test",
    "tags": [
      "my-test",
      "test1"
    ],
    "content": "<h1 id=\"test\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#test\" aria-hidden=\"true\">#</a> Test</h1>\n<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\n<span class=\"token function\">npm</span> <span class=\"token function\">install</span> vuepress\n</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>\n<div class=\"language-javascript line-numbers-mode\" data-ext=\"js\"><pre v-pre class=\"language-javascript\"><code>sssssss <span class=\"token punctuation\">{</span>\n\n<span class=\"token punctuation\">}</span>\n</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>\n",
    "hero": "",
    "date": "2022-01-20",
    "updatedTime": 1689572305000
  }
]

# $pagination API

# $pagination

# Usage

$pagination API

$pagination

Usage