Bill Blog

一个月

Tue, 30 Jun 2026 00:00:00 +0000

恰有小感

在不知不觉间，一个月的时光匆匆流过。而我的博客也悄然无声的搭建了一个月

期间，他经历了六一，经历高考，经历了端午，也经历了蜕变

六一的起点

说起来也挺有意思的，博客的诞生居然和「六一」有关。

那天闲着没事刷 GitHub，看着 Hux 的个人博客，再看看自己那挂着 2048 游戏的主页——总觉得少了点什么。大概是儿童节给自己的一份礼物吧，一拍大腿：搞！

于是接下来的三天，基本就是与 Jekyll 搏斗的过程。改配置、调样式、压缩代码……晚上十点屏幕前的我，顶着黑眼圈对着一行报错发呆，心里还在想：这到底是过节还是渡劫？

不过现在回头看，那三天的折腾反而成了最有意思的回忆。就像搭积木一样，一块一块地把自己的小窝垒起来——虽然简陋，但每一块都是自己亲手放上去的。

从「半成品」到「有点样子」

六月上旬的博客，用「半成品」来形容再贴切不过了。

还记得六月七号那天写的那篇「进度已完成一半」吗？现在回头看，那时候所谓的「一半」，大概连三分之一都不到。评论系统被墙了，数学公式加载不出来，代码注释乱得一团糟……

但有趣的地方就在这里——博客这东西，是会「生长」的。

先是把评论系统折腾明白了：giscus、utterances、gitalk 三套方案齐活，想用哪个用哪个
然后是 MathJax：从旧版本换成了 3.2.2，连 IE11 都能兼容（虽然没人用了）
接着是 Microsoft Clarity、sitemap、robots.txt……该有的配置一个不落
最后连 README 都搞出了简体、繁体、英文三个版本

就像养一棵小树苗，你每天给它浇浇水、修修枝，不知不觉间，它就已经枝繁叶茂了。

那些敲出来的文字

一个月，十二篇文章。

说多不多，说少不少。从最开始的「Hello Blog」，到后来的 Python 入门、前端三件套、MathJax 测试、AI-Chat 项目介绍……

写博客这件事，最有意思的地方在于——你以为你是在写给别人看，其实最后受益最多的是你自己。

比如写那篇「HowToLearnPython」的时候，为了把知识点讲清楚，我自己又把基础过了一遍；写 AI-Chat 介绍文的时候，梳理项目脉络的过程中，居然还发现了几个之前没注意到的小 bug。

写作，就是最好的思考方式。这句话以前听别人说总觉得有点玄，现在自己试过了才知道——是真的。

技术背后的生活

当然，这一个月不只有代码。

六一的童趣、高考的紧张、端午的粽子……这些生活碎片，和 commit log 交织在一起，构成了这个六月独特的记忆。

在这期间我还简简单单的写了一个 AI 聊天工具。现在它已经添加了 AI 绘画功能，非常完善了。

有时候写代码写累了，就站起来走到窗边，看看楼下的树，吹吹风。然后回来继续敲键盘。

博客就像一个小小的「时间胶囊」。每一篇文章、每一次提交、甚至每一个 bug 的修复，都在记录着这段时间里，你在想什么、在做什么、在为什么而兴奋。

若干年后再回来看，也许会觉得当时的代码写得好烂，当时的想法好幼稚——但那又怎样呢？那就是你啊。

关于接下来

一个月说长不长，说短不短。

博客从无到有，从简陋到精致，但我知道，这还远远不是终点。

后面还有很多想做的事情：更完善的标签系统、更漂亮的主题样式、更多有意思的技术文章、更多生活里的碎碎念……

当然，也可能会偷懒，好久不更新一篇（划掉）。

但不管怎样，这个小小的博客，会一直在这里。

记录生活，记录思考，记录成长。

就像它的名字一样——Bill Blog，简简单单，却独一无二。

后记

写完这篇文章的时候，看了一眼日历。

六月就要过去了。

这个六月，因为有了这个博客，好像变得不太一样了一些。

谢谢你读到这里。

愿我们都能在自己的小世界里，继续折腾，继续热爱。

—— bill74186 记于 2026 年六月末

AI-Chat

Fri, 26 Jun 2026 00:00:00 +0000

某天深夜，我对着某某 AI 说了一句话，然后开始思考：能不能自己也搭一个？

说起来，这个想法其实挺简单的。

