惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - Franky
N
Netflix TechBlog - Medium
Google Online Security Blog
Google Online Security Blog
月光博客
月光博客
量子位
酷 壳 – CoolShell
酷 壳 – CoolShell
V
V2EX
腾讯CDC
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 聂微东
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
M
MIT News - Artificial intelligence
Vercel News
Vercel News
The GitHub Blog
The GitHub Blog
Hugging Face - Blog
Hugging Face - Blog
博客园 - 【当耐特】
Apple Machine Learning Research
Apple Machine Learning Research
aimingoo的专栏
aimingoo的专栏
博客园 - 三生石上(FineUI控件)
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
MongoDB | Blog
MongoDB | Blog
H
Help Net Security
The Cloudflare Blog
Blog — PlanetScale
Blog — PlanetScale
F
Full Disclosure
G
Google Developers Blog
罗磊的独立博客
Jina AI
Jina AI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Y
Y Combinator Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
J
Java Code Geeks
A
About on SuperTechFans
IT之家
IT之家
大猫的无限游戏
大猫的无限游戏
S
SegmentFault 最新的问题
有赞技术团队
有赞技术团队
GbyAI
GbyAI
雷峰网
雷峰网
T
The Blog of Author Tim Ferriss
The Register - Security
The Register - Security
U
Unit 42
D
Docker
Martin Fowler
Martin Fowler
L
LINUX DO - 热门话题
NISL@THU
NISL@THU
阮一峰的网络日志
阮一峰的网络日志
C
Cybersecurity and Infrastructure Security Agency CISA
博客园_首页
Google DeepMind News
Google DeepMind News

空白Koobai

唠叨 - 2026-05-10 10:45 唠叨 - 2026-05-08 23:34 唠叨 - 2026-05-08 15:55 唠叨 - 2026-05-07 14:38 唠叨 - 2026-05-06 11:47 唠叨 - 2026-04-30 14:40 唠叨 - 2026-04-30 12:51 唠叨 - 2026-04-22 12:46 唠叨 - 2026-04-18 09:35 唠叨 - 2026-04-16 12:24 唠叨 - 2026-04-12 10:47 唠叨 - 2026-04-06 12:25 唠叨 - 2026-04-03 19:57 唠叨 - 2026-04-02 22:38 唠叨 - 2026-04-01 23:23 唠叨 - 2026-03-31 14:08 唠叨 - 2026-03-28 16:43 唠叨 - 2026-03-28 09:39 唠叨 - 2026-03-27 11:10 唠叨 - 2026-03-25 11:48 唠叨 - 2026-03-24 13:12 唠叨 - 2026-03-21 16:55 唠叨 - 2026-03-20 11:48 罢免小区业委会之后续 反角度之博客用户体验不能做的 N 件事 唠叨 - 2026-03-16 13:10 唠叨 - 2026-03-13 12:46 唠叨 - 2026-03-11 19:25 唠叨 - 2026-03-07 20:21 唠叨 - 2026-03-04 13:45 唠叨 - 2026-02-25 23:14 唠叨 - 2026-02-25 18:16 唠叨 - 2026-02-23 16:11 唠叨 - 2026-02-21 16:21 唠叨 - 2026-02-05 09:19 唠叨 - 2026-02-04 20:18 唠叨 - 2026-01-29 13:03 唠叨 - 2026-01-27 15:40 Hugo 通过 Github 自动推送到宝塔 (2026 年版备忘) 唠叨 - 2026-01-24 15:55 唠叨 - 2026-01-24 15:38 2025 关键词 唠叨 - 2025-06-22 22:07 唠叨 - 2025-06-10 17:31 唠叨 - 2025-05-14 22:04 唠叨 - 2025-04-16 22:06 唠叨 - 2025-04-09 10:28 唠叨 - 2025-04-07 22:09 唠叨 - 2025-03-22 11:30 唠叨 - 2025-01-29 23:14 唠叨 - 2025-01-21 19:30 唠叨 - 2025-01-10 19:39 唠叨 - 2025-01-09 13:57 罢免小区业委会 唠叨 - 2024-12-20 09:48 唠叨 - 2024-12-19 14:46 唠叨 - 2024-12-19 09:37 唠叨 - 2024-12-18 22:04 唠叨 - 2024-12-17 19:01 唠叨 - 2024-12-11 10:32 唠叨 - 2024-12-07 15:47 唠叨 - 2024-11-27 18:15 唠叨 - 2024-11-16 12:45 唠叨 - 2024-11-13 16:14 唠叨 - 2024-09-29 11:51 唠叨 - 2024-09-26 20:24 唠叨 - 2024-09-20 18:13 从 iOS 更换到 Android 会有不适吗? 唠叨 - 2024-09-17 11:21 唠叨 - 2024-09-14 20:10 唠叨 - 2024-09-04 20:51 唠叨 - 2024-09-02 20:17 唠叨 - 2024-08-08 14:19 唠叨 - 2024-08-07 16:45 唠叨 - 2024-07-27 23:21 唠叨 - 2024-07-09 23:37 唠叨 - 2024-06-15 10:43 唠叨 - 2024-06-01 23:03 唠叨 - 2024-05-31 10:06 五一假期之登高望远 以后如果小米做汽车了,也可以买小米汽车 唠叨 - 2024-03-25 14:05 唠叨 - 2024-03-23 15:26 唠叨 - 2024-03-20 21:06 自行车给自己带来了什么情绪价值爽点 唠叨 - 2024-02-28 15:44 HUGO 折腾随记之热力图 / 段落导航 唠叨 - 2024-02-21 21:00 唠叨 - 2024-02-18 19:38 唠叨 - 2024-02-17 16:24 这个春节有什么不一样 唠叨 - 2024-02-16 11:35 唠叨 - 2024-02-15 14:56 唠叨 - 2024-02-14 18:30 唠叨 - 2024-02-03 20:23 HUGO 外链跳转到中间页 唠叨 - 2024-01-31 20:20 折腾博客更像是自己的精神鸦片 唠叨 - 2024-01-29 16:21 唠叨 - 2024-01-27 10:54
博客折腾随记及 CSS Grid 属性
2023-06-12 · via 空白Koobai

