Zed 的开发日记 Blog

Shell Config in AI era

2026-02-13T00:00:00.000Z

几年前，我曾在公司内部分享过 zsh 配置的经验。现在，到了 AI 时代，各种 AI 工具如 Claude、Cursor、Windsurf 等，疯狂的在 home 中加入大量的配置。

这些配置是干什么的？有什么用？为什么有时候没有生效？

现在，让我们一起探索一下。Shell Config 的各种细节。

MDX Blog Post

2021-08-01T00:00:00.000Z

Blog posts support Docusaurus Markdown features, such as MDX.

tip

Use the power of React to create interactive blog posts.

For example, use JSX to create an interactive button:

<button onClick={() => alert('button clicked!')}>Click me!</button>

如何像 styled-components 一样使用样式

2020-09-20T00:00:00.000Z

不知道大家有没有遇到过这种情况：当访问一个用了 styled-components 技术的网站，打开开发者工具，想要修改下样式的时候，发现有些样式修改不了（注：chrome 更新后可以修改了，现在主要介绍下这项技术）。

这里拿 styled-components 官网作为例子展示下效果：

可以在控制台样式区域，看到如图由 styled-componets 生成的 class 名称对应的样式是不可以编辑的。看到这个情况，我的好奇心就被勾起来了。随着一步步的探索实验，最终破解了这个谜团。下面来还原破案过程。

破案步骤

当点击样式规则右上角，准备追溯来源时，跳转到了一个没有内容的 style 标签。

记得以前看到过 js 操作样式表的 API，于是在 MDN 上搜索相关 API, 没有看到直接创建样式的接口。但发现了一行文字: Constructable Stylesheet Objects. 并且 MDN 上说到 Blink 平台早已支持该 API.

使用示例

const mySheet = new CSSStyleSheet();
mySheet.addRule('h2', 'color: red', 0);
document.adoptedStyleSheets = [mySheet]

参考参考

When to Use Static Generation v.s. Server-side Rendering

2020-01-02T00:00:00.000Z

We recommend using Static Generation (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.

You can use Static Generation for many types of pages, including:

Marketing pages
Blog posts
E-commerce product listings
Help and documentation

You should ask yourself: "Can I pre-render this page ahead of a user's request?" If the answer is yes, then you should choose Static Generation.

On the other hand, Static Generation is not a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.

In that case, you can use Server-Side Rendering. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.

Pre-rendering

2020-01-01T00:00:00.000Z

Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.

Static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.
Server-side Rendering is the pre-rendering method that generates the HTML on each request.

Importantly, Next.js lets you choose which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

Long Blog Post

2019-05-29T00:00:00.000Z

This is the summary of a very long blog post,

Use a comment to limit blog post size in the list view.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

First Blog Post

2019-05-28T00:00:00.000Z

Lorem ipsum dolor sit amet...

...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet