Hello World

欢迎来到我的技术博客！这是基于 Nuxt 3 和 @nuxt/content 构建的个人博客系统。

技术栈

本博客使用以下技术构建：

• 框架: Nuxt 3 + Vue 3
• 内容管理: @nuxt/content
• 样式: Tailwind CSS
• 部署: Vercel

特色功能

终端风格 UI

整个博客采用程序员熟悉的终端/代码编辑器风格设计：

$ cd ~/blog
$ ls ./articles
hello-world.md
vue-composition-api.md
typescript-tips.md

代码高亮

支持多种语言的代码高亮：

interface BlogPost {
  title: string
  description: string
  date: string
  tags: string[]
}

const greeting = (name: string): string => {
  return `Hello, ${name}!`
}

console.log(greeting('World'))

<template>
  <div class="blog-post">
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  post: BlogPost
}>()
</script>

暗色模式

支持亮色和暗色主题切换，自动适应系统偏好。

图片功能演示

使用 article-image 组件

article-image 组件支持图片说明文字，适合展示带描述的图片：

使用标准 Markdown 图片

标准的 Markdown 图片语法同样支持：

响应式图片

所有图片都会自动适应容器宽度，在移动端也能完美显示。

后续计划

我将在这里分享：

1. 前端开发 - Vue/React 框架深入解析和最佳实践
2. TypeScript - 类型系统和高级类型技巧
3. Node.js - 后端开发经验和性能优化
4. DevOps - CI/CD、Docker 和云原生技术

写作格式参考

表格

引用

代码是写给人看的，顺便能在机器上运行。 — Harold Abelson

任务列表

• 基础布局完成
• 文章列表页面
• 文章详情页面
• 暗色模式支持
• 评论系统优化
• 站内搜索增强

感谢阅读，敬请期待更多内容！如果觉得有用，欢迎 Star 这个项目。