jekyll build personal blog 2

personalise

jekyll directory structure

Personalization is to make changes to the file content, so that blog appearance changes before modifying the contents of the documents, the role of each file must have a little understanding, so as to have a fight about sex to make changes, rather than blindly temptation. Here is my project directory structure

This is a project directory structure jekyll official gives, you can click here for more information

We are not exactly the same directory structure and given the official, this is normal. Here to explain the role of several important files and folders (according to my project directory)

• Posts _ ** : This directory is under all the articles whose names .md **, which is written by the markdown syntax article, each file name is 年-月-日-名字​in the format
• index.html : blog homepage
• ** _ layouts **: store the layout of different pages, each page displayed is how, how typesetting, layout simply refer to the corresponding article in each article will be displayed in accordance with the provisions of styles, so that we the center of gravity can be placed on the content of the article, rather than as a final display articles and worry, and only need to write a layout, many articles can be reused to achieve the same display, which greatly improves the efficiency
• ** _ includes **: storing part of the layout of each page is further divided layout of the page is divided into the page header, footer, sidebar, etc., in order to reuse
• _ Site ** : static pages generated by jekyll entire project, you just downloaded my project there is not, because adding a file in .gitignore _site / **, so _site file plus all content not submitted to the github repository, so after you download will not have this folder, when executed jekyll serveautomatically generated after
• ** _ config.yml **: This file has a lot of configuration information

Modify Personal Information

打开_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，图片替换为你自己的背景图片，再次访问后你也可以看到背景图片变化了

如果你已经使用了图床，也只需改变背景图片的链接即可

域名

If you do not want username.github.ioto visit your site, you first have to register a domain name, register a domain name there are many online tutorials will not elaborate here, after review by the domain name for the record, plus an analytical record, record type as CNAME , coming your the domain points to another domain name, the analytic results point username.github.io , and then create a file named CNAME in the project root directory, which is written on the domain name you apply, such as the content of my CNAME is blog.ojx666.xyz and then you can come visit my blog by the http://blog.ojx666.xyz