作为一个偶尔会和各种大语言模型打交道的人，我一直在想：能不能有一个自己的小工具，可以随时切换不同的模型，不用每次都去不同的网站注册账号、切换页面？再加上平时写代码的时候，总想用最快的速度问几个简单的问题，不需要打开浏览器，不需要登录，不需要忍受漫长的加载……

于是，AI-Chat 就这么诞生了。

初衷

最初只是想做一个「能用、够用」的简单聊天页面。后来发现，市面上的模型各有特点——Spark 逻辑清晰，GLM 响应快，Quark 偶尔会有惊喜。既然各有优势，为什么不把它们都集合在一起？于是就有了现在的多模型切换功能。

再后来，我想，既然命令行用得顺手，能不能也搞个终端版本？于是又折腾出了 Python、Node.js、PHP、Java、C、Shell……七种语言的客户端。说起来有点离谱，但确实都是我的日常使用场景。

这个项目能做什么

网页版 是最完整的体验，支持：

🌐 三模型自由切换：讯飞 Spark、智谱 GLM、夸克 Quark，想用哪个点一下就行
🌍 中英繁三语界面：简体中文、繁体中文、English，自动切换不用重新加载
🌙 深色模式：护眼必备，虽然只是个按钮的事，但确实每天都在用
🎭 自定义人设：给 AI 设定一个角色，比如「帮我写代码的程序员」或者「用小学生都能听懂的话解释问题」
📝 Markdown 渲染：代码高亮、表格、列表，输出格式好看很多

终端版 则更适合那些喜欢敲命令的人：

python ai.py 今天天气怎么样
python ai.py 帮我写一个快排算法
python ai.py 用大白话解释什么是闭包

不用打开浏览器，不用等待网页加载，直接在终端里问完就走。对于经常在终端里工作的人来说，这种体验其实挺舒服的。

绘画版 是最近加的新功能，用的是 Pollinations AI。输入一段描述词，就能生成图片。不需要任何 API Key，不需要充值，打开就能用。当然，生成速度取决于网络和服务器心情，但作为一个小工具来说，够用了。

技术上的一些选择

说实话，这个项目没有什么特别高深的技术。HTML + CSS + JavaScript，前端三件套。Markdown 渲染用的是 marked.js，图标用的 Font Awesome，都是现成的轮子。

后端对接的是现成的 API，我自己只是做了一层封装和界面。所以代码量其实不大，维护起来也不累。

至于为什么搞了那么多语言的终端版本……主要是自己平时用的环境不太一样。有时候在 Linux 上，有时候在 Windows 虚拟机上，有时候又只想用手机上的 Termux 跑一个 quick query。既然都做了，不如多写几个版本，反正逻辑都是一样的——发请求、收响应、打印出来。

一些碎碎念

做这个项目的过程中，我最大的感受是：很多看起来「不可能」的事情，其实就是多做一步的问题。

比如多语言界面，一开始觉得挺麻烦的。后来想了个办法，把所有用户可见的文本都放在 HTML 的 data-* 属性里，JavaScript 动态读取。这样英文版和中文版的 HTML 结构完全一样，只是文本内容不同。改起来也方便，单独改一个文件就行。

深色模式也是类似的思路，用 CSS 的 class 切换背景色和文字色，JavaScript 只负责维护一个状态。代码加起来可能还不到二十行。

所以你看，技术上真的没什么门槛。关键是愿不愿意动手去做。

最后

如果你感兴趣，可以直接访问在线版本试试：

或者在好友链接那里直接点击 AI-Chat 访问，效果都一样

代码完全开源，有问题或者建议可以提 Issue。如果觉得有用，给个 Star 就是最大的支持了。

毕竟，能帮到一个人，就值了。

测试mathjax

Thu, 18 Jun 2026 00:00:00 +0000

大学级别的数学题目

测试 MathJax 3.2.2 专用高数综合例题（含分式、积分、级数、矩阵、极限、希腊字母、分段函数）

题目

设函数 $f(x)= \begin{cases} \displaystyle \frac{\ln(1+x^2)}{x}, & x\neq 0\\[6pt] 0, & x=0 \end{cases}$

