如何正确食用本博客项目

小可の聚集地，由 Next.js、TypeScript、MDX 和 TailwindCSS 构建。

GitHub - fx-k/192168123.xyz: 小可の聚集地，由 Next.js、TypeScript、MDX 和 TailwindCSS 构建。My blog built with Next.js, TypeScript, MDX, and TailwindCSS.小可の聚集地，由 Next.js、TypeScript、MDX 和 TailwindCSS 构建。My blog built with Next.js, TypeScript, MDX, and TailwindCSS. - fx-k/192168123.xyz

特色

🎨 简洁、丝滑、快速、一键暗黑模式
✨ 响应式设计、主题色配置、CI/CD部署
🧩 内置一些 Markdown 扩展语法，得益于 MDX，还支持在文章中嵌入 JSX 组件
🎮 内置 CodePlayground，可以直接在文章中运行代码块（beta）
🔫 充满趣味的点赞按钮、访问量计数器、音效反馈
😎 Profile使用打字机特效，支持多条轮播展示，专享个人slogan~
👐 友链图标自动展示，更好的友链管理逻辑（更方便下架跑路的友链~
💭 支持Artalk自部署评论系统（避免第三方评论广告/倒闭

部署

本地部署

部署前，请确保本地已正确配置以下环境：

Node.js（以v20.15.0为例）
git（以2.45.2为例）

那么，开始：

找个目录，git clone本仓库。git clone https://github.com/fx-k/192168123.xyz.git
进入目录，安装依赖。npm install
你可以在 site.config.js 文件中客制化你的网站。
为了使用点赞和访问量统计功能，需要注册 Upstash Redis 服务（可以白嫖免费套餐），然后在根目录下创建 .env 文件，填入以下信息：
BASH
UPSTASH_REDIS_REST_URL = 填入自己的信息 UPSTASH_REDIS_REST_TOKEN = 填入自己的信息
为了使用评论服务，你需要部署Artalk评论服务，具体部署请参考官方的guide。然后，在 site.config.js 文件中修改 artalkServer 字段，改成你自己部署的服务器后端。
为了实现友链图标的自动获取与展示，你需要自行部署一个获取网站favcoin的API。然后，在 site.config.js 文件中修改 getFaviconAPI 字段，改成你自己部署的服务器后端。
运行 npm run dev 即可预览网站效果。

部署到Vercel等工作流

当然，你肯定不止满足于部署到本地（即使这只是一个0ip的网站hhh）。

实现自动部署的工作流，其实并不难。

最简单的方法，可以直接部署到Vercel，实现本地写博客👉git push👉网站更新的效果。

跟着以下教程即可：

点击本项目GitHub页面上面的fork，fork本仓库到你的GitHub账号。
参考 本地部署 教程流程，但是把 git clone 步骤的链接，换成你fork本仓库后，新生成的仓库链接。（你可能需要先正确在本地cli中配置你的git账户）
注册Vercel账户，然后将你fork后的仓库进行绑定。方法很简单，可以直接参考官方的guide。（记得要在Vercel里面把你的 .env 文件内容配置到环境变量中）
可以在Vercel后台绑定你自己的域名，或者直接使用Vercel自动为你生成的专属域名。
至此，部署完成。你可以在本地写mdx文件，然后 git push 到你fork后的仓库，Vercel会自动部署你每次commit后的内容，实现网站更新。

写博客

文章字段（Front Matter）

本项目会自动识别mdx文件的Front Matter字段，生成标题、文章封面、写作日期、更新日期等。

字段名	示例	说明
title	我的一篇新文章	文章的标题
date	2024-07-18T11:34:53Z	文章的创作日期
tags	- 望周知 - 技术向	文章的标签，以 `-`开头，可以包含多个
updatedOn	2024-07-18T11:38:16Z	文章的更新日期
image	/test.webp	文章的封面图片（可以是外链或者public文件夹下的图片）
draft	false	是否为草稿，若为true则不进行展示

PS: 可以搭配 Obsidian 插件或者 VS Code 插件，更好的帮助你来管理mdx的Front Matter

语法展示

引用

第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行

第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行

MDX

1> 第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行
2>
3> 第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行

> 第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行
>
> 第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行

标题

如本页面所示，支持二级~六级标题的展示。

MDX

