img

一个码农

Python, Quant

Oliver

个人站

欢迎来到我的个人站~

CLAUDE.md - 项目文档

CLAUDE.md - 项目文档

项目概述

这是一个基于 Jekyll 的个人博客网站，部署在 GitHub Pages 上（pea1ce.github.io）。博客模板基于 leopard 修改而来，leopard 模板本身基于 Vno Jekyll。

博客信息：

  • 标题：Oliver
  • 副标题：个人站
  • 域名：http://heyiping.cn
  • GitHub Pages：pea1ce.github.io

技术栈

  • 静态站点生成器：Jekyll
  • 语言：Ruby, HTML, CSS, JavaScript
  • 部署平台：GitHub Pages
  • 评论系统：有言 (uyan)
  • 分析工具：百度统计、Google Analytics
  • 地图可视化：ECharts（用于足迹地图）

项目结构

mysite/
├── _config.yml              # Jekyll 配置文件
├── _includes/               # 可重用的页面组件
│   ├── data/               # 数据文件（如旅行城市数据）
│   │   ├── travel_cities.json
│   │   └── zf_travel_cities.json
│   ├── comments.html       # 评论组件
│   ├── footer.html         # 页脚
│   ├── head.html           # 页面头部
│   ├── pagination.html     # 分页
│   ├── side-panel.html     # 侧边栏（含头像效果）
│   └── JB/                 # Jekyll Bootstrap 组件
├── _layouts/               # 页面布局模板
│   ├── default.html        # 默认布局
│   ├── page.html           # 页面布局
│   └── post.html           # 文章布局
├── _posts/                 # 博客文章（Markdown 格式）
│   └── 2015-01-18-Nepal.md
├── css/                    # 样式文件
│   ├── main.css
│   ├── animate.css
│   └── tomorrow.css
├── js/                     # JavaScript 文件
│   ├── echarts/            # ECharts 地图库
│   ├── highlight.pack.js   # 代码高亮
│   ├── main.js
│   └── travelmap.js        # 足迹地图
├── images/                 # 图片资源
│   ├── avatar.jpg          # 头像
│   ├── background-cover.jpg
│   └── favicon.ico
├── index.html              # 首页
├── archive.html            # 归档页
├── tags.html               # 标签页
├── footprint.html          # 足迹地图页
├── zf_footprint.html       # zf 的足迹地图页
├── about.md                # 关于页面
├── 404.html                # 404 页面
├── feed.xml                # RSS 订阅
├── CNAME                   # 自定义域名配置
├── Gemfile                 # Ruby 依赖
└── README.md               # 项目说明

开发指南

环境要求

  • Ruby
  • Bundler
  • Jekyll

本地开发

  1. 克隆项目 
    git clone https://github.com/pea1ce/pea1ce.github.io.git
cd mysite
  2. 安装依赖 
    gem install jekyll bundler
bundle install
  3. 启动本地服务器 
    jekyll server

    或者

    bundle exec jekyll server
  4. 访问本地站点 打开浏览器访问：http://localhost:4000

添加新文章

  1. 在 _posts/ 目录下创建新文件
  2. 文件命名格式：YYYY-MM-DD-title.md
  3. 文件开头添加 Front Matter： 
    ---
layout: post
title: "文章标题"
date: YYYY-MM-DD
tags: [标签1, 标签2]
---

关键配置

_config.yml 核心配置

  • 站点信息：title, subtitle, description, url
  • 头像信息：avatarTitle, avatarDesc
  • 评论系统：comment.uyan
  • 社交信息：social.mail
  • 统计分析：baidu.id, ga.id
  • 导航栏：nav 数组
  • 分页设置：paginate: 20
  • 永久链接格式：permalink: /:year/:month/:title/

自定义域名

域名配置在 CNAME 文件中：heyiping.cn

特色功能

  1. 头像效果：侧边栏包含动画头像效果
  2. 足迹地图：使用 ECharts 展示旅行足迹
    • 个人足迹：footprint.html + _includes/data/travel_cities.json
    • zf 的足迹：zf_footprint.html + _includes/data/zf_travel_cities.json
  3. 代码高亮：使用 Rouge 和 highlight.js
  4. 评论系统：集成有言评论
  5. 响应式设计：适配移动端和桌面端

部署

项目通过 Git 推送到 GitHub 自动部署：

git add .
git commit -m "更新内容"
git push origin master

GitHub Pages 会自动构建并部署到 pea1ce.github.io。

维护建议

  1. 更新文章：定期在 _posts/ 目录添加新文章
  2. 更新足迹：修改 _includes/data/travel_cities.json 添加新的旅行地点
  3. 样式调整：主要样式在 css/main.css 和 _includes/styles/main.css
  4. 配置更新：个人信息修改在 _config.yml

注意事项

  1. 使用此模板时，应删除或修改：
    • _posts/ 下的示例文章
    • _config.yml 中的个人信息
    • 百度统计和 Google Analytics ID
    • 有言评论 ID
  2. 保留的功能特性：
    • 头像效果（在 _includes/side-panel.html 和 css/main.css）
    • 足迹地图功能
    • 整体布局和设计

相关链接

  • 原始模板：leopard
  • Jekyll 官方文档：http://jekyll.bootcss.com/
  • GitHub Pages：https://pages.github.com/