jekyll搭建个人博客2
作者:互联网
文章目录
个性化
jekyll目录结构
个性化就是要对文件内容作出修改,使得博客外观发生变化,在修改文件内容之前,必须对每个文件的作用有一点了解,这样才能有争对性的做出修改,而不是盲目试探。下面是我的项目的目录结构
这是jekyll官方给出的项目目录结构,你可以点击这里查看更多信息
我们的目录结构和官方给出的不是完全一样的,这很正常。下面说明一下几个重要文件及文件夹的作用(按照我的项目目录)
- _posts:这个目录下存放的是所有的文章,后缀名为**.md**,这是用markdown语法写出来的文章,每个文件名都是
年-月-日-名字
的格式 - index.html:博客的主页
- _layouts:存放了不同页面的布局,就是每个页面怎么显示,怎样排版,在每篇文章中只需引用对应的布局,文章就会按照规定的样式显示出来,这样一来我们就可以将重心放到文章内容上,而不再为文章最终的显示效果而操心,而且只需要写好一个布局,很多文章都可以重复利用,达到一样的显示效果,这极大提高了效率
- _includes:存放页面布局的各个部分,是对布局的进一步分割,将页面分割为页面头部、页脚、侧栏等等,为了重复利用
- _site:通过jekyll生成的整个项目的静态页面,在你刚下载的我的项目里是没有的,因为在.gitignore文件中加入了一条**_site/**,所以_site文件加下所有内容都不会提交到github仓库,所以你下载后也就没有这个文件夹,当执行
jekyll serve
之后会自动生成 - _config.yml:这个文件里有很多的配置信息
修改个人信息
打开_config.yml文件,修改title为你自己的名字或昵称,修改subtitle为博客的类型,比如我的博客主要记录学习笔记,所以我写了学习/笔记,修改description,修改url为你的地址,然后在命令行执行jekyll serve
,你就看到博客主页显示了你的信息,哈哈哈……如果你没有配置本地环境,请直接push到github,然后访问https://username.github.io,也同样能看到你的信息,以后每次修改后都要执行jekyll serve,或push到github才能看到变化
修改头像
直接将images文件夹下的avatar.jpg图片替换成你的头像,再次访问时头像就变了
修改背景颜色
打开_config.yml文件,cover_color就是设置背景颜色的,你可以看到,我这里是lightblue,你还可以改成上面注释中的任意一个,然后看看效果。我当初下载这个模板时,背景颜色非常深,lightblue是我自定义的一种颜色,下面说说我自定义的过程
首先先访问你的博客,然后打开检查面板(我使用的是Chrome浏览器,单击右键,点击检查)
此时可以看到页面代码,按Ctrl+f搜索,在搜索框中搜索lightblue,即我们使用的背景颜色名称,就会定位到对应的代码,点击定位到的css选择器名,即黄色部分,此时在下面显示出对应这个颜色的css代码
现在让我们尝试改变颜色,在这里调试有个好处,你可以实时看到颜色的变化
改变颜色,选一种自己喜欢的组合,将整个**.cover-lightblue**内容复制下来,从上上一张图中(红色圈出来的部分)我们可以看到,这段代码在min.css的627行,我们打开css/min.css文件,找到第627行,果然我们找到了和浏览器里一样的代码
将刚才复制的我们改变颜色后的代码,复制到下面,重新起一个名字,注意cover-
不能去掉,保存后,将_config.yml文件中cover_color设置成你起的名字,再次运行时背景颜色就变成你自定义的颜色了,很多修改,比如博客里的github链接修改为你自己的github,而不是跳转到我的github,都可以用类似的方法找到链接在文件中的位置,主要是要善用浏览器的调试功能,其他的修改请如法炮制
关于头像的效果
哈哈,小太阳头像配上旋转效果,我觉很美滋滋,我刚下载下来的模板头像效果是翻转的动画,我做了一点修改,具体涉及css3动画和旋转内容,其实很简单,打开css/min.css,翻到文件最后,找到旋转头像效果(有注释),具体代码如下
/*旋转头像效果-start*/
@-webkit-keyframes z {
from { -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1); }
to { -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1); }
.rotate-x img{
border-radius: 50%; }
.rotate-x img:hover {
border-radius: 50%;
-webkit-animation: z 0.5s linear 0s infinite; }
/*旋转头像效果-end*/
这里对源代码做了删减,多余的代码只是为了兼容不同的浏览器,这里没必要列出
- @-webkit-keyframes z:定义了一个名称为z的动画,from定义了动画的初始状态,to定义了动画的末态,很容易理解,动画是从from变换到to
- -webkit-transform:定义了一组对元素的转换
- translateX() translateY() translateZ():设置沿三个轴的平移量,0即为不平移
- rotateX() rotateY() rotateZ():设置绕三个轴的旋转度数
- scaleX() scaleY() scaleZ():设置沿三个轴的缩放
所以整个动画的意义就是,将对象沿Z轴旋转360度,即一圈,在三维坐标中,Z轴就是指向我们的轴
- border-radius: 50%:规定了图片以圆形显示,图片本来是方形的
- -webkit-animation: z 0.5s linear 0s infinite:将我们创建的名称为z的动画绑定到选择器**.rotate-x img:hover**上,
后面的几个参数意义分别是:z(动画名称)、0.5s(完成一次动画的周期是0.5秒,即0.5s转一圈)、linear(规定动画的速度曲线,linear是指匀速,可查看更多速度曲线)、0s(直接开始,不延迟)、infinite(播放次数,infinite是无限循环)
- .rotate-x img:hover:将动画绑定到类名为rotate-x下的图片上(在本项目里即为头像),且鼠标放在上面时才开始播放动画,所以最终当鼠标移动到头像上时,头像就会转动
你也可以发挥想象,自己做一个头像的效果,可以参考W3C上对CSS的介绍
图片问题
- 当你尝试直接替换images文件夹下背景图片时,你会发现背景图片并没有变化
- 当你清空浏览器缓存,重新访问我博客时,你会发现头像比背景图片加载的慢
原因是我将背景图片放到了图床上,文件夹里的背景图片并没有起作用,所以直接替换是没用的,为什么要用到图床呢?
其一是提高图片加载速度,其二是为了方便文章中插入图片。
方便文章中插入图片是因为你将本地写的文章push到github上时得使用相对路径,用绝对路径就得做出修改,比较麻烦,使用图床,不管本地还是push之后,链接不用更改,只要图床服务器不出问题,你能访问互联网,图片就可以加载出来,图床的使用网上有很多的教程,这里就不细说了
如果你不暂时不想使用图床,也没问题,打开_includes/side-panel.html,将第一行后面的background-image:url里的链接改为images/background-cover.jpg,图片替换为你自己的背景图片,再次访问后你也可以看到背景图片变化了
如果你已经使用了图床,也只需改变背景图片的链接即可
域名
如果你不想使用username.github.io
来访问你的网站,你首先得注册一个域名,注册域名网上有很多教程,这里就不细说了,域名备案审核通过之后,加一条解析记录,记录类型为CNAME,即将你的域名指向另一个域名,将解析结果指向username.github.io,然后在项目根目录下新建一个名为CNAME的文件,里面写上你申请的域名,比如我的CNAME的内容是blog.ojx666.xyz,然后就可以通过http://blog.ojx666.xyz来访问我的博客了
标签:动画,github,jekyll,博客,修改,头像,背景图片,搭建 来源: https://blog.csdn.net/Loganojx/article/details/96316535