如何使用 GPT-4 为博客目录页打造炫酷前端效果

news2024/11/22 19:51:01

前不久我用 cmd markdown 写了篇文章《项目 TO 的自我修养》,文章的目录如下:

e30e034db0d16122b905a1e5fe67b596.png

当我把它发布到线上后,目录却只展示出了二级标题:

e7254aa044bef206d134e84dfce47373.png

这哪行!我猜这个可能就是加个配置啥的就能修复。于是马上就问 GPT-4 怎么办?

74cb41833ebadfdbdebafe36b391fe9c.png

虽然不仅仅是改配置,但看起来很简单,于是我立即照做。

改完之后,打开博客,这回连目录都没有了,而且是一闪而过。接着问吧,GPT-4 也很快给出了新方案:

e36769c25ac44fe97e36d25f99d7e6bd.png

这回有目录了,但是还是只有 h2 层级。给的答案还是不对,我猜有可能它理解错我的意思了。于是继续追问:

51498e81aa246209a9487b2906e983bf.png

这次,GPT-4 给出了一个修改配置文件的答案。这正合我意:

62e78a93f82841f5084bb2406b6a080c.png

但是这下目录内容又只有从 h1 层级开始的了:

96291ebc32eac3df0f07d7b49f163420.png

然后 GPT-4 又给出了一些不靠谱的答案,都不 work。例如:

a4355d07dae6ad986073cf6ef1d5dcb9.png

尝试了下,还是不行。

一来一去我有点烦了。我尝试把配置文件里的 ordered 这一项改成了 true。竟然就看到了希望:

e7209d8e76a4f9cb305cc64363a3ee6f.png

虽然文字都有了,但是样式太难看了:

54a0f0bf0bf5fc426a83b0caeb04c90c.png

按照这个来修改 CSS 代码,果然奏效:

.post-toc-content ol {
  padding-left: 20px;
}
8f0d5d548687d21f1592d281e708897d.png

根据我有限的前端知识,我认为接下来只需要用 CSS 进行样式美化。

纯改 CSS 就方便了,我把目录页面的 CSS 一股脑丢给 GPT-4,让它来修改:

ee6424d45c5c93e1a6eed4a54ef9b6f7.png

GPT-4 给了一份修改后的 CSS 代码:

d7af7defaad8a2d4b10d6a3cb215618f.png

可惜我改完后不生效。继续问它:

8b083cec3330a45969190ed970e9a119.png

我照做了之后还是不行。

接着我做出了关键的一步操作。我右键看了下页面的源代码,并把目录部分的源码挑出来:

695f3ad5091928d2355a3ae16b201a0d.png

GPT-4 果然没有让人失望,它马上发现了问题所在,并给出了新的 CSS 代码:

53976a206f39b1e116d578497e44f2d2.png

改完之后,又有问题了。只展示 h1 层级标题了:

37dae6dc235c9608e0433900d06fa1f8.png

GPT-4 马上又给了解决方案:

9440845d05512adb54d70d04c87890b4.png

试了果真有效:

1d95b1f330b5922a5958f6148ca27fb9.png

问它原因它也能回答:

6f50f5219cbabcd335ba32474fc31482.png

之后,就是让 GPT-4 不断尝试修改 CSS 代码,来美化目录页面样式:

c54f0e74ccec27ddbd1c9b8b76efbc28.png

我要求给我换个配色:

4430f130d8a6347f112b1dd4f47388d7.png

效果不错:

8c9bdd889c5844ea06b0ad01b027909a.png

到这里,目录页面的改造基本完成了。之后就是不断让 GPT-4 美化页面效果。它确实没有让我失望。

最终的效果:

649488c199efd4d3a92eb3203afab9b5.png

不得不说,最后目录页的呈现效果还是不错的,毕竟我对前端了解甚少。在 GPT-4 之前,我经常会避免自己去修改页面,实在是要改的话,也只能是 google 搜出多篇文章,对着抄代码,还不一定能成功。而拥有 GPT-4 这样趁手的武器,可以让你能做成很多以前不敢想的事情。

在整个过程中,提供的信息越多、越准确,得到的答案也越好。例如在我给出源代码后,GPT-4 马上就看出了问题所在,并给出了正确的答案。

参考资料

  1. 我和 GPT-4 的对话记录:https://sharegpt.com/c/OeJvZWu,https://sharegpt.com/c/4gEyavw

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/433134.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

25.SSM-SpringMVC延续--拦截器与异常处理思想

目录 一、拦截器。 (1)拦截器的作用。 (2)拦截器与过滤器的区别。 (3)拦截器的方法。 (4)拦截器的快速入门。 (5)多拦截器。 (5.1&#xf…

哈工大软件构造-设计模式笔记

文章目录 UML简单知识1.单例模式2.工厂方法模式3.迭代器模式4.策略模式5.建造者模式6.模板方法模式7.代理模式8.责任链模式9.抽象工厂模式10.适配器模式11.观…

计算机操作系统复习记录(总结 —— 快速入门和快速复习)

1. 操作系统 概念:是控制和管理整个计算机系统的硬件和软件资源,并合理地组织调度计算机的工作和资源的分配,以提供给用户和其它软件接口和环境,它是计算机系统中最基本的系统软件。 功能和目标: (1&…

数据库同步 Elasticsearch 后数据不一致,怎么办?

1、实战线上问题 Q1:Logstash 同步 postgreSQL 到 Elasticsearch 数据不一致。 在使用 Logstash 从 pg 库中将一张表导入到 ES 中时,发现 ES 中的数据量和 PG 库中的这张表的数据量存在较大差距。如何快速比对哪些数据没有插入?导入过程中&am…

六:内存回收

内存回收: 应用程序通过 malloc 函数申请内存的时候,实际上申请的是虚拟内存,此时并不会分配物理内存。 当应用程序读写了这块虚拟内存,CPU 就会去访问这个虚拟内存, 这时会发现这个虚拟内存没有映射到物理内存&…

系统安全及应用

目录 一、账号安全控制 1)系统账号清理 2)密码安全控制 chage命令 示例 3)命令历史限制 4)终端自动注销 总结 账号安全 密码安全 二、系统引导和登录控制 1)使用su命令切换用户 用途及用…

