前言

    研究了一段时间终于搭建好了自己的个人博客，但选什么样的主题也正是叫人头大，中间换了好几个主题，总是感觉有的地方不是自己想要的效果，所以就跑去自己学了点前端的知识，修改了一下原有的样式。

HEXO主题 - 自定义样式

一、调试工具

    说到前端，就不得不提前端神器调试工具了（及开发者工具），调试工具是前端工程师常用的工具，在浏览器中右键检查或者按F12，都会弹出调试工具，这里推荐大家使用chrome浏览器和Firefox浏览器，当然其他浏览器也是一样，大家就会看到网页的原结构代码，右边就是网页样式，我们修改样式文件就是对这些文件进行修改，效果也会在这上面看见。

二、自定义样式

审查元素

    我们可以通过审查元素或者手动点击调试工具左上角的箭头来选择你要修改的位置，调试工具就会自动找到网页源码内容，右边就会显示style样式的设置参数。


我们可以在右边的样式中直接双击改变参数从而测试网页的显示效果。
注意：这个办法不是修改样式文件，一刷新样式就会消失，所以我们还需要找到，对应的样式文件。修改才行。

修改样式文件

    我们需要找到要修改部分的样式文件，比如要修改头部的样式一般是含header字样的文件，底部的样式是footer，侧边栏是menu，文章模板是post，等（有的可能也不一样，因主题而议）。这里有两种办法可以快速修改出自己想要的样式：
    一、找到主题原来的样式文件，直接修改里面的样式文件，这种对技术要求比较高，有的文件样式是css，less，ejs要能读懂，才能修改出自己想要的效果。
    二、新建一个css样式，写上自己的样式在里面，再在模板文件中调用，也可以实现，也方便自己管理，也不会干涉以前的样式，调用自己的样式文件，之前的样式文件就会被覆盖，如果有的个别没被覆盖的话，可以在属性后面加上！important，提高权重。这种方法需要会HTML、CSS、甚至JavaScrip。前两个会的话也能修改大部分样式了。
    下面看看我写的一部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="../source/js/set_root.js"></script>
<style type="text/css">

    .im{
        width: 415px;
        height: 230px;
        margin-top: 20px;
        overflow: hidden;
        float: left;
    }
    .rigth {
        width: 710px;
        /* height: 257px; */
        padding-top: 20px;
        float: left;
    }
    .container {
        margin: 0 116px;
        width: 1126px;
    }
    .post-list-item {
        margin: 0;
        width: 1126px;
        padding: 0px;
    }

</style>

<%- partial('_partial/header', {
    title: config.title,
    hdClass: 'index-header'
}) %>
<div class="container body-wrap">

    <ul class="post-list">
    <% page.posts.each(function(post){ %>
        
        <li class="post-list-item fade">
            <div class="im">
                <!-- <img src="https://guidozijef.github.io/img/cover.jpg" alt="图片"> -->
                <%- image_tag(post.cover || theme.cover, {class: "cover"}) %>
            </div>
            <div class="rigth">
                <%- partial('_partial/index-item', {
                post: post,
                index: true
            }) %>
            </div>
            
        </li>
    <% }) %>
    </ul>

    <%- partial('_partial/paginator') %>

</div>

这里面的<style>标签里面的内容就是我写的，修改了很多的样式，我用的是内嵌式，正常开放过程中一般是外联式，这里在教大家一招果看到那个网站那个模块不错的话，可以直接用调试工具，把他当内容和样式内容全部拷贝下来，在写入适当的文件中就行了，这里面的接用调试工具，标签里面的内容就是我写的，修改了很多的样式，这里在教大家一招，如果看到那个网站那个模块不错的话，可以直接用调试工具，把他当内容和样式内容全部拷贝下来，在写入适当的文件中就行了。
注意：其实最重要的就是要找到你的主题中那一个文件是控制那一部分样式的，而文件的命名大多数都是那几个专属名字，不知道可以百度，一般文件是在layout文件夹下面，比如我的，F:hexo\themes\indigo\layout，只需要修改这里面的文件的内容就可以了，一般内容不用动，只增加样式就行了，他会覆盖之前的样式。
最后大家看看我修改的效果

之前的
之前的

修改之后，我加了背景和文章图片，下面还修改了底部样式。
修改后
修改后

觉得行的话，可以支持一下哟。谢谢。