博客有点丑，魔改优化来一波🛠️

幽灵公主-佩罗娜

前言

基于 Hexo 和 GitHub 服务搭建了博客，手动同步了一篇文章后发现页面的整体效果不是很好，也有一些小问题，基于实际情况魔改优化来了一波后效果好多了，接下来就把魔改博客的实践过程和思路分享一下

博客文章中的掘金服务的图片不展示

由于博客是先在掘金上写的，图片文件也是上传到到掘金的文件服务器 https://p9-juejin.byteimg.com/ ，手动同步文章的时候发现 hexo 博客服务中的文章里面的图片不显示，如下效果

原因分析

由于图片资源是外部链接，发现图片资源的请求 403 了

HTTP 403状态码表示: 服务器拒绝请求，通常是因为缺少访问权限

搜索引擎 Bing，Google 了一波，找到了解决方案，给当前网站的 <head></head> 标签里添加 meta 标签，设置 name="referrer" content="no-referrer" ，目的是不发送请求头，这样就避开权限问题了

name 属性，<meta> 元素提供的是文档级别（document-level）的元数据，应用于整个页面。

name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。在标准元数据名称中查看 HTML 规范等规范中定义的标准元数据名称。

添加 `meta` 标签

在默认 landscape 主题里，meta 标签添加在 /themes/landscape/layout/_partial/head.ejs 文件里

添加完 meta 标签后，重启服务图片显示就正常了

注意！

如果是设置的其他主题，需要在 themes 对应的主题下文件中找到 <head></head> 标签所在的文件，添加 <meta> 标签

关于外链图片不展示，也可以手动将图片添加到项目里，使用相对路径的方式引用图片

语言调整

在根目录下的 _config.yml 文件中修改 language 为 zh-CN

注意！

根目录下的 _config.yml 中的 language 的值对应的是当前应用主题下的 landscape/languages 下面的配置文件，如 landscape 主题下的 languages 文件夹下的中文配置文件是 zh-CN.yml，对应的 language 的配置就是 zh-CN，如果有的主题里面没有中文配置文件，那么就需要自己手动创建一个

在 themes/landscape/_config.yml 文件中修改 menu 下面的两个配置修改为中文菜单，不同的菜单对应不同的路由地址

yml 复制代码

# Header
menu:
  主页: /
  文章列表: /archives
rss: /atom.xml

不同的 _config.yml 下的配置修改的地方不一样，下图做了简单的标注

调整首页背景图

在 _config.yml 文件中没有找到背景图片相关的设置，我的思路是这样的，既然博客的页面主题是根据 /themes/landscape 下面的文件渲染出来的，那么默认主页图片应该也会出现在对应的文件里设置的，从页面显示入手查看

先查看主页图片的页面元素情况

通过分析页面元素，了解到了主页图片是用一个 id 为 banner 的 div 显示的，通过 div 的 background 属性显示了一个相对路径的图片，既然是相对路径，说明图片在项目仓库里存着，通过 images/banner.jpg 得知图片路径和图片名称，去项目里找一下，在 /themes/landscape/source/css/images/banner.jpg 下面找到了主页图片

后来在 Gtihub 的 issues 区里面也看到了关于主页图片更换的其他网友的回复，也是在 themes/landscape/source/css/images 路径下修改图片文件

疑问？

这个图片地址资源放的感觉有点不专业， css 下面放 images 和其他功能作用的目录和文件，images 这些资源目录应该和 css 平级，都放到 source 下面

以上只是我的个人观点，可能作者当时有特殊的考虑

还发现一个有意思的地方， hexo-theme-landscape官方已经把这个问题作为配置解决了，并且已经合并了，查了一下版本发现官方正式版本已经 v1.0.0 了，我用的默认的版本还是 v0.0.3，怪不得啥啥都没有，这那不支持.....

找到主页图片位置了，开始换图片，由于标题的字体颜色是白色，因此背景需要一张深色背景，替换成海贼王中的 幽灵公主-佩罗娜 人物图，效果如下

在大屏幕的图片比例看起来效果不太好，在笔记本的屏幕中能达到预期的效果

通过查看主页图片的 css 样式，了解到了主页的背景图片使用的 background-size: cover; 进行的图片设置，直接改一下 background-size 的属性值测试了一下效果，发现 contain 的效果还不错

background-size 属性值

cover

缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的左/右或者上/下部分会被裁剪。

contain

缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。

在项目的 /themes/landscape 目录下搜索 background-size: cover 找到了主页图片的样式代码，在 /themes/landscape/source/css/_partial/header.styl 文件的 #banner 中

将 background-size 的值改成 contain，重启服务，博客的主页图片效果就改好了

Pages 服务打包出错

在本地魔改了一波样式和配置后，提交代码到 GitHub 竟然报错了，查看错误提示 hexo not found

先本地测试一下，本地执行了线上的命令，一切正常，重新清理缓存后执行命令也正常，本地执行 npm run clean 和 npm run build 后提交发现还是报错，在 pages.yml 中添加 npm cache clean --force 命令还报错，最后又仔细看了报错内容和部署脚本，发现把 Cache NPM dependencies 这个命令删除了部署就好了