【学习笔记】字节数据和字节字符串(b“ “)那些事

文章目录 0 前言1 先来看看C语言中怎么处理这种字节数据1.1 使用总结 2 再来看看Python当中是怎么处理字节数据的 0 前言 最近在尝试用PyQt做一个上位机,遇到很多关于字节字符串的问题,这里简单总结几个关键点。 1 先来看看C语言中怎么处理这种字节数据…

RK3568平台开发系列讲解(Linux系统篇)共享内存的创建和映射过程

🚀返回专栏总目录 文章目录 一、共享内存的创建和映射过程流程梳理二、如何创建共享内存?三、如何将共享内存映射到虚拟地址空间?沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇我们一起学习下共享内存的创建和映射过程。 一、共享内存的创建和映射过程流程梳…

推荐5款重度电脑用户也未必知道的小众软件

作为一个重度电脑用户,你可能会经常使用一些软件来完成各种任务和娱乐。但是你知道有哪些好用的WIN10软件吗?今天我就为你介绍一下我推荐的五款WIN10软件,它们分别是: 1.反恶意软件——Malwarebytes Malwarebytes是一款专业的反…

AOP与SpringBoot使用AOP实例

AOP:Aspect Oriented Programming(面向切面编程、面向方面编程),其实就是面向特定方法编程。 动态代理是面向切面编程最主流的实现。而SpringAOP是Spring框架的高级技术,旨在管理bean对象的过程中,主要通过…

浅谈thrift协议+举例通用mockserver如何实现

目录 简单来说: 举个例子: 简单来说: 1)是一个跨平台跨语言的通信协议,定义和创建跨语言服务,是一个高性能、轻量级RPC框架。 2)开发者无需关注不同语言/相同语言服务间如何通信,…

基于html+css的图片展示15

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…

什么是Python?

目录 Python简介 Python发展史 Python优点与缺点 Python现如今的应用领域 总结 Python简介 Python是一种高级、解释型、面向对象的动态编程语言,由Guido van Rossum在1989年创建,首次发布于1991年。 Python设计的哲学是优雅、清晰、简单&#xff0c…

Windows逆向安全(一)之基础知识(八)

if else嵌套 这次来研究if else嵌套在汇编中的表现形式,本次以获取三个数中最大的数这个函数为例子,分析if else的汇编形式 求三个数中的最大值 首先贴上代码: #include "stdafx.h"int result0; int getMax(int i,int j,int k)…

机器视觉工程师必须知道机器视觉精度要思考哪些

​在和客户交流项目技术要求,这个项目,我要求的精度是0.01mm? 第一个问题:什么是精度? 精度要求0.01mm: 1.视觉重复性极差?静态?动态? 2.视觉与第三方相关性差异?极差?相关性系数? 3.整体系统误差?机械重复性误差? 4.产品尺寸公差? 第二个问题:精度与公差…

完美解决丨TypeError: fun() takes 2 positional arguments but 3 were given

python def fun(a, b): return a b c fun(1, 2, 3) Traceback (most recent call last): File "test.py", line 5, in <module c fun(1, 2, 3) TypeError: fun() takes 2 positional arguments but 3 were given 上面的代码中&#xff0c; fun 函数定义了两…

最通俗的语言解释01背包问题(力扣416题javascript版本)

【声明】以下内容参考了代码随想录&#xff0c;不用作商业用途~ 先来看一个场景&#xff1a;有N件物品&#xff0c;背包最大的重量为W&#xff0c;第i件物品的重量为weight[i]&#xff0c;得到的价值为value[i]&#xff0c;每件物品只用一次&#xff08;即不能重复放进背包&…

【计算方法】正交区域查询---KD-Tree概念

一、说明 kd 树是一种二叉树数据结构&#xff0c;可以用来进行高效的 kNN 计算。kd 树算法偏于复杂&#xff0c;本篇将先介绍以二叉树的形式来记录和索引空间的思路&#xff0c;以便读者更轻松地理解 kd 树。 二、正交区域查找 2.1 定义 对于k维空间的张量数据表格&#xff0…

Unity RenderStreaming 云渲染3.1.0-exp.6 食用手册

Unity云渲染 &#x1f957;资源&#x1f364;兼容性&#x1f367;手机端连接&#x1f969;安装方法&#x1f35b;IP端口设置&#x1f371;官方案例尝鲜&#x1f332;导入案例&#x1f332;添加场景&#x1f332;启动WebApp&#x1f332;打开Menu场景&#x1f332;连接参数设置&…

300左右蓝牙耳机推荐哪个好?300元左右最好的蓝牙耳机

蓝牙耳机如今在我们的生活中太普遍了&#xff0c;记得疫情刚开始天天要戴口罩&#xff0c;口罩的绳子和耳机线相缠十分的不方便&#xff0c;所以更多的人选择蓝牙耳机&#xff0c;下面整理了几款300元左右的蓝牙耳机品牌。 一、南卡小音舱Lite2蓝牙耳机 售价&#xff08;&…