前言
基于 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 下面的两个配置修改为中文菜单，不同的菜单对应不同的路由地址
# 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 这个命令删除了部署就好了
博客地址，欢迎参观
gywgithub.github.io/gywgithub/
写在最后
到这里，个人博客的魔改就告一段落了，整体来看，改的地方也好几个点，拆开看都是各种各样的小问题，静下心来，一个个排查，都解决完以后还是挺开心的
