diff --git a/README.md b/README.md index 3f4b841..27ed411 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,37 @@ -# Nuxt Content 博客 +# Nuxt Content 博客系统 -这是一个使用 Nuxt 3 和 Nuxt Content 构建的博客系统。 +这是一个使用 Nuxt 3 和 Nuxt Content 构建的现代化个人博客系统，支持 Markdown 内容管理，具有清新的设计风格和丰富的功能特性。 -## 功能特点 +## ✨ 功能特点 -- 📝 基于 Markdown 的内容管理 -- 🎨 使用 TailwindCSS 构建的响应式设计 -- 🚀 基于 Nuxt 3 的快速渲染 -- 📋 自动生成文章列表 -- 📅 支持文章元数据（标题、描述、日期等） +### 📝 内容管理 +- 基于 Markdown 的内容创作 +- 支持文章封面图 +- 文章标签系统 +- 自动生成文章目录 +- 代码块语法高亮 +- 代码块一键复制功能 +- 按日期自动排序文章 -## 快速开始 +### 🎨 界面设计 +- 响应式布局，适配多种设备 +- 清新现代的设计风格 +- 平滑过渡动画效果 +- 暗色模式支持（开发中） + +### 🚀 核心页面 +- 个性化首页展示 +- 文章列表页 +- 友情链接页 +- 关于我页面 + +### 🛠 技术特性 +- 基于 Nuxt 3 的快速渲染 +- TailwindCSS 的原子化 CSS +- 支持 Vue 组件在 Markdown 中使用 +- TypeScript 支持 + +## 🚀 快速开始 ### 安装依赖 @@ -32,7 +53,7 @@ pnpm dev pnpm build ``` -## 添加新文章 +## 📝 创建文章 在 `content` 目录下创建新的 `.md` 文件。文件需要包含以下格式的头部信息： @@ -41,27 +62,206 @@ pnpm build title: 文章标题 description: 文章描述 date: YYYY-MM-DD +tags: ['标签1', '标签2'] +cover: '封面图片URL' # 可选 --- # 文章内容 ``` -## 项目结构 +## 📁 项目结构 ``` ├── content/ # Markdown 文章 +│ └── posts/ # 博客文章 ├── components/ # Vue 组件 -├── layouts/ # 页面布局 +├── layouts/ # 页面布局 ├── pages/ # 页面路由 -└── public/ # 静态资源 +│ ├── index.vue # 首页 +│ ├── articles.vue # 文章列表 +│ ├── friends.vue # 友链页面 +│ └── about.vue # 关于页面 +├── public/ # 静态资源 +└── assets/ # 样式和资源文件 ``` -## 技术栈 +## 🔧 自定义配置 + +### 修改个人信息 +1. 替换 `public/avatar.jpg` 更换头像 +2. 编辑 `pages/about.vue` 更新个人介绍 +3. 在 `pages/friends.vue` 中修改友链信息 + +### 自定义主题 +- 在 `tailwind.config.js` 中修改主题配置 +- 编辑 `layouts/default.vue` 调整全局样式 + +## 🔮 即将推出的功能 + +- [ ] 文章评论系统 +- [ ] 全文搜索功能 +- [ ] 文章目录导航 +- [ ] 暗色模式 +- [ ] SEO 优化 +- [ ] RSS 订阅 + +## � 部署指南 + +### 静态部署 (推荐) + +1. 构建静态文件： + +```bash +# 生成静态文件 +pnpm generate +``` + +生成的静态文件将位于 `.output/public` 目录中。 + +2. 将生成的文件部署到任意静态托管服务： + +- GitHub Pages +- Netlify +- Vercel +- 自有服务器 + +#### Nginx配置示例 + +```nginx +server { + listen 80; + server_name yourdomain.com; + root /path/to/your/blog/.output/public; + index index.html; + + # 启用 gzip 压缩 + gzip on; + gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; + + location / { + try_files $uri $uri/ /index.html; + } + + # 缓存静态资源 + location /assets { + expires 7d; + add_header Cache-Control "public, no-transform"; + } +} +``` + +### Node.js 服务器部署 + +1. 构建项目： + +```bash +pnpm build +``` + +2. 在服务器上启动： + +```bash +# 使用 PM2 启动（推荐） +pm2 start .output/server/index.mjs --name "blog" + +# 或直接启动 +node .output/server/index.mjs +``` + +#### PM2 配置示例 (ecosystem.config.js) + +```javascript +module.exports = { + apps: [{ + name: 'blog', + script: '.output/server/index.mjs', + instances: 'max', + exec_mode: 'cluster', + env: { + PORT: 3000, + NODE_ENV: 'production' + } + }] +} +``` + +### Docker 部署 + +1. 创建 Dockerfile： + +```dockerfile +FROM node:18-alpine + +WORKDIR /app + +# 安装 pnpm +RUN npm install -g pnpm + +# 复制项目文件 +COPY . . + +# 安装依赖并构建 +RUN pnpm install +RUN pnpm build + +# 暴露端口 +EXPOSE 3000 + +# 启动服务 +CMD ["node", ".output/server/index.mjs"] +``` + +2. 构建并运行容器： + +```bash +# 构建镜像 +docker build -t nuxt-blog . + +# 运行容器 +docker run -d -p 3000:3000 nuxt-blog +``` + +### Docker Compose 部署 + +创建 `docker-compose.yml`： + +```yaml +version: '3' + +services: + blog: + build: . + ports: + - "3000:3000" + restart: always + environment: + - NODE_ENV=production +``` + +启动服务： + +```bash +docker-compose up -d +``` + +## �🛠 技术栈 - [Nuxt 3](https://nuxt.com/) - [Nuxt Content](https://content.nuxt.com/) - [TailwindCSS](https://tailwindcss.com/) +- [Vue 3](https://vuejs.org/) +- [TypeScript](https://www.typescriptlang.org/) -## 许可证 +## 📝 许可证 MIT + +## 🤝 贡献 + +欢迎提交 Issue 和 Pull Request！ + +1. Fork 本项目 +2. 创建您的特性分支 (`git checkout -b feature/AmazingFeature`) +3. 提交您的修改 (`git commit -m 'Add some AmazingFeature'`) +4. 推送到分支 (`git push origin feature/AmazingFeature`) +5. 打开一个 Pull Request diff --git a/assets/css/code.css b/assets/css/code.css new file mode 100644 index 0000000..e2ca825 --- /dev/null +++ b/assets/css/code.css @@ -0,0 +1,27 @@ +/* 代码块样式 */ +.prose pre { + position: relative !important; + padding: 0.5rem 0.75rem !important; + margin: 0.5rem 0 !important; + border-radius: 0.375rem !important; + background-color: #1f2937 !important; + overflow-x: auto !important; +} + +.prose pre code { + display: block !important; + padding: 0 !important; + padding-right: 2.5rem !important; + margin: 0 !important; + border-radius: 0 !important; + background: none !important; + color: #e5e7eb !important; + font-size: 0.875rem !important; + line-height: 1.25 !important; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; +} + +/* 代码块语言标签 */ +.prose pre::before { + display: none; /* 隐藏语言标签 */ +} diff --git a/components/CopyCode.vue b/components/CopyCode.vue new file mode 100644 index 0000000..0bd075a --- /dev/null +++ b/components/CopyCode.vue @@ -0,0 +1,104 @@ + + + + + diff --git a/components/content/ProseCode.vue b/components/content/ProseCode.vue new file mode 100644 index 0000000..f815215 --- /dev/null +++ b/components/content/ProseCode.vue @@ -0,0 +1,110 @@ + + + + + diff --git a/content/build-blog-with-nuxt-content.md b/content/build-blog-with-nuxt-content.md new file mode 100644 index 0000000..41f54d9 --- /dev/null +++ b/content/build-blog-with-nuxt-content.md @@ -0,0 +1,37 @@ +--- +title: 使用 Nuxt Content 搭建个人博客 +description: 本文介绍如何使用 Nuxt Content 模块快速搭建一个现代化的个人博客系统 +date: 2025-07-21 +tags: ['Nuxt', 'Vue', 'Web开发'] +cover: 'https://picsum.photos/800/400' +--- + +Nuxt Content 是一个强大的文档驱动模块，让我们可以轻松地使用 Markdown 文件来管理博客内容。本文将介绍如何使用它来搭建一个现代化的个人博客系统。 + +## 特性 + +- 基于文件的 CMS +- Markdown 支持 +- 强大的 MDC 语法 +- 自动生成目录 +- 代码高亮 +- 全文搜索 +- 支持 Vue 组件 + +## 示例代码 + +```js +// nuxt.config.ts +export default defineNuxtConfig({ + modules: ['@nuxt/content'], + content: { + highlight: { + theme: 'github-dark' + } + } +}) +``` + +## 总结 + +Nuxt Content 提供了一个简单而强大的方式来构建内容驱动的网站。通过合理的目录结构和配置，我们可以快速搭建出一个功能完善的博客系统。 diff --git a/content/ssh-key-linux.md b/content/ssh-key-linux.md new file mode 100644 index 0000000..4cb29f1 --- /dev/null +++ b/content/ssh-key-linux.md @@ -0,0 +1,118 @@ +--- +title: 通过SSH密钥连接LINUX服务器 +description: 本文介绍如何通过SSH密钥连接LINUX服务器 +date: 2025-07-22 +tags: ['SSH', '密钥', 'Linux'] +cover: 'https://picsum.photos/800/221' +--- + +## 前提条件 +使用**ROOT**用户（个人喜好）、客户端使用Windows PowerShell终端、服务端使用Debian12+或是Ubuntu24+ +## 客户端操作 +### 创建密钥对 +随便在哪按 WIN + X 再按 I 打开PowerShell终端 +进入用户的.ssh文件夹 +```shell +cd ~\.ssh +``` +创建密钥对，使用椭圆加密算法，相比RSA更加短小精悍 +```shell +ssh-keygen -t ed25519 +``` +输出Enter file in which to save the key，是对密钥对进行命名，我这里输入test +之后输出Enter passphrase (empty for no passphrase)，是对私钥进行加密，输入私钥的密码（不会显示），不设置就按Enter跳过 +然后确认密码，依旧按Enter跳过 +出现一个方框图形，表示创建成功 +之后 ~\.ssh 文件夹中会出现一个 test 私钥文件和一个 test.pub 公钥文件 +至此，客户端的操作暂时结束 + +## 服务端操作 +### 上传公钥至服务器 +#### 创建实例阶段 +在创建实例阶段，如阿里云服务器，可以在**管理设置-登录凭证**中选择密钥对；**登录名**选择root；**密钥**对选择右边创建密钥对 +创建密钥对界面，密钥对名称随意；创建类型选择导入已有密钥对， +在客户端Windows电脑中进入 ~\.ssh文件夹中，找到第一步创建的test.pub,用任意编辑器打开后，复制其内容到公钥内容框中，标签键随意， +然后回到实例创建页面，在密钥对选择刚刚创建的密钥对即可 +#### 已有服务器 +使用SSH密码登录到服务器，切换到ROOT用户 +```shell +sudo -i +``` +##### 复制公钥到服务器 +进入/root/.ssh文件夹 +```shell +cd /root/.ssh +``` +创建或编辑 authorized_keys 文件 +```shell +vim authorized_keys +``` +按 I 进入编辑模式，将公钥内容复制进去 +按 Esc ，输入 :wq 保存并退出 +##### 编辑SSH-SERVER配置文件 +进入/etc/ssh文件夹 +```shell +cd /etc/ssh +``` +编辑sshd_config文件 +```shell +vim sshd_config +``` +同样按 I 进入编辑模式，并确保下列三个参数如下 +```shell +PermitRootLogin yes #允许使用ROOT用户登录 +PubkeyAuthentication yes #使用密钥对 +PasswordAuthentication no #禁用密码 +``` +按 Esc 退出编辑模式，输入 :wq 保存并退出 +##### 重启SSH-SERVER服务 +一般使用 +```shell +systemctl restart sshd +``` +不行就试试 +```shell +service ssh restart +``` +##### **不要断开SSH连接，防止配置有问题连接不上** +## 使用密钥对进行连接 +### 直接连接 +新开一个PowerShell终端 +```shell +ssh -i ~/.ssh/test root@192.168.21.5 +``` +输出 Enter passphrase for key 提示输入私钥密码（输入的内容不会显示），之前没设置就直接按 Enter ；不出意外就可以连接上了 +### 编辑config文件进行简便连接 + **注意：** 只用使用Windows的终端才能简便连接，使用mobaxterm等ssh软件这个配置是没用的 +在Windows客户端中，进入 ~\.ssh 文件夹 + +```shell +cd ~\.ssh +``` +使用记事本编辑config文件 +```shell +noteapd config +``` +格式如 +```shell +Host test + HostName 192.168.21.5 + IdentityFile ~/.ssh/test + User root +``` +如果端口不是22，则需要加上端口，如ssh使用222端口 +```shell +Host test + HostName 192.168.21.5 + IdentityFile ~/.ssh/test + Port 222 + User root +``` +保存 +然后在PowerShell终端中就可以进行简便连接如 +```shell +ssh test +``` +这里的test是 config 文件 Host 后的字符，可以用Emoji表情 +**注意：** 在使用SSH密钥对克隆GitHub或是其他git相关网站时，Host最好设置为网站的域名，你问为什么？时间的教训罢了~ +## 至此教程结束 \ No newline at end of file diff --git a/content/welcome.md b/content/welcome.md index e28ca8d..7afcb74 100644 --- a/content/welcome.md +++ b/content/welcome.md @@ -1,7 +1,7 @@ --- title: 欢迎来到我的博客 description: 这是我的第一篇博客文章 -date: 2025-07-22 +date: 2025-07-21 --- # 欢迎来到我的博客 diff --git a/layouts/default.vue b/layouts/default.vue index 5a5050b..fdb63ec 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -1,17 +1,46 @@ + + diff --git a/nuxt.config.ts b/nuxt.config.ts index 844787d..092ab99 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -2,10 +2,15 @@ export default defineNuxtConfig({ devtools: { enabled: true }, modules: ['@nuxt/content', '@nuxtjs/tailwindcss'], + css: ['~/assets/css/code.css'], content: { // https://content.nuxtjs.org/api/configuration highlight: { - theme: 'github-dark' + theme: { + default: 'github-dark', + dark: 'github-dark' + }, + preload: ['bash', 'shell', 'sh', 'javascript', 'js', 'typescript', 'ts', 'json', 'md', 'yaml', 'vue'], }, markdown: { toc: { @@ -13,5 +18,17 @@ export default defineNuxtConfig({ searchDepth: 3 } } + }, + app: { + head: { + charset: 'utf-8', + viewport: 'width=device-width, initial-scale=1' + } + }, + nitro: { + compressPublicAssets: true + }, + experimental: { + componentIslands: true } }) diff --git a/package.json b/package.json index 06e64d2..0109c5e 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@nuxt/content": "^2.12.0", "@nuxt/devtools": "latest", "@nuxtjs/tailwindcss": "^6.11.4", + "@tailwindcss/typography": "^0.5.16", "nuxt": "^3.10.0" } } diff --git a/pages/[...slug].vue b/pages/[...slug].vue index b8a5fde..cf618de 100644 --- a/pages/[...slug].vue +++ b/pages/[...slug].vue @@ -1,11 +1,28 @@ + + - -