最近一直在不断的折腾博客,就跟唠叨里说的一样:对博客的折腾真是越折腾越来劲,一旦停下来,瞬间心里觉得空落落的。几乎把各个页面都重新梳理优化了下,特别是首页,各模块的信息流都给聚合起来了。因为更新博文的频率实在是不高,也许降低博文信息展示权重,让其首页更丰富起来,可读性更高点。

折腾过程中,ChatGPT 给出了 CSS display: grid; 属性,想起之前 风记星辰 也分享过,真是不了解不知道,一试用,发现用于并列容器的布局实在是太好用了,一直困扰我的自适应、等高等宽问题迎刃而解。索性把现有的页面全部基于 Grid 属性更改掉。其中 grid-gap 也很牛逼,不像以前用 margin-right 导致最右边的容器也会空出一定的距离。

display: grid;
grid-gap: 10px; /* 中间空10px间距 */
/* grid-template-columns 各个使用方法 */
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));/* 根据浏览器窗口自适应布局,最小容器宽度340 */
grid-template-columns: auto 1fr; /* 第一列宽度根据元素宽度自适应,第二列使用剩余容器空间 */
grid-template-columns: 1fr 1fr; /* 两列等宽 */
grid-template-columns: repeat(4, 1fr); /* 多列等宽,4为平均分为四列 */

现在折腾博客是完全离不开 ChatGPT 了,数据分离、交互动画、随机调用、布局样式,都通过它来实现,只要你多问几次或者完善对话语句,基本上都能给到你想要的答案。真是做到每个页面的最终呈现,都有它的贡献。自己一个完全看不懂 JS 的人,页面居然也用了不少 JS 效果。

当然有时候问着问着也烦,不想再问,始终给不到自己想要的效果。这个时候要么作罢,要么隔段时间新建窗口重新问,也许想要的答案就来了。目前使用的是免费 3.5 版本,如果 4.0 版本,估计更简单易用,特别是能访问互联网之后,期待未来~

有时候在想,这样折腾博客的意义是什么,日志没写多少,每天净搞些有的没的,内容才是重要的才对,再说折腾来折腾去,也没几个人看,图啥?嗯。。。。,开心最重要。意义就在于不停的折腾,就跟开头说的一样:一旦停下来,瞬间心里觉得空落落的。

感谢折腾过程中, 林木木风记星辰 老师帮忙。同时折腾过程中,又认识了一些新朋友 小饿linlinxing小熊wananaiko老麦大大的小蜗牛忆往事归臧叶子笔记少岱山 等等,博客真好。