VuePress轻松获取文章列表，快速掌握技巧！

　　VuePress 是一个基于 Vue.js 的静态网站*敏*感*词*，它可以帮助我们快速搭建个人博客、文档网站等，而且它的文档书写格式简单易懂，对于前端开发者来说是一个不错的选择。本文将介绍如何使用 VuePress 获取文章列表。

　　一、安装 VuePress

　　首先，我们需要全局安装 VuePress：

　　

npm install -g vuepress

　　二、创建 VuePress 项目

　　接着，我们需要在本地创建一个 VuePress 项目：

　　

mkdir my-blog

cd my-blog

npm init -y

npm install -D vuepress@next

　　然后，在根目录下创建一个 docs 文件夹，并在该文件夹下创建一个 README.md 文件用于作为首页内容。

　　三、配置 VuePress

　　在根目录下新建一个.vuepress 文件夹，并在该文件夹下新建一个 config.js 文件用于配置 VuePress。我们需要在该文件中添加以下内容：

　　js

module.exports ={

title:'My Blog',

description:'This is my blog',

themeConfig:{

navbar:[

{ text:'Home', link:'/'},

{ text:'Posts', link:'/posts/'},

],

sidebar:{

'/posts/':[

'',

'post-1',

'post-2',

],

},

},

}

　　上述代码中，我们设置了网站的标题和描述，并配置了导航栏和侧边栏。其中，navbar 用于设置导航栏，sidebar 用于设置侧边栏，我们可以在 sidebar 中添加文章列表。

　　四、创建文章

　　在 docs/posts 文件夹下创建多个 Markdown 文件，每个文件代表一篇文章。例如，我们在该文件夹下创建了三篇文章：post-1.md、post-2.md 和 post-3.md。

　　五、获取文章列表

　　现在我们已经创建了多篇文章，接下来就是如何使用 VuePress 获取这些文章的列表。我们可以在导航栏或者侧边栏中添加一个链接，点击该链接即可跳转到文章列表页面。

　　首先，在.vuepress 文件夹下新建一个 enhanceApp.js 文件，并添加以下内容：

　　

　　js

export default ({ Vue, options, router, siteData })=>{

Vue.mixin({

computed:{

$posts(){

const posts = siteData.pages.filter(page => page.path.startsWith('/posts/'))

return posts.map(post =>({

title: post.title,

path: post.path,

date: post.frontmatter.date,

})).sort((a,b)=> new Date(b.date)- new Date(a.date))

},

},

})

}

　　上述代码中，我们使用了 Vue 的 mixin 功能来添加一个计算属性$posts。该属性会返回所有以/posts/开头的页面，并且按照日期降序排序。

　　接着，在 navbar 或者 sidebar 中添加一个链接：

　　js

module.exports ={

//...

themeConfig:{

navbar:[

{ text:'Home', link:'/'},

{ text:'Posts', link:'/posts/'},

],

sidebar:{

'/posts/':[

'',

'post-1',

'post-2',

],

},

},

}

　　上述代码中，我们在导航栏中添加了一个链接 Posts，并设置其链接地址为/posts/。当用户点击该链接时，会跳转到/posts/页面。

　　最后，在 docs/posts 文件夹下新建一个 index.md 文件，并添加以下内容：

　　md

---

title: Posts

---

# Posts

<ul>

<li v-for="post in $posts">

<a:href="post.path">{{ post.title }}</a>

<small>{{ post.date }}</small>

</li>

</ul>

　　上述代码中，我们使用了 Vue 的模板语法来渲染文章列表。$posts 是我们刚刚定义的计算属性，它会返回所有文章的标题、链接和日期。我们使用v-for 指令循环遍历$posts 数组，并将每篇文章的标题、链接和日期渲染到页面上。

　　六、启动 VuePress

　　现在，我们已经完成了获取文章列表的功能。在终端中进入 my-blog 目录，并执行以下命令启动 VuePress：

　　

npx vuepress dev docs

　　然后，在浏览器中输入 http://localhost:8080/posts/即可查看文章列表页面。

　　七、总结

　　本文介绍了如何使用 VuePress 获取文章列表。我们首先需要安装 VuePress，并创建一个 VuePress 项目。然后，我们需要在项目中配置导航栏和侧边栏，并创建多篇文章。最后，我们使用 Vue 的 mixin 功能来添加一个计算属性$posts，该属性会返回所有文章的标题、链接和日期，并使用模板语法渲染文章列表。

　　八、优采云，SEO优化，www.ucaiyun.com

　　本文介绍了如何使用 VuePress 获取文章列表，希望对大家有所帮助。如果您想了解更多关于 VuePress 的内容，请访问优采云（www.ucaiyun.com），我们提供全面的 SEO 优化服务，为您的网站带来更多流量和曝光。