求 $f’(0)$；
计算反常积分 $\displaystyle \int_{0}^{+\infty} \frac{x}{(1+x^2)^2}\mathrm{d}x$；
判断级数 $\displaystyle \sum_{n=1}^{\infty} \frac{(-1)^n \ln n}{\sqrt{n}}$ 的敛散性；
已知 $A= \begin{pmatrix} 1 & \alpha & 2\\ 2 & 3 & \beta\\ 0 & 1 & 1 \end{pmatrix}$ $|A|=4$，求 $\alpha,\beta$ 关系式；
$z=x^3y+\sin(xy)$，求 $\displaystyle \frac{\partial^2 z}{\partial x\partial y}$

参考答案

1. 导数

$f'(0)=\lim_{x\to 0}\frac{f(x)-f(0)}{x-0} =\lim_{x\to 0}\frac{\ln(1+x^2)}{x^2}$ $f'(0)=\lim_{x\to0}\frac{x^2}{x^2}=1$

2. 积分

令 $u=1+x^2,\ \mathrm{d}u=2x\mathrm{d}x$ $\int_{0}^{+\infty} \frac{x}{(1+x^2)^2}\mathrm{d}x =\frac12\int_{1}^{+\infty} u^{-2}\mathrm{d}u =\frac12\left.\left(-\frac1u\right)\right|_{1}^{+\infty} =\frac12$

3. 级数判别

$\left|\frac{(-1)^n \ln n}{\sqrt{n}}\right|=\frac{\ln n}{\sqrt{n}}$ $\lim_{n\to\infty}\frac{\ln n/\sqrt{n}}{1/n^{3/4}} =\lim_{n\to\infty}\frac{\ln n}{n^{1/4}}=+\infty$ 记 $u_n=\dfrac{\ln n}{\sqrt{n}}$，设 $g(x)=\dfrac{\ln x}{\sqrt{x}}$ $g'(x)=\frac{\dfrac1x\cdot\sqrt{x}-\ln x\cdot \dfrac1{2\sqrt{x}}}{x} =\frac{2-\ln x}{2x\sqrt{x}}$ $x>e^2$ 时单调递减，交错级数条件收敛。

4. 行列式

$|A| =1\cdot\begin{vmatrix}3&\beta\\1&1\end{vmatrix} -\alpha\cdot\begin{vmatrix}2&\beta\\0&1\end{vmatrix} +2\cdot\begin{vmatrix}2&3\\0&1\end{vmatrix}$ $=3-\beta-2\alpha+4=7-2\alpha-\beta$ $7-2\alpha-\beta=4 \implies \boldsymbol{2\alpha+\beta=3}$

5. 混合偏导

$\frac{\partial z}{\partial x}=3x^2 y + y\cos(xy)$ $\frac{\partial^2 z}{\partial x\partial y} =3x^2 + \cos(xy) - xy\sin(xy)$

网页三剑客

Wed, 17 Jun 2026 00:00:00 +0000

一篇教程文章

网页三剑客HTML、CSS、JS到底是什么？

前端入门科普：网页三剑客HTML、CSS、JS到底是什么？一文看懂网页底层原理

我们日常浏览的官网、博客、购物页面、短视频网页，所有看得见、点得动的网页，全部离不开前端三大基石，也就是大家常说的网页三剑客：HTML、CSS、JavaScript。

很多前端新手刚开始学习，始终分不清三者的区别，不知道各自负责什么工作。今天用通俗易懂的语言+极简可运行代码，分开拆解每一门技术，再讲解三者如何配合工作，零基础也能彻底看懂。

一、通俗类比：一秒分清三者分工

不用复杂术语，用盖房子类比，轻松记住三者定位：

HTML：房屋骨架
搭建网页整体结构，决定页面有标题、段落、按钮、图片，只有光秃秃的结构，无样式、无交互。
CSS：全屋装修
负责页面所有外观样式，修改颜色、字体、布局、间距，让简陋的页面变得美观好看。
JavaScript：智能控制系统
赋予网页交互能力，实现点击、弹窗、数据变化、动态特效，让静止的网页真正动起来。

一句话口诀：HTML搭结构，CSS做美化，JS做交互。

二、单独详解：三大技术各司其职

1. HTML —— 网页骨架，负责内容与结构

HTML 全称超文本标记语言，它不是编程语言，没有逻辑、没有运算，唯一作用就是搭建网页结构，承载网页所有文字、图片、按钮、链接等内容。

所有网页的基础都是HTML，没有HTML，网页就没有任何内容。

核心作用

划分网页头部、主体、底部区域
放置文字、图片、链接、表单、列表等所有页面元素
搭建页面整体层级结构

