隆重推出 VuePress：使用 Vue 和 GraphQL 进行 WordPress 开发。

前言：

大约两年前，我创建了WordExpress，这是我第一次尝试完全使用 JavaScript 开发 WordPress 网站。它获得了相当不错的反响，目前在 GitHub 上拥有超过 1400 个 star。star的数量本身并不重要，但它确实凸显了一点：开发者希望使用 JavaScript 开发 WordPress 前端。

当时最难解决的问题之一是使用 GraphQL 进行服务器端渲染。WordPress 网站需要进行搜索引擎优化，而没有服务器端渲染，SEO 就无从谈起。两年过去了，情况发生了很大变化，现在借助Apollo ，使用 GraphQL 进行服务器端渲染已经容易得多。

过去一个月，我重新研究了 WordExpress，并找到了一个使用 Vue 而不是 React 的解决方案。当然，用 React 也完全可以实现（事实上，WordExpressSchema是前端无关的关键组件），但我一直在使用 Vue，而且它在服务器端渲染方面有非常完善的文档，所以我决定尝试一下。

我把这个新方案命名为VuePress，因为我非常擅长用词。

VuePress架构

VuePress 的后端由一个 Node 服务器（使用 Express）组成，该服务器带有一个 GraphQL 端点。GraphQL 端点使用Apollo 的GraphQLExpress ，它接受一个模式（schema）。WordExpressSchema 正是在这里发挥作用。您可以（也应该！）阅读有关该模式的文档。简而言之，该模式包含一些查询，这些查询通过连接到 WordPress 数据库并直接从中获取数据来解析。

VuePress 的前端由 Vue 组件构成。其中一些组件包含 GraphQL 查询。当服务器收到请求时，它会确定要渲染哪些组件，从 GraphQL 预取所需数据，将数据传递给模板，最后渲染 HTML。

创建博客

入门

VuePress代码库中的代码几乎包含了入门所需的一切。首先，克隆该代码库，然后按照 readme 文件中的说明进行操作即可。

$ git clone https://github.com/ramsaylanier/VuePress.git

关于自定义字段的说明：我个人使用 WordPress 的 advanced-custom-fields 插件，而且我使用的是专业版。你完全可以不用这个插件，但它确实能让你的工作轻松很多，而且所有 VuePress 的文档都默认你正在使用它。

按照说明操作后，即可启动开发服务器。

$ npm run dev

你应该会收到类似这样的内容：

让我们修改首页布局，添加页面标题。

现在看起来应该好一些了：

创建帖子列表

首先，我们创建一个页面来显示我们所有的帖子。

请注意布局组件的值是PostList，它会生成一些额外的自定义字段（这就是 ACF 的优势所在！）。PostType下拉菜单会告诉PostList组件要渲染 WordPress 中的哪种文章类型。目前，我们只有文章类型，这是默认设置。VuePress 还允许你为每个文章列表渲染不同的文章项组件。假设你有两个页面——一个是文章列表，一个是照片列表。每个页面中的列表项设计可能不同（文章包含文本，照片包含图片），因此你可能需要使用不同的组件来渲染该项。你可以创建一个全新的布局组件来处理不同的列表，但这会比较麻烦。

现在，让我们把新的“文章”页面添加到主导航菜单中。

保存菜单并刷新应用程序浏览器。您应该会在顶部菜单中看到“文章”页面。该页面如下所示：

瞧，只需几个步骤，我们就拥有了一个非常简单的博客。

创建自定义布局组件

假设我们要创建一个页面，页面侧边栏包含一个外部链接菜单。目前为止，我们还没有修改任何应用程序代码，但这种情况即将改变。首先，我们需要对自定义字段进行一些更新。

在 WordPress 后台，转到“自定义字段”->“字段组”->“页面字段”。选择页面字段，然后为“布局组件”字段添加新值。

点击最右侧的“更新”按钮保存更改。现在，我们创建一个名为“侧边栏菜单”的新页面字段，以便按名称渲染自定义菜单。我们希望此字段仅显示在具有“带侧边栏的页面”布局的页面上。点击“添加字段”按钮。

下面，我们希望添加一些条件逻辑来决定何时显示此字段。

保存更改。

现在，我们来为侧边栏创建一个新菜单。我的菜单会包含一些我喜欢的 Vue 资源链接。你的菜单可以随意设置！以下是我的菜单示例：

现在我们来创建一个新页面，它将使用侧边栏和自定义菜单。你可以随意命名这个页面——我把它命名为“资源”。

最后，您还需要记得将新页面添加到您的主导航菜单中。

太好了！这就是我们在 WordPress 后台需要做的全部工作了。现在，我们需要创建自定义布局文件。

布局组件位于/src/components/page/layouts。在该目录中，您会看到现有的布局组件。创建一个名为 的新文件PageWithSidebar.vue。它的内容将如下所示：

<template>
  <div class="wrapper">
    <menu-container class="sidebar" :menuName="getSidebarMenuName()">
      <ul class="menu" slot-scope="menu">
        <li class="item" v-for="item in menu.items" :key="item.id">
          <menu-link :link="item.navitem"/>
        </li>
      </ul>
    </menu-container>
    <div class="body">
      <post-content :content="page.post_content"/> 
    </div>
  </div>
</template>

<script>
import MenuContainer from '@/components/menu/menuContainer'
import MenuLink from '@/components/menu/menuLink'
import PostContent from '@/components/post/PostContent'
export default {
  name: 'page-with-sidebar',
  props: ['page'],
  components: {
    MenuContainer, MenuLink, PostContent
  },
  methods: {
    getSidebarMenuName () {
      return this.page.post_meta.filter(item => {
        return item.meta_key === 'sidebarmenu'
      })[0].meta_value
    }
  }
}
</script>

有几点需要注意。首先，请注意自定义menu-container组件。该组件包含一个 GraphQL 查询。它接受一个名为 `name` 的属性menuName，并使用该属性查询 GraphQL 以获取菜单中的项目。但首先，我们需要从当前页面的自定义字段中获取菜单名称。为此，我们需要对页面文章的元数据进行一些过滤。

值得一提的是，VuePress 自带GraphiQL—— 一个用于探索 GraphQL 的浏览器内 IDE。您可以访问 localhost:3000/graphiql 查看。点击此处，即可打开 GraphiQL，并查看名为“resources”的页面的页面查询，如下所示。

注意meta_keysidebarmenu和resources-menu。回到组件，可以看到它只是筛选了sidebarmenu键的文章元数据并获取了它的值。meta_valuePageWithSidebargetSidebarMenuNamemeta_value

现在，我们来看看菜单查询是什么样的。点击这里查看链接。

现在，菜单可以说是 WordPress 中最复杂的功能之一，因为它们在数据库中的保存方式很特别。每个菜单项都有一个 navitem，它要么是指向其他文章的链接，要么是带有自身文章元数据的自定义链接。在这个侧边栏菜单中，所有链接都是自定义的。不过幸运的是，我已经创建了一个 MenuLink 组件，它可以判断链接是内部链接还是外部链接，所以你只需要将 navitem 传递给它即可。

这是该组件的最终结果PageWithSidebar。

总结

虽然 VuePress 仍在积极开发中（我甚至还没为它写过任何测试，这让我很愧疚），但我认为它是朝着正确方向迈出的一步。能够编写 Vue 组件而不是使用 PHP 模板的感觉真好。内置作用域 CSS 或 CSS 模块也很棒。终于实现了服务器端渲染，这真是太好了。

接下来几周，我计划完善一些文档，并开发一套全面的测试套件。如果您有兴趣参与，请在Twitter上联系我。祝您开发愉快！