perf: pager component display logical optimization

rainbowatcher commented 2 years ago

Related ISSUE

Type Of Change

[ ] 🐞 Bug fix (non-breaking change which fixes an issue)
[x] ✨ New feature (non-breaking change which adds functionality)
[x] 📝 Document (This change requires a documentation update)
[x] 🎨 Theme style (Theme style beautification)
[ ] ⚠ Breaking change (fix or feature that would cause existing functionality to not work as expected)
[ ] 🔨 Workflow (Workflow changes)

Clear Describe

pager component display logical optimization

Description

according the habit to most people, put button "previous" to left and the button "next" to right.
use grid style on Pager component.
add a little animation to these button.
post title inside the button limited to 2 lines.
add markdown sub & sup syntax support.
add the docs about.

Test Case

Scrrenshots

This is what the Pager component display in my blog. When the title of one of the buttons occupies two lines and the other only occupies one line, the display is abnormal.

and after will be like this

and below is the screenshot of pc and pad

the two markdown file is for test.

vercel[bot] commented 2 years ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
v2-vuepress-theme-gungnir	✅ Ready (Inspect)	Visit Preview	May 27, 2022 at 6:48AM (UTC)
vuepress-theme-gungnir	❌ Failed (Inspect)		May 27, 2022 at 6:48AM (UTC)

rainbowatcher commented 2 years ago

@Renovamen 辛苦帮我review一下🍺

Renovamen / vuepress-theme-gungnir