个人博客

简洁风格的个人博客，技术栈: react、next.js、typescript、tailwind.css。

项目结构

├── components─────────────────────────组件目录
│   ├── article-toc.tsx────────────────文章目录组件
│   ├── article.tsx────────────────────首页文章列表组件
│   ├── container.tsx──────────────────布局容器组件
│   ├── external-script.tsx────────────附加scrip标签组件
│   ├── footer.tsx─────────────────────footer组件
│   ├── header.tsx─────────────────────header组件
│   ├── layout.tsx─────────────────────布局组件
│   ├── meta.tsx───────────────────────meta标签组件
│   ├── paginator.tsx──────────────────分页组件
│   ├── post-body.tsx──────────────────文章主体组件
│   └── post-header.tsx────────────────文章头部组件
├── lib────────────────────────────────lib目录
│   ├── api.ts─────────────────────────api，数据源
│   └── constants.ts───────────────────常量文件
├── pages──────────────────────────────页面路由目录
│   ├── article────────────────────────文章路由目录
│   │   └── [articlePath].tsx──────────文章详情页面
│   ├── gallery────────────────────────相册路由目录
│   │   ├── [galleryPath].tsx──────────相册详情页面
│   │   └── index.tsx──────────────────相册主页
│   ├── page───────────────────────────分页路由目录
│   │   └── [index].tsx────────────────分页页面
│   ├── 404.tsx────────────────────────404页面
│   ├── about.tsx──────────────────────关于页面
│   ├── _app.tsx───────────────────────app入口
│   ├── archives.tsx───────────────────归档页面
│   ├── _document.tsx──────────────────自定义文档结构
│   └── index.tsx──────────────────────首页
├── public─────────────────────────────站点根目录文件
│   ├── libs───────────────────────────第三方库目录
│   │   └── fancybox───────────────────fancybox
│   └── medias─────────────────────────资源目录
│       ├── avatar.jpg─────────────────头像图片
│       └── favicon.png────────────────站点图标
├── source─────────────────────────────hexo目录
│   ├── _data──────────────────────────自定义数据目录
│   │   ├── friends.json───────────────友链数据
│   │   └── gallery.json───────────────相册数据
│   └── _posts─────────────────────────文章目录
│       ├── 笔记────────────────────────分类目录
│       ├── 技术────────────────────────分类目录
│       ├── 生活────────────────────────分类目录
│       └── 折腾────────────────────────分类目录
├── styles──────────────────────────────样式目录
│   ├── custom-markdown.scss────────────文章样式
│   ├── custom.sass─────────────────────自定义样式
│   ├── index.css───────────────────────
│   └── theme.scss──────────────────────主题颜色定义
├── _config.yml─────────────────────────hexo配置文件
├── hexo.ts─────────────────────────────hexo初始化文件，提供数据源
├── next.config.js──────────────────────next配置文件
├── next-env.d.ts───────────────────────不知道啥玩意
├── package.json────────────────────────
├── postcss.config.js───────────────────
├── README.md───────────────────────────
├── tailwind.config.js──────────────────tailwind配置文件
└── tsconfig.json───────────────────────ts配置文件

安装使用

# 安装依赖
npm install

# 开发运行
npm run dev

# 构建生产
npm run build

# 导出静态文件(构建之后才能导出)
npm run export