自动配图2 渲染模板开发文档
本文介绍自动配图2 渲染模板的开发。请注意,这里的用词是开发,这意味着您需要一些简单的编程基础。
需要了解的基本概念
图层
图层是数字图像编辑中一个至关重要的概念,它允许图像被分成多个独立的层或平面,每个图层都可以包含图像元素,如文本、图形或其他图像。
在 AC2 的渲染引擎中,有两种图层:
- 背景图层:通常位于最底部,用于放置图像的背景。
- 文字图层:专门用于输入和编辑文本的图层。
你可以自由叠放图层,渲染出精美的图象。
CSS
CSS(层叠样式表,Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS 能够对网页中元素的位置进行排版,包括布局、颜色、字体等。通过使用CSS,开发者可以将内容与表现分离,使网页的结构和样式更加清晰,同时也使得网页的维护和更新变得更加简单。
在 AC2 渲染引擎中,使用了一些 CSS 的概念永用于图层的定位。
如何开始
想要快速开始,参考插件中自带的默认渲染模板是一个比较好的方式。
默认的渲染模板路径在 wp-content/uploads/ac2/templates/default
,默认的渲染模板中有 6 个文件:
- cover.jpg
- background.png
- head.png
- thumbnail.png
- meta.json
- template.json
如下图:
从这几个文件名大家可以很容易理解它们是做什么的。
- cover.jpg:渲染模板的封面,用做后台识别
- background.png:正文首图背景图层
- head.png:H1-H6 的背景图层
- thumbnail.png:缩略图的背景图层
- meta.json:渲染模板描述文件
- template.json:渲染模板文件
要快速开始,可以直接复制 default
文件夹,修改文件夹的名字即可,比如 default-copy
。
这个时候,您在 WordPress 后台 -> 自动配图2 -> 渲染引擎 -> 渲染模板
中就能看到一个新的模板。
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 有:
- thumb-title:渲染缩略图的规则
- title:渲染主图的规则
- h:渲染 H1-H6 标题的规则
- 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"
}
字段 | 值 | 说明 |
type | canvas | 表示这个图层是一个普通的画布,通常第一个值表示背景图层。 |
background_image_path | background.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
}
字段 | 值 | 说明 |
type | text | 表示这个图层是一个文字图层,通常用于展示文字 |
font_size | 80 | 表示文字的字号,80 表示字号是 80 像素 |
font_path | ../../fonts/思源黑体.otf | font_path 表示这个图层的文本使用的字体,支持 ttf、otf 字体。../../fonts/思源黑体.otf ,表示用的是 wp-content/uploads/ac2/fonts 里面的 思源黑体.otf 文件 |
width | 850 | 表示文本框的宽度是 850px |
height | 160 | 表示文本框的高度是 160px |
text_align | center | text_align 表示文字的对齐方式,这里的 center 表示文字是居中对齐 |
margin_top | 235 | marign_top 表示文本框距离顶部的距离,235 表示 距离顶部 235px |
margin_left | auto | margin_left 表示文本框距离左侧的距离,auto 文本框整体居中 |
line_height | 160 | line_height 表示文本的行高,这里行高160,和文本框的高度一致,这样可以让文本垂直居中。 |
debug | false | debug 用于调试,开启 debug 会让文本框的背景变成透明的黑色背景。 |
背景图
背景图正如在 template.json 中介绍的那样,通常在第一个图层中设定。使用 background_image_path
指定背景图的路径。
通常情况下,背景图放在和渲染模板相同的文件夹下,支持 jpg,png 格式。
你可以使用任意大小的图片作为背景图,渲染出来的图片将会和你的背景图尺寸一致。
随机背景图
如果我们要使用随机图片,可以使用通配符来指定背景图。比如 background_image_path
的值为 images/*.jpg
,表示使用 images 文件夹下面随机一张 jpg 格式图片。
这种随机图可以参考自带的 classic 渲染模板。
你可能还喜欢下面这些文章
该文章介绍了一个AC2节日渲染模板,可根据文章中的图片和alt文本以及文章日期进行渲染,适用于节日和节气等场合。推荐使用竖图,大小为1280x1648,并添加alt属性。不同图片可调整渲染模板。
结果他说的是“模板伪原创”,并不是我认为的WordPress文章伪原创工具。模板伪原创,顾名思义就是在WordPress模板上下功夫。插件功能很简洁,有三个选项:随机模式,class格式,随机字符长度。
2、自动生成的图片并非真实在磁盘中的图片,而是动态生成的,如果保存到磁盘会占用大量空间,这个空间没必要浪费,因此修改主题代码,直接将缩略图的地址改为wpac自动生成的缩略图地址是一个非常好的方案。
我的页面正在调用页面模板。页面有效,但不是我想要的方法。联系我们模板我想尝试这样的事情,但没有奏效。在这里查看更多信息:do_shortcode试试这个:确保在文本小部件中启用短代码的使用。
摘要:当自动配图中的文字展示不全时,原因可能是文字尺寸过大。可调整文字尺寸,包括全局、分类和文章配图等不同级别的调整。动态渲染模式下,调整完毕后无需操作即可生效,如未生效可清除浏览器缓存后刷新页面。静态渲染模式需保存文章并重新生成图片。
例如,我们准备让名称为WordPress的分类文章使用有别于其它分类的模板样式,首先在所用主题根目录新建一个名称。single-wordpress.php的模板文件。
现在问题来了,如果文章有图,又增加了配图,那么会不会有可能配图和图片位于相邻的段落。原因很简单,一般需要自动配图的文章都是没有图片的文章,有图片的文章一般会关闭自动配图。其实在最近的自动配图软件已经增加了这种模式,那就是图片缓存。
该文章介绍了一个适用于自动配图的成语模板,以4个字渲染图片,适用于成语分享网站。以“美轮美奂”为例,介绍了其出处、原意、用法、近义词和示例。该模板有助于通过成语展现事物的美好和壮丽。