百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

你还在手动排版公众号文章?看看 ChatGPT 怎么轻松搞定

myzbx 2025-02-10 13:32 14 浏览

公众号排版可以采用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
    


    

人工智能的未来

希望这篇指南对你有所帮助!

通过GPT生成的HTML代码,你可以更快速地完成公众号的排版工作,提升工作效率。

也期待你来分享公众号排版技巧。

相关推荐

MORROR ART:毫无音质可言,真的只是好看而已...

今天早上我在微博上发了一条短视频,内容是某款网红音箱正在放声歌唱——这玩意就是此前曾经在网上挺火的所谓“悬浮歌词音箱”。这款产品是我同事收到的礼品,但她嫌在家里放着没用,所以拿到公司里做我们的拍摄道具...

「JS优化篇」你的 if - else 代码肯定没我写的好

作者:小生方勤转发链接:https://mp.weixin.qq.com/s/JzOQ_OwAYoP5Ic1VBtCZNA前言最近部门在对以往的代码做一些优化,我在代码中看到一连串的if(){}el...

细聊微内核架构在前端的应用「干货」

作者:semlinker转发链接:https://mp.weixin.qq.com/s/ywc98dS4TVB4t3L2tIyk8g一、微内核架构简介1.1微内核的概念微内核架构(Microke...

ThreeJS 入门教程(一) 是选择桌面的固守还是云原生?

导读:最近我购置了一台新的电脑,硬盘空间只有1T。我很担心这个电脑还能用多久。性能限制或者空间的限制,都使得在未来3-5年内,这个电脑会被淘汰。但是,基于云APP的使用,老的电脑是足够了,而且,我们也...

推荐三款正则可视化工具「JS篇」(正则在线调试)

作者:代码先森转发链接:https://mp.weixin.qq.com/s/rw29yKBwti5sIsx2GKG9pw前言最近老王对可视化非常着迷。例如,算法可视化、正则可视化、Vue数据劫持可...

Javascript 多线程编程的前世今生

作者:jolamjiang腾讯技术工程转发链接:https://mp.weixin.qq.com/s/87C9GAFb0Y_i5iPbIL5Hzg为什么要多线程编程大家看到文章的标题《Javasc...

Pug 3.0.0正式发布,不再支持 Node.js 6/8

作者:李俊辰前端之巅转发链接:https://mp.weixin.qq.com/s/q-49Gf-SFijeu7d2MqztIQ前言近日,Pug3.0.0正式发布,Pug原名Jade,是由...

36个工作中常用的JavaScript函数片段「值得收藏」

作者:Eno_Yao转发链接:https://segmentfault.com/a/1190000022623676前言如果文章和笔记能带您一丝帮助或者启发,请不要吝啬你的赞和收藏,你的肯定是我前进的...

深入JavaScript教你内存泄漏如何防范

作者:大道至简转发链接:https://mp.weixin.qq.com/s/0w6aWwpR3MAJnmyLwDnAzA前言一般情况下,忽视内存管理不会对传统的网页产生显著的后果。这是因为,用户刷新...

由浅入深,66条JavaScript面试知识点(七)

作者:JakeZhang转发链接:https://juejin.im/post/5ef8377f6fb9a07e693a6061目录由浅入深,66条JavaScript面试知识点(一)由浅入深,66...

用STM32做了个电子秤,成本仅两位数,精度高!解析一下原理

俗话说得好!人在胖,秤在看!所以,我想DIY一个精度高的体重秤!并希望它不只能称体重:还能像这样称克重(可设置KG,G,最低可称100克)……这样一来,做甜品的时候,还能拿来应应急。保姆级教程,记录在...

前端开发需要了解常用7种JavaScript设计模式

作者|Deven译者|王强策划|小智转发链接:https://mp.weixin.qq.com/s/Lw4D7bfUSw_kPoJMD6W8gg前言JavaScript中的设计模式指的是...

毛姆的一个手法|王培军(毛姆作品简介)

鲁本斯画《海伦娜·芙尔曼肖像》钱锺书在《宋诗选注》文同小传中说:“具体的把当前风物比拟为某种画法或某某大画家的名作”,是“从文同正式起头”。如钱先生所举的:“峰峦李成似,涧谷范宽能”,“独坐水轩人不到...

欣赏 | 朝戈:我渴望找到直达心灵的永恒

朋友,通过艺术让我们共同感知世界的永恒与不朽。——朝戈橙色的人物117X71cm布面油画2003包与陈185cm×103cm2007年白色80cm×40cm2009年光布面油画-Light-Oilo...

Web页面如此耗电!到了某种程度,会是大损失

现在用户上网大多使用移动设备或者笔记本电脑。对这两者来说,电池寿命都很重要。在这篇文章里,我们将讨论影响电池寿命的因素,以及作为一个web开发者,我们如何让网页耗电更少,以便用户有更多时间来关注我们的...