代码如诗 | 记录我用Ai写代码的日子

代码
文章摘要
AI 正在分析文章内容...

最近不是很忙,生意马马虎虎,前段时间去了非洲以特种兵军训的形式转了一圈,内容游记还在写,回来后搬家以及处理一些杂事,就一直没有出差,搬了新家之后网络一直不好,这几天刚把网络弄好,又开始没日没夜的处理我之前主题还有2个程序遗留问题。

最初的起点:个人站的执念

对我身边人来说,我是接触网络特别是包括独立博客,独立站比较早的,之前身边的人接触了网络打游戏看电视剧看电影比较多,我就喜欢搞个人站相关的东西,Html主页,DedeCMS, PJblog是研究的最多的。虽然接触的早,但是仅限于早,知识是马马虎虎仅限于修改css样式表的大小数字尺寸,还有html引用图片或者给图片,文字加链接,也得每次搜索html代码生成器,去做。 说实话,我这个人比较强迫症,代码也好,主题也好,就像衣服,衣服都不会穿好怎么出门。 博客主题都选不好,些什么博客。所以这么多年,我在付费主题,最早的WordPress出名的主题我基本都买过,这两年国内一些优秀的开发者,nicetheme HUiTHEME甚至国外的Themeforest我可谓是抛掷千金来满足这个新手毛病多的癖好,但是,没有一个主题我可以用很久甚至说坚持两三个月的。

去年开始重新恢复写博客,用了最长时间的一个主题应该是设计笔记 自用的主题Wing,这个主题给我眼前一新的感觉,特别是自带的说说以及前台发布类似说说的功能,我第一次才知道竟然可以这么搞, 用了一段时间我手贱就开始给改主题,最后改的我比较满意也改的错误多多,也联系过作者想付费修改,但是他说他太忙了,公司项目比较多,实在是没空去改,我就放弃了,中间我找HUiTHEME的主理人也开发了一个的主题但是没达到我的效果,我再联系他也不回我了,说实话我这个主题还是有点参考HUiTHEME主页的,种种打击之后,我动起来了自己写一个主题的念头。

AI + VS Code 的加成

自从Ai盛行之后,我骨子里那个码农的想法再也按耐不住,骚动的心开始蠢蠢欲动。 特别是知道用VS Code之后,那简直是鸟枪换大炮。 我之前写代码是用ChatGPT + DeepSeek一句一句的搜索询问然后对比,再复制代码到宝塔面板的文件编辑,一点点测试,之前甚至都不知道去哪里搞素材,去哪里找样式,写了一个月之后,问了一句Ai,程序员工具,我开始知道了Visual Studio Code,开始知道了Github Copilot,甚至我也开始用起来了Local WP开发WordPress相关的东西。 效率比之前提升不知道多少倍。属于那种谁用谁知道,用过都说好的。

于是我开始找素材,想结构框架如何设计,设计我在不在行那就只能写最简单的主题,不管了,先架子搭起来,再一点点研究。 于是我开始疯狂找各种主题,看各种主题带的功能,包括之前用了一段时间的Halo,我认为比较火的主题有几个,最终我都用了一段时间,用的比较多的事JimmyStack主题,还有一个满大街泛滥的魔改Butterfly相关的Halo或者Hexo主题,国内改的最多的都是衍生自张洪HeoButterfly魔改, 这个主题给我的印象超过我对网站的理解能力,特别是一些细节部位,比如动态的特效,一些文章内页的美化以及很多新型的交互性功能我都是之前没有接触过,新手研究这个东西有好处,就是边走边学,再改,折腾来折腾去,慢慢的也学会一些东西。

WestLife 主题的上线

WestLife 早期版本截图
WestLife 主题的早期版本

差不多写了4-5天,我的第一款个人主题 WestLife就上线了,主题一开始的想法就是单纯写博客为主,还要兼顾图片的浏览,刚上线的第一个版本首页是这样的,但是页脚位置还有首页标题部分我是后面改了,这也是截止到今天还运行的主题,只是小改,大地方没有换。

这个主题当时我是很想简单的做一下,但是随着看越来越多个人博客,功能开始慢慢增加,主题设置,微博客说说功能,RSS友情链接订阅,访客地图,包括上传图片处理,压缩,缩略图,首页分类链接无刷切换,随机文章,等等。 中间一段时间我比较慢,也没有再去改,但是说说功能让我删除错了代码,Ai的好处是聪明,坏处是太聪明,它有时候想我所想不到的,动不动就改的他自己都不认识,重复的函数不同名,每次你问他她都会再搞一变,我用的最多Ai的指令就是检查CSS和PHP JS有没有重复的,优化后完整输出给我,但是很尴尬,每次都不完整,丢来丢去,中间我都想放弃了,还好最后勉强可以用。

