98 lines
2.7 KiB
Markdown
98 lines
2.7 KiB
Markdown
---
|
|
title: Hello World - 欢迎使用 SuBlog
|
|
published: 2026-05-31T08:00:00
|
|
updated: 2026-05-31
|
|
description: 博客上线啦！这篇文章介绍本站的技术架构、功能特性和搭建过程中的一些思考。
|
|
image: /posts/hello-world/img/cover.jpg
|
|
pinned: true
|
|
tags: ['博客', 'Nuxt']
|
|
draft: false
|
|
series: Nuxt 博客开发
|
|
seriesOrder: 1
|
|
difficulty: 入门
|
|
---
|
|
|
|
## 博客上线啦！
|
|
|
|
Hello World！欢迎使用 **SuBlog**，这是站点的第一篇示例文章。
|
|
|
|
经过一段时间的折腾，这个基于 Nuxt 3 的个人博客终于上线了。在这里记录一下这个项目的技术选型和功能特性。
|
|
|
|
## 技术栈
|
|
|
|
本站使用了以下技术：
|
|
|
|
| 技术 | 用途 |
|
|
|------|------|
|
|
| **Nuxt 3** | Vue 3 全栈框架，提供 SSG、路由、API 等能力 |
|
|
| **TypeScript** | 类型安全，提升开发体验 |
|
|
| **Tailwind CSS v4** | 原子化 CSS，快速构建 UI |
|
|
| **@nuxt/content** | Markdown 驱动的内容管理 |
|
|
| **Shiki** | 代码语法高亮 |
|
|
| **Giscus** | 基于 GitHub Discussions 的评论系统 |
|
|
|
|
## 功能特性
|
|
|
|
目前已实现的功能：
|
|
|
|
- **博客系统** - Markdown 文章，支持代码高亮、目录导航、搜索
|
|
- **暗色模式** - 跟随系统或手动切换
|
|
- **文章搜索** - 支持标题、描述、正文、标签多维度搜索
|
|
- **标签系统** - 文章标签分类，高频标签快速筛选
|
|
- **友链页面** - 展示友情链接，支持申请
|
|
- **赞助页面** - 微信收款码展示
|
|
- **封面制作** - 在线生成封面图片工具
|
|
- **网易云热评** - 首页随机展示音乐评论
|
|
- **访客统计** - 不蒜子计数器，带数字滚动动画
|
|
- **SEO 优化** - 自动生成站点地图、Open Graph 标签
|
|
|
|
## 代码示例
|
|
|
|
本站的配置非常集中，一个文件搞定全站定制：
|
|
|
|
```typescript
|
|
// config/site.ts
|
|
export const siteConfig = {
|
|
siteName: '我的博客',
|
|
url: 'https://example.com/',
|
|
avatar: 'https://q2.qlogo.cn/headimg_dl?dst_uin=xxx&spec=100',
|
|
// ... 改这一个文件，全站生效
|
|
}
|
|
```
|
|
|
|
文章的 frontmatter 也很简洁：
|
|
|
|
```yaml
|
|
---
|
|
title: 文章标题
|
|
published: 2026-05-31T08:00:00
|
|
description: 文章简介
|
|
tags: ['Nuxt', 'TypeScript']
|
|
---
|
|
```
|
|
|
|
## 部署
|
|
|
|
本站使用 SSG 静态生成，构建后直接部署到静态托管即可：
|
|
|
|
```bash
|
|
npx nuxi generate
|
|
```
|
|
|
|
构建产物在 `.output/public` 目录下，可以直接丢到 Nginx、Vercel、Netlify 等平台。
|
|
|
|
## 后续计划
|
|
|
|
- [ ] RSS 订阅
|
|
- [ ] 文章目录优化
|
|
- [ ] 更多小工具
|
|
- [ ] 持续输出内容
|
|
|
|
## 致谢
|
|
|
|
感谢 [二叉树树](https://2x.nz) 的开源项目，本站的 UI 设计参考了他的项目。
|
|
|
|
---
|
|
|
|
**感谢阅读！如果觉得不错，欢迎点个 Star 或者留个评论 (☞ﾟヮﾟ)☞**
|