建站Day2日志
建站第二天日志
操作日志：更换 Ringo 主题与问题排查
核心目标： 更换并配置新主题 Ringo，解决配置过程中遇到的技术问题。
一、主题安装与切换
选定主题：在 Hexo 主题站选择了 hexo-theme-ringo。
下载主题：使用 Git 命令将主题仓库克隆到本地 themes/ringo 目录。
Bash
|
启用主题：修改了博客根目录的 _config.yml 文件，将 theme 字段的值从 landscape 修改为 ringo。
二、基础页面与内容配置
创建页面：使用 hexo new page 命令创建了 about 和 tags 两个独立页面。
配置菜单：修改了 themes/ringo/_config.yml 文件中的 menu 部分，添加了指向新页面的导航链接，并为页面 .md 文件添加了 type 属性。
清理内容：删除了 source/_posts 文件夹中由 hexo init 默认生成的 hello-world.md 文章。
修改站点信息：在根 _config.yml 文件中，更新了 title, author, url 等核心字段，以确保站点信息和链接生成正确。
核心概念：两个 _config.yml 的区别
理解这两个配置文件的不同作用，是高效配置 Hexo 的关键。
1. 根目录的 _config.yml
这个文件控制的是整个网站的、最根本的属性。
它负责：
网站的网址 (url)
网站的标题 (title)
网站的作者 (author)
文章的链接格式 (permalink)
未来要安装的全局插件（比如部署到 Git 的插件）
一句话总结：这是网站的“户口本”和“房产证”，定义了“这个网站是谁的，它在哪里”。
2. themes/ringo/ 目录下的 _config.yml
这个文件控制的是当前所使用主题的、特有的功能和样式。
它负责：
导航菜单里有哪些链接 (menu)
是否开启图片懒加载 (lazyload)
社交链接图标有哪些
版权声明的格式
访客统计功能的开关
一句话总结：这是 Ringo 这个主题的“个性化设置面板”，定义了“这个家要装修成什么样，有哪些定制家具”。如果换了一个主题，这个文件就作废了，需要去配置新主题的配置文件。
三、主题调试与问题解决
在配置主题过程中，遇到并解决了以下三个主要问题：
问题一： lazyload 函数渲染页面时出错 ( TypeError )
现象：访问 about 等独立页面时，hexo server 进程报错，提示无法读取 lazyload 属性。
诊断：通过分析错误日志，定位到问题出在 themes/ringo/layout/_partial/article.ejs 文件调用 lazyloadImage 函数时。
解决方案：修改了 article.ejs 文件，将 <%- lazyloadImage(post.content) %> 替换为基础的 <%- post.content %>，绕过了有问题的函数。
lazyload 功能的回顾与复盘
它的使用目的和意义是什么？
目的：提升网页的初始加载速度，优化用户体验。
工作原理：网页只加载当前屏幕看得到的图片，当向下滚动页面时，才开始加载后续图片。
作用：对于图片很多的文章（比如旅行游记、摄影作品集），这个功能效果显著，能大大减少访客的等待时间。
为什么禁用后对我的网站没影响？
因为我目前的页面，比如“关于”页和“Hello World”，都几乎没有图片。这个功能根本没有“用武之地”，所以自然感觉不到任何影响。
禁用它修复了什么错误？Ringo 主题的代码有一个Bug：在渲染“关于”这种独立页面 (Page) 时，它会错误地执行 lazyloadImage 功能，但又没能正确地把配置信息传递过去，导致程序找不到配置而崩溃。
我们最初尝试在配置里 enable: false 来“关掉”它，但因为 Bug，程序甚至没去检查这个开关就直接运行了，所以依然报错。最终，我们通过直接修改模板文件 (article.ejs)，把调用 lazyloadImage 函数的那行代码换掉，相当于彻底绕过了这个有问题的函数，才从根源上解决了问题。
问题二： about 页面出现多余的版权和导航模块
现象：“关于”页面底部出现了不应有的版权声明和“上一篇/下一篇”导航。
诊断：发现 page.ejs 模板默认复用了文章模板 article.ejs。
解决方案：
复制 article.ejs 并重命名为 about.ejs，为“关于”页创建一个专属模板。
编辑 about.ejs，删除了其中负责显示版权声明和 postnear 相邻文章导航的代码块。
修改 page.ejs，使其在渲染 about 页面时，调用新建的 about.ejs 模板。
核心概念： article.ejs vs page.ejs
article.ejs (或 post.ejs)
这是**“文章页”**的蓝图。它定义了每一篇博客文章的通用结构（标题、日期、正文、标签、评论区等）。所有放在 source/_posts 里的文章，都会套用这个模板。
page.ejs
这是**“独立页面”的蓝图，用来渲染“关于”、“标签”等非文章页面。在 Ringo 主题里，page.ejs 更像一个“调度员”**，它会检查独立页面的 type，然后决定调用哪个更具体的局部模板来完成渲染。
问题三：侧边栏副标题字体大小无法通过 custom.css 修改
现象：在自定义样式文件中添加的 CSS 规则不生效。
诊断：使用浏览器开发者工具进行调试，排查过程如下：
确认 custom.css 已被加载。
发现自定义 CSS 规则的优先级被主题默认样式覆盖。
发现即使使用 !important 强制提升优先级，样式依然被一个 element.style（内联样式）覆盖。
通过 VS Code 全局搜索，最终在 themes/ringo/layout/_partial/header.ejs 文件中定位到硬编码的内联样式 style="...font-size:10px"。
解决方案：直接编辑 header.ejs 文件，删除了 <span> 标签内写死的 style 属性，使得外部 CSS 得以正常生效。
技术知识沉淀
如何学会看 Chrome 的“检查”功能？
对于目前的需求，只需要关注“样式 (Styles)”这个面板即可。
速成秘诀：
从上往下看：CSS 规则的优先级，基本是从上往下依次降低的。最上面的是最强的。
看“划掉”的线：如果一条规则（比如 font-size: 14px）上面有一道横线，就意味着它被上面某个更高优先级的规则给覆盖掉了。这是最重要的调试信息。
看来源：每条规则的右上角，都会写着它的来源，比如 ringo.css:161。这告诉我们规则写在哪个文件的第几行。
实时修改：可以直接在开发者工具里修改这些值来临时预览效果，这是调试样式的最佳方式。
掌握了找到元素、查看样式、看是否被覆盖、以及来源文件这几点，就足够解决 99% 的样式问题了。
VS Code 全局搜索的使用场景
代码追踪与理解：当想知道一个特定的类名（如 .site-description）或函数名（如 lazyloadImage）在整个项目的所有文件里都在哪里被用到时，全局搜索是唯一高效的方法。
批量重构与修改：当需要批量修改某个名称或配置项时，使用全局搜索并替换，可以一键完成所有修改，安全又可靠。
学习新项目：下载一个新主题或新程序时，通过搜索里面的关键函数或变量名，可以快速地理清整个项目的代码结构和逻辑。
Hexo 项目文件结构解读
_config.yml (最重要的核心配置文件)
整个博客的“大脑”，管理网站标题、作者、URL 等全局设置。
package.json 和 package-lock.json
Node.js 项目的“依赖清单”。package.json 记录了项目需要哪些“零件”（插件），package-lock.json 则精确锁定了每个零件的版本，保证环境一致性。
source 文件夹
存放网站所有源内容的地方。我们写的 .md 格式的文章都保存在 source/_posts 文件夹里。
themes 文件夹
存放博客的主题文件，决定了博客的外观、布局和一部分功能。
scaffolds 文件夹 (脚手架/模板)
存放文章的“模板”。当使用 hexo new "文章名" 命令时，Hexo 会复制这里的模板文件来创建新文章。
.gitignore 文件
告诉 Git 哪些文件不需要上传到代码仓库（比如 node_modules 文件夹）。
文章作者： SouNd
文章链接： https://insound.blog/2025/06/19/%E5%BB%BA%E7%AB%99%E6%97%A5%E5%BF%97Day2/
版权声明：除另有声明外，本博客文章均采用 CC BY-NC-SA 4.0 许可协议。转载请注明原作者与文章出处。