JavaScript on 清风客

软件开发框架期末复习重点（精简归纳版）

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

前言

这是一份软件开发框架课程的期末复习重点，涵盖了 HTML、CSS、JavaScript 和 jQuery 四大板块的核心知识点。精简归纳，方便考前快速回顾。

一、HTML 核心知识点

1. 图片标签 `<img>` 属性

属性	说明
`src`	图片路径（URL）
`alt`	替代文本（图片无法显示时展示，辅助屏幕阅读器）
`title`	鼠标悬停时的提示文字
`width` / `height`	设置图片宽高
`border`	边框（已不推荐，建议用 CSS）

2. 表单 `<form>` 创建与常用控件

控件	说明
`<input type="text">`	单行文本输入框
`<input type="password">`	密码输入框（内容隐藏）
`<input type="radio">`	单选框（一组选一个）
`<input type="checkbox">`	复选框（一组选多个）
`<input type="submit">`	提交按钮
`<input type="reset">`	重置按钮
`<textarea>`	多行文本输入框
`<select>` + `<option>`	下拉列表框
`<button>`	通用按钮（可触发 JS）
`<label>`	为控件提供描述标签

3. 列表创建

无序列表：<ul><li>...</li></ul>（圆点符号）
有序列表：<ol><li>...</li></ol>（数字序号）
定义列表：<dl><dt>术语</dt><dd>描述</dd></dl>
嵌套列表：在 <li> 内再嵌套 <ul> 或 <ol>

二、CSS 核心知识点

1. 基础选择器

选择器	语法	说明
元素选择器	`div`	选择所有指定标签
类选择器	`.className`	选择带该类名的元素
ID 选择器	`#idName`	选择唯一 ID 元素
通配符选择器	`*`	选择所有元素
属性选择器	`[type="text"]`	根据属性选择
伪类选择器	`:hover`, `:focus`, `:first-child`	特定状态选择
伪元素选择器	`::before`, `::after`	创建虚拟元素

2. 文本样式与对齐

属性	说明
`font-family`	字体
`font-size`	字体大小
`color`	文字颜色
`font-weight`	粗细（`normal` / `bold` / `100~900`）
`font-style`	样式（`normal` / `italic`）
`text-decoration`	装饰（`underline` / `overline` 等）
`text-align`	水平对齐（`left` / `right` / `center` / `justify`）
`vertical-align`	垂直对齐（行内/表格用；块级推荐 Flexbox）

3. 内边距与外边距

内边距 padding：内容到边框的距离
外边距 margin：元素到外部的距离
简写顺序：上右下左（如 padding: 10px 20px 10px 20px）

4. 行内元素 vs 块级元素

类型	代表	特点
行内元素	`span`, `a`, `img`, `strong`, `em`	不换行，不能设宽高（替换元素除外）
块级元素	`div`, `p`, `h1~h6`, `ul`, `ol`, `li`	独占一行，可设宽高

转换方式：

display: block; → 行内转块
display: inline; → 块转行内
display: inline-block; → 行内块（不换行但可设宽高）

5. 浮动（Float）及清除方法

引发问题：父元素高度塌陷、浮动覆盖其他内容

清除方案（推荐度从低到高）：

浮动元素后加空 <div style="clear:both;"> — 冗余
给父元素设固定高度 — 不灵活
父元素加 overflow: hidden; — 简单但有副作用

伪类清除法（推荐）：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

6. 盒子模型（Box Model）

由内到外：

`1`	`内容（content） → 内边距（padding） → 边框（border） → 外边距（margin）`

`box-sizing` 值	说明
`content-box`（默认）	宽高仅指内容区域
`border-box`	宽高包含 padding 和 border（更直观）

7. 定位方式（Position）

值	说明
`static`	默认，正常文档流
`relative`	相对自身原位置偏移，仍占文档空间
`absolute`	相对最近已定位祖先，脱离文档流
`fixed`	相对视口固定，脱离文档流

堆叠顺序：使用 z-index（数值越大越靠上）

三、JavaScript 核心知识点

1. 数据类型

分类	类型
基本类型（值类型）	`Number`, `String`, `Boolean`, `Undefined`, `Null`, `Symbol`
引用类型（对象类型）	`Object`, `Array`, `Function`, `Date`, `RegExp` 等

2. 常用数组操作

