update
This commit is contained in:
140
SIMPLEICONS_GUIDE.md
Normal file
140
SIMPLEICONS_GUIDE.md
Normal file
@@ -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 了!🚀
|
||||||
@@ -27,9 +27,6 @@ const bgStyle = computed(() =>
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<UApp>
|
<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" />
|
<meta name="color-scheme" content="light dark" />
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -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;
|
|
||||||
}
|
|
||||||
@@ -135,4 +135,10 @@ html {
|
|||||||
|
|
||||||
.prose pre {
|
.prose pre {
|
||||||
background-color: var(--code-bg, #111827);
|
background-color: var(--code-bg, #111827);
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose pre code {
|
||||||
|
white-space: pre;
|
||||||
}
|
}
|
||||||
|
|||||||
0
app/components/content/Badge.vue
Normal file
0
app/components/content/Badge.vue
Normal file
101
content/about.md
101
content/about.md
@@ -1,14 +1,97 @@
|
|||||||
# 关于我
|
# 关于我
|
||||||
|
|
||||||
一名普通高中生,现居中国天津
|
大家好!👋 我是 **RhenCloud**,一名热爱技术和开源的开发者。
|
||||||
|
|
||||||
# 关于本站
|
## 个人简介
|
||||||
|
|
||||||
本站基于以下技术构建:
|
- 📍 **现居地**:中国天津
|
||||||
|
- 💻 **职业**:学生 / 开发者
|
||||||
|
- 🎯 **目标**:分享知识,记录成长,传递有趣的想法
|
||||||
|
|
||||||
- Nuxt.js
|
## 我的兴趣
|
||||||
- Vue.js
|
|
||||||
- Tailwind CSS
|
- 💡 **Web 开发** - 前端/全栈技术探索
|
||||||
- Vercel
|
- 🔧 **开源项目** - 参与和维护开源项目
|
||||||
- Netlify
|
- 📝 **技术分享** - 撰写技术文章和教程
|
||||||
- Cloudflare
|
- 🎮 **其他爱好** - 游戏、动画、摄影
|
||||||
|
|
||||||
|
## 技能树
|
||||||
|
|
||||||
|
### 编程语言
|
||||||
|
|
||||||
|
- `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) - 博客部分灵感来源
|
||||||
|
- 开源社区的所有贡献者
|
||||||
|
- ...
|
||||||
|
|
||||||
|
还有很多,很抱歉无法一一列举
|
||||||
|
|
||||||
|
## 访客留言
|
||||||
|
|
||||||
|
有任何想说的话吗?欢迎在下方评论区留言!💬
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
> 感谢你访问我的博客!如果这里的内容对你有帮助,欢迎分享给更多人。😊
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
title: "在 Windows 下配置 Fish1"
|
title: "在 Windows 下配置 Fish"
|
||||||
published: true
|
published: true
|
||||||
date: 2025-10-05
|
date: 2025-10-05
|
||||||
updatedDate: 2025-10-03
|
updatedDate: 2025-10-03
|
||||||
@@ -10,7 +10,7 @@ tags: ["Development", "Windows", "Fish"]
|
|||||||
categories: ["Technology"]
|
categories: ["Technology"]
|
||||||
---
|
---
|
||||||
|
|
||||||
# 前言
|
## 前言
|
||||||
|
|
||||||
在经历了 Linux 下一系列的生态折磨后,我最终回归了 Windows 的怀抱。
|
在经历了 Linux 下一系列的生态折磨后,我最终回归了 Windows 的怀抱。
|
||||||
|
|
||||||
@@ -28,7 +28,7 @@ categories: ["Technology"]
|
|||||||
|
|
||||||
### 安装 MSYS2
|
### 安装 MSYS2
|
||||||
|
|
||||||
```bash
|
```bash [Terminal]
|
||||||
scoop install msys2
|
scoop install msys2
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -46,7 +46,7 @@ scoop install msys2
|
|||||||
|
|
||||||
在 MSYS2 环境下运行:
|
在 MSYS2 环境下运行:
|
||||||
|
|
||||||
```bash
|
```bash [Terminal]
|
||||||
sed -i "s#mirror.msys2.org/#mirrors.ustc.edu.cn/msys2/#g" /etc/pacman.d/mirrorlist*
|
sed -i "s#mirror.msys2.org/#mirrors.ustc.edu.cn/msys2/#g" /etc/pacman.d/mirrorlist*
|
||||||
pacman -Syy
|
pacman -Syy
|
||||||
```
|
```
|
||||||
@@ -55,7 +55,7 @@ pacman -Syy
|
|||||||
|
|
||||||
修改`/etc/nsswitch.conf`文档
|
修改`/etc/nsswitch.conf`文档
|
||||||
|
|
||||||
```[/etc/nsswitch.conf]
|
```plaintext [/etc/nsswitch.conf]
|
||||||
# Begin /etc/nsswitch.conf
|
# Begin /etc/nsswitch.conf
|
||||||
|
|
||||||
passwd: files db
|
passwd: files db
|
||||||
@@ -71,18 +71,6 @@ db_gecos: cygwin desc
|
|||||||
# End /etc/nsswitch.conf
|
# End /etc/nsswitch.conf
|
||||||
```
|
```
|
||||||
|
|
||||||
::Warning{title="你好"}
|
|
||||||
Warning!
|
|
||||||
::
|
|
||||||
|
|
||||||
::Warning{title="你好"}
|
|
||||||
Warning1!
|
|
||||||
::
|
|
||||||
|
|
||||||
```python [main.py]
|
|
||||||
print("hello")
|
|
||||||
```
|
|
||||||
|
|
||||||
完成,可以愉快的使用 Fish 了!
|
完成,可以愉快的使用 Fish 了!
|
||||||
|
|
||||||

|

|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "我的 Rime 输入法配置"
|
title: "我的 Rime 输入法配置"
|
||||||
published: true
|
published: false
|
||||||
date: 2026-01-01
|
date: 2026-01-01
|
||||||
updatedDate: 2025-01-01
|
updatedDate: 2025-01-01
|
||||||
description: "本文介绍了我的 Rime 输入法配置"
|
description: "本文介绍了我的 Rime 输入法配置"
|
||||||
@@ -10,4 +10,6 @@ tags: ["Rime"]
|
|||||||
categories: ["Rime"]
|
categories: ["Rime"]
|
||||||
---
|
---
|
||||||
|
|
||||||
#
|
# 我的 Rime 输入法配置
|
||||||
|
|
||||||
|
## 介绍
|
||||||
|
|||||||
@@ -10,10 +10,8 @@ export default defineNuxtConfig({
|
|||||||
css: ["./app/assets/css/main.css"],
|
css: ["./app/assets/css/main.css"],
|
||||||
|
|
||||||
site: {
|
site: {
|
||||||
// url: siteConfig.siteMeta.url,
|
url: siteConfig.siteMeta.url,
|
||||||
url: "https://blog.rhen.cloud",
|
name: siteConfig.siteMeta.title,
|
||||||
// name: siteConfig.siteMeta.title,
|
|
||||||
name: "RhenCloud's Blog",
|
|
||||||
description: siteConfig.siteMeta.description,
|
description: siteConfig.siteMeta.description,
|
||||||
author: siteConfig.siteMeta.author,
|
author: siteConfig.siteMeta.author,
|
||||||
},
|
},
|
||||||
@@ -29,10 +27,8 @@ export default defineNuxtConfig({
|
|||||||
"@nuxtjs/sitemap",
|
"@nuxtjs/sitemap",
|
||||||
"@nuxt/content",
|
"@nuxt/content",
|
||||||
"@nuxtjs/color-mode",
|
"@nuxtjs/color-mode",
|
||||||
// "@nuxtjs/tailwindcss",
|
|
||||||
"@formkit/auto-animate",
|
|
||||||
"@nuxt/ui",
|
"@nuxt/ui",
|
||||||
// '@stefanobartoletti/nuxt-social-share',
|
"@formkit/auto-animate",
|
||||||
],
|
],
|
||||||
|
|
||||||
vite: {
|
vite: {
|
||||||
|
|||||||
Reference in New Issue
Block a user