如何将WordPress作为Eleventy的无头CMS来使用

热门技术勘探工
161 阅读7分钟

在过去的几年里，静态网站生成和Jamstack概念从小众工具发展到主流开发方法。

其好处是很吸引人的。

  • 更简单的部署和静态托管
  • 更好的安全性；很少有后端系统可以被利用
  • 易于备份和使用Git的文档版本控制
  • 良好的开发体验，以及
  • 超快的性能

不幸的是，静态网站生成器（SSG）项目很少被移交给客户。像Jekyll、Hugo和Gatsby这样的SSG是为开发者设计的。浏览版本分支、更新Markdown文档和运行命令行构建过程对于来自内容管理系统上的一键发布世界的编辑来说是令人沮丧的。

本教程介绍了一种让每个人都保持快乐和积极性的方法。...

  • 内容编辑人员可以使用WordPress来编辑和预览文章
  • 开发人员可以将这些内容导入Eleventy来建立一个静态网站

无头CMS和松散耦合的API

这里说明的一些概念被晦涩难懂的行话和术语所笼罩。我会努力避免，但了解一般的方法是很有帮助的。

大多数内容管理系统（CMS）提供。

  1. 一个内容控制面板，用于管理页面、帖子、媒体、类别、标签等。
  2. 网页生成系统，将内容插入模板中。这通常发生在用户请求页面时的需求。

这有一些缺点。

  • 网站可能被限制在CMS及其插件的能力范围内。
  • 内容通常存储在HTML中，所以很难重复使用--例如，在移动应用程序中使用相同的内容。
  • 页面的渲染过程可能很慢。内容管理系统通常提供缓存选项以提高性能，但当数据库故障时，整个网站可能会消失。
  • 切换到一个替代/更好的CMS并不容易。

为了提供额外的灵活性，无头CMS有一个内容控制面板，但是，可以通过API访问数据，而不是页面模板化。然后，任何数量的系统都可以使用相同的内容。例如。

  • 一个SSG可以在构建时获取所有的内容并呈现一个完整的网站
  • 另一个SSG可以以不同的方式建立一个网站--例如，使用优质内容
  • 一个移动应用程序可以根据需要获取内容，以显示最新的更新。

无头CMS解决方案包括Sanity.io和Contentful。这些都很强大，但需要编辑学习一个新的内容管理系统。

WordPress的REST API

几乎有40%的网站使用WordPress（包括SitePoint.com）。大多数内容编辑都会遇到这个内容管理系统，而且很多人每天都在使用它。

自2016年4.7版本发布以来，WordPress已经提供了一个REST API。该API允许开发人员访问和更新存储在CMS中的任何数据。例如，要获取最近的十个帖子，你可以发送一个请求到。

yoursite.com/wp-json/wp/v2/posts?orderby=date&order=desc

注意：这个REST URL只有在WordPress设置中设置了Post name等漂亮的permalinks的情况下才能工作。如果网站使用默认URL，REST端点将是<yoursite .com/?rest_route=wp/v2/posts?orderby=date&order=desc>。

这将返回包含每个帖子的大对象数组的JSON内容。

[
  {
    "id": 33,
    "date": "2020-12-31T13:03:21",
    "date_gmt": "2020-12-31T13:03:21",
    "guid": {
      "rendered": "https://mysite/?p=33"
    },
    "modified": "2020-12-31T13:03:21",
    "modified_gmt": "2020-12-31T13:03:21",
    "slug": "my-post",
    "status": "publish",
    "type": "post",
    "link": "https://mysite/my-post/",
    "title": {
      "rendered": "First post"
    },
    "content": {
      "rendered": "<p>My first post. Nothing much to see here.</p>",
      "protected": false
    },
    "excerpt": {
      "rendered": "<p>My first post</p>",
      "protected": false
    },
    "author": 1,
    "featured_media": 0,
    "comment_status": "closed",
    "ping_status": "",
    "sticky": false,
    "template": "",
    "format": "standard",
    "meta": [],
    "categories": [1],
    "tags": []
   }
]

WordPress默认返回十个帖子。HTTP标头x-wp-total ，返回帖子的总数，x-wp-totalpages ，返回页面的总数。

注意：读取公共数据不需要WordPress认证，因为......它是公共的只有当你试图添加或修改内容时才需要认证。

