前言我答应了一个评论者写这个自定义CSS样式修改hexo下的下一个主题。本来打算在hexo下写很多相关主题和博客优化的一些修改方法，因为晚上和朋友看了一场电影，时间不允许写那么多，所以这篇文章只是介绍一下如何在博客上修改一些样式并生成。DebuggingTools浏览器下的开发者工具相信做前端的都知道，每个浏览器都自带一个debugger工具，一般按F12即可释放。基本上每个浏览器的这个调试工具都是差不多的，所以我就用360浏览器下的调试工具来演示（其实360的调试工具和谷歌的一样，我只是觉得360使用起来更顺畅）然后说正题因为考虑到有些人从来没有接触过前端，所以详细说一下。有前端调试开发经验的朋友可以快速阅读，了解自己需要注意的地方和解决问题的方法。打开debugger工具，你会看到红圈里面的东西，就是这个网站的源代码结构。如果我们要修改什么，就必须在这个区域修改样式才能看到效果，最后到下一个文件中的一些文件。部分添加和修改是出于我们的目的。header导航样式自定义，定位到对应标签位置。右键单击以检查元素或使用放大镜手动选择它。通过观察可以发现整个头部都被一个header包裹着，鼠标放在上面可以清楚的看到label包裹。都是哪些部分，然后通过开发工具，可以看到右边对应这个标签上的类中生成的一些样式设置。找到修改的地方，观察右边的css样式。有前端经验的可以自己DIY设置，改自己想要的值，改布局样式等等就不用多说了，改完记得复制代码。注意：通过观察，可以发现右边的CSS样式来自于一个main.css。添加您修改后的代码以在您的主题文件夹中找到相应的位置。以我的路径为例。D:\hexo\blog\themes\next\source\css下有5个文件夹和一个styl文件。main.styl主要用于将CSS代码打包输出成CSS风格的main.css文件，分析其源码。//CSS样式指南：http://codeguide.co/#css$scheme=hexo-config('scheme')?hexo-config('scheme'):'Muse';$variables=base$schemecustom;$mixins=base$schemecustom;//变量层//----------------------------------------------for$variablein$variables@import"_variables/"+$variable//混合层//----------------------------------------------$mixin中的$mixin@import"_mixins/"+$mixin;//公共层//------------------------------------------------//Scaffolding@import"_common/scaffolding";//Layout@import"_common/outline";//Components@import"_common/components";//方案层//-----------------------------@进口"_schemes/"+$scheme;//CustomLayer##这里是关键，请注意//--------------------------------------------------@import"_custom/custom";大家可以看到我在代码中说了最后一段代码很关键，因为这是加载和导出自定义设置的代码，可以覆盖上面已经导出的CSS样式，也就是可以覆盖之前的生成样式而不修改源文件中的代码。如果想改回来，只需要把_custom/custom.styl里面的代码删掉即可。注意：我不提倡修改除_custom之外的其他4个文件的源码，因为后面可能会出问题，而且不容易恢复。修改侧边栏类似于修改头部。你只需要定位到相应的位置就可以修改样式，比如修改背景图片、颜色等等。注意在修改css的时候尽量写注释。你必须记住写在模块中。不要把CSS写在头部，写其他部分。维持福利并不容易。我的CSS我会为大家开源我自己的。CSS样式修改供大家参考//自定义样式//首页文章阴影style.post{margin-top:60px;底部边距：60px；填充：25px；-webkit-box-shadow:0014pxrgba(202,203,203,.5);-moz-box-shadow:0014pxrgba(202,203,204,.5);}//热评文章.ds-top-threadslia{padding-left:5px;transition:border-width0.2slinear0s,color0.2slinear0s;border-bottom:none;}.ds-top-threadslia:hover{border-left:8pxsolid#4d768c;}//首页headerstyle.header{background:url("/images/header-bk.jpg");}.site-meta{float:none;}.menu{float:none;}.logo-line-before,.logo-line-after{display:none;}.menu.menu-itema{font-尺寸：14px；颜色：RGB（15、46、65）；border-radius:4px;}.site-meta{margin-left:0px;text-align:center;}.site-meta.site-title{字体大小：28px;font-family:'ComicSansMS',sans-serif;color:#fff;}//首页尾部样式.footer{background:没有任何;font-size:16px;}.footer-inner{font-family:'ComicSansMS',sans-serif;文本对齐：居中；color:#4c618f;}//侧面栏信息样式修改.site-author-name{margin:48px00;颜色：#090909；font-family:'ComicSansMS',sans-serif;}.links-of-blogroll{字体大小:14px;margin-bottom:42px;}.links-of-author{margin-top:30px;margin-bottom:58px;}.sidebar-inner{color:#649ab6;}.sidebar{box-shadow:inset2px2px40px#bdb2b2;}.sidebara{color:#649ab6;边框底部颜色：#649ab6；border-bottom:none;}.sidebara:hover{color:#0c0b0b;}.site-state-item{display:inline-block;填充：8px28px；border-left:1pxsolid#649ab6;}.sidebar-nav.sidebar-nav-active{color:#649ab6;border-bottom-color:#649ab6;}.sidebar-navli:hover{color:#0c0b0b;}//侧栏按钮样式.sidebar-toggle{background:#649ab6;}.back-to-top{background:#649ab6;}//文章目录格式.post-toc.nav.active>a{color:#4f7e96;}.post-tocola:hover{color:#7784ba;}.sidebar-nav.sidebar-nav-active:hover{color:#37596c;}a{border-bottom:none;}//home页面阅读全文style.post-button{margin-top:30px;文本对齐：居中；}.post-button.btn{颜色：#fff；字体大小：15px；背景：#686868；边界半径：16px；行高：2；边距：04px8px4px；padding:020px;}.post-buttona{border-bottom:1pxsolid#666;}.post-buttona:hover{color:#7784ba;}tail修改建议最后没有什么可以修改的，只需自定义CSS使其看起来更好。我用了一个不是大蒜的插件，下一个主题已经集成了。我在此基础上稍微修改了一下，使用起来非常简单。尾部部署名称LOGO是一滴水，简单的替换了fontawsome中的一个图标。修改提示的其他部分基本上都是自定义CSS修改，让你修改自己想要的样式，但是主题的框架布局是不能改的，只能改tiny样式。其他小修改背景使用JS生成。有兴趣的可以在下方评论，我可以给你一个地址，供你参考。网易云播放器也是第三方生成的，添加到生成的页面框架的源代码中。还有一些文章图标的DIY和美化。还有就是如何在首页的导航中添加一个新的菜单按钮，后面会讲到。我大概会再发一篇文章给大家解释以上几点，让大家达到我现在的效果。总结今天写的比较仓促，有机会再修改一些地方。如果您有任何问题或建议，请在下方评论。
