✨ 特性
🚀 极速性能 - 使用 Astro.js 构建,实现最佳加载速度
📝 功能齐全的博客 - 支持带代码高亮的技术文章
🎨 精美UI - 现代化、响应式设计,由Tailwind CSS驱动
🌙 暗模式支持 - 无缝切换亮/暗主题
📱 完全响应式 - 在从移动设备到桌面设备的所有设备上都能完美呈现
🔍 SEO优化 - 结构化数据、元标签,并针对搜索引擎进行优化
🏷️ 标签系统 - 使用标签对博客文章和项目进行分类
📊 内容集合 - 使用Astro的内容集合进行有组织的内容管理
🖼️ 项目展示 - 通过图片、描述和技术标签展示您的作品
🛠️ 技术栈
Astro.js - 性能卓越的静态网站生成器
React.js - 用于交互式组件
Tailwind CSS - 实用优先的CSS框架
TypeScript - 类型安全,提升开发者体验
MDX - 结合JSX的Markdown,用于富内容创建
Preact - React的轻量级替代方案,用于UI组件
📋 前提条件
在开始之前,请确保您已安装以下软件:
Node.js (v18 或更高版本)
npm 或 yarn
Git
⚙️ 安装与设置
克隆仓库
git clone https://github.com/cojocaru-david/portfolio.git cd portfolio
安装依赖
npm install
或
yarn install
启动开发服务器
npm run dev
或
yarn dev
打开您的浏览器
导航到 https://:4321 以查看本地运行的网站。
📁 项目结构
portfolio/ ├── public/ # Static assets ├── src/ │ ├── components/ # UI components │ ├── content/ # Content collections │ │ ├── blog/ # Blog posts in MD/MDX format │ │ └── projects/ # Project data │ ├── layouts/ # Page layouts │ ├── lib/ # Utility functions │ ├── pages/ # Page routes │ └── styles/ # Global styles ├── astro.config.mjs # Astro configuration ├── tailwind.config.cjs # Tailwind CSS configuration ├── tsconfig.json # TypeScript configuration └── package.json # Project dependencies
🚀 用法
创建博客文章
在 `src/content/blog` 中创建一个新的 `.mdx` 或 `.md` 文件
添加包含标题、描述、日期、标签和作者的 frontmatter
使用 Markdown 和 MDX 组件编写您的内容
title: "Your Post Title" description: "A brief description of your post" date: 2025-04-20 tags: ["tag1", "tag2", "tag3"] authors: ["Your Name", "Co-author (optional)"] Your Post Title
在此处使用 Markdown 编写您的内容。
副标题
更多内容...
添加项目
在 `projects` 中创建一个新的 `.md` 文件
添加项目详细信息,包括名称、描述、标签和图片路径
🌙 暗模式
该项目使用 Tailwind CSS 和 Preact 支持暗模式。它会检测用户偏好并应用相应的主题,并提供在亮模式和暗模式之间切换的选项。
📊 数据工具
该项目在 `data-utils.ts` 中包含多个实用函数:
getAllPosts() - 检索所有博客文章
getRecentPosts(count) - 获取最新文章
getAdjacentPosts(currentId) - 获取相邻文章(上一篇和下一篇)
getAllTags() - 获取文章中使用的所有标签
getSortedTags() - 获取按使用次数排序的标签
getPostsByAuthor(authorId) - 获取特定作者的所有文章
🤝 贡献
欢迎贡献!请随时提交拉取请求(Pull Request)。
Fork 该仓库
创建您的特性分支 (`git checkout -b feature/amazing-feature`)
提交您的更改 (`git commit -m 'Add some amazing feature'`)
推送到该分支 (`git push origin feature/amazing-feature`)
打开拉取请求(Pull Request)
📄 许可
本项目采用 MIT 许可证授权 - 详情请参阅 LICENSE 文件。