2017年最新基于hexo搭建个人免费博客——自定义页面样式一

前言

之前答应一个评论朋友要写出这篇自定义CSS样式来修改hexo下的next主题，本来打算要写很多相关hexo下主题的一些修改方法和博客优化了，由于晚上跟朋友看了电影，导致时间不允许我写那么多，所以这篇只是来介绍一下如何自己修改一些样式并生成到博客上。
<!--more-->

调试工具

浏览器下的开发者工具

相信做前端的都知道每个浏览器自带了一个调试者工具一般都是按F12就能出来，基本上每个浏览器的这个调试工具都类似，所以我以360浏览器下的调试工具来演示（其实360的调试工具和谷歌是一样的，我只是觉得360用起来更流畅点）

---

接着说正题
因为考虑到一部分人是没接触过前端的，所以我会讲的比较细，有前端调试开发经验的可以看快点，找到你们需要关注的地方和问题解决方法。

大家打开调试者工具会看到红色圈里的东西，里面显示的这个网站的源代码结构，我们要修改任何东西也是要现在这方面进行样式修改看下效果，最后才去next里的一些文件进行部分的添加和修改来达到我们的目的。

头部导航样式自定义

定位到对应标签位置

通过右键点击审查元素或者手动用放大镜选择，通过观察可以发现整个头部是包裹在一个header里而且大家把鼠标放上去也可以很清楚的看到标签包裹的是哪些部分，那么通过开发工具可以看到右边对应的是生成在这个标签上class里的一些样式设置.

找到修改地方

通过观察右侧css样式，有前端经验的人可以自己去diy一下，设置成自己想要的值，改变布局样式之类的，我就不用多说，改好后请记得把代码copy下来。

---

注意：通过观察可以发现右侧的CSS样式都来源于一个main.css里。

添加你修改的代码

找到你主题文件夹里的对应位置
以我的路径为例子
D:\hexo\blog\themes\next\source\css
里面有5个文件夹和一个styl文件，
main.styl主要用于打包CSS代码输出成CSS样式的main.css文件,分析下其源代码。

---

// CSS Style Guide: http://codeguide.co/#css



$scheme    = hexo-config('scheme') ? hexo-config('scheme') : 'Muse';
$variables = base $scheme custom;
$mixins    = base $scheme custom;



// Variables Layer
// --------------------------------------------------
for $variable in $variables
  @import "_variables/" + $variable


// Mixins Layer
// --------------------------------------------------
for $mixin in $mixins
  @import "_mixins/" + $mixin;



// Common Layer
// --------------------------------------------------

// Scaffolding
@import "_common/scaffolding";

// Layout
@import "_common/outline";

// Components
@import "_common/components";


// Schemes Layer
// --------------------------------------------------
@import "_schemes/" + $scheme;



// Custom Layer  ##这个是关键大家注意
// --------------------------------------------------
@import "_custom/custom";

---

大家可以看到我在代码说最后一段代码很关键，因为这是加载导出自定义设置的代码，可以覆盖到上面已经导出的CSS样式，也就是你可以覆盖掉以前生成的样式，而不用去在源文件下修改代码，如果你想换回去，你只需要将_custom/custom.styl这个里面的代码删除即可。

注意：本人不提倡去修改除了_custom下的其他4个文件里的源代码，可能后面出问题不好还原。

修改侧面栏

同理

这个的修改和头部那个差不多，你也只需要定位到对应的位置进行样式修改，比如修改背景图，颜色之类的。

注意地方

在修改css的时候尽量写注释一定要记得，分模块来写，不要头部写了又写其他的部分的CSS，到时候不好维护

---

福利

---

我的CSS

我将会给大家开源我自己的CSS样式修改给大家来做参考

// Custom styles.
//首页文章阴影样式
.post {
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 25px;
    -webkit-box-shadow: 0 0 14px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 14px rgba(202, 203, 204, .5);
}