纯HTML代码示例（无样式，原生毛坯页面）

<!DOCTYPE html>
<head>
<title>纯HTML</title>
</head>
<body>
	<h1></h1>
	<p>HTML负责网页结构，是网页最基础的骨架</p>
	<a href="#">点击链接<button</button>
</body>
</html>

运行效果：浏览器直接展示原生默认样式，字体丑陋、排版靠左、没有配色，是最原始的网页毛坯状态。

2. CSS —— 网页美颜，负责样式与布局

CSS 全称层叠样式表，专门用来修饰HTML结构，无法独立运行，必须依附HTML元素生效。

CSS不新增任何页面内容，只改变页面长相和排版。

核心作用

1. 修改文字大小、颜色、字体、行间距
1. 设置背景色、圆角、阴影、边框
1. 实现页面居中、多栏布局、弹性排版
1. 制作鼠标悬浮动画、渐变效果
1. 适配电脑、手机不同屏幕尺寸

HTML+CSS结合代码示例（静态美观页面）

<!DOCTYPE html>
<head>
<!-- HTML+CSS样式代码 -->
<style>
	h1 {
		color: #2c3e50;
		text-align: center;
	}
	p {
		font-size: 16px;
		color: #666;
	}
	button {
		padding: 6px 12px;
		border: none;
		background-color: #409eff;
		color: #fff;
		border-radius: 4px;
	}
	/* 鼠标悬浮按钮变色 */
	button:hover {
		background-color: #66b1ff;
	</style>
	</head>
	<body>
	<h1>网页三剑客科普</h1>
	<p>HTML负责网页结构，CSS负责网页美化</p>
	<a href="#">点击链接<button></button>
</html>

运行效果：页面排版整齐、配色舒适、按钮有悬浮效果，页面颜值拉满，但页面依旧是静止的，点击按钮没有任何反应。

3. JavaScript —— 网页灵魂，负责交互与动态逻辑

简称JS，是真正的编程语言，拥有变量、循环、判断、函数等完整编程逻辑，是网页实现交互的核心。

静态页面做好结构和样式后，想要网页响应人的操作，必须依靠JS。

核心作用

1. 监听鼠标点击、键盘输入、页面滚动等操作
1. 弹窗提示、表单校验、数据判断
1. 动态修改页面文字、颜色、样式
1. 对接后端接口，请求网络数据
1. 实现轮播图、倒计时、弹窗、下拉菜单等网页特效

HTML+CSS+JS完整代码示例（可交互网页）

<!DOCTYPE html>
<html>
<head>
	<title>三剑客完整页面</title>
	<style>
		h1 {
			color: #2c3e50;
			text-align: center;
		}
		p {
			font-size: 16px;
			color: #666;
		}
		button {
			padding: 6px 12px;
			border: none;
			background-color: #409eff;
			color: #fff;
			border-radius: 4px;
			cursor: pointer;
		}
		button:hover {
			background-color: #66b1ff;
		}
	</style>
</head>
<body>
<h1>网页</h1<p>HTML结构 | CSS美化 |</p>
<button onclick="clickBtn()">点击我触发交互<!-- JS交互代码 -->
	<script>
		function clickBtn() {
			alert('JS生效啦！网页已经可以交互了✨');
		}
	</script>
</body>
</html>

运行效果：页面美观整洁，点击按钮会弹出提示框，网页真正实现人机交互，变成完整可用的网页。

三、三者配合流程：浏览器如何渲染网页？

浏览器打开网页时，会按照固定顺序执行三类代码，缺一不可：

第一步：解析HTML
读取HTML代码，生成网页DOM结构，渲染出所有文字、按钮、图片等基础内容。
第二步：加载CSS
读取CSS样式，给所有HTML元素统一美化，完成页面布局和视觉优化，生成静态美观页面。
第三步：执行JavaScript
运行JS代码，监听用户操作，动态修改页面内容和样式，实现所有交互功能。

四、三者核心区别总结表

技术	角色定位	核心功能	语言类型	是否可独立运行
HTML	网页骨架	搭建结构、存放页面内容	标记语言	可以，仅显示浏览器原生简陋页面
CSS	网页美颜	美化样式、完成页面布局	样式表语言	不可以，必须依托HTML才能生效
JS	网页灵魂	编写逻辑、实现人机交互	脚本编程语言	可以，可独立运行代码；操作网页必须依赖HTML

五、新手学习顺序建议

先学HTML：打好页面结构基础，熟悉各类标签用法
再学CSS：掌握页面布局和美化技巧，做出好看的静态页面
最后学JavaScript：学习编程逻辑，实现网页交互特效

所有前端框架（Vue、React、uniapp）、小程序、移动端网页，全部都是基于这三门基础技术封装而来，学好网页三剑客，才算真正入门前端。

文末总结

HTML：有内容，让网页有东西可看
CSS：有颜值，让网页变得好看
JS：有灵魂，让网页可以互动

三者相辅相成，共同构成了整个互联网网页的底层地基，学好这三门技术，你就已经敲开了前端开发的大门。

如何学习Python

Sun, 14 Jun 2026 00:00:00 +0000

如何快速学习Python

前言

在编程语言百花齐放的今天，Python 凭借其简洁的语法、强大的生态和广泛的应用场景，成为无数编程入门者的首选语言。很多人都听过“Python 简单易学”的说法，但真正上手时却常常陷入“看了就会，写了就废”的困境。本文将围绕五个核心问题，带你理清 Python 学习的思路，掌握快速入门的正确方法。

什么是 Python ？

Python 是一门高级、解释型、面向对象的通用编程语言，由荷兰程序员吉多·范罗苏姆（Guido van Rossum）于 1991 年正式发布。它的设计哲学是“优雅、明确、简单”，核心目标是让程序员能够用更少的代码完成更多的工作。

与 C、Java 等语言相比，Python 语法极度接近自然语言，去掉了繁琐的括号、类型声明和内存管理等底层细节。同样一个功能，Python 的代码量往往只有其他语言的几分之一。

# Python 实现一行输出 Hello World
print("Hello World")

Python 也是解释型语言，代码无需编译即可运行，写完就能看到结果，非常适合快速验证想法。同时它拥有极其丰富的第三方库生态，几乎所有领域都有成熟的工具包可以直接调用。

学了 Python 有什么用？

Python 被称为“万能语言”，不是因为它在每个领域都最强，而是因为它几乎无处不在。学习 Python 之后，你可以涉足这些方向：

1. 数据分析与可视化

利用 Pandas、NumPy、Matplotlib 等库，快速处理海量表格数据、生成统计图表，是运营、财务、科研等岗位提效的利器。

2. 人工智能与机器学习

Python 是 AI 领域的事实标准语言，TensorFlow、PyTorch、Scikit-learn 等主流框架均基于 Python 开发，从传统机器学习到大模型应用都离不开它。

3. 自动化脚本与办公提效

批量处理文件、自动整理数据、定时发送邮件、操控 Excel/Word……几行代码就能替代几小时的重复劳动，显著提升工作效率。

4. Web 后端开发

借助 Django、Flask、FastAPI 等框架，可以快速搭建网站接口和后台服务，开发效率远高于多数后端语言。

5. 网络爬虫与信息采集

通过 Requests、BeautifulSoup、Scrapy 等工具，自动化采集网络公开数据，用于市场分析、舆情监控、资料整理等场景。

除此之外，Python 在自动化运维、游戏开发、科学计算、区块链等领域也都有广泛应用。哪怕不做专职程序员，掌握 Python 也能成为你职场中的核心竞争力。

如何快速学习 Python ？

“快速学习”不等于“跳过基础”，而是用最短的时间建立完整的知识体系，避开无效学习。这里给出一套高效的学习路径：

第一阶段：夯实基础（1~2 周）

优先掌握核心语法，不要在细枝末节上死磕。重点攻克这些内容：

变量、数据类型、输入输出
条件判断与循环结构
列表、字典、元组、集合四大数据结构
函数定义、参数传递、返回值
文件读写与异常处理

学习要点：不要同时看多套教程，选一套系统课程跟着走，每个知识点配套 3~5 个练习题即可。

第二阶段：进阶提升（2~3 周）

理解面向对象编程思想，掌握类与对象、继承、封装、多态等概念；同时开始接触常用标准库，比如 os、time、random、re 正则表达式等。

第三阶段：专项深入（按需学习）

基础打牢后，不要盲目学全栈，选定一个方向深耕。想做数据分析就学 Pandas；想做自动化就主攻文件操作和脚本开发；想做 Web 就深入一个框架。

避坑提醒

不要沉迷“收集资料”，硬盘里存几十 G 教程不会让你学会编程
不要死磕冷门语法，90% 的场景只会用到 10% 的知识点
不要频繁切换语言，先把一门学到能用的程度再考虑扩展

是否动手实践写代码？

答案是肯定的，而且是必须动手。

编程是一门技能，不是知识。只看视频、只看书本，就像只看游泳教程不下水，永远学不会。很多人陷入“听课都懂，自己写就大脑空白”的误区，本质就是动手太少。

动手写代码的意义在于：

1.纠正认知偏差：很多语法你以为懂了，一写就会发现各种报错
2.培养调试能力：排查错误、定位 Bug 是程序员的核心能力
3.形成肌肉记忆：写得多了，基础语法才能信手拈来
4.建立成就感：跑通一个程序、解决一个问题，是持续学习的动力来源

哪怕是最简单的例子，也一定要亲手敲一遍，而不是复制粘贴。每一个报错都是进步的机会，不要害怕出错。

动手实践起来吧！

说再多不如动手写几行。这里准备了三个入门级小练习，你可以立刻打开编辑器尝试实现。

练习 1：猜数字游戏

程序随机生成一个 1~100 的数字，用户循环输入猜测，程序提示“太大了”或“太小了”，直到猜对为止。

  
import random

target = random.randint(1, 100)
count = 0

while True:
    try:
        num = int(input("请输入你猜的数字："))
        count += 1
        if num > target:
            print("太大了！")
        elif num < target:
            print("太小了！")
        else:
            print(f"恭喜你猜对了！答案就是 {target}，你一共猜了 {count} 次")
            break
    except ValueError:
        print("请输入有效的整数！")

练习 2：批量重命名文件

将指定文件夹下所有 txt 文件按顺序重命名为 file_1.txt、file_2.txt……

  
import os

folder_path = "./test_files"  # 替换为你的文件夹路径
count = 1

for filename in os.listdir(folder_path):
    if filename.endswith(".txt"):
        old_path = os.path.join(folder_path, filename)
        new_path = os.path.join(folder_path, f"file_{count}.txt")
        os.rename(old_path, new_path)
        count += 1

print(f"共重命名了 {count - 1} 个文件")

练习 3：九九乘法表

用循环打印出标准的九九乘法表。

  
for i in range(1, 10):
    for j in range(1, i + 1):
        print(f"{j}×{i}={i*j}", end="\t")
    print()

完成这三个练习后，你就已经跨过了 Python 的入门门槛。接下来可以从自己的真实需求出发，找一个小项目完整做下来——比如做一个记账脚本、爬取自己喜欢的网站数据、写一个简单的待办清单工具。

写在最后

快速学习 Python 的秘诀，总结起来就是：先抓主干、边学边练、以用促学。不要追求“完全学会了再动手”，编程永远是边做边学的过程。

从你写下第一行 print("Hello World") 开始，就已经走在了正确的路上。保持耐心，持续输出代码，很快你就能感受到 Python 带来的效率与乐趣。

博客的进度

Fri, 12 Jun 2026 00:00:00 +0000

完成了

博客进度

回应上期博客内容，我已经把博客的评论系统做好了

并且制作了③套评论系统，可供大家使用：

giscus
utterances
gitalk

这三套在国内是可以稳定运行且 UI 界面都很不错的评论系统

后面我会慢慢细讲

修改方面

历经两周的修改融合，我已经修改一下基本内容：

完全个人化博客，不再依赖Hux部分源代码
充分利用之前引入 fa 图标，使界面跟好看
增加Microsoft Clarity，根据用户优化界面
增加comments.html，单文件管理评论
增加sitemap.xml，让搜索引擎收录博客
增加robots.txt，开放搜索机器人
增加README.zhTW.md，繁體中文版仓库介绍
删除ads.html，减少广告的植入
删除multilingual-sel.html，去除post语言选择
删除mathjax_support.html，整合进了footer.html
修改_config.yml，实现所有自定义代码的可开关性
修改README.md，完全自己的仓库介绍
修改代码的注释机制，避免无用的空注释
完成三种语言的仓库博客的介绍，确定主语言
完成优化代码的过程，减少不必要的类名
确定博客未来的发展方向

回应之前

评论系统

上期博客的最后我说会做出评论系统，我也做出来啦

为了省事，我直接使用了现成的评论方案(~~就是懒~~)

目前来说，这些评论系统基本不会立马倒掉，可放心使用

下面是这个评论系统方案的配置代码：

# 评论总开关
comments: [true/false]

giscus:
  enable: [true/false]
  repo: "username/reponame"
  repo_id: "[Repository ID]"
  category: "[Category Name]"
  category_id: "[Category ID]"
  mapping: "[pathname/url/title]"
  strict: [0/1]
  reactions_enabled: [0/1]
  emit_metadata: [0/1]
  input_position: "[top/bottom]"
  theme: "[light/dark/custom]"
  lang: "[zh-CN/en-US/other]"
  loading: "[lazy/eager]"

utterances:
  enable: [true/false]
  repo: "username/reponame"
  issue_term: "pathname"
  label: "[Comment/other]"
  theme: "[github-light/other]"

gitalk:
  enable: [true/false]
  clientID: "[Client ID]"
  clientSecret: "[Client Secret]"
  repo: "username/reponame"
  owner: "[Owner Name]"
  admin: "[Admin Account]"
  distractionFreeMode: [true/false]

如果不用直接false就行了，建议不要直接删代码

还有一个专门的comments.html插入评论

大家可以自己看一下，不要用我的ID做！

数学公式

一些特殊的数学符号是无法正常显示的，所以需要使用mathjax库显示

这个库可以完美显示所有数学物理的公式与式子，这里就不做演示了

之前Huxpro的博客也使用mathjax库，但版本有点旧，也有一点Bug

所以我就换成了兼容IE11的3.2.2版本(已经是最后的兼容了)

最终整合后的代码如下：

<!-- add support for mathjax -->
<script>
window.MathJax = {
  tex: {
	inlineMath: [['$', '$']],
	displayMath: [['$$', '$$']],
	processEscapes: true,
	equationNumbers: { autoNumber: "AMS" }
  },
  svg: {
	scale: 0.9,
	fontCache: 'global'
  }
};
</script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.bootcdn.net/ajax/libs/mathjax/3.2.2/es5/tex-svg.min.js">
</script>

注意

开启mathjax必须要在_config.yml和*Front Matter都写上下面的代码才行：

mathjax: true

像这样：

---
layout: post
title: "文章标题"
subtitle: "文章小标题"
author: "作者"
header-img: "img/post-bg-4.png"
header-mask: 0.2
# 下面的代码就是开关，不要就删掉或改成false
mathjax: true
tags:
  - 标签
---

不想用千万不要直接删代码！

后续计划

后续我可能会添加繁體中文版的About页，呼应仓库

全部使用less或CSS做样式文件，增加giscus专门的界面样式

深度修改优化JS代码，脱离Huxpro的代码

~~增加几篇水博客，忽悠浏览用户~~

后记

博客做得很好了，给个Star吧！

重要提示

Sun, 07 Jun 2026 00:00:00 +0000

it’s already half

博客怎么样了？

基本完工了！

已经添加修改包括以下内容:

完全个人化
充分利用 fa 图标
增加sitemap.xml
增加robots.txt
优化注释机制
增加Microsoft Clarity
完成三种语言的介绍
优化代码，减少类名

哪我去除了什么

很遗憾，评论系统被墙了

所以我就删掉了😭

同时，我删掉修改了一些无用注释

这是必要的，也是刚需的

然后呢？

dis的评论不行，我准备以后使用gitalk来实现评论系统

等我的好消息吧！愿你保持好奇

后记

我已经连续开发了一周

喜欢就给个Star吧！

今天早上开启 Giscus 评论

2026-06-08 00:00

2048-Game

Sat, 06 Jun 2026 00:00:00 +0000

2048-Game, my first repository

2048-Game 是我第一个也是开发最久的GitHub仓库

现在它已经更新到了 v2.5.9(160) 版本，版本迭代很快

(它曾经还是我的个人主页)

这个项目的由来

在我刚注册完 GitHub 后就关注到了原版 gabrielecirulli 的开源2048

我当时非常感兴趣，于是我就下载了下来，开始研究

但由于种种原因，直到4月中旬，我才正式开始编辑

半个月之后，我终于完成了这个项目，并推送到了GitHub上

项目细节

最开始我其实是想用原生 JavaScript 实现的

带感觉有点难度，所以使用 JQuery 动画实现了

确定使用 jQuery 之后，我就开始疯狂编辑

18号的时候，我就基本做完了初始代码，然后开始疯狂调试

调得基本差不多的时候，我就尝试把代码分开来，弄完后就开始翻译30种语言

这些都搞完后，我又开着别人的彩蛋设置页面，感觉非常的cool~，

所以我也加进来了，并对它进行了一些优化(实际上改了很多)

这些都差不多搞完后,我就把项目推送到了 GitHub 上面，开始实际页面调试

上传完后，我在应用商店里面看到一个AI工具—— TRAE 。

据说他可以直接连接你的 GitHub 仓库，于是我就下载来使用了一下

效果也是非常的好，帮我修复了很多 BUG，在这里也推荐你们用一下

搞了这些以后，我就陆陆续续的更新了一些东西(比如WASD操控)

随后我就开始静默更新了(相当于已经存档了)

更多细节，你可以看看我的更新日志

使用方法

1. 直接访问 2048-Game

点这里→ 2048-Game

2. 下载游玩

git clone git@github.com/bill74186/2048-Game.git
cd 2048-Game
python3 -m http.server 8080
# Press "Ctrl + C" to stop

后记

珍惜时光，给个Star！
——bill74186

Hi, bill74186

Fri, 05 Jun 2026 00:00:00 +0000

关于我自己

bill74186

我的网名叫做 bill74186 。
为什么叫这个呢？
有几种原因：

1. 字面“意思”

我就想起这个名字，
之前也用过其他的~~(比如1920141mmll)~~
bill 这个英文单词的意思就是：

bill [bɪl] n. 比尔(人名)

就是这么简单
至于 74186 这串数字… 就是顺口罢了！

2. 有点“意思”

bill 的意思还有钞票，账单的意思
billion (亿)和 bill 像不像？
然后后面跟着一串“小数字”，
懂了吧 7418.6 billion 的 money !💰

3. 还有“意思”

bill74186 还是我的一个仓库，
用于介绍我自己(就是ABOUT页面的内容)
MarkDown 写的还行，有兴趣可以看一下

知道了吗？

现在，你知道 bill74186 是什么意思了吗？

你好「Bill博客」

Thu, 04 Jun 2026 00:00:00 +0000

“Yeah It’s on. ”

bill74186 的 Blog 就这么开通了。

跳过废话，直接看技术实现

今天我终于有地方分享我的生活了

之前我的个人主页一直是我的2048-Game项目的网页，看起来没有排面

之前一直没有时间搞个人主页（主要还是懒～）六一的时候觉得没有博客有点丢脸

所以一不做二不休花了三天时间部署我的Blog，现在基本搞好了

正文

接下来说说搭建这个博客的技术细节。

好处

正好之前就有关注过 GitHub Pages + Jekyll 快速 Building Blog 的技术方案，非常轻松时尚。

其优点非常明显：

Markdown 带来的优雅写作体验
非常熟悉的 Git workflow ，Git Commit 即 Blog Post
利用 GitHub Pages 的域名和免费无限空间，不用自己折腾主机
- 如果需要自定义域名，也只需要简单改改 DNS 加个 CNAME 就好了
Jekyll 的自定制非常容易，基本就是个模版引擎

坏处

本来觉得最大的缺点可能是 GitHub 在国内访问起来太慢，所以第二天一起床就专门找了个VPN加速器加速连接

结果发现使用 termux git上传仓库巨快，所以就把VPN删了

过程

配置的过程中也没遇到什么坑，基本就是 Git 的流程，相当顺手

大的 Jekyll 主题上直接 fork 了 Hux Blog（这个主题也相当有名，就不多赘述了。唯一的缺点大概就是评论系统被墙了，于是我忍痛割爱删掉了。）

本地调试环境需要 gem install jekyll，结果 rubygem 的源居然被墙了……后来手动改成了我大淘宝的镜像源才成功

修改文件名时，还算正常。到了修改archive时，当时我想改成tags这个名，结果一直报错，所以就不改了

最后就进入了耗时反而最长的做图、写字阶段，也算是进入了写博客的正轨，因为是类似 Hack Day 的方式去搭这个站的，所以折腾折腾着大半夜就过去了。

第二天考虑修改压缩代码，把没有压缩的文件全部压缩或删除了。顺便优化了nav的fa标签

后记

回顾这个博客的诞生，纯粹是出于个人兴趣。在博客相关问题上回答并获得一定的 star 后，我决定把这个博客主题当作一个小小的开源项目来维护。

我也非常感谢我的朋友（TA不愿意透露姓名），帮我修改一些代码

如果你恰好逛到了这里，希望你也能喜欢这个博客主题。

—— bill74186 后记于 2026.06