因此，可以把WordPress作为一个无头CMS，并把页面数据导入到一个静态网站生成器，如Eleventy。你的编辑们可以继续使用他们熟悉的工具，而不管你用什么程序来发布网站。

WordPress的警告

下面的章节描述了如何将WordPress的帖子导入到Eleventy生成的网站中。

在一个理想的世界里，你的WordPress模板和Eleventy主题是相似的，所以页面预览与最终的网站呈现相同。这可能很困难：WordPress的REST API输出HTML，而这些代码可以被插件和主题大大改变。一个旋转木马、商店产品或联系表格可能最终出现在你的静态网站中，但由于它缺少客户端资产或对服务器端API的Ajax请求而无法运行。

我的建议是：你的WordPress设置得越简单，把它作为一个无头CMS使用就越容易。不幸的是，你的客户安装的那57个基本插件可能会带来一些挑战。

安装WordPress

下面的示范代码假定你在你的电脑上运行WordPress，网址是http://localhost:8001/。你可以手动安装Apache、PHP、MySQL和WordPress，使用多合一的安装程序，如XAMPP，甚至可以访问一个实时服务器。

或者，你可以使用Docker来管理安装和配置。创建一个新的目录，如wpheadless ，包含一个docker-compose.yml 文件。

version: '3'

services:

  mysql:
    image: mysql:5
    container_name: mysql
    environment:
      - MYSQL_DATABASE=wpdb
      - MYSQL_USER=wpuser
      - MYSQL_PASSWORD=wpsecret
      - MYSQL_ROOT_PASSWORD=mysecret
    volumes:
      - wpdata:/var/lib/mysql
    ports:
      - "3306:3306"
    networks:
      - wpnet
    restart: on-failure

  wordpress:
    image: wordpress
    container_name: wordpress
    depends_on:
      - mysql
    environment:
      - WORDPRESS_DB_HOST=mysql
      - WORDPRESS_DB_NAME=wpdb
      - WORDPRESS_DB_USER=wpuser
      - WORDPRESS_DB_PASSWORD=wpsecret
    volumes:
      - wpfiles:/var/www/html
      - ./wp-content:/var/www/html/wp-content
    ports:
      - "8001:80"
    networks:
      - wpnet
    restart: on-failure

volumes:
  wpdata:
  wpfiles:

networks:
  wpnet:

从你的终端运行docker-compose up 来启动WordPress。这在第一次运行时可能需要几分钟，因为所有的依赖项必须下载和初始化。

在主机上将创建一个新的wp-content 子目录，其中包含已安装的主题和插件。如果你使用的是Linux、macOS或Windows WSL2，你可能发现这个目录是由root 用户创建的。你可以运行sudo chmod 777 -R wp-content ，授予所有用户读写权限，这样你和WordPress都可以管理这些文件。

注意：chmod 777 是不理想的。一个稍微安全的选项是sudo chown -R www-data:<yourgroup> wp-content ，然后是sudo chmod 774 -R wp-content 。这将授予Apache和你的组中的任何人写权限。

在你的浏览器中导航到http://localhost:8001/，并遵循WordPress的安装过程。

install WordPress

根据需要修改你的网站的设置，记得在设置>路径链接中设置漂亮的路径链接，如帖子名称。然后添加或导入一些帖子，这样你就有数据可以在Eleventy中测试。

保持WordPress运行，但一旦你准备好关闭一切，就从项目目录中运行docker-compose down 。

安装Eleventy

Eleventy是一个流行的Node.js静态网站生成器。Eleventy入门教程描述了一个完整的设置，但下面的说明显示了基本步骤。

确保你已经安装了8.0或以上版本的Node.js，然后创建一个项目目录并初始化package.json 文件。

mkdir wp11ty
cd wp11ty
npm init

安装Eleventy和node- fetch的Fetch兼容库作为开发依赖项。

npm install @11ty/eleventy node-fetch --save-dev

然后创建一个新的.eleventy.js 配置文件，设置源码 (/content) 和构建 (/build) 子目录。

// .eleventy.js configuration
module.exports = config => {

  return {

    dir: {
      input: 'content',
      output: `build`
    }

  };

};

继续阅读如何将WordPress作为Eleventy的无头CMS在SitePoint上使用。

avatar
文章
阅读
粉丝