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之类的和美化。

---

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

---

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

总结

---

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