忙了几个月,从上周开始,我又开始深入的修改这个主题,结果前天上午不知道怎么弄错了代码,RSS订阅聚合相关的又错误,换了好几个Ai都解决不了,我一起之下把相关代码全部删除,再一点点重写,中间甚至还把之前主题带的功能开发乘一个插件,我测试了一下还可以工作,需要再优化一下,可以上线,插件主要就是友情链接页面和友联聚合页面的插件形式展现。

PHP我也不懂,只能看懂差不多哪块是干什么的,修改知道去哪个文件修改,CSS可能懂5%,PHP最多3%,JS是0.我每天坐电脑前,一直写到国内早上6点才去睡觉。 这几天主题解决了缩略图,加载进度条,懒加载,灯箱功能全部加上了。之前懒加载和灯箱一直都是错误,可能最近的ChatGPT和其他的Ai都开始升级,水平越来越高,错误率低了,处理问题方式成功的几率越来越高。经过2-3天恢复,又现在的新版本又经过今天过一天的测试,友情链接页面是可以工作了,友联聚合的订阅功能只能等本周末。 这段时间出的最多的问题就是中间文章部位的分类切换,以及加载动画,我因为这几个js文件差点吐血,重写了不知道多少遍。 新版本更新了中间文章卡片的显示方式,页脚位置和主题设置包括版权、备案、公安备案全部样式写好了。 文章内页增加了更多文章的样式,看起来更好看,解决了文章内目录问题遮盖,但是新的问题又出现,手机版适配还是问题百出,一个站点Mobile导航给我整崩溃了一下午。基本所有功能失效,所有代码改回原来的还是依然不能用,关键是F12控制台还不报错,问AI都不知道怎么问。

新版本改动

  • 首页导航栏重写
  • 分类导航支持 FontAwesome + 数量显示
  • 页脚统计移入 Footer
  • 功能面板整合:最新评论、评论榜、关键词、文章排行
  • 文章内页:分类位置调整、点赞撒花、音乐/视频嵌入支持
WestLife 新版本页面效果
新版本页面效果
内页样式更新
内页样式更新

这次新更新,最主要的变化是首页导航栏变了,然后中间分类导航,我添加了支持fontawesome,然后悬浮图标移动并且显示此分类文章的数量,页脚统计移动到Footer内部,三个小工具删除,相同功能移动到了中间面板,导航栏点击控制面板会弹出面板功能,会显示最新评论,评论榜,关键词,以及三种方式的文章排行。 这样可以在首页更精简的情况下获取更多的内容,这个创意还是得自张洪HeoButterfly魔改,内页主要修改了分类的位置,关键词、分享菜单 、以及版权位置样式小改,增加了点赞撒花功能,文章样式增加了豆瓣下载以及QQ酷狗网易音乐支持、X链接支持、豆瓣支持、优酷登视频 Youtube视频的样式支持,我把上一篇下一篇文章删除了,文章目录Toc还有不合适的地方需要优化,其他就都是小地方改来改去。

回忆与传承

通过Archive网站竟然还找回来11年左右付费请Yofox写的主题。当时的主题名字叫Thunder,记忆尤深。

Thunder 主题截图
Thunder 主题(2011 年)

再看到这个主题看到之前的链接里面还有几个人坚持在写博客,一晃接近15年的时光已经过去。

下一步计划

未来计划:

  • 优化评论访客记录功能
  • 完善 RSS 聚合阅读、访客地图
  • 增加 AI 摘要、语音阅读
  • 主题将会开源,免费下载

附加项目

图床1
PHP图床系统页面
图床2
PHP图床系统页面

最近还写了一个PHP图床系统,PHP代码笔记系统,多少自己用勉强,还得修改修改,单人版本的,也还在完善,图床自带压缩和一键转换WebP功能,压缩用的TinyPNG接口,批量压缩转换都可以,本月完善后也会开源。如果有技术强的可以加我QQ,大家交流下。 我需要排版 一下

《代码如诗 | 记录我用Ai写代码的日子》