操作	方法
访问	`arr[0]`
修改	`arr[0] = 新值`
末尾添加	`push(元素)`
开头添加	`unshift(元素)`
任意位置增/删	`splice(索引, 删除个数, 添加的元素...)`
末尾删除	`pop()`
开头删除	`shift()`
查找索引	`indexOf(元素)`
遍历	`for` 循环或 `forEach()`
连接数组	`concat(另一个数组)`
转字符串	`toString()`

3. 相等判断

运算符	说明	示例
`==`（宽松相等）	比较值，会进行类型转换	`"5" == 5` → `true`
`===`（严格相等）	比较值和类型，均相同才为 `true`（推荐使用）	`"5" === 5` → `false`

4. 函数定义与定时函数

基本写法：

1
2
3

function 函数名(参数1, 参数2) {
  // 函数体
}

定时函数：

方法	说明
`setTimeout(函数, 毫秒)`	延迟执行一次
`setInterval(函数, 毫秒)`	每隔指定时间重复执行

示例：

// 5 秒后执行一次
var timer = setTimeout(() => { console.log("执行"); }, 5000);

// 每 2 秒重复执行
var interval = setInterval(() => { console.log("周期执行"); }, 2000);

四、jQuery 选择器

1. 基本选择器

选择器	说明
`$("#id")`	ID 选择
`$(".class")`	类选择
`$("element")`	标签选择
`$("*")`	全选

2. 层次选择器

选择器	说明
`$("祖先后代")`	后代选择
`$("父 > 子")`	子代选择
`$("前 + 后")`	紧邻兄弟
`$("前 ~ 后面所有")`	后面所有兄弟

3. 过滤选择器

分类	选择器
基本过滤	`:first`, `:last`, `:even`, `:odd`, `:eq(index)`
内容过滤	`:contains('文本')`
可见性过滤	`:visible`, `:hidden`
属性过滤	`[type='text']`
子元素过滤	`:nth-child(n)`
表单过滤	`:input`, `:enabled`, `:disabled`, `:checked`

4. 属性选择器

选择器	说明
`[attribute]`	拥有该属性
`[attribute=value]`	属性等于某值
`[attribute!=value]`	属性不等于某值
`[attribute^=value]`	属性以某值开头
`[attribute$=value]`	属性以某值结尾
`[attribute*=value]`	属性包含某值

总结

板块	核心内容	考试重点
HTML	标签属性、表单控件、列表	`<img>` 属性、`<form>` 各类 input、列表嵌套
CSS	选择器、盒模型、定位、浮动	选择器优先级、`position` 区别、清除浮动
JavaScript	数据类型、数组操作、定时器	`==` vs `===`、数组方法、`setTimeout`/`setInterval`
jQuery	各类选择器	基本/层次/过滤/属性选择器的灵活运用

祝考试顺利！

我的博客美化与功能完善之路 — Hugo + Stack 主题深度定制

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

前言

从零搭建一个个人博客其实不难——Hugo 一条命令就能生成一个站点。但要让博客真正有"自己的味道"，就得花不少心思了。

我的博客从去年冬天开始搭建，这半年多来陆陆续续加了各种功能和美化，踩了不少坑，也学到了很多东西。这篇文章就来记录一下我是怎么一步一步把这个博客折腾成现在这个样子的。

目前博客的主要特色：

🎨 毛玻璃 + 纯白 + 暗夜三主题自由切换
✨ 粒子动画背景 + 自定义光标
🎵 底部固定音乐播放器（带进度记忆）
💬 Giscus 评论区（跟随主题明暗切换）
🔍 客户端全文搜索（支持 URL 参数）
📱 移动端适配的汉堡菜单 + 内联搜索
📑 文章页悬浮目录
🔗 PJAX 无刷新页面切换
📤 文章社交分享（微信/微博/QQ）

下面就一项一项来说。

一、视觉美化

1. 三主题切换 — 毛玻璃 / 纯白 / 暗夜

这是我最满意的一个功能。Stack 主题原生只支持亮色/暗色两种模式，我在此基础上增加了一个"毛玻璃“模式，作为默认主题。

三个主题各有特点：

主题	特点	适用场景
毛玻璃 (Glass)	半透明卡片 + 模糊背景 + 粉色粒子	日常浏览，展示个性
纯白 (Light)	纯白背景 + 高对比度 + 隐藏背景图	认真阅读，打印友好
暗夜 (Dark)	GitHub 风格暗色 + `#0D1117` 底色	夜间阅读，保护眼睛

