diff --git a/_config.yml b/_config.yml index 9b9e2b27bbd..282065db237 100644 --- a/_config.yml +++ b/_config.yml @@ -6,7 +6,7 @@ theme: jekyll-theme-chirpy # The language of the webpage › http://www.lingoes.net/en/translator/langcode.htm # If it has the same name as one of the files in folder `_data/locales`, the layout language will also be changed, # otherwise, the layout language will use the default value of 'en'. -lang: en +lang: zh-CN # Change to your timezone › https://zones.arilyn.cc timezone: Asia/Shanghai @@ -14,32 +14,30 @@ timezone: Asia/Shanghai # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md # ↓ -------------------------- -title: Chirpy # the main title +title: "少时宗悫's Blog" # the main title -tagline: A text-focused Jekyll theme # it will display as the subtitle +tagline: "Linux · Robotics · Philosophy" # it will display as the subtitle -description: >- # used by seo meta and the atom feed - A minimal, responsive and feature-rich Jekyll theme for technical writing. +description: "个人学习记录与思想归档" # used by seo meta and the atom feed # Fill in the protocol & hostname for your site. # E.g. 'https://username.github.io', note that it does not end with a '/'. -url: "" +url: "https://RookiePhaseChangeBoss.github.io" github: - username: github_username # change to your GitHub username + username: RookiePhaseChangeBoss # change to your GitHub username twitter: - username: twitter_username # change to your Twitter username + username: NONE # change to your Twitter username social: # Change to your full name. # It will be displayed as the default author of the posts and the copyright owner in the Footer - name: your_full_name - email: example@domain.com # change to your email address - fediverse_handle: "@you@domain.com" # change to your fediverse handle or leave empty + name: "少时宗悫" + email: "youngzhongquework@163.com" # change to your email address links: # The first element serves as the copyright owner's link - - https://twitter.com/username # change to your Twitter homepage + # - https://twitter.com/username # change to your Twitter homepage - https://github.com/username # change to your GitHub homepage # Uncomment below to add more social links # - https://www.facebook.com/username diff --git a/_posts/2019-08-11-customize-the-favicon.md b/_posts/2019-08-11-customize-the-favicon.md index 66a43e6291d..a3278fa90eb 100644 --- a/_posts/2019-08-11-customize-the-favicon.md +++ b/_posts/2019-08-11-customize-the-favicon.md @@ -10,26 +10,25 @@ The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https:/ ## Generate the favicon -Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool [**Real Favicon Generator**](https://realfavicongenerator.net/) and click the button Pick your favicon image to upload your image file. +Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool [**Real Favicon Generator**](https://realfavicongenerator.net/) and click the button Select your Favicon image to upload your image file. -In the next step, the webpage will show all usage scenarios. You can keep the default options, scroll to the bottom of the page, and click the button Next → to generate the favicon. +In the next step, the webpage will show all usage scenarios. You can keep the default options, scroll to the bottom of the page, and click the button Generate your Favicons and HTML code to generate the favicon. ## Download & Replace -Download the generated package, unzip and delete the following file(s) from the extracted files: +Download the generated package, unzip and delete the following two from the extracted files: +- `browserconfig.xml`{: .filepath} - `site.webmanifest`{: .filepath} -And then copy the remaining image files (`.PNG`{: .filepath}, `.ICO`{: .filepath} and `.SVG`{: .filepath}) to cover the original files in the directory `assets/img/favicons/`{: .filepath} of your Jekyll site. If your Jekyll site doesn't have this directory yet, just create one. +And then copy the remaining image files (`.PNG`{: .filepath} and `.ICO`{: .filepath}) to cover the original files in the directory `assets/img/favicons/`{: .filepath} of your Jekyll site. If your Jekyll site doesn't have this directory yet, just create one. The following table will help you understand the changes to the favicon files: -| File(s) | From Online Tool | From Chirpy | -| ------- | :--------------: | :---------: | -| `*.PNG` | ✓ | ✗ | -| `*.ICO` | ✓ | ✗ | -| `*.SVG` | ✓ | ✗ | - +| File(s) | From Online Tool | From Chirpy | +|---------------------|:---------------------------------:|:-----------:| +| `*.PNG` | ✓ | ✗ | +| `*.ICO` | ✓ | ✗ | > ✓ means keep, ✗ means delete. diff --git a/_posts/2025-12-01-my-article.md b/_posts/2025-12-01-my-article.md new file mode 100644 index 00000000000..b17f922369d --- /dev/null +++ b/_posts/2025-12-01-my-article.md @@ -0,0 +1,116 @@ +--- +title: "文章标题（Title）" +date: 2025-01-01 10:00:00 +0800 +categories: [This_Demo, Tutorial] # 分类（支持多级） +tags: [Demo] # 标签（不限数量） +description: "本篇文章的简短摘要，用于 SEO 与文章预览。" +author: 你的名字（可选） +pin: false # 是否置顶（true / false） + +# 封面图（社交媒体预览图最佳尺寸 1200x630） +image: + path: /assets/img/sample-cover.jpg # 站点内路径 + alt: "封面图描述" + lqip: /assets/img/lqip/sample.jpg # （可选）低质量占位图 + +# 是否启用目录（左侧浮动目录） +toc: true +toc_label: "目录" +toc_icon: "list-ul" + +# 文章版权 / 转载声明（可选） +copyright: + license: CC BY-NC-SA 4.0 + holder: "你的名字" +--- + + + +本文主要介绍…… + + + +--- + +## 一级标题示例 + +这里写正文内容…… + +### 二级标题示例 + +你可以正常写 Markdown 内容： + +- 列表 +- 加粗 **bold** +- 斜体 *italic* +- 链接 [Link](https://example.com) + +--- + +## 插入代码块示例 + +\`\`\`python +def hello(): + print("Hello Chirpy!") +\`\`\` + +--- + +## 插入图片示例 + +![示例图片 alt](/assets/img/demo.png) + +你也可以设置宽度： + +![Alt text](/assets/img/demo.png){: width="60%" } + +--- + +## 引用示例 + +> 这是一段引用文本。 + +--- + +## 表格示例 + +| 名称 | 数值 | +| ---- | ---- | +| A | 123 | +| B | 456 | + +--- + +## 脚注示例 + +这是一个脚注[^1]。 + +[^1]: 这里是脚注内容。 + +--- + +## MathJax（数学公式）示例 + +行内公式：\( a^2 + b^2 = c^2 \) + +块级公式： + +$$ +\int_0^{1} x^2 \, dx = \frac{1}{3} +$$ + +--- + +## 最后一段 + +如果你愿意，我还能为你： + +- 自动生成 tag / category 封面 +- 提供文章批量创建脚本 +- 自动生成图床链接或本地 assets 目录 +- 给出封面图模板（1200x630） + +需要哪个？我可以继续帮你生成。 \ No newline at end of file diff --git "a/_posts/2025-12-01-\346\234\254 Demo \345\210\235\345\247\213\345\214\226\346\225\231\347\250\213.md" "b/_posts/2025-12-01-\346\234\254 Demo \345\210\235\345\247\213\345\214\226\346\225\231\347\250\213.md" new file mode 100644 index 00000000000..7344c46198a --- /dev/null +++ "b/_posts/2025-12-01-\346\234\254 Demo \345\210\235\345\247\213\345\214\226\346\225\231\347\250\213.md" @@ -0,0 +1,30 @@ +--- +title: "本 Demo 初始化教程" +date: 2025-12-01 10:00:00 +0800 +categories: [This_Demo, Tutorial] # 分类（支持多级） +tags: [Demo] # 标签（不限数量） +description: "详细介绍如何部署该 Demo, 如何本地启动该 Demo" +author: YoungZhongque +pin: true # 是否置顶（true / false） + +# 封面图（社交媒体预览图最佳尺寸 1200x630） +# image: + # path: /assets/img/sample-cover.jpg # 站点内路径 + # alt: "封面图描述" + # lqip: /assets/img/lqip/sample.jpg # （可选）低质量占位图 + +# 是否启用目录（左侧浮动目录） +toc: true +toc_label: "目录" +toc_icon: "list-ul" + +# 文章版权 / 转载声明（可选） +copyright: + license: CC BY-NC-SA 4.0 + holder: "你的名字" +--- + + + +来源: [Chirpy Jekyll Theme](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + diff --git "a/_posts/2025-12-01-\346\234\254 Demo \345\237\272\346\234\254\344\277\241\346\201\257001.md" "b/_posts/2025-12-01-\346\234\254 Demo \345\237\272\346\234\254\344\277\241\346\201\257001.md" new file mode 100644 index 00000000000..39668057144 --- /dev/null +++ "b/_posts/2025-12-01-\346\234\254 Demo \345\237\272\346\234\254\344\277\241\346\201\257001.md" @@ -0,0 +1,257 @@ +# 🧱 1. 项目结构简介（Chirpy Jekyll Theme） + +你的仓库属于 **GitHub Pages + Jekyll + Chirpy 主题**。核心结构如下： + +``` +. +├── _config.yml # 站点总配置 +├── _posts/ # 博客文章 (Markdown) +├── _tabs/ # 顶部标签栏 (About, Categories, Tags ...) +├── assets/ # 图片、CSS、JS +├── index.html # 首页入口 +└── ... # 其他 Chirpy 主题文件 +``` + +你主要用到的目录是： + +| 目录 / 文件 | 作用 | +| ------------- | --------------------------------------------- | +| `_posts/` | 所有博客文章（以日期命名的 md 文件） | +| `_tabs/` | 顶部导航栏 Tab 页面（比如 About、Categories） | +| `_config.yml` | 网站名称、描述、作者等设置 | +| `assets/img/` | 图片素材放这里 | + +------ + +# ✏️ 2. 如何添加新的 Markdown 文章 + +Chirpy 主题的文章放在 `_posts/` 内，**必须使用固定文件名格式**： + +``` +YYYY-MM-DD-标题.md +``` + +例如： + +``` +_posts/2025-12-01-windows-dev-env.md +``` + +### 文章模板 + +内容中必须包含 YAML 头部（Front Matter）： + +```md +--- +title: Windows 10 开发环境配置教程 +date: 2025-12-01 12:00:00 +0800 +categories: [Windows, Tutorial] +tags: [windows, tutorial, dev] +--- + +这里写正文内容... +``` + +写完推送到 GitHub 后，GitHub Pages 自动构建，会出现在： + +``` +https://<你的用户名>.github.io/posts/<文章标题>/ +``` + +------ + +# 🏷️ 3. 如何修改静态网页标签（顶栏 Tabs） + +顶栏 Tab 页面存放在： + +``` +_tabs/ +``` + +默认会有： + +``` +about.md +categories.md +tags.md +archives.md +``` + +你可以： + +## ✔️ 修改已有 Tab 内容 + +例如修改 About 页面： + +```md +# _tabs/about.md + +--- +title: About +icon: fas fa-info-circle +order: 1 +--- + +这里写你的简介... +``` + +## ✔️ 新增一个自定义 Tab + +例如新增 Tutorials： + +创建文件： + +``` +_tabs/tutorials.md +``` + +内容写： + +```md +--- +title: Tutorials +icon: fas fa-book +order: 5 +--- + +这里放你的教程内容或链接列表。 +``` + +GitHub Pages 自动生成导航，无需手动修改 HTML。 + +------ + +# 🎨 4. 修改首页、主题、标题等 + +你的站点的大部分设置在 `_config.yml`。 + +常用字段： + +```yaml +title: "RookiePhaseChangeBoss" +tagline: "个人技术博客" +url: "https://rookiephasechangeboss.github.io" + +author: + name: "你的名字" + email: "xxxx@example.com" + +theme_mode: dark # 强制深色模式（可选） +``` + +想改网站图标（favicon），替换： + +``` +assets/img/favicons/ +``` + +------ + +# 🖼️ 5. 如何添加图片（建议方法） + +将图片放到： + +``` +assets/img/ +``` + +例如： + +``` +assets/img/proxy-setting.png +``` + +Markdown 里这样使用： + +```md +![WSL 代理配置](../assets/img/proxy-setting.png) +``` + +或绝对路径： + +```md +![WSL 代理配置](/assets/img/proxy-setting.png) +``` + +------ + +# 📂 6. 如何修改主题样式（可选） + +你可以在这里覆盖 CSS： + +``` +assets/css/jekyll-theme-chirpy.css +``` + +例如改变文章标题颜色： + +```css +h1.post-title { + color: #ff5722; +} +``` + +------ + +# 🧪 7. 如何本地预览（强烈推荐） + +Windows 10 上你需要用 WSL 来运行 Jekyll。 + +### ✔️ 安装 Ruby + Jekyll + Bundler（WSL） + +进入仓库目录： + +```bash +sudo apt update +sudo apt install ruby-full build-essential zlib1g-dev +``` + +安装 bundle： + +```bash +gem install bundler jekyll +``` + +安装依赖： + +```bash +bundle install +``` + +### ✔️ 本地运行 + +```bash +bundle exec jekyll serve +``` + +然后浏览器打开： + +``` +http://127.0.0.1:4000 +``` + +------ + +# 🔧 8. 如何修改完推送到 GitHub（自动部署） + +只需正常 Git 提交： + +```bash +git add . +git commit -m "添加 Windows 10 开发环境教程" +git push +``` + +GitHub Pages 会自动构建，等待 1～5 分钟即可上线。 + +------ + +# 📘 如果你希望，我还可以帮你写： + +✅ 固定的 md 模板 + ✅ 如何自定义文章首页封面图 + ✅ 如何添加侧边栏菜单 + ✅ 如何自定义 Chirpy 主题颜色 + ✅ 整套 Windows 开发环境教程（你之前提到的） + +只要告诉我你要哪一部分！ \ No newline at end of file diff --git "a/_posts/2025-12-01-\346\234\254 Demo \346\272\220\347\240\201\347\273\223\346\236\204.md" "b/_posts/2025-12-01-\346\234\254 Demo \346\272\220\347\240\201\347\273\223\346\236\204.md" new file mode 100644 index 00000000000..cac1deea198 --- /dev/null +++ "b/_posts/2025-12-01-\346\234\254 Demo \346\272\220\347\240\201\347\273\223\346\236\204.md" @@ -0,0 +1,346 @@ +# 1. Chirpy 主题完整目录结构 + +``` +. +├── .devcontainer/ # VSCode Dev Containers 配置，用于容器化开发环境 +├── .github/ # GitHub Actions CI/CD 配置（自动构建、Lint、发布） +├── .husky/ # Git 钩子，用于提交前自动执行校验（lint-staged、格式化） +├── .vscode/ # VSCode 编辑器推荐设置、调试配置、扩展列表 +├── _data/ # YAML/JSON 等数据文件，供模板使用（导航、文章列表等） +├── _includes/ # Jekyll 页面片段（header、footer、sidebar 等可复用 HTML） +├── _javascript/ # 项目原始 JS 源码（ES6），构建后输出到 assets/js +├── _layouts/ # 页面布局模板（post、page、home 等 HTML 模板） +├── _plugins/ # Jekyll 插件（Ruby 代码），扩展站点构建能力 +├── _posts/ # 博客文章 Markdown（YYYY-MM-DD-title.md 格式） +├── _sass/ # SCSS 样式文件（主题核心样式，在构建时合并编译） +├── _tabs/ # 顶部 Tab 导航的页面（About / Tags / Categories / Archive） +├── assets/ # 静态资源（JS 构建输出、CSS、图片、字体） +├── docs/ # 主题文档或 Demo 文档（示例、说明、开发文档） +├── tools/ # 构建辅助脚本（如本地部署工具、压缩工具） +├── .editorconfig # 编辑器统一格式规则：缩进、编码、行尾等 +├── .gitattributes # Git 行为配置（换行符规范、语言识别等） +├── .gitignore # Git 忽略列表（不提交 node_modules、_site 等） +├── .markdownlint.json # Markdown Lint 校验规则 +├── .stylelintrc.json # StyleLint 样式检查规则（CSS/SCSS） +├── Gemfile # Ruby 依赖清单（Jekyll、插件、主题） +├── LICENSE # 开源许可证 MIT +├── README.md # 仓库说明文档 +├── _config.yml # Jekyll 站点主配置（标题、URL、主题配置、插件） +├── eslint.config.js # ESLint 配置（JS 代码风格校验） +├── index.html # 网站首页入口 layout（通常自动调用 home 布局） +├── jekyll-theme-chirpy.gemspec # 打包成 Ruby Gem 的主题描述文件（主题开发者使用） +├── package.json # Node.js 前端构建依赖（Rollup、ESLint、PurgeCSS） +├── purgecss.js # PurgeCSS 配置，用于删除未使用的 CSS，提高性能 +├── rollup.config.js # Rollup 打包 JS 配置（将 _javascript 编译成 assets/js） +└── ... # 其他临时文件、缓存、构建产物（如 _site/） +``` + +------ + +## 1.1. 个顶层项的详细说明（带修改建议） + +- `.devcontainer/` + - 用途：VS Code Remote - Containers 配置（用于在容器中打开并统一开发环境）。 + - 建议：如果你在 Windows/WSL 或 Codespaces 开发，保持这里的配置；需要额外依赖时修改 `Dockerfile` / `devcontainer.json`。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + +- `.github/` + - 用途：CI / Actions、Issue/PR 模板、工作流配置。 + - 常见文件：`workflows/`（自动化构建、lint、deploy）、`PULL_REQUEST_TEMPLATE.md`。 + - 建议：若要自定义 GitHub Pages 自动构建或增加 CI（lint、spellcheck），在这里添加/修改 Actions。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + +- `.husky/` + - 用途：Git hooks（commit-msg、pre-commit 等）配置，用来在提交时运行 lint 或测试。 + - 建议：若想强制提交规范或自动格式化，可在这里添加钩子脚本。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + +- `.vscode/` + - 用途：VS Code 的工作区设置（推荐的扩展、调试配置、格式化设置）。 + - 建议：团队协作时把常用编辑器配置放这里，方便新成员快速上手。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + +- `_data/` + - 用途：存放 YAML/JSON/TOML 等数据文件，供模板（Liquid）读取（例如作者信息、多语言词条、菜单定义等）。 + - 修改点：修改站点级别的可复用数据（比如作者列表、导航项也可以放在这里）。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + +- `_includes/` + - 用途：可重用的 HTML/Liquid 组件片段（如页脚、头部、文章列表单元、分页片段等）。 + - 修改点：要改局部 UI（比如增加一个 share 按钮、改底部版权），就在这里修改对应片段。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + +- `_javascript/` + - 用途：站点用到的 JS 脚本（交互、搜索、PWA、analytics 等）。 + - 修改点：如果你要添加自定义前端交互或修改站内搜索逻辑，在这里添加/替换脚本。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + +- `_layouts/` + - 用途：页面整体布局模板（例如 `post.html`、`default.html`、`home.html`）。这些文件定义页面骨架（头部 meta、侧边栏位置、文章主体）。 + - 修改点：若要改变站点整体结构（比如把侧边栏移到右侧、修改文章元信息显示样式），在这里修改对应 layout。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + +- `_plugins/` + - 用途：自定义 Jekyll 插件（Ruby 脚本），用于扩展构建时功能（例如自定义 tag、生成器等）。 + - 注意：GitHub Pages 默认不允许任意插件，若使用自定义插件需要在自己 CI 上构建并把静态文件推到 gh-pages。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + +- `_posts/` + - 用途：博客文章 Markdown 放置目录（Jekyll 约定）。**文件名必须是 `YYYY-MM-DD-title.md` 格式并含 Front Matter**。 + - 修改点：新建文章、修改文章元数据（categories/tags/date/thumbnail 等）。这是你最常操作的目录。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + - 示例文件头（Front Matter）： + +```markdown +--- +title: "示例文章" +date: 2025-12-01 12:00:00 +0800 +categories: [Tutorial] +tags: [jekyll, chirpy] +--- +``` + + + +- `_sass/` + - 用途：Sass（SCSS）源文件，用于生成站点 CSS（主题样式、组件样式）。 + - 修改点：想更改主题颜色、字体、响应式差异，在这里修改或覆盖变量与 mixin。构建时会编译成最终 CSS。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + +- `_tabs/` + - 用途：Chirpy 的「顶栏（Tabs）」页面集合，通常包含 `about.md`、`tags.md`、`categories.md`、`archives.md` 等。每个 `.md` 文件会渲染为单独页面并出现在导航栏。 + - 修改点：若想新增导航项或修改 About 页面内容，编辑/新建这里的 md 文件即可。非常推荐把个人简介、菜单、教程集合放在这里。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + +- `assets/` + - 用途：静态资源（图片、favicon、生成后的 CSS/JS、字体等）。通常包含 `assets/img/`、`assets/css/`、`assets/js/` 等子目录。 + - 修改点：替换 favicon、上传文章用图、放置自定义编译后 CSS/JS。注意路径引用方式（建议用绝对路径 `/assets/...`）。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + +- `docs/` + - 用途：项目文档或用于 GitHub Pages 的 docs 目录（有时作为构建输出或演示页面）。 + - 建议：如果你用 `gh-pages` 或把站点源码与文档分离，docs 也是常用位置。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + +- `tools/` + - 用途：包含开发/构建辅助脚本（比如本地脚本、自动化工具、upgrade 脚本等）。 + - 建议：检查内有无脚本帮助升级主题或生成资源，按需使用。[GitHub ](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + +## 1.2. 根目录关键文件 + +- **`_config.yml`** + - 站点全局配置：站点标题 `title`、基础 URL `url`、语言、作者、分页、主题设置、插件、构建相关选项等。你绝大多数网站行为（导航、站点名、部署路径、第三方服务）都在这里配置。 + - 修改提示：改站点名称、描述、社交链接、Google Analytics/Matomo/Disqus 等都在此修改。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) +- **`Gemfile`** + - Ruby/Jekyll 依赖声明（jekyll、jekyll-theme、插件等）。用于 `bundle install`。本地预览与 CI 构建依赖此文件。 +- **`package.json`, `rollup.config.js`, `purgecss.js`** + - 前端构建工具与依赖（如果做 JS/CSS 编译或自定义前端 asset 时需要调整）。 +- **`README.md`, LICENSE`** + - 项目说明、主题信息、使用/贡献说明与 MIT 许可。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + +------ + +## 1.3. Jekyll 相关目录（最重要） + +- **`_posts/`** — 博客文章（必须按 Jekyll 规范命名 `YYYY-MM-DD-title.md`） + - 每篇文章开头必须包含 YAML front-matter（`title`, `date`, `categories`, `tags` 等）。这是你添加新文章的主要位置。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io/tree/master/_posts) +- **`_tabs/`** — 顶部导航 Tab（About、Categories、Tags、Archives 等） + - 每个 `.md` 文件表示一个 Tab 页面（YAML front-matter 定义 `title`, `icon`, `order` 等），Chirpy 会自动把 `_tabs` 中的页面生成导航项。比如 `about.md`、`categories.md`、`tags.md`。修改/新增 Tab 就在这里。[GitHub](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) +- **`_layouts/`** — 页面模板（布局） + - 包含 site、post、page、home 等布局文件（Liquid 模板）。若要修改页面结构（例如文章头部、侧边栏结构），在这里改布局文件。 +- **`_includes/`** — 可复用片段（头部、脚注、社交按钮、评论模版等） + - 小片段模块化：例如 `header.html`, `footer.html`, `toc.html`，修改局部组件优先在此改。 +- **`_sass/`** — Sass / CSS 源码（主题样式） + - 如果要覆写主题样式或自定义颜色/变量，在此添加或修改 SCSS 文件，最后会被构建成 CSS。 +- **`_plugins/`** — Jekyll 插件（定制化功能） + - 如果你需要自定义生成逻辑（例如特殊分类、数据处理），可以放 ruby 插件或使用主题自带插件。 +- **`_data/`** — YAML/JSON/CSV 数据（供 Liquid 模板使用） + - 常用于定义菜单项、作者信息、外部链接列表等结构化数据，模板中用 `site.data.xxx` 读取。 + +------ + +## 1.4. 资源与静态文件 + +- **`assets/`** — 图片、js、css、favicon 等静态资源 + - 图片通常放 `assets/img/`；如果要引用站点图标、社交图片、Og:image，放在这里并在 `_config.yml` 或模板中引用。 +- **`docs/`** — 主题文档 / 示例（可作为站点内容或附加文档） +- **`_javascript/` / `javascript/`** — 前端脚本（站点交互、搜索脚本等） + +------ + +## 1.5. 配置/工具/CI + +- **`.github/`** — Actions、Issue templates 等 CI / GitHub 配置 + - 如果仓库有 GitHub Actions，会在这里看到构建/部署工作流（例如自动构建并推送 GitHub Pages）。 +- **`.devcontainer/`, `.vscode/`** — 开发容器/编辑器配置（便于在 Codespaces/DevContainer 中一键启动开发环境） + +------ + +## 1.6. 其他常见文件（和它们的修改建议） + +- **`index.html`** — 首页入口（通常由 layout 渲染）；若只是改首页内容通常修改首页 front-matter 或 home 布局。 +- **`jekyll-theme-chirpy.gemspec`** — 主题 gem 的定义（保留，涉及主题发布时用）。 +- **Lint / config 文件**：`.markdownlint.json`, `.stylelintrc.json`, `eslint.config.js` — 控制代码/markdown 风格。 + + + +## 1.7. 示例：把目录展开成更具体树（常见文件） + +``` +_posts/ + 2025-12-01-windows-dev-env.md + 2025-11-28-nvidia-driver.md +_tabs/ + about.md + categories.md + tags.md + archives.md +_includes/ + header.html + footer.html + social.html +_layouts/ + default.html + home.html + post.html +assets/ + img/ + avatar.png + favicon.ico + css/ + js/ +_sass/ + _variables.scss + chirpy.scss +_github/ + workflows/ + pages.yml +``` + +（上面文件名为示例；真实文件可在仓库中查看）[GitHub+1](https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io) + +--- + +# 2. 标准的文章模板 + +**Chirpy Jekyll Theme 标准可直接使用的 `_posts` 文章模板**，包含： + +- 完整 YAML front-matter +- SEO 元数据 +- 封面图 (OG image) +- 标签 / 分类 +- 目录（TOC） +- 自动 excerpt 摘要写法 +- 代码块、图片、脚注 示例 +- 完整可运行 + +你只需要复制 → 保存为 + `_posts/2025-01-01-my-article.md` + 即可被自动识别为文章。 + +✅ **Chirpy 文章模板 — 标准完整版** + +```md +--- +title: "文章标题（Title）" +date: 2025-01-01 10:00:00 +0800 +categories: [Category1, SubCategory] # 分类（支持多级） +tags: [tag1, tag2, tag3] # 标签（不限数量） +description: "本篇文章的简短摘要，用于 SEO 与文章预览。" +author: 你的名字（可选） +pin: false # 是否置顶（true / false） + +# 封面图（社交媒体预览图最佳尺寸 1200x630） +image: + path: /assets/img/sample-cover.jpg # 站点内路径 + alt: "封面图描述" + lqip: /assets/img/lqip/sample.jpg # （可选）低质量占位图 + +# 是否启用目录（左侧浮动目录） +toc: true +toc_label: "目录" +toc_icon: "list-ul" + +# 文章版权 / 转载声明（可选） +copyright: + license: CC BY-NC-SA 4.0 + holder: "你的名字" +--- + + + +本文主要介绍…… + + + +--- + +# 一级标题示例 + +这里写正文内容…… + +## 二级标题示例 + +你可以正常写 Markdown 内容： + +- 列表 +- 加粗 **bold** +- 斜体 *italic* +- 链接 [Link](https://example.com) + +--- + +# 插入代码块示例 + +\`\`\`python +def hello(): + print("Hello Chirpy!") +\`\`\` + +--- + +# 插入图片示例 + +![示例图片 alt](/assets/img/demo.png) + +你也可以设置宽度： + +![Alt text](/assets/img/demo.png){: width="60%" } + +--- + +# 引用示例 + +> 这是一段引用文本。 + +--- + +# 表格示例 + +| 名称 | 数值 | +|------|------| +| A | 123 | +| B | 456 | + +--- + +# 脚注示例 + +这是一个脚注[^1]。 + +[^1]: 这里是脚注内容。 + +--- + +# MathJax（数学公式）示例 + +行内公式：\( a^2 + b^2 = c^2 \) + +块级公式： + +$$ +\int_0^{1} x^2 \, dx = \frac{1}{3} +$$ + +--- + +# 最后一段 + +如果你愿意，我还能为你： + +- 自动生成 tag / category 封面 +- 提供文章批量创建脚本 +- 自动生成图床链接或本地 assets 目录 +- 给出封面图模板（1200x630） + +需要哪个？我可以继续帮你生成。 +``` \ No newline at end of file diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 50e43ac9d1e..b9a41727907 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,27 +1,5 @@ # Changelog -## [7.4.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.4.0...v7.4.1) (2025-10-26) - -### Bug Fixes - -* avoid duplicate base URL for homepage preview images ([#2568](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2568)) ([66bf232](https://github.com/cotes2020/jekyll-theme-chirpy/commit/66bf232951fbe752821b623dc1e7e4e2824c15bf)) - -## [7.4.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.3.1...v7.4.0) (2025-10-19) - -### Features - -* add support for embed spotify ([#2515](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2515)) ([cda62e2](https://github.com/cotes2020/jekyll-theme-chirpy/commit/cda62e28d1b71ce4018301aacf93532230aa2b3b)) -* **i18n:** add Danish locale ([#2410](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2410)) ([f5802b8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f5802b8a8a4fb94cd51a484e438f6ba2ba8d62c9)) -* **i18n:** add locale files for some rtl languages ([#2415](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2415)) ([18c48b4](https://github.com/cotes2020/jekyll-theme-chirpy/commit/18c48b4c49f896eeeeb52a8de1dca715add70c6a)) - -### Bug Fixes - -* avoid unconfigured social options in sidebar ([#2507](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2507)) ([5f8ec7f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5f8ec7ffd3b23998bad48c110e809576fe5daf80)) -* correct GoatCounter pageviews extraction ([#2420](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2420)) ([c706799](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c706799f9b2e724dee9a3b891dea72dfa587929e)) -* resolve discrepancy in lqip between post and main page ([#2453](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2453)) ([1bac96a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1bac96a8e1ae23a7a48f2b7d249bfbfd5d9bfe50)) -* restore blurry animation for homepage LQIP ([#2551](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2551)) ([221ca9f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/221ca9f52b55b103900832f3c03ad2ecc4415bcc)) -* **search:** restore full-text search for posts with description ([#2557](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2557)) ([604528e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/604528e3ce11ec0278e83f41105ed5949362bb54)) - ## [7.3.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.3.0...v7.3.1) (2025-07-26) ### Bug Fixes diff --git a/docs/INSTALLATION_CN.md b/docs/INSTALLATION_CN.md new file mode 100644 index 00000000000..c2b574ccbe3 --- /dev/null +++ b/docs/INSTALLATION_CN.md @@ -0,0 +1,83 @@ +# 必需环境安装流程（简明） + +## 📦 安装 Ruby + Jekyll + Bundler + +安装 Ruby（含 DevKit） + +访问 rubyinstaller.org +，下载针对 Windows 的 Ruby + Devkit 版本。 + +安装过程中，建议保持默认选项。在安装结束时，勾选“运行 ridk install”以安装开发工具链。 +Zhao Zhengyang ++1 + +安装后，打开新的命令提示符（CMD），执行以下命令验证是否安装成功： + +ruby -v +gem -v + + +如果成功，你将看到 Ruby 与 gem 的版本号。 +Zhao Zhengyang ++1 + +安装 Jekyll 和 Bundler + +在命令行中执行： + +gem install jekyll bundler + + +安装完成后，检查 Jekyll 是否可用： + +jekyll -v + + +如果输出版本号，则说明安装成功。 +Zhao Zhengyang ++1 + +📂 获取项目 & 安装依赖 + +克隆项目仓库 + +在你希望放置项目的文件夹（比如 D:\Projects\）打开命令行，然后执行： + +git clone https://github.com/RookiePhaseChangeBoss/RookiePhaseChangeBoss.github.io.git +cd RookiePhaseChangeBoss.github.io + + +如果你使用 GUI Git 工具，也可以用它克隆。 + +安装 Gem / Node /依赖 + +进入项目根目录后，先执行： + +bundle install + + +这会根据 Gemfile 安装 Ruby 相关依赖。 + +注意：本项目中可能还含有前端构建工具（因为看到有 package.json、rollup.config.js、purgecss.js 等文件） +GitHub + +如果你想让前端相关功能（CSS/JS 构建、主题资源编译等）正确生效，请确保你已安装 Node.js + npm/yarn。推荐安装最新稳定版 Node.js。 + +🚀 本地运行 / 预览网站 + +在项目根目录下，在命令行执行： + +bundle exec jekyll serve + +该命令将启动一个本地服务器，通常可以通过 http://127.0.0.1:4000/ 访问你的网站预览页面。 +腾讯云 ++1 + +若一切顺利，你应当能看到基于 Chirpy 主题渲染后的网站首页／文档。 + +⚠️ 如果遇到问题，比如主题未生效、CSS/JS 加载异常等，可能需要先运行前端构建（例如根据 package.json 使用 npm install + npm run build／类似命令），具体取决于该项目 README/Wiki 中的说明。 + + +gem install bundler --source https://rubygems.org/ --http-proxy http://127.0.0.1:7890 +$env:http_proxy = "http://127.0.0.1:7890" +$env:https_proxy = "http://127.0.0.1:7890"