//热评文章
.ds-top-threads li a {
    padding-left: 5px;
    transition: border-width 0.2s linear 0s, color 0.2s linear 0s;
    border-bottom: none;
}

.ds-top-threads li a:hover {
    border-left: 8px solid #4d768c;
}

//首页头部样式
.header {
    background: url("/images/header-bk.jpg");
}

.site-meta {
    float: none;
}

.menu {
    float: none;
}

.logo-line-before,
.logo-line-after {
    display: none;
}

.menu .menu-item a {
    font-size: 14px;
    color: rgb(15, 46, 65);
    border-radius: 4px;
}

.site-meta {
    margin-left: 0px;
    text-align: center;
}

.site-meta .site-title {
    font-size: 28px;
    font-family: 'Comic Sans MS', sans-serif;
    color: #fff;
}

//首页尾部样式
.footer {
    background: none;
    font-size: 16px;
}

.footer-inner {
    font-family: 'Comic Sans MS', sans-serif;
    text-align: center;
    color: #4c618f;
}

//侧边栏信息样式修改
.site-author-name {
    margin: 48px 0 0;
    color: #090909;
    font-family: 'Comic Sans MS', sans-serif;
}

.links-of-blogroll {
    font-size: 14px;
    margin-bottom: 42px;
}

.links-of-author {
    margin-top: 30px;
    margin-bottom: 58px;
}

.sidebar-inner {
    color: #649ab6;
}

.sidebar {
    box-shadow: inset 2px 2px 40px #bdb2b2;
}

.sidebar a {
    color: #649ab6;
    border-bottom-color: #649ab6;
    border-bottom: none;
}

.sidebar a:hover {
    color: #0c0b0b;
}

.site-state-item {
    display: inline-block;
    padding: 8px 28px;
    border-left: 1px solid #649ab6;
}

.sidebar-nav .sidebar-nav-active {
    color: #649ab6;
    border-bottom-color: #649ab6;
}

.sidebar-nav li:hover {
    color: #0c0b0b;
}

//侧栏按钮样式
.sidebar-toggle {
    background: #649ab6;
}

.back-to-top {
    background: #649ab6;
}

//文章目录样式
.post-toc .nav .active>a {
    color: #4f7e96;
}

.post-toc ol a:hover {
    color: #7784ba;
}

.sidebar-nav .sidebar-nav-active:hover {
    color: #37596c;
}

a {
    border-bottom: none;
}

//首页阅读全文样式
.post-button {
    margin-top: 30px;
    text-align: center;
}

.post-button .btn {
    color: #fff;
    font-size: 15px;
    background: #686868;
    border-radius: 16px;
    line-height: 2;
    margin: 0 4px 8px 4px;
    padding: 0 20px;
}
.post-button a{
  border-bottom: 1px solid #666;
}
.post-button a:hover {
    color: #7784ba;
}

尾部修改

建议

尾部没什么好修改的，就是自定义下CSS让它好看点就行了，我用到了一个不蒜子的插件，next主题已经集成了，我在此基础上修改了一点而已，使用起来很简单。

尾部署名LOGO

我的是一滴水，就是简单替换了fontawsome里的一个图标而已。

---

其他部分修改

提醒

基本上会自定义CSS修改已经能让你修改出你自己想要的风格了，但是主题的框架布局是不能改变的，你只能改变微小的样式而已。

其他小修改

背景是用到一个JS来生成的，大家如果感兴趣可以在下面评论，我可以给一个地址给大家参考使用。

---

网易云播放器也是第三方生成的添加到了生成页面框架的源代码里实现的，还有一些文章图标的DIY之类的和美化。

---

还有首页的导航如何添加新的一个菜单按钮进去，我后面会说。

---

我大概会再出一篇文章来给大家讲解以上说的点，让大家都能实现我现在的效果。

总结

---

今天写的比较匆忙，有些地方我有机会会重新再修改下。有任何问题和建议，可以在下面评论。