网站样式配置指南

项目结构已简化

你的网站现在只包含必要的文件：

├── _pages/                 # 页面文件
│   ├── about.md           # 关于页面
│   ├── plan.md            # 计划页面
│   ├── review.md          # 评论页面
│   └── 404.md             # 404页面
├── _includes/             # 包含文件（已简化）
│   ├── author-profile.html # 作者信息
│   ├── head.html          # 页面头部
│   ├── masthead.html      # 顶部导航
│   ├── footer.html        # 页脚
│   └── head/              # 头部自定义
├── _layouts/
│   └── default.html       # 基础布局
└── _sass/                 # 样式（已简化）
    ├── _themes.scss       # 主题变量
    ├── _syntax.scss       # 代码高亮
    ├── theme/             # 主题文件
    │   ├── _default_light.scss  # 浅色主题（你需要编辑这个）
    │   └── _default_dark.scss   # 深色主题
    └── layout/            # 布局样式
        ├── _base.scss
        ├── _masthead.scss
        ├── _footer.scss
        └── _page.scss

如何自定义样式

1. 修改主题颜色

编辑 _sass/theme/_default_light.scss：

:root {
    --global-bg-color: #ffffff;              /* 背景色 */
    --global-text-color: #000000;            /* 文字色 */
    --global-sidebar-bg-color: #2e7d32;     /* 侧边栏色 */
    --global-link-color: #000000;            /* 链接色 */
}

2. 修改布局样式

  • 顶部导航：编辑 _sass/layout/_masthead.scss
  • 页脚：编辑 _sass/layout/_footer.scss
  • 页面内容：编辑 _sass/layout/_page.scss
  • 基础样式：编辑 _sass/layout/_base.scss

3. 修改页面内容

  • 主页：编辑 _pages/about.md
  • 计划：编辑 _pages/plan.md
  • 评论：编辑 _pages/review.md

4. 修改作者信息

编辑 _config.yml 中的 author 部分：

author:
  name: "Yuhan Chi"
  avatar: "profile.png"
  location: "Earth / China / Shanghai"
  email: "masterwuguicyh@163.com"

5. 修改导航菜单

编辑 _data/navigation.yml 来自定义菜单链接。

本地预览

bundle exec jekyll serve

然后访问 http://localhost:4000

常见自定制需求

添加新页面

  1. 在 _pages/ 中创建新的 .md 文件
  2. 在文件开头添加 YAML front matter：
---
permalink: /newpage/
title: "New Page Title"
author_profile: true
---

页面内容在这里...

修改字体

编辑 _sass/_themes.scss 中的字体变量：

$sans-serif: -apple-system, "San Francisco", "Roboto", sans-serif;
$serif: Georgia, Times, serif;

添加自定义 CSS

在 _sass/layout/_page.scss 底部或编辑其他布局文件添加你的规则。

下一步

  1. 根据需要修改颜色和样式
  2. 在 _pages/ 中编辑页面内容
  3. 测试并提交到 git

有问题？查看 Jekyll 官方文档：https://jekyllrb.com/docs/