主题状态存储在 localStorage 中，刷新不丢失。评论组件（Giscus）和音乐播放器（APlayer）也会跟随主题自动切换配色。

实现上，核心是通过 CSS 自定义属性区分三个主题的变量值：

[data-theme="glass"] {
    --card-background: rgba(255, 255, 255, 0.45);
    --card-border: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px);
    /* ... */
}

[data-theme="light"] {
    --card-background: #ffffff;
    --card-border: #e0e0e0;
    /* ... */
}

[data-theme="dark"] {
    --card-background: #161B22;
    --card-border: #30363d;
    /* ... */
}

TypeScript 维护一个 ThemeSwitcher 类，通过 document.documentElement.setAttribute('data-theme', theme) 切换主题，并派发 onColorSchemeChange 事件通知其他组件。

2. 粒子动画背景

在毛玻璃主题下，全站背景会显示粉色粒子动画，用的是经典的 particles.js 库。

配置文件在 assets/background/particlesjs-config.json，设置了 120 个粉色（#f3afca）粒子，粒子之间有连线，鼠标可以抓取和排斥粒子。粒子动画只在毛玻璃主题下显示，切换到纯白或暗夜时会自动隐藏——毕竟阅读的时候不需要这些花里胡哨的东西。

3. 自定义光标

我给博客的三种指针状态换了定制光标：

默认光标 → 青色圆形箭头（1.png）
文本选择 → 同系列 I 型光标（2.png）
链接悬停 → 同系列手型光标（3.png）

光标的实现很简单，CSS 的 cursor 属性配合 url() 即可：

body, html, img {
    cursor: url('/mouse/1.png'), auto;
}

input, textarea, p, .article-content {
    cursor: url('/mouse/2.png'), text;
}

a, button, .copyCodeButton {
    cursor: url('/mouse/3.png'), pointer;
}

4. 自定义字体 — 宋体

用 @font-face 加载了一个中文字体文件（assets/font/宋.ttf），并通过 Hugo 的资源管道 resources.Get 获取文件的 URL。然后将 --base-font-family 和 --code-font-family 两个 CSS 变量都覆盖为这个字体，让正文和代码块都有统一的风格。

5. 卡片悬浮效果

我借鉴了华为商城的设计风格——鼠标悬浮时卡片微微上浮（translateY(-5px)），阴影加深。这个效果应用到了文章列表、侧边栏菜单、侧边栏个人信息卡片、标签云等几乎所有可点击的区域：

.article-list--compact article:hover,
.widget:hover,
.sidebar-profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

这个 0.35 秒的三次贝塞尔缓动动画让整个网站的交互感提升了一个档次——不会太慢让人不耐烦，也不会太快没感觉。

二、交互体验

1. PJAX 无刷新页面切换 + 进度条

这可能是对用户体验提升最大的一个功能。PJAX（PushState + Ajax）让你在页面之间切换时不需要整页刷新——只有 .main-container 的内容被替换，Header、Sidebar、Footer 等保持不变。

再配合 topbar.js 进度条，页面切换时有类似 YouTube 的顶部彩色进度条动画，从白色渐变到蓝色（rgba(0, 149, 234, 1)），体验非常流畅。

实现的时候踩了一个大坑——PJAX 替换内容时不会执行新页面中的 <script> 标签。这意味着评论组件（Giscus）在页面切换后就消失了。解决方案是在 pjax:complete 事件中手动重建 Giscus：

function reloadGiscus() {
    var giscusDiv = document.getElementById('giscus');
    if (!giscusDiv) return;
    giscusDiv.innerHTML = '';
    var script = document.createElement('script');
    script.src = 'https://giscus.app/client.js';
    script.setAttribute('data-repo', 'xuewexin/xuewexin.github.io');
    // ... 其他属性
    document.head.appendChild(script);
}

2. 悬浮目录 (TOC)

对于长文章，目录导航是刚需。Stack 主题默认的目录在文章内顶部，滚动后就看不到了。于是我写了一个悬浮目录按钮：

文章页面右侧中间固定一个圆形按钮
点击后从右侧滑出一个 300px 宽的目录面板
通过轮询同步 #TableOfContents 的高亮状态，实现滚动跟踪

