blog@localhost:~/posts/getting-started.mdx
$cat getting-started.mdx

Terminal Blog 使用指南

date: Nov 25, 2025read: 3 min read

欢迎使用 Terminal Blog!这是一个基于 Next.js 15 构建的终端风格博客模板。

快速开始

创建新文章

content/posts/ 目录下创建 .mdx 文件:

touch content/posts/my-first-post.mdx

文章格式

每篇文章需要包含 frontmatter 头部信息:

---
title: "文章标题"
date: "2025-11-25"
description: "文章简介,会显示在列表页"
tags: ["tag1", "tag2"]
---

Markdown 语法支持

支持完整的 Markdown 语法:

  • 粗体斜体
  • 行内代码
  • 链接
  • 列表、引用、表格等

代码高亮

支持 30+ 种编程语言的语法高亮:

// JavaScript
const greeting = "Hello, Terminal!";
console.log(greeting);
# Python
def hello():
    print("Hello, Terminal!")
# Shell
echo "Hello, Terminal!"

自定义配置

站点信息

编辑 src/lib/config.ts 修改站点基本信息:

export const siteConfig = {
  name: "Terminal Blog",
  description: "A terminal-style blog built with Next.js",
  url: "https://yourblog.com",
  author: {
    name: "Your Name",
    role: "Full Stack Developer",
    location: "Earth",
    skills: ["TypeScript", "React", "Node.js"],
    bio: "A developer who loves building things.",
  },
  links: {
    github: "https://github.com/yourusername",
    twitter: "", // 留空则不显示
    email: "",
  },
};

主题颜色

编辑 src/app/globals.css 中的 CSS 变量自定义颜色:

:root {
  --terminal-green: #22c55e;
  --terminal-purple: #a855f7;
  /* ... */
}

社交链接

编辑 src/components/Layout/Footer.tsx 修改页脚链接。

功能特性

  • 深色/浅色主题 - 点击导航栏的 [light] / [dark] 切换
  • 终端命令 - 在任意页面输入 help 查看可用命令
  • 代码复制 - 鼠标悬停代码块显示复制按钮
  • 阅读进度 - 文章页顶部显示阅读进度条
  • 响应式设计 - 完美适配移动端
  • SEO 优化 - 自动生成 sitemap 和 meta 标签

终端命令

在任意页面的命令行输入以下命令:

命令功能
help显示帮助信息
ls列出所有文章
cd posts跳转到文章列表
cd about跳转到关于页面
clear清空终端
theme切换主题

技术栈

  • Next.js 15 - React 框架
  • TypeScript - 类型安全
  • TailwindCSS - 样式框架
  • MDX - Markdown 增强
  • highlight.js - 代码高亮

开始写作吧!🚀

---EOF
$