公众号排版可以采用135编辑器、SVG代码、或HTML代码。今天的分享将介绍如何使用GPT进行公众号HTML代码排版。
HTML是一种用于制作网页的代码，就像搭积木一样，有显示标题、图片、文字等不同的积木块。我们把这些积木拼在一起，就形成了一个完整的网页。
但仅有积木还不够美观，我们需要用CSS来装饰。CSS像造型师，可以改变标题的大小和颜色，让图片旋转和平移，给文字加下划线和边框等。
简单来说，HTML负责网页的结构，CSS负责网页的外观。HTML是砖瓦木料，CSS是油漆壁纸，两者配合才能构建出漂亮实用的网页。
编辑器里的HTML
以135编辑器为例，编辑器菜单栏有专门的HTML图标。
https://www.135editor.com/beautify_editor.html
在编辑器中，你可以选中不同样式，切换HTML图标，即可看到不同样式对应的HTML代码的差异。
设计案例
参考企业设计元素，设计公众号排版样式。
下图是谷歌I/O大会的PPT截图：
将截图发给GPT，提示词很简单：“参考图片，帮我用HTML、CSS写出来，我要用于公众号排版。”（下文提问也类似）
GPT很快就能帮你写出HTML代码，放到135编辑器里即可看到渲染效果。
下图是GPT根据谷歌官方样式设计的效果：
可以让GPT多写几个卡片样式，字体，颜色，大小都可以任意发挥，不过需要注意的是，微信公众号里不能接受所有的CSS语言，比如我让它设计了彩色渐变下划线和分隔符，复制到微信公众号编辑器里，就看不到效果了。
你可以参考所在企业的LOGO里的元素，设计专属的样式。
看到下图，你是不是觉得很眼熟？是的，你的感觉没错，我是截了苹果的宣传图让GPT生成的类似样式。
GPT设计
苹果官方
通过F12就可以检查选中元素的设置了。
接着，我请GPT仿造苹果官网产品卡片图，帮我设计HTML。
苹果官方
GPT设计
经过进一步调整，做出了如下效果：
批量生成样式
下图的的标题是直接用的135编辑器里的样式。
有读者可能会疑问，既然可以直接复制现成的样式，为何还要让GPT写HTML？这是因为可以让GPT批量制作。例如，可以给GPT批量文案，让它一一生成，而不需要手动一个元素一个元素调整。我尝试了GPTs，让GPT批量生成，但目前GPT模型遵循指令还不是很完美，有时一一对话更好。
下图放在小里是不是也可以？可以让GPT批量生成不同颜色的或不同内容。
PPT转公众号HTML
下图很特别，我让GPT先随机生成一个PPT，然后将PPT转公众号HTML，里面的表格样式也正确保留了下来，当然PPT本身也可以转成图片，就是清晰度不高，文字无法复制。
下图我让GPT随机调用了unsplash里的图片，GPT很聪明，会根据主题不同调用不同的图片。
如果你也想将PPT转成公众号文章，强烈推荐你试试让GPT帮你排版，速度飞快。
MD、CSV转公众号HTML
我还试了将今天的行情总结成Markdown格式让GPT设计排版。
做这些结构固定的内容，也可以让GPT写一个样式模板，从资讯系统导出对应表头的CSV，将CSV转成HTML，然后推送给用户。
代码分享
表格内容和下面的代码都可以按需更改。
这个代码生成的样式还比较简单，期待你自己探索。
分享一个小Tip，选择135编辑器里的多种类型样式，切换HTML，把HTML代码复制给GPT，让它帮你调整优化。
AI Article
人工智能的未来
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js"></script>
<script>
async function fetchCsv() {
const response = await fetch('ai_article_example.csv');
const data = await response.text();
return data;
}
function csvToJson(csv) {
const lines = csv.split('\n');
const result = [];
const headers = lines[0].split(',');
for (let i = 1; i < lines.length; i++) {
const obj = {};
const currentline = lines[i].split(',');
for (let j = 0; j < headers.length j objheadersj.trim='currentline[j]' currentlinej.trim : result.pushobj return result function generatecontentdata const contentdiv='document.getElementById('content');'> {
const section = document.createElement('div');
const h2 = document.createElement('h2');
h2.textContent = item['一级标题'];
section.appendChild(h2);
const h3 = document.createElement('h3');
h3.textContent = item['二级标题'];
section.appendChild(h3);
const h4 = document.createElement('h4');
h4.textContent = item['三级标题'];
section.appendChild(h4);
const img = document.createElement('img');
img.src = item['图片'];
img.alt = item['三级标题'];
img.className = 'image';
section.appendChild(img);
const p = document.createElement('p');
p.innerHTML = marked.parse(item['正文内容']);
section.appendChild(p);
contentDiv.appendChild(section);
});
}
async function main() {
const csvData = await fetchCsv();
console.log(csvData); // 检查CSV数据是否正确获取
const jsonData = csvToJson(csvData);
console.log(jsonData); // 检查JSON数据是否正确解析
generateContent(jsonData);
}
main();
</script>
希望这篇指南对你有所帮助！
通过GPT生成的HTML代码，你可以更快速地完成公众号的排版工作，提升工作效率。
也期待你来分享公众号排版技巧。