14 位吃瓜群众
27 条热评
  1. AUNSEN 时间 14小时前 Windows 10 Windows 10 Firefox Firefox

    大佬牛逼打call

  2. byuc 时间 1天前 Android Android Chrome Chrome

    那我来给你增加点工作量吧。思考 你评论框在移动端显示有问题,字会超出来。

    1. 西风 时间 19小时前 macOS macOS Chrome Chrome
      @byuc:

      移动端适配现在还没做好,我先把能有的功能做好,再去适配抠鼻

  3. LMS 时间 1天前 Linux Linux Chrome Chrome

    仅支持二层评论啊,话说ai订阅花了多少?

    1. 西风 时间 19小时前 macOS macOS Chrome Chrome
      @LMS:

      应该是评论区代码还有问题 我今天检查一下
      我开的Pro+ 好像是30多美金一个月
      chatGPT用的20美金一个月

  4. 雅余 时间 2天前 macOS macOS Chrome Chrome

    主题真酷呀

  5. 威言威语 时间 2天前 Windows 10 Windows 10 Chrome Chrome

    效果已经是非常赞了,期待成品!!!喜欢

    1. 西风 时间 19小时前 macOS macOS Chrome Chrome
      @威言威语:

      我再加加班,尽快搞出来咧嘴笑

  6. LMS 时间 2天前 Android Android Chrome Chrome

    看你页脚都有备案号为啥我还要挂梯子才能打开。。。你这么重度ai,免费额度应该不够吧。

    1. 西风 时间 2天前 macOS macOS Chrome Chrome
      @LMS:

      页脚的备案号是之前的乱挂的 这个域名还没有备案,主机还是香港的,主要是为了显示页脚内容我随便填写的。
      昨天4号之前账号Github Copilot的Premium requests已经用完了,开的是Pro+套餐。 因为不太了解Github的模式,不知道预算功能,又注册了账号开通新的套餐。 主要新手问题太多了吃瓜

  7. 李的日志 时间 2天前 未知 未知 未知 未知

    真厉害!这个主题很好看。(移动端有内容溢出屏的情况哦

  8. 皇家元林 时间 3天前 Windows 10 Windows 10 Chrome Chrome

    你的那个进页面前的特效怎么删了,看着蛮不错的。以前我一直想弄个进页面前的页面。

    1. 西风 时间 3天前 Windows 10 Windows 10 Chrome Chrome
      @皇家元林:

      我这个主题后台有设置可以开启关闭, 两种模式奸笑

  9. 全局变量 时间 3天前 Windows 10 Windows 10 Chrome Chrome

    你的回复我好像找不到回复按钮,给你几个建议吧,1、头部菜单:页面尺寸变为平板或手机常规尺寸隐藏头部菜单,页底部出现手机版菜单。 2、友链没必要去复制别人的链接,直接取其邮箱头像。超过30天重新网站状态异常的链接下线。

    1. 西风 时间 3天前 Windows 10 Windows 10 Chrome Chrome
      @全局变量:

      我好想没设置再次评论的,样式做不好我就给取消了。 感谢反馈,我再去更新一下喜极而泣

  10. 老孙 时间 3天前 Windows 10 Windows 10 Chrome Chrome

    有php的图床就不比重复造轮子了吧笑哭

    1. 西风 时间 3天前 Windows 10 Windows 10 Chrome Chrome
      @老孙:

      找了几个用了要么太臃肿要么有一些点不适合自己,有Ai帮忙写一个还不是非常难,毕竟适合自己用的算好偷笑

  11. TeacherDu 时间 3天前 Linux Linux Chrome Chrome

    这个主题非常好看,点赞!

    1. 西风 时间 3天前 Windows 10 Windows 10 Chrome Chrome
      @TeacherDu:

      滑稽 谢谢,像杜老师学习

  12. obaby 时间 3天前 macOS macOS Chrome Chrome

    之前我也弄过主题,后来发现自己审美也就那样,然后就放弃了,哈哈哈

  13. 满心 时间 3天前 Windows 10 Windows 10 Chrome Chrome

    不错呀,有AI加持,发现很多人开始尝试自己做主题啦

  14. ymz316 时间 3天前 Linux Linux Firefox Firefox

    博主的站点域名换了,今日才发现笑哭 也怪我最近很少上网。期待着蹭一下博主的开源应用咧嘴笑

    1. 西风 时间 3天前 macOS macOS Chrome Chrome
      @ymz316:

      看你很久没更新了,域名我换回之前的中文域名了,westlife这个域名在微信是被屏蔽的,还是中文的好点。咧嘴笑

  15. 全局变量 时间 3天前 Windows 10 Windows 10 Chrome Chrome

    头部手机版菜单还需要优化一下。

    1. 西风 时间 3天前 macOS macOS Chrome Chrome
      @全局变量:

      手机版实在弄不了 牵扯Js有个菜单重叠,我搞了2天没搞好。大哭

  16. 全局变量 时间 3天前 Windows 10 Windows 10 Chrome Chrome

    博主厉害了。在js0基础的情况下能完成一个这样的主题很牛了。

    1. 西风 时间 3天前 macOS macOS Chrome Chrome
      @全局变量:

      友情链接页面借鉴了你的检测,本要添加你的链接,但是你的头像我复制不了地址,你去自主提交一下喜极而泣

发表评论

表情