折腾Fuwari#

之前看到一个非常好看和流畅的博客系统(就是Fuwari)，然后就去了解了一下，不过确实是第一次部署这种静态博客生成的网页，上次接触的系统还是wordpress和typecho，也算是开眼界了

创建项目#

创建项目还是挺方便的，直接pnpm create fuwari@latest就行，但是有点问题就是我辛辛苦苦选了语言，写了标题和副标题，但是实际创建项目还是默认的英文和默认标题，不知道是不是我的原因(

创建好的项目目录大概长这样：

1
E:\Proj\hafsummer
2
├─ .gitignore
3
├─ .npmrc
4
├─ astro.config.mjs
5
├─ biome.json
6
├─ CONTRIBUTING.md
7
├─ frontmatter.json
8
├─ LICENSE
9
├─ package.json
10
├─ pagefind.yml
11
├─ pnpm-lock.yaml
12
├─ postcss.config.mjs
13
├─ README.md
14
├─ postcss.config.mjs
15
├─ svelte.config.js
16
├─ tailwind.config.cjs
17
├─ tsconfig.json
18
├─ vercel.json
19
├─ .astro/
20
├─ .git/
21
├─ .github/
22
│ ├─ ISSUE_TEMPLATE/
23
│ └─ workflows/
24
├─ .vscode/
25
├─ docs/
26
├─ node_modules/
27
├─ public/ # 资源文件
28
│ └─ favicon/
29
├─ scripts/
30
├─ src/
31
│ ├─ assets/
32
│ │ └─ images/
33
│ ├─ components/
34
│ │ ├─ control/
35
│ │ ├─ misc/
36
│ │ └─ widget/
37
│ ├─ constants/
38
│ ├─ content/ # 我们大部分时候需要改的目录
39
│ │ ├─ posts/ # 文章
40
│ │ └─ spec/ # 特定页面，比如`关于`
41
│ ├─ i18n/
42
│ │ └─ languages/
43
│ ├─ layouts/
44
│ ├─ pages/
45
│ │ └─ posts/
46
│ ├─ plugins/
47
│ │ └─ expressive-code/
48
│ ├─ styles/
49
│ ├─ types/
50
│ └─ utils/

还是有点恐怖的，不过对于简单使用来说不需要知道那么多，先一步一步来

配置网站信息#

我们网站的配置是在src/config.ts里的，我们可以看到export const siteConfig: SiteConfig这样的字段，这siteConfig当然就是站点配置了

title和subtitle分别是标题和副标题，lang是语言，themeColor是主题色，其中hue对应的颜色可以在右上角的调色盘自己改成喜欢的，然后记住该到这里，以后默认就是这个颜色了，如果不希望别人随意改变，可以把fixed改成true

小小改下样式#

这个默认的code和link有点不好看，我选择自己稍微改一下

code#

这个很简单，我只是觉得有点和两边的距离窄，所以直接找到里边的40多行的code，在font-family下一行加上

1
code {
2
  @apply bg-[var(--inline-code-bg)] text-[var(--inline-code-color)] px-1 py-0.5 rounded-md overflow-hidden;
3

4
  font-family: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo,
5
    Monaco, Consolas, Liberation Mono, Courier New, monospace;
6
  margin: 0 0.4em 0;
7
}

link#

这个我不太喜欢悬浮时候的背景，一个是本身不喜欢这种纯色的，另外就是还是有点窄，导致甚至默认的样式会遮住文字所以我就改了下，让目前的hover状态下只会改变下划线的颜色，找到a:not(.no-styling)，还是在markdown.css

1
a:not(.no-styling) {
2
  @apply relative bg-none link font-medium text-[var(--primary)]
3
      underline decoration-[var(--link-underline)] decoration-1 decoration-dashed underline-offset-4;
4
  box-decoration-break: clone;
5
  -webkit-box-decoration-break: clone;
6
  display: inline-block;
7
  margin: 0 0.1em 0;
8

9
  &:hover,
10
  &:active {
11
    @apply decoration-transparent;
12
    background: var(--btn-plain-bg-hover);
13
    border-bottom: 1px dashed var(--link-hover);
14
    text-decoration-color: var(--primary);
15
  }
16
  &:hover::before,
17
  &:active::before {
18
    background-color: transparent;
19
  }
20
}