hexo博客yilia主题 如何自定义个人博客的背景图片
hexo博客yilia主题 博客背景的设置
个人博客系列文章目录
- hexo博客yilia主题 所有文章模块缺失最新解决方案
- hexo+yilia博客报错post.categories forEach is not a function
- hexo博客yilia主题 博客背景的设置
文章目录
- hexo博客yilia主题 博客背景的设置
- 个人博客系列文章目录
- 前言
- 经历和感受
- 添加与取消的具体步骤
- 一、 前期准备
- 1.创建photos文件夹
- 2.下载好看的壁纸
- 3.重要操作
- 二、修改配置文件
- 左侧栏目上部背景图片
- 左侧栏目下部背景图片
- 右侧栏目下的背景图片
- 4.执行下列命令
- 三、取消背景图片
- 总结
- 参考资料：
- 结束之际，希望大家不要忘记为我点上一个赞，如果你觉得小编所写文章对你有一定的帮助，请不要忘记关注我的博客，以免错过接下来一段时间我为大家带来的高质量文章呦，谢谢各位。
前言
hexo博客yilia主题背景，本文将包括三部分：
1.左侧栏目上部背景
2.左侧栏目下部背景
3.右侧栏目下的背景
刚开始接触Github和hexo博客时还有很多知识空洞，真的是一穷二白，只见树木不见森林。经常需要在知乎，CSDN，百度上面参考各种大神的hexo博客创建经验和yilia主题优化方案。
经历和感受
在我自建博客的一个月里，也经常遇到很多问题，在得益于各路博客园，简书，CSDN，知乎的大佬文章，我都能顺利解决80%的问题，但是这一次背景图片的部署方法，确实来源对CSS方面background的知识点的应用和对大佬博客的感悟。大佬的方法比较好，同时我个人也找到了另一种比较有效的解决方法，所以我在此分享一下我的个人经验，希望对大家能有所帮助。
添加与取消的具体步骤
一、 前期准备
1.创建photos文件夹
首先在主目录下使用git bash执行以下命令创建一个photos文件夹
hexo new page "photos"
2.下载好看的壁纸
为了不耽误大家的时间，这里给大家推荐一个网站彼岸图网，在里面选好自己需要的图片，然后登陆自己QQ账号，可以下载一张4k原图，这里附上我将要用来演示的古风小姐姐背景图片的链接，如果需要下载，右键图片另存即可
3.重要操作
- 将上面下载的4k图片保存到之前在博客文件目录下新建的photos文件中的index文件夹下。并执行下列命令，将图片上传到Github站点上。
（这一步操作实际上是把github当做自己的图床，这又有了一种新的想法，利用Github作为图床，为自己的博客站点添加相册页面，这一步的具体操作容我后面再介绍）
hexo clean # 清除缓存
hexo g && gulp # 渲染生成文章 && 压缩缓存
hexo s # 部署到本地测试环境
- 打开自己的Github页面用作博客仓库下的页面，找到photos文件夹，点击index文件夹，点击之前上传的图片文件
很大概率会遇到如下图这样这样的问题
这里附上大佬的解决方法 GitHub 读取jupyter报错Sorry, something went wrong. Reload?
3.复制自己上传图片页面的链接，打开https://nbviewer.jupyter.org网页
4.点击GO！即可得到解析结果。
5.复制此时的页面链接，（后面需要用）
到这里前期的准备工作就结束了，为了说清楚上面的操作，基本每一步都写的比较详细，所以会显得比较啰嗦，还请大家可以耐心看下去。
二、修改配置文件
修改的重点主要在yilia目录下source文件夹里的main.a5fda8.css（不同同学的文件下的名称不一样），只要确定有main.xxxxx.css文件即可。
左侧栏目上部背景图片
需要修改的代码位置
.left-col .overlay{width:100%;height:180px;position: absolute; background-image:url("background.jpg")}
左侧栏目下部背景图片
需要修改的代码位置
.left-col{background:#fff;background-position: 25% 25%;
右侧栏目下的背景图片
需要修改的代码位置
.mid-col{position:absolute;right:0;min-height:100% # 修改位置
这里为了便于观看，所以我把需要添加的代码写成了横行的，实际上你打开的可能是一行代码从同到尾，根本没法看。
background-image:url("https://nbviewer.jupyter.org/github/sujit-168/sujit-168.github.io/blob/master/photos/index/1.jpg"); # 图片地址
background-repeat: repeat-y; # 对齐方式（以Y轴方向显示图片）
background-attachment: fixed; # 相对页面的滑动固定（在页面上是固定的，不会随着页面一起滑动）
background-position: 100% 60%; # 在所选页面的位置比例（在页面的什么位置）
background-size: 1500px 800px; # 在所选页面所设置的图片显示比例（在页面上显示多大比例）
这里提供一个方法，将其美化一下，打开这个网站https://beautifier.io/，将main.xxxxx.css文件下的内容全选复制过来，粘贴在代码框里。之后在点击Beautiful Code按钮，美化代码，然后美化后代码全选复制，新建一个.txt文件，粘贴在里面，然后在Ctrl+F 寻找这三部分进行修改。
需要注意的地方，这两个参数是需要根据你自己的情况进行修改的，很有可能出现背景图片可以显示，但是显示的位置不对，就比如下面这样的情况。调整参数的过程确实很考验耐心，慢慢来，都看到这里了，马上就完成了，千万不要放弃。
background-position: 100% 60%; # 在所选页面的位置比例（在页面的什么位置）
background-size: 1500px 800px; # 在所选页面所设置的图片显示比例（在页面上显示多大比例）
4.执行下列命令
hexo clean # 清除缓存
hexo g && gulp # 渲染生成文章 && 压缩缓存
hexo s # 部署到本地测试环境
hexo s之后打开localhost:4000查看背景图片是否可以显示，当你修改好了参数，背景图片的位置及大小都调整满意了，就可以执行命令部署到服务器上了。
hexo d # 部署到服务器上
这里附上我最后调整好的成果
三、取消背景图片
这里的思路其实比较简单，只需要将上一步修改的内容进行注释即可。
具体做法
如下：只需要将图片地址进行注释即可
/* */ # CSS的注释语法
/* background-image:url("https://nbviewer.jupyter.org/github/sujit-168/sujit-168.github.io/blob/master/photos/index/1.jpg"); */
这部分注释主要是右侧背景图片的地址，至于左侧栏目上下两部的背景图片，解决方法是一样的，注释图片地址即可。
然后在执行下面的命令
hexo clean # 清除缓存
hexo g && gulp # 渲染生成文章 && 压缩缓存
hexo s # 部署到本地测试环境
hexo s之后打开localhost:4000查看问题是否解决
总结
以上就是本文的内容，本文介绍了hexo博客yilia主题 博客背景的设置，包括左侧栏目上部背景，左侧栏目下部背景，右侧栏目下的背景设置，以及如果背景图不好看需要取消或者更换应该如何操作。
参考资料：
（1）大佬荷塘月色的文章 https://www.yansheng.xyz/article/72a91df5.html
（2）github大佬litten https://github.com/litten/hexo-theme-yilia
（3） w3schools.com https://www.w3schools.com/css/css3_backgrounds.asp
（4）www.w3cschool.cn https://www.w3cschool.cn/css3/6donbflh.html
（5）GitHub 读取jupyter报错Sorry, something went wrong. Reload?
如需转载请注明：转自CSDN甦傑
欢迎持续关注 我的个人博客专栏
结束之际，希望大家不要忘记为我点上一个赞，如果你觉得小编所写文章对你有一定的帮助，请不要忘记关注我的博客，以免错过接下来一段时间我为大家带来的高质量文章呦，谢谢各位。
hexo博客yilia主题 如何自定义个人博客的背景图片相关推荐
- hexo博客yilia主题_缺失模块_解决方案
hexo博客yilia主题,左侧栏目有一个全部文章的按钮,刚开始开始报错缺失模块,如下图: 我解决了这个问题着实不容易饶了弯路,但是跟着提示步骤,其实很简单,走起: 1.查看node版本 win键+R ...
- Github pages + Hexo 博客 yilia 主题使用畅言评论系统
文章首发地址:http://www.54tianzhisheng.cn/2017/04/13/Hexo-yilia-changyan/ , 转载请注明出处. 前言 Hexo的Yilia主题由于原来使用 ...
- 自定义背景android,Android自定义Button并设置不同背景图片的方法
本文实例讲述了Android自定义Button并设置不同背景图片的方法.分享给大家供大家参考,具体如下: 1.自定义MyButton类 public class MyButton extends Bu ...
- hexo博客yilia主题添加复制代码块功能
博客中的复制代码块功能还是挺实用的,本文参考自 这个博客,感谢并膜拜这位大佬,该博客应该是yilia主题添加复制代码块功能的首创,详细记录了整个过程,看起来比较繁琐(无贬义),所以我单独整理一份最终版 ...
- iOS10、11自定义左滑菜单项背景图片
// 以前的做法 // 1.ViewController代码如下:自定义三个左滑项 - (NSArray<UITableViewRowAction *> *)tableView:(UITa ...
- win7自定义随机更换显示桌面背景图片
在网上看到了好几张漂亮的图片,都想作为桌面背景图片,随机更换,于是搜索方法,因为win7自带的主题有的就是随机更换背景的,所以想着自己是不是可以新建一个主题,也能实现那个效果. 果然,还是微软强悍- ...
- Hexo博客yilia主题文章添加目录
参考文章 添加目录的文章有一些是自己添加css文件和修主题配置 作者也更新了文章大体目录的功能 打开配置文件themes/yilia/_config.yml 你可以选择toc设置为1 或者2 toc: ...
- Hexo博客yilia主题添加Gitment评论系统
gitment是imsun利用github上的issues做的评论系统,我这里大力推荐,原因有三: 注册简单,只要填写APP名和主页地址 实现方便,只要简单的配置 没有广告,这个很重要 注册OAuth ...
- php用户登录界面代码有背景,大男孩教你怎么自定义WordPress用户登录界面背景图片？ – 男孩资源网...
WordPress的后台登录界面,带有WordPress的logo及其他多余信息,看起来不个性,虽然很少人访问,但也有很多人想要设计出自己独特的登录界面.对于不是很懂代码的人,要弄这么个东西还是很难的 ...
最新文章
- arcgis 散瓦片发布服务_利用已有的缓存地图文件发布ArcGIS Server瓦片服务
- python爬虫抓取图片-怎么用爬虫批量抓取网页中的图片？
- [导入]关于怎样通过xslt向.NET扩展函数传递OuterXml属性
- wxWidgets：wxDateTime类用法
- 架构之:REST和HATEOAS
- python中的matplotlib.pyplot_python matplotlib中axes与axis的区别?
- mysql内存报警_[MySQL生产环境] Innodb存储引擎内存报警问题处理过程_MySQL
- 模板 - 数论 - （新）
- 使用哈工大LTP做自然语言处理任务基础demo
- Linux iptables防火墙详解（一）——iptables基础知识
- linux mmu的实现的讲解_Linux_MMU
- 中科方德桌面操作系统_国产操作系统——中科方德桌面操作系统，USB无线网卡配置...
- 计算机辅助设计和计算机动画,计算机辅助设计与制造（第2版）
- 联邦学习-安全树模型 SecureBoost之终章
- CGROUP CFS 调度中的 period，burst 概念
- 软件企业管理——无为而无不为
- 处理mysql启动报错Table 'mysql.plugin' doesn't exis
- 基于亚像素的边缘检测方法
- C++ 开源游戏服务器框架
- After Effects CC SDK 使用指南（二）—— 第一章 介绍 （上）