支持 ESC 关闭、点击遮罩关闭，移动端自动缩小宽度。目录内容太少（少于 100 字符）时自动隐藏，避免只有一个标题的尴尬。

3. 回到顶部按钮

当页面滚动超过 400px 时，右下角出现一个圆形回到顶部按钮。用 requestAnimationFrame 做了滚动监听的节流优化，避免高频触发影响性能。为了不和底部的音乐播放器重叠，在移动端会抬高按钮位置。

4. 代码块复制按钮

每个代码块右上角自动添加一个「Copy」按钮，点击后复制代码到剪贴板，按钮文字短暂变为「Copied!」。代码从 Stack 主题的 main.ts 中实现。

三、功能增强

1. APlayer 音乐播放器

博客底部固定了一个 APlayer 音乐播放器，预设了 8 首歌：

实现了播放位置记忆——关闭页面前把当前歌曲索引、播放进度、暂停状态存进 localStorage，下次打开自动恢复。切换歌曲时有 500ms 的延迟等待缓冲，避免切歌卡顿。

2. Giscus 评论区

用 GitHub Discussions 驱动的 Giscus 评论系统。最大的改进是暗色主题跟随——通过 postMessage API 与 Giscus 的 iframe 通信，当博客切换主题时，评论区也同步切换：

function setGiscusTheme(theme) {
    var iframe = document.querySelector('.giscus-frame');
    if (!iframe) return;
    iframe.contentWindow.postMessage({
        giscus: { setConfig: { theme: theme } }
    }, 'https://giscus.app');
}

3. 客户端全文搜索

这个功能花了不少心思。搜索页面会用 Hugo 的 JSON 输出格式生成一个全站文章索引，然后通过 TypeScript 实现客户端全文搜索：

支持多关键词（空格分隔）匹配
在标题和正文中分别匹配，加权评分
显示匹配片段（前后各 20 个字符的上下文）
搜索结果同步到 URL：/search/?keyword=你的搜索词，可以通过链接分享搜索结果

4. 微信联系弹窗

侧边栏菜单增加了一个「联系作者」入口，点击弹出微信二维码。弹窗支持：

点击空白处关闭
ESC 键关闭
阻止背景滚动
暗色主题适配

每篇文章底部也有一个微信联系按钮，绿色微信品牌配色。

四、移动端适配

移动端体验是衡量一个博客好坏的重要标准。我重写了移动端的顶部导航栏，包括：

汉堡菜单：带动画旋转效果的汉堡图标
站点标题：“欢迎来到清风客的blog”
内联搜索：点击搜索图标在顶栏内展开搜索输入框，自动聚焦

移动端视口 ≤ 767px 时自动切换到这个布局。侧边栏菜单项在移动端也做了优化——去掉圆角，全宽居中排列。

五、社交分享

每篇文章底部有四个分享按钮：

复制链接 — 一键复制文章 URL，兼容旧浏览器的 document.execCommand('copy') 回退方案
微信分享 — 通过 api.qrserver.com 动态生成文章二维码
微博分享 — 跳转微博分享页面
QQ 分享 — 跳转 QQ 分享页面

分享弹窗同样支持暗色适配和 ESC 关闭。

六、部署流水线

博客托管在 GitHub Pages，通过 GitHub Actions 自动部署。推送代码到 main 分支后，工作流会自动：

用 Hugo Extended 构建站点（包含草稿内容）
将生成的静态文件推送到 xuewexin.github.io 仓库

站点地址：https://xuewexin.github.io

结语

从一个默认的 Hugo 主题，到如今这个功能齐全的个性化博客，这半年来我学到了很多前端知识——CSS 变量、TypeScript 构建、PJAX 原理、浏览器 API（localStorage、postMessage、clipboard）等等。

当然，还有一些想做的功能没来得及加：

图片懒加载优化（目前图片太多的话首屏加载会慢）
文章分类的 RSS 订阅
更丰富的文章封面图展示

写博客这件事本身就很有意思——你不仅要会写代码，还得会设计、会排版、会考虑用户体验。但对于每个程序员来说，拥有一个自己亲手搭建的博客，绝对是一件很酷的事情。

感谢各位的观看，如有不足的地方请见谅 (●’◡’●) (～￣▽￣)～

本文首发于「清风客」个人博客，欢迎来访交流。