自动配图2 渲染模板开发文档

更新于 2024年9月17日 说明书

自动配图2 渲染模板开发文档

本文介绍自动配图2 渲染模板的开发。请注意,这里的用词是开发,这意味着您需要一些简单的编程基础。

需要了解的基本概念

需要了解的基本概念

图层

图层是数字图像编辑中一个至关重要的概念,它允许图像被分成多个独立的层或平面,每个图层都可以包含图像元素,如文本、图形或其他图像。

在 AC2 的渲染引擎中,有两种图层:

  1. 背景图层:通常位于最底部,用于放置图像的背景。
  2. 文字图层:专门用于输入和编辑文本的图层。

你可以自由叠放图层,渲染出精美的图象。

CSS

CSS

CSS(层叠样式表,Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS 能够对网页中元素的位置进行排版,包括布局、颜色、字体等。通过使用CSS,开发者可以将内容与表现分离,使网页的结构和样式更加清晰,同时也使得网页的维护和更新变得更加简单。

在 AC2 渲染引擎中,使用了一些 CSS 的概念永用于图层的定位。

如何开始

如何开始

想要快速开始,参考插件中自带的默认渲染模板是一个比较好的方式。

默认的渲染模板路径在 wp-content/uploads/ac2/templates/default,默认的渲染模板中有 6 个文件:

  1. cover.jpg
  2. background.png
  3. head.png
  4. thumbnail.png
  5. meta.json
  6. template.json

如下图:

从这几个文件名大家可以很容易理解它们是做什么的。

  1. cover.jpg:渲染模板的封面,用做后台识别
  2. background.png:正文首图背景图层
  3. head.png:H1-H6 的背景图层
  4. thumbnail.png:缩略图的背景图层
  5. meta.json:渲染模板描述文件
  6. template.json:渲染模板文件

要快速开始,可以直接复制 default 文件夹,修改文件夹的名字即可,比如 default-copy

这个时候,您在 WordPress 后台 -> 自动配图2 -> 渲染引擎 -> 渲染模板 中就能看到一个新的模板。

template.json 介绍

template.json 介绍

template.json 是描述渲染引擎如何渲染图片的一个文件,默认的渲染模板中内容如下:

{
    "thumb-title": [
        {
            "type": "canvas",
            "background_image_path": "thumbnail.png"
        },
        {
            "type": "text",
            "font_size": "20",
            "font_path": "../../fonts/思源黑体.otf",
            "width": 280,
            "height": 50,
            "line_height":50,
            "text_align": "center",
            "margin_top": 80,
            "margin_left": "auto",
            "debug": false
        }
    ],
    "title": [
        {
            "type": "canvas",
            "background_image_path": "background.png"
        },
        {
            "type": "text",
            "font_size": 80,
            "font_path": "../../fonts/思源黑体.otf",
            "width": 850,
            "height": 160,
            "text_align": "center",
            "margin_top": 235,
            "margin_left": "auto",
            "line_height":160,
            "debug": false
        }
    ],
    "h": [
        {
            "type": "canvas",
            "background_image_path": "head.png"
        },
        {
            "type": "text",
            "font_size": 50,
            "font_path": "../../fonts/思源黑体.otf",
            "width": 740,
            "height": 116,
            "text_align": "center",
            "margin_top": 95,
            "margin_left": "auto",
            "line_height":116,
            "debug":false
        }
    ],
    "default": [
        {
            "type": "canvas",
            "background_image_path": "background.png"
        },
        {
            "type": "text",
            "font_size": 80,
            "font_path": "../../fonts/思源黑体.otf",
            "width": 850,
            "height": 160,
            "text_align": "center",
            "margin_top": 353,
            "margin_left": "auto",
            "line_height":160
        }
    ]
}

该文件是 json 格式,因此制作渲染模板的时候你需要严格保证您的 template.json 是一个 json 格式。

最外层的 key 有:

  1. thumb-title:渲染缩略图的规则
  2. title:渲染主图的规则
  3. h:渲染 H1-H6 标题的规则
  4. default:默认的渲染规则

每个 key 对应的一种规则,拿 title 举例。title 对应的 value 是一个长度为2的数组:

[
        {
            "type": "canvas",
            "background_image_path": "background.png"
        },
        {
            "type": "text",
            "font_size": 80,
            "font_path": "../../fonts/思源黑体.otf",
            "width": 850,
            "height": 160,
            "text_align": "center",
            "margin_top": 235,
            "margin_left": "auto",
            "line_height":160,
            "debug": false
        }
]

数组中的每个值都表示一个图层。

数组中第一个值是:

{
    "type": "canvas",
    "background_image_path": "background.png"
}
字段说明
typecanvas表示这个图层是一个普通的画布,通常第一个值表示背景图层。
background_image_pathbackground.png表示这个图层的背景用同级目录下的 background.png 填充。

数组中的第二个值是:

{
    "type": "text",
    "font_size": 80,
    "font_path": "../../fonts/思源黑体.otf",
    "width": 850,
    "height": 160,
    "text_align": "center",
    "margin_top": 235,
    "margin_left": "auto",
    "line_height":160,
    "debug": false
}
字段说明
typetext表示这个图层是一个文字图层,通常用于展示文字
font_size80表示文字的字号,80 表示字号是 80 像素
font_path../../fonts/思源黑体.otffont_path 表示这个图层的文本使用的字体,支持 ttf、otf 字体。../../fonts/思源黑体.otf ,表示用的是 wp-content/uploads/ac2/fonts里面的 思源黑体.otf 文件
width850表示文本框的宽度是 850px
height160表示文本框的高度是 160px
text_aligncentertext_align 表示文字的对齐方式,这里的 center 表示文字是居中对齐
margin_top235marign_top 表示文本框距离顶部的距离,235 表示 距离顶部 235px
margin_leftautomargin_left 表示文本框距离左侧的距离,auto 文本框整体居中
line_height160line_height 表示文本的行高,这里行高160,和文本框的高度一致,这样可以让文本垂直居中。
debugfalsedebug 用于调试,开启 debug 会让文本框的背景变成透明的黑色背景。

背景图

背景图

背景图正如在 template.json 中介绍的那样,通常在第一个图层中设定。使用 background_image_path 指定背景图的路径。

通常情况下,背景图放在和渲染模板相同的文件夹下,支持 jpg,png 格式。

你可以使用任意大小的图片作为背景图,渲染出来的图片将会和你的背景图尺寸一致。

随机背景图

随机背景图

如果我们要使用随机图片,可以使用通配符来指定背景图。比如 background_image_path 的值为 images/*.jpg,表示使用 images 文件夹下面随机一张 jpg 格式图片。

这种随机图可以参考自带的 classic 渲染模板。

你可能还喜欢下面这些文章

AC2 节日图片渲染模板AC2 节日图片渲染模板

该文章介绍了一个AC2节日渲染模板,可根据文章中的图片和alt文本以及文章日期进行渲染,适用于节日和节气等场合。推荐使用竖图,大小为1280x1648,并添加alt属性。不同图片可调整渲染模板。

WordPress 模板伪原创插件 WPUnique 介绍与下载WordPress 模板伪原创插件 WPUnique 介绍与下载

结果他说的是“模板伪原创”,并不是我认为的WordPress文章伪原创工具。模板伪原创,顾名思义就是在WordPress模板上下功夫。插件功能很简洁,有三个选项:随机模式,class格式,随机字符长度。

WordPress 文章自动配图、缩略图插件 WPAC 介绍与下载WordPress 文章自动配图、缩略图插件 WPAC 介绍与下载

2、自动生成的图片并非真实在磁盘中的图片,而是动态生成的,如果保存到磁盘会占用大量空间,这个空间没必要浪费,因此修改主题代码,直接将缩略图的地址改为wpac自动生成的缩略图地址是一个非常好的方案。

如何在模板中调用 WordPress 短代码?如何在模板中调用 WordPress 短代码?

我的页面正在调用页面模板。页面有效,但不是我想要的方法。联系我们模板我想尝试这样的事情,但没有奏效。在这里查看更多信息:do_shortcode试试这个:确保在文本小部件中启用短代码的使用。

自动配图中的文字展示不完整怎么办?自动配图中的文字展示不完整怎么办?

摘要:当自动配图中的文字展示不全时,原因可能是文字尺寸过大。可调整文字尺寸,包括全局、分类和文章配图等不同级别的调整。动态渲染模式下,调整完毕后无需操作即可生效,如未生效可清除浏览器缓存后刷新页面。静态渲染模式需保存文章并重新生成图片。

WordPress如何自定义文章详情页模板WordPress如何自定义文章详情页模板

例如,我们准备让名称为WordPress的分类文章使用有别于其它分类的模板样式,首先在所用主题根目录新建一个名称。single-wordpress.php的模板文件。

WordPress自动配图插件居然还有这些细节WordPress自动配图插件居然还有这些细节

现在问题来了,如果文章有图,又增加了配图,那么会不会有可能配图和图片位于相邻的段落。原因很简单,一般需要自动配图的文章都是没有图片的文章,有图片的文章一般会关闭自动配图。其实在最近的自动配图软件已经增加了这种模式,那就是图片缓存。

自动配图2 成语模板自动配图2 成语模板

该文章介绍了一个适用于自动配图的成语模板,以4个字渲染图片,适用于成语分享网站。以“美轮美奂”为例,介绍了其出处、原意、用法、近义词和示例。该模板有助于通过成语展现事物的美好和壮丽。