1## Heading2
2### Heading3
3#### Heading4
4##### Heading5
5###### Heading6

## Heading2
### Heading3
#### Heading4
##### Heading5
###### Heading6

代码

基础样式

这是一个 内联样式 ，当然，还有另外一种：

MARKDOWN

1这是另外一种

这是另外一种

MDX

1这是一个 `内联样式` ，当然，还有另外一种：
2```markdown
3这是另外一种
4```

这是一个 `内联样式` ，当然，还有另外一种：
```markdown
这是另外一种
```

高级用法

1下面展示高级功能
2还可以设置
3高亮
4显示
5code --样式
6code ++样式
7code error样式
8code warning
9聚焦在第六行

下面展示高级功能
还可以设置
高亮
显示
code --样式
code ++样式
code error样式
code warning
聚焦在第六行

MDX

1```ts title="我是标题" text lineNumbers highlights='2-3,4'
2下面展示高级功能
3还可以设置
4高亮
5显示
6code --样式// [!code --]
7code ++样式// [!code ++]
8code error样式// [!code error]
9code warning// [!code warning]
10聚焦在第六行// [!code focus]
11```

```ts title="我是标题" text lineNumbers highlights='2-3,4'
下面展示高级功能
还可以设置
高亮
显示
code --样式// [!code --]
code ++样式// [!code ++]
code error样式// [!code error]
code warning// [!code warning]
聚焦在第六行// [!code focus]
```

文本样式

这是链接 这是加粗 这是斜体 ~~这是删除~~ ~~这是缝合怪~~

MDX

