innocode-digital/wp-prerender-aws-lambda

通过AWS Lambda生成客户端渲染内容的HTML。

安装次数: 1,663

依赖关系: 0

建议者: 0

安全: 0

星标: 0

关注者: 11

分支: 2

类型:wordpress-muplugin

1.6.0 2022-10-21 11:58 UTC

README

描述

通过AWS Lambda生成客户端渲染内容的HTML。此插件向AWS Lambda Prerender函数发送请求,该函数使用Puppeteer渲染内容,并通过REST API回调返回HTML。

安装

  • 建议使用Composer

    composer require innocode-digital/wp-prerender-aws-lambda
    

    默认情况下,它将被安装为必用插件。您可以通过composer.json中的extra.installer-paths来控制。

  • 另一种方式是将此存储库克隆到wp-content/mu-plugins/wp-content/plugins/

    cd wp-content/plugins/
    git clone git@github.com:innocode-digital/wp-prerender-aws-lambda.git
    cd wp-prerender-aws-lambda/
    composer install
    

如果插件作为常规插件安装,则从插件页面或WP-CLI激活wp plugin activate wp-prerender-aws-lambda激活AWS Lambda Prerender

配置

将以下常量添加到wp-config.php

define( 'AWS_LAMBDA_PRERENDER_KEY', '' );
define( 'AWS_LAMBDA_PRERENDER_SECRET', '' );
define( 'AWS_LAMBDA_PRERENDER_REGION', '' ); // e.g. eu-west-1

define( 'AWS_LAMBDA_PRERENDER_FUNCTION', '' ); // Optional, default value is "prerender-production-render"

在AWS上创建Lambda函数。默认名称为prerender-production-render,但您可以使用任何其他名称。有一个准备好的函数AWS Lambda Prerender

使用该函数的用户应在策略中具有InvokeFunction权限。

define( 'AWS_LAMBDA_PRERENDER_DB_TABLE', '' ); // Optional, default value is "innocode_prerender"

define( 'AWS_LAMBDA_PRERENDER_QUERY_ARG', '' ); // Optional, default value is "innocode_prerender"

可以更改存储HTML的数据库表名以及当无服务器函数向网站发送请求时使用的查询参数。

用法

插件在保存帖子/页面和术语时自动生成HTML,并更新相关内容(如首页),但您可以通过以下过滤器控制此行为,例如,如果您不希望在保存帖子时更新作者的存档页面,则使用以下过滤器。

add_filter( 'innocode_prerender_should_update_post_author', function (
    (bool) $should_update,
    int $object_id,
    $id
) : bool {
    // Do not update achive page of author with user id 5.
    if ( $id == 5 ) {
        return false;
    }

    return $should_update;
}, 10, 3 );

此外,当有人访问具有模板的任何对象(例如单个帖子)时,插件将“实时”生成HTML。如果数据库中没有当前对象当前版本的HTML,则将安排cron任务向Lambda发出新的请求。

如果主题不支持例如日期存档,则可以完全禁用它们。

add_filter( 'innocode_prerender_template', function ( string $template ) : string {
    if ( $template == 'date_archive' ) {
        return '';
    }

    return $template;
} );

此外,还可以添加自定义模板,除了现有模板外。

  1. Innocode\Prerender\Abstracts\AbstractTemplate类创建新模板。
...
use Innocode\Prerender\Abstracts\AbstractTemplate;

class YourTemplate extends AbstractTemplate
{
    ...
}
  1. 在您的模板类中实现存根方法。
  2. 将您的模板类对象添加到模板集合中。
$your_template = new YourTemplate();
innocode_prerender()->insert_templates( [ $your_template ] );

默认情况下,插件使用选择器#app来获取内容,即您的客户端应用程序被包裹在ID为app的块中。

<div id="app"></div>

如果需要更改选择器,请使用以下钩子。

add_filter( 'innocode_prerender_selector', function () : string {
    return '#main';
} )

注意

现有模板

  • post - 帖子、页面和自定义帖子类型
  • term - 分类、标签和自定义分类术语
  • author - 作者存档
  • frontpage - 首页
  • post_type_archive - 帖子类型存档
  • date_archive - 年、月和日存档

版本

如上所述,内容具有版本号,您可能希望在某个时候对其进行升级,最明显的情况是在客户端渲染布局中进行了更改。在这种情况下,需要增加新的版本。

if ( function_exists( 'innocode_prerender' ) ) {
    innocode_prerender()
        ->get_db()
        ->get_html_version()
        ->bump();
}

但是,您可以安装清除缓存按钮插件,该插件可以通过在管理面板中点击按钮来执行此操作。

在预渲染期间修改内容

有时需要预渲染的内容与我们在客户端获得的内容不同,例如您可能需要排除某些元素。在这种情况下,请使用JavaScript全局变量

if (window.__INNOCODE_PRERENDER__) {
    // Only for prerendering.
} else {
    // Only for client-side.
}