技术分类 · 哔哔一二

技术用

用 DevTools 高效调试 B2 样式

定位被覆盖的样式、比较盒模型、实时改 CSS，把调试时间砍半。

2026年8月23日 1 分钟阅读

#调试#DevTools#CSS

技术用

用 Git 管理子主题版本

把 B2 子主题目录纳入 Git，记录每次美化改动，随时回滚。

2026年7月26日 1 分钟阅读

#Git#版本控制#子主题

技术用

用 wp_enqueue 正确引入 JS/CSS

杜绝直接在模板里写 script 标签，用 wp_enqueue 管理依赖与版本。

2026年7月19日 1 分钟阅读

#WordPress#enqueue#资源

技术 W

WordPress 过滤器与动作钩子入门

理解 add_filter / add_action，用钩子在 B2 输出前后插入或改写内容。

2026年7月12日 1 分钟阅读

#WordPress#Hook#Filter

技术自

自定义 WordPress 短代码 Shortcode

用 add_shortcode 封装可复用组件，在文章里一键插入卡片、按钮等。

2026年6月28日 1 分钟阅读

#WordPress#Shortcode#functions.php

技术 W

WordPress REST API 入门

用 REST API 读取文章与分类，为 B2 做自定义前端或小程序打基础。

2026年6月21日 1 分钟阅读

#WordPress#REST API#JSON

技术首

首页首屏加载优化清单

给 B2 首页做体检：字体、图片、脚本、缓存逐项提速。

2026年6月14日 1 分钟阅读

#性能#优化清单#首页

技术关

关键渲染路径与首屏优化

理清浏览器渲染流程，针对性削减阻塞资源，加快首次内容绘制。

2026年6月7日 1 分钟阅读

#性能#CRP#优化

技术代

代码块语法高亮

用 highlight.js / Prism 给文章代码上色，并适配暗色主题。

2026年5月31日 1 分钟阅读

#代码高亮#highlight.js#美化

技术平

平滑滚动与自动生成文章目录

给长文加 TOC 侧边栏，点击平滑跳转并高亮当前章节。

2026年5月24日 1 分钟阅读

#JS#TOC#交互

技术内

内联 SVG 图标与 symbol sprite

用 SVG sprite 一次性注入图标，避免重复请求，颜色随 currentColor 变化。

2026年5月17日 1 分钟阅读

#SVG#图标#性能

技术图

图片懒加载：native lazy 与 IntersectionObserver

延迟加载首屏外图片，缩短首屏时间，附原生与 JS 两种方案。

2026年5月10日 1 分钟阅读

#性能#图片#懒加载

技术移

移动优先的响应式断点设计

从手机样式往上叠加，用最少断点覆盖大屏，避免样式冲突。

2026年4月19日 1 分钟阅读

#响应式#CSS#移动端

技术 p

position: sticky 实现吸顶导航

用 sticky 让导航在滚动时吸附顶部，比 fixed 更少破坏布局。

2026年4月12日 1 分钟阅读

#CSS#sticky#导航

技术 w

will-change 与 backdrop-filter 的正确使用

避免 will-change 滥用导致内存暴涨，以及在滚动列表里谨慎使用 backdrop-filter。

2026年4月5日 1 分钟阅读

#性能#will-change#backdrop-filter

技术过

过渡动画性能优化

只动 transform 与 opacity，避免触发重排重绘，让悬停动画丝滑不掉帧。

2026年3月29日 1 分钟阅读

#性能#动画#CSS

技术用

用 clamp() 实现流式排版

一行代码让字号随视口平滑缩放，替代多段媒体查询。

2026年3月22日 1 分钟阅读

#CSS#响应式#clamp

技术用

用 Astro 搭建一个高性能个人博客

从零开始，用 Astro 内容集合与 Tailwind 打造一个轻量、快速、对中文友好的个人博客。

2026年3月12日 1 分钟阅读

#Astro#静态站点#前端

技术网

网页字体优化与 font-display

用 font-display 控制文字闪动，配合 preload 与系统字体回退提速中文站点。

2026年3月8日 1 分钟阅读

#性能#字体#Web Font

技术暗

暗色模式：自动 + 手动切换

基于 prefers-color-scheme 跟随系统，再用 CSS 变量与少量 JS 支持手动切换。

2026年3月1日 1 分钟阅读

#CSS#暗色模式#主题

技术前

前端性能优化：从渲染到加载的实战清单

一份可以立刻上手的前端性能优化清单，覆盖加载、渲染与交互三个层面。

2026年2月20日 1 分钟阅读

#性能优化#Web#体验

技术 C

CSS Grid 网格布局实战

用二维网格做杂志式排版与自适应列数，复杂布局比 Flex 更直观。

2026年2月16日 1 分钟阅读

#CSS#Grid#布局

技术 F

Flexbox 核心布局实战

用弹性盒模型快速实现导航栏、卡片排列与垂直居中，告别 float 与 margin 技巧。

2026年2月9日 1 分钟阅读

#CSS#Flexbox#布局

技术 C

CSS 优先级与特异性避坑

理解选择器权重计算，避免 !important 满天飞，让覆盖 B2 样式更可控。

2026年2月2日 1 分钟阅读

#CSS#特异性#调试

技术用

用 CSS 变量统一管理主题色

通过 :root 自定义属性集中管理颜色、间距与圆角，改一处全局生效。

2026年1月22日 1 分钟阅读

#CSS#变量#主题