1[这是链接](#) **这是加粗** *这是斜体* ~~这是删除~~ ~~_**[`这是缝合怪`](#)**_~~

[这是链接](#) **这是加粗** *这是斜体* ~~这是删除~~ ~~_**[`这是缝合怪`](#)**_~~

链接自动展开

这是链接自动展开功能：

小可の聚集地小可之地！！！

MDX

1这是链接自动展开功能：
2[](https://192168123.xyz)

这是链接自动展开功能：
[](https://192168123.xyz)

表格

我是	表格
`第一行`	内容
第二行	支持语法比如说加粗

MDX

1| 我是       | 表格                         |
2| ---------- | ---------------------------- |
3| `第一行` | 内容                         |
4| 第二行     | 支持语法**比如说加粗** |

| 我是       | 表格                         |
| ---------- | ---------------------------- |
| `第一行` | 内容                         |
| 第二行     | 支持语法**比如说加粗** |

图片

MDX

1![test image](https://oss.192168123.xyz/image/2024/07/fa9f2c0bba56d58db7118d7fd05c618c.webp)

![test image](https://oss.192168123.xyz/image/2024/07/fa9f2c0bba56d58db7118d7fd05c618c.webp)

序号

无序1
无序2
无序3

有序1
有序2
有序3

任务1
任务2
任务3

MDX

1- 无序1
2- 无序2
3- 无序3
41. 有序1
52. 有序2
63. 有序3
7- [x] 任务1
8- [ ] 任务2
9- [ ] 任务3

- 无序1
- 无序2
- 无序3
1. 有序1
2. 有序2
3. 有序3
- [x] 任务1
- [ ] 任务2
- [ ] 任务3

提示框

tip

This is a tip.

MDX

1:::tip
2This is a tip.
3:::

:::tip
This is a tip.
:::

warning

This is a warning.

MDX

1:::warning
2This is a warning.
3:::

:::warning
This is a warning.
:::

danger

This is a danger.

MDX

1:::danger
2This is a danger.
3:::

:::danger
This is a danger.
:::

自定义标题

TIP

This is a tip.

MDX

1:::tip[TIP]
2This is a tip.
3:::

:::tip[TIP]
This is a tip.
:::

第三方嵌入

哔哩哔哩

MDX

1<Bilibili aid="80433022" bvid="BV1GJ411x7h7" cid="137649199" />

<Bilibili aid="80433022" bvid="BV1GJ411x7h7" cid="137649199" />

Youtube

MDX

1<YouTube vid="dQw4w9WgXcQ" />

<YouTube vid="dQw4w9WgXcQ" />

StackBlitz

MDX

1<StackBlitz id="web-platform-dwmuj4" />

<StackBlitz id="web-platform-dwmuj4" />

CodeSandbox

MDX

1<CodeSandbox id="practical-chihiro-vbzvxe" />

<CodeSandbox id="practical-chihiro-vbzvxe" />

CodePen

MDX

1<CodePen id="jOxXxXa" />

<CodePen id="jOxXxXa" />

代码运行器

HTML

Code Playground

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Title</title>
7  </head>
8  <body>
9    <h1>I'm a playground!</h1>
10    <p>Edit me, and see the changes below.</p>
11  </body>
12</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body>
    <h1>I'm a playground!</h1>
    <p>Edit me, and see the changes below.</p>
  </body>
</html>

MDX

1```html live
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="UTF-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Title</title>
8  </head>
9  <body>
10    <h1>I'm a playground!</h1>
11    <p>Edit me, and see the changes below.</p>
12  </body>
13</html>
14```

```html live
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body>
    <h1>I'm a playground!</h1>
    <p>Edit me, and see the changes below.</p>
  </body>
</html>
```

React

Counter.jsx

1function Counter() {
2  const [count, setCount] = useState(0)
3
4  return (
5    <>
6      <p>count: {count}</p>
7      <div style={{ display: 'flex', gap: 10 }}>
8        <button onClick={() => setCount(count + 1)}>increase</button>
9        <button onClick={() => setCount(count - 1)}>decrease</button>
10      </div>
11    </>
12  )
13}

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <>
      <p>count: {count}</p>
      <div style={{ display: 'flex', gap: 10 }}>
        <button onClick={() => setCount(count + 1)}>increase</button>
        <button onClick={() => setCount(count - 1)}>decrease</button>
      </div>
    </>
  )
}

MDX

1```jsx live title="Counter.jsx"
2function Counter() {
3  const [count, setCount] = useState(0)
4
5  return (
6    <>
7      <p>count: {count}</p>
8      <div style={{ display: 'flex', gap: 10 }}>
9        <button onClick={() => setCount(count + 1)}>increase</button>
10        <button onClick={() => setCount(count - 1)}>decrease</button>
11      </div>
12    </>
13  )
14}
15```

```jsx live title="Counter.jsx"
function Counter() {
  const [count, setCount] = useState(0)

  return (
    <>
      <p>count: {count}</p>
      <div style={{ display: 'flex', gap: 10 }}>
        <button onClick={() => setCount(count + 1)}>increase</button>
        <button onClick={() => setCount(count - 1)}>decrease</button>
      </div>
    </>
  )
}
```

公式

参考KaTeX。

内联

通过将 LaTeX 方程式包装在 $ 之间来编写内联数学方程式：

Let $f\colon[a,b]\to\R$ be Riemann integrable. Let $F\colon[a,b]\to\R$ be $F(x)=\int_{a}^{x} f(t)\,dt$ . Then $F$ is continuous, and at all $x$ such that $f$ is continuous at $x$ , $F$ is differentiable at $x$ with $F'(x)=f(x)$ .

MDX

1Let $f\colon[a,b]\to\R$ be Riemann integrable. Let $F\colon[a,b]\to\R$ be $F(x)=\int_{a}^{x} f(t)\,dt$. Then $F$ is continuous, and at all $x$ such that $f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.

Let $f\colon[a,b]\to\R$ be Riemann integrable. Let $F\colon[a,b]\to\R$ be $F(x)=\int_{a}^{x} f(t)\,dt$. Then $F$ is continuous, and at all $x$ such that $f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.

公式块

对于方程式块或显示模式，使用换行符和$$：

I = \int_0^{2\pi} \sin(x)\,dx

MDX

1$$
2I = \int_0^{2\pi} \sin(x)\,dx
3$$

$$
I = \int_0^{2\pi} \sin(x)\,dx
$$

脚注

这是一个脚注，¹ 这也是 ²。脚注会自动添加到文章最末尾，即使你将其放在前面。

MDX

1这是一个脚注，[^1] 这也是 [^bignote]。脚注会自动添加到文章最末尾，即使你将其放在前面。
2[^1]: 这是第一个脚注。
3[^bignote]: 这是第二个脚注。

这是一个脚注，[^1] 这也是 [^bignote]。脚注会自动添加到文章最末尾，即使你将其放在前面。
[^1]: 这是第一个脚注。
[^bignote]: 这是第二个脚注。

这是第一个。 ↩
这是第二个。 ↩