update

2026-01-01 23:58:32 +08:00
parent 5fb144ea64
commit 05feb6dbbb
9 changed files with 250 additions and 59 deletions
--- a/SIMPLEICONS_GUIDE.md
+++ b/SIMPLEICONS_GUIDE.md
@@ -0,0 +1,140 @@
+# 在 Markdown 中使用 Simple Icons 指南
+
+## 概述
+
+在这个 Nuxt Content 项目中，可以通过 `@nuxt/icon` 和 Iconify 集成在 Markdown 中使用 Simple Icons。
+
+## 方法 1：直接在 Markdown 中使用图标代码（推荐）
+
+在 Markdown 文本中，使用反引号包裹图标名称，Nuxt Content 会自动渲染为图标。
+
+### 格式
+
+```markdown
+`simple-icons:图标名称` **文字**
+```
+
+### 常见图标例子
+
+```markdown
+`simple-icons:javascript` **JavaScript**
+`simple-icons:typescript` **TypeScript**
+`simple-icons:python` **Python**
+`simple-icons:vuedotjs` **Vue.js**
+`simple-icons:react` **React**
+`simple-icons:nextdotjs` **Next.js**
+`simple-icons:nuxtdotjs` **Nuxt.js**
+`simple-icons:html5` **HTML**
+`simple-icons:css3` **CSS**
+`simple-icons:git` **Git**
+`simple-icons:github` **GitHub**
+`simple-icons:docker` **Docker**
+`simple-icons:vercel` **Vercel**
+`simple-icons:netlify` **Netlify**
+`simple-icons:cloudflare` **Cloudflare**
+`simple-icons:express` **Express**
+`simple-icons:django` **Django**
+`simple-icons:tailwindcss` **Tailwind CSS**
+`simple-icons:markdown` **Markdown**
+`simple-icons:nodejs` **Node.js**
+```
+
+## 方法 2：在 HTML 中使用 Icon 组件
+
+如果你需要更灵活的控制，可以在 Markdown 中直接使用 HTML：
+
+```html
+<Icon name="simple-icons:javascript" size="1.5em" class="text-yellow-500" />
+```
+
+## 方法 3：在表格中使用图标
+
+```markdown
+| 技术 | 说明 |
+|------|------|
+| `simple-icons:javascript` JavaScript | 编程语言 |
+| `simple-icons:vuedotjs` Vue.js | 前端框架 |
+| `simple-icons:nuxtdotjs` Nuxt.js | 全栈框架 |
+```
+
+## 方法 4：在列表中使用图标
+
+```markdown
+- `simple-icons:github` **GitHub** - 版本控制
+- `simple-icons:docker` **Docker** - 容器化
+- `simple-icons:vercel` **Vercel** - 部署平台
+```
+
+## 查找可用的图标
+
+Simple Icons 有很多可用的图标。查找图标的方式：
+
+1. **访问官方网站**：https://simpleicons.org/
+   - 搜索你需要的图标
+   - 复制图标名称（通常是 slug 格式）
+
+2. **通用命名规则**：
+   - 图标名称通常是品牌名的小写版本
+   - 使用 `.` 代替空格或特殊字符（如 `next.js` 变为 `nextdotjs`）
+   - 使用 `+` 的地方也用 `plus`（如 `c++` 变为 `cplusplus`）
+
+## 实际应用示例
+
+### 在 about.md 中
+
+```markdown
+## 我的技能
+
+### 前端技术
+- `simple-icons:html5` **HTML5**
+- `simple-icons:css3` **CSS3**
+- `simple-icons:javascript` **JavaScript**
+- `simple-icons:typescript` **TypeScript**
+- `simple-icons:vuedotjs` **Vue.js**
+- `simple-icons:react` **React**
+
+### 框架
+- `simple-icons:nuxtdotjs` **Nuxt.js**
+- `simple-icons:nextdotjs` **Next.js**
+- `simple-icons:tailwindcss` **Tailwind CSS**
+
+### 工具
+- `simple-icons:git` **Git**
+- `simple-icons:github` **GitHub**
+- `simple-icons:docker` **Docker**
+- `simple-icons:vercel` **Vercel**
+```
+
+## 常见问题
+
+### Q: 为什么图标没有显示？
+A: 
+- 检查图标名称是否正确（区分大小写）
+- 确保使用了 `simple-icons:` 前缀
+- 检查网络连接（Iconify 需要从 CDN 加载）
+
+### Q: 如何自定义图标的大小和颜色？
+A: 在 HTML 中使用完整的 Icon 组件：
+```html
+<Icon name="simple-icons:javascript" size="2em" class="text-yellow-400" />
+```
+
+### Q: 能在代码块中使用图标吗？
+A: 是的，可以在代码块外使用，但代码块内的内容会被视为代码。
+
+### Q: 有其他图标库可用吗？
+A: 是的！Iconify 支持多个库：
+- `fa-solid:` - Font Awesome Solid
+- `mdi:` - Material Design Icons
+- `heroicons:` - Heroicons
+- 等等
+
+## 更多资源
+
+- Simple Icons 官网：https://simpleicons.org/
+- Iconify 官网：https://iconify.design/
+- Nuxt Icon 文档：https://www.npmjs.com/package/@nuxt/icon
+
+---
+
+现在你可以在 Markdown 中自由使用 Simple Icons 了！🚀
--- a/app/app.vue
+++ b/app/app.vue
@@ -27,9 +27,6 @@ const bgStyle = computed(() =>

 <template>
  <UApp>
-    <!-- <link
-    rel="stylesheet"
-    href="https://chinese-fonts-cdn.deno.dev/packages/maple-mono-cn/dist/MapleMono-CN-Regular/result.css" /> -->
    <meta name="color-scheme" content="light dark" />
    <div class="relative">
      <div
--- a/app/assets/css/code.css
+++ b/app/assets/css/code.css
@@ -1,21 +0,0 @@
-@layer utilities {
-  .line {
-    @apply block relative min-h-[1rem] pl-[6.25rem];
-  }
-}
-
-.line::before {
-  content: attr(data-line);
-  position: absolute;
-  left: 0;
-  width: 5.25rem;
-  padding-right: 1rem;
-  text-align: right;
-  color: white;
-  user-select: none;
-  font-size: 0.85em;
-}
-
-.dark .line::before {
-  color: #666666;
-}
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -135,4 +135,10 @@ html {

 .prose pre {
  background-color: var(--code-bg, #111827);
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.prose pre code {
+  white-space: pre;
 }
--- a/app/components/content/Badge.vue
+++ b/app/components/content/Badge.vue
--- a/content/about.md
+++ b/content/about.md
@@ -1,14 +1,97 @@
 # 关于我

-一名普通高中生，现居中国天津
+大家好！👋 我是 **RhenCloud**，一名热爱技术和开源的开发者。

-# 关于本站
+## 个人简介

-本站基于以下技术构建：
+- 📍 **现居地**：中国天津
+- 💻 **职业**：学生 / 开发者
+- 🎯 **目标**：分享知识，记录成长，传递有趣的想法

- Nuxt.js
- Vue.js
- Tailwind CSS
- Vercel
- Netlify
- Cloudflare
+## 我的兴趣
+
+- 💡 **Web 开发** - 前端/全栈技术探索
+- 🔧 **开源项目** - 参与和维护开源项目
+- 📝 **技术分享** - 撰写技术文章和教程
+- 🎮 **其他爱好** - 游戏、动画、摄影
+
+## 技能树
+
+### 编程语言
+
+- `simple-icons:javascript` **JavaScript** / `simple-icons:typescript` **TypeScript**
+- `simple-icons:python` **Python**
+- `simple-icons:vuedotjs` **Vue.js**
+- `simple-icons:html5` **HTML**
+- `simple-icons:css3` **CSS**
+
+### 开发框架
+
+- `simple-icons:nuxt` **Nuxt.js** - 现代 Vue.js 框架
+- `simple-icons:flask` **Flask** - Python Web 框架
+
+### 工具与平台
+
+- `simple-icons:git` **Git** / `simple-icons:github` **GitHub**
+- `simple-icons:docker` **Docker**
+- `simple-icons:githubcopilot` **GitHub Copilot**
+- `simple-icons:githubactions` **Github Actions**
+- `simple-icons:vercel` **Vercel**
+- `simple-icons:netlify` **Netlify**
+- `simple-icons:cloudflare` **Cloudflare**
+
+## 关于本站
+
+### 🛠 技术栈
+
+本博客采用现代化的技术栈构建：
+
+| 技术 | 说明 |
+| ------ | ------ |
+| **Nuxt 4** | 全栈 Vue 框架 |
+| **Vue 3** | 前端框架 |
+| **TypeScript** | 类型安全 |
+| **Tailwind CSS** | 原子化 CSS 框架 |
+| **Nuxt Content** | 内容管理 |
+| **Markdown** | 文章格式 |
+
+### 🚀 部署与托管
+
+- **部署**：Vercel / Netlify / Tencent EdgeOne
+- **域名**：自有域名 blog.rhen.cloud
+
+### 📊 附加功能
+
+- ✅ 深色模式支持
+- ✅ SEO 优化（Meta、OG、Sitemap、RSS）
+- ✅ 文章搜索（Fuse.js）
+- ✅ 评论系统（Twikoo）
+- ✅ 访客统计（Umami）
+- ✅ 响应式设计
+- ✅ 快速加载速度
+
+## 致谢
+
+感谢以下项目和社区的支持：
+
+- [Nuxt.js](https://nuxt.com) - Vue 框架
+- [Vue.js](https://vuejs.org) - 前端框架
+- [Tailwind CSS](https://tailwindcss.com) - CSS 框架
+- [Vercel](https://vercel.com) - 部署平台
+- [Cloudflare](https://cloudflare.com) - CDN 服务 / 部署平台
+- [Tencent EdgeOne](https://edgeone.ai) - CDN 服务 / 部署平台
+- [Twikoo](https://twikoo.js.org) - 评论系统
+- [Alpine-Starter](https://github.com/nuxt-themes/alpine-starter) - 主题模板
+- [Clarity](https://github.com/L33Z22L11/blog-v3) - 博客部分灵感来源
+- 开源社区的所有贡献者
+- ...
+
+还有很多，很抱歉无法一一列举
+
+## 访客留言
+
+有任何想说的话吗？欢迎在下方评论区留言！💬
+
+---
+
+> 感谢你访问我的博客！如果这里的内容对你有帮助，欢迎分享给更多人。😊
--- a/content/posts/configure-fish-on-windows/index.md
+++ b/content/posts/configure-fish-on-windows/index.md
@@ -1,5 +1,5 @@
 ---
-title: "在 Windows 下配置 Fish1"
+title: "在 Windows 下配置 Fish"
 published: true
 date: 2025-10-05
 updatedDate: 2025-10-03
@@ -10,7 +10,7 @@ tags: ["Development", "Windows", "Fish"]
 categories: ["Technology"]
 ---

-# 前言
+## 前言

 在经历了 Linux 下一系列的生态折磨后，我最终回归了 Windows 的怀抱。

@@ -28,7 +28,7 @@ categories: ["Technology"]

 ### 安装 MSYS2

-```bash
+```bash [Terminal]
 scoop install msys2
 ```

@@ -46,7 +46,7 @@ scoop install msys2

 在 MSYS2 环境下运行：

-```bash
+```bash [Terminal]
 sed -i "s#mirror.msys2.org/#mirrors.ustc.edu.cn/msys2/#g" /etc/pacman.d/mirrorlist*
 pacman -Syy
 ```
@@ -55,7 +55,7 @@ pacman -Syy

 修改`/etc/nsswitch.conf`文档

-```[/etc/nsswitch.conf]
+```plaintext [/etc/nsswitch.conf]
 # Begin /etc/nsswitch.conf

 passwd: files db
@@ -71,18 +71,6 @@ db_gecos: cygwin desc
 # End /etc/nsswitch.conf
 ```

-::Warning{title="你好"}
-Warning!
-::
-
-::Warning{title="你好"}
-Warning1!
-::
-
-```python [main.py]
-print("hello")
-```
-
 完成，可以愉快的使用 Fish 了！

 ![PixPin_2025-10-03_15-44-52.png](https://img.rhen.cloud/file/Blog/1761401028478_PixPin_2025-10-03_15-44-52.png)
--- a/content/posts/my-rime-config/index.md
+++ b/content/posts/my-rime-config/index.md
@@ -1,6 +1,6 @@
 ---
 title: "我的 Rime 输入法配置"
-published: true
+published: false
 date: 2026-01-01
 updatedDate: 2025-01-01
 description: "本文介绍了我的 Rime 输入法配置"
@@ -10,4 +10,6 @@ tags: ["Rime"]
 categories: ["Rime"]
 ---

-#
+# 我的 Rime 输入法配置
+
+## 介绍
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -10,10 +10,8 @@ export default defineNuxtConfig({
  css: ["./app/assets/css/main.css"],

  site: {
-    // url: siteConfig.siteMeta.url,
-    url: "https://blog.rhen.cloud",
-    // name: siteConfig.siteMeta.title,
-    name: "RhenCloud's Blog",
+    url: siteConfig.siteMeta.url,
+    name: siteConfig.siteMeta.title,
    description: siteConfig.siteMeta.description,
    author: siteConfig.siteMeta.author,
  },
@@ -29,10 +27,8 @@ export default defineNuxtConfig({
    "@nuxtjs/sitemap",
    "@nuxt/content",
    "@nuxtjs/color-mode",
-    // "@nuxtjs/tailwindcss",
-    "@formkit/auto-animate",
    "@nuxt/ui",
-    // '@stefanobartoletti/nuxt-social-share',
+    "@formkit/auto-animate",
  ],

  vite: {