（转载）3步搞定博客园界面风格

时间  2019-12-09
标签 转载 搞定 博客 界面 风格 繁體版
原文   原文链接

目录css

最近开了博客园的博客, 在博客主题上纠结了很久, 每次写博客预览的代码风格时, 都有一种想要修改博客样式的冲动. 最近花了点时间在上面, 在这里分享给和我同样的前端小白, 在文章末尾, 我会贴上我本身的博客的css代码, 风格很朴素. 设置过程及其简单, 虽然文章可能有点和设置过程相比较长, 我只是想尽可能说的细点.html

第一步 定制博客

博客园是容许自定义样式的, 能够个性化本身的主页，文章显示效果也能够本身控制，经过浏览器的检查来一步步调整博客的css. 博客设置的第一步入门来自这里, 很感谢 voidsky_颇有趣儿给我指路, 说的很详细, 在这里=>一步一步教你自定义博客园（cnblog）界面前端

这里惟一要说明以下, 仅对于前端小白, 大神莫笑~git

如何快速找到特定页面局域的对应的CSS代码块github

  1. 右键博客页面, 点击检查, 点击下图左上角的红色标注的箭头以后, 选中想要调整的页面的部分, 而后按照上述教程修改就行了, 这样就能快速定位想要修改的区域了.

屏幕快照 2017-07-08 上午11.16.48web

 
 

第二步 代码风格设置

其实博客园的代码风格仍是挺简洁的, 不过我有点受不了代码的背景颜色, 总感受把好好的代码样式给毁了, 下面是关于代码风格设置的简单的方法xcode

1. 选择代码风格

在highlight.js demo找一个本身喜欢的代码高度风格, 这里有不少风格, 想必你确定能够找到你喜欢的一款, 下面截个vs风格的图;浏览器

屏幕快照 2017-07-08 上午10.10.25markdown

关于风格我推荐下, 喜欢白色主题的我以为下面几个挺不错的, 仅供参考, 毕竟每一个人的感受都不同app

  1. xcode
  2. idea
  3. Docco
  4. Atom one light
  5. Atelier-Seaside

2. 下载喜欢的代码风格

在highlight.js demo找到喜欢的风格以后, 对应风格的源码在github highlight.js上, 这里的文件名和highlight.js demo上名称是一一对应的, 好比说'vs'风格的截图以下, 点进去,将代码拷贝到word里(能有替换所有这个功能的文本编辑器均可以)

屏幕快照 2017-07-08 上午10.22.09

3. 修改代码风格

打开刚才下载好的代码风格, 使用替换所有功能, 将 .hljs 替换成 '.cnblogs-markdown .hljs', 个人编辑器替换以下

屏幕快照 2017-07-08 上午10.29.10

替换以后将文本拷贝到博客园的自定义css风格栏中, 点击保存就能够了, 不过不要选中下面的禁用模板默认

屏幕快照 2017-07-08 上午10.31.46

4. 后续

可能设置以后感受和在highlight.js demo看到的不同, 多是代码的字体, 背景颜色不同, 这时返回第一步所学会的技巧, 再一点点修改就行了, 个人代码风格在我其余有代码的文章中就能够看到, 感兴趣的能够看看

 
 

第三步 添加目录

我都是使用MarkDown来写博客, 不过博客园的MarkDown不支持``功能, 我也是很好奇, 因此找度娘学知识了, 当时随便找了就使用了原谅我无法在这里引用你了

1.根据管理页面的说明，若是是经过js修改公告栏的话，须要向博客园申请。没有申请成功以前，会看到以下这么一条提示，申请成功后该提示自动消失。邮件正文简单说一下博客的地址和请求开通就行。



2.申请以后贴上把下面的代码贴进去就行了

<script>
    function CreatePostNavigator(){
        // 目录标题的div
        var navigatorTitleDiv = '<div id="navigatorTitleDiv">隐藏目录</div>';
    
        // 目录全部内容的div
        var navigatorDivContent = '<div id="navigatorDiv">';
        
        if($("#cnblogs_post_body :header").length == 0){
            return;
        }
    
        $.each($("#cnblogs_post_body :header"), function(i, val){      
              // 查找全部的header（h1-h4），并生成header条目，并添加属性class=“dt_h?”
              var headerTagName = $(val)[0].tagName.toLowerCase();
              var navigatorItem = '<dt class="dt_'+headerTagName+'"><a href="#_nav_' + i + '">' + $(val).text() + '</a></dt>';
              // 把header条目加入navigatorDiv
              navigatorDivContent += navigatorItem;
              
              // 给页面上每一个header元素以前添加一个跳转标签
              var headerLabel = '<a name="_nav_' + i + '" style="padding:0px"></a>';
              $(val).prepend(headerLabel);
          }); 
          
         navigatorDivContent += '</div>';
        
         $('#cnblogs_post_body').append(navigatorDivContent);
         $('#cnblogs_post_body').append(navigatorTitleDiv);
         
         // 给目录标题div添加toggle事件
         $("#navigatorTitleDiv").click(function(){
                $("#navigatorDiv").toggle(200, function(){
                    var title = $("#navigatorTitleDiv").text() == "隐藏目录"?"文章目录":"隐藏目录";
                    $("#navigatorTitleDiv").text(title);
                });
         });
         
         
         var headerList = ["h1", "h2", "h3", "h4"];
         var headerListLen = headerList.length;
         // 遍历全部的header，而后给小一级的header设置缩进
         for(var i = 0; i < headerListLen; i++){
                if(i < (headerListLen-1) && $(".dt_"+headerList[i]).length > 0){
                    for(var j=headerListLen-1; j > i; j--)
                    $(".dt_"+headerList[j]).css({"margin-left": (i+1)*10+"px"});
                 }
         }
         
    }
    
    CreatePostNavigator();
</script>

而后在设置中 页面定制CSS代码中添加css样式, 贴进去就行了

/* 目录的隐藏目录(显示目录)标签设置*/
#navigatorTitleDiv
{
    padding: 5px;
    position: fixed;
    top: 0.1px; 
    right: 1%;
    font-weight: bold;
    cursor :pointer;
    background-color: #f8f8f8;
}
/* 目录设置 */
#navigatorDiv {
    border-style: none;
    position: fixed;
    padding: 05px;
    padding-top: 50px;
    top: 0px;
    bottom: 0px;
    right: 0%;
    left: 83%;
    background-color: #f8f8f8;
    font-family: "Monaco" !important;
    font-size: 15px
}

 
 

css代码

css 中一些特定区域的风格,我都有注释说明, 就不在这里多说了
惟一要说明的是个人博客主题使用的是 'ThinkInside', 若是不是的话, 应该会冲突
不过下面的每一个部分的风格都作了解释, 只要对应这修改本身风格的就能够了, 因此最重要的技能仍是第一步中介绍的.

一直使用MarkDown写博客, 如今尚未找到怎么实现代码块的折叠的方法, 好比上面代码块太长, 太影响界面了,
若是有人知道, 还望指导一下, 先谢谢了:)

body {   
    font-size: 15.5px;
}
.post {
    background-color: #ffffff;
    border-radius: 6px 6px 6px 6px;
    padding: 20px;
}

#cnblogs_post_body h1 {
    background: #3f454c;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0px 0px 0px 1px rgb(95, 90, 75), 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: rgb(255, 255, 255);
    font-family: "Microsoft Yahei","宋体","黑体",Arial;
    font-size: 29px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 1.5em 0 1em !important;
    padding: 10px 20px;
    text-shadow: 2px 2px 3px rgb(34, 34, 34);
}
#cnblogs_post_body h2 {
     background: #3f454c;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0px 0px 0px 1px rgb(95, 90, 75), 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: rgb(255, 255, 255);
    font-family: "Microsoft Yahei","宋体","黑体",Arial;
    font-size: 25px;
    font-weight: bold;
    height: 25px;
    line-height: 22px;
    margin: 1.5em 0 1em !important;
    padding: 10px 20px;
    text-shadow: 2px 2px 3px rgb(34, 34, 34);
}
#cnblogs_post_body h3 {
     background: #3f454c;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0px 0px 0px 1px rgb(95, 90, 75), 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: rgb(255, 255, 255);
    font-family: "Microsoft Yahei","宋体","黑体",Arial;
    font-weight: bold;
    margin: 1.5em 0 1em !important;
    padding: 10px 20px;
    text-shadow: 2px 2px 3px rgb(34, 34, 34);
}

#cnblogs_post_body  h4, h5{
   background: #3f454c;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0px 0px 0px 1px rgb(95, 90, 75), 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: rgb(255, 255, 255);
    font-family: "Microsoft Yahei","宋体","黑体",Arial;
    font-weight: bold;
    margin: 1.5em 0 1em !important;
    padding: 10px 20px;
    text-shadow: 2px 2px 3px rgb(34, 34, 34);
}

/*
总体页面布局
*/
#home {  
    width: 100%;
}

/* 设置超连接的属性*/
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #333;
    transition: all 0.4s linear 0s;
    text-decoration: blink;
    font-size: 25px;
}
.postBody a:link, .postBody a:visited, .postBody a:active {
    text-decoration: blink;
}
/* 博客园 首页 新随笔 所在区域设置*/
#navigator {
    font-size: 18px;
    font-family: "STXingkai" !important;
}

/* 目录的隐藏目录(显示目录)标签设置*/
#navigatorTitleDiv
{
    padding: 5px;
    position: fixed;
    top: 70px;
    left: 2px;
    font-weight: bold;
    cursor :pointer;
    background-color: #fff;
}
/* 目录设置 */
#navigatorDiv {
    border-style: none;
    position: fixed;
    padding: 05px;
    padding-top: 5.3%;
    top: 40px;
    bottom: 0px;
    right: 79%;
    left: 20px;
    background-color: #fff;
    font-family: "Monaco" !important;
    font-size: 15px
}

.postBody blockquote {
    padding: 1px 20px 1px 20px;
    min-height: 35px;
    line-height: 1.6em;
    color: #333;
    background-color: #aaaaaa;
}

/*
标题栏:博客名 NowGood 设置
!important 表示优先级高
*/
#blogTitle a {
    color: #075db3;
    font-family: "-webkit-pictograph" !important;
    font-size: 20px;
}


/*
正文: 设置博客文章的标题风格
*/ 

#topics .postTitle {
    /*font-weight: bold;*/
    float: left;
    line-height: 2;
    padding-left: 5px;
    font-size: 25px;
     font-family: "Monaco" !important;
}

/*
正文: 设置段落(普通文本)的字体颜色,字体大小, 字体风格 
*/
#cnblogs_post_body p {
    margin: 10px auto;
    text-indent: 0;
    margin-right: 13%;
    margin-top: 15px;
    margin-bottom: 15px;
}
.postBody p {
    line-height: 1.7;
    color: #000;
    font-size: 16px;
    /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif  !important;*/
   font-family: "Monaco" !important;
/*Monaco*/
}
.postBody p, .postCon p {
    margin: 2 auto 5em auto;
    line-height: 1.8;
}

#cnblogs_post_body h3,h4,h5,h6{
    margin-top: 70px;
    margin-bottom: 20px;
}
#cnblogs_post_body p code {
    font-family: "Monaco"!important;
    font-size: 16px !important;
    color: #000;
    background-color: #ccc !important;
}
/*.cnblogs-markdown  code {
    background-color: #eee!important;
    vertical-align: middle;
}
*/
.cnblogs-markdown .hljs {
    font-family:  Monaco!important;
    font-size: 14px!important;
    line-height: 1.5!important;
}

/* 设置图片的大小*/
#cnblogs_post_body img {
    max-width: 600px;
    max-high: 400px;
}
.code_img_closed {
    vertical-align: middle;
    padding-right: 5px;
}

/*

github.com style (c) Vasily Polovnyov <vast@whiteants.net>

*/

.cnblogs-markdown .hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}

.cnblogs-markdown .hljs-comment,
.cnblogs-markdown .hljs-quote {
  color: #998;
  /*font-style: italic;*/
}

.cnblogs-markdown .hljs-keyword,
.cnblogs-markdown .hljs-selector-tag,
.cnblogs-markdown .hljs-subst {
  color: #333;
  /*font-weight: bold;*/
}

.cnblogs-markdown .hljs-number,
.cnblogs-markdown .hljs-literal,
.cnblogs-markdown .hljs-variable,
.cnblogs-markdown .hljs-template-variable,
.cnblogs-markdown .hljs-tag .cnblogs-markdown .hljs-attr {
  color: #008080;
}

.cnblogs-markdown .hljs-string,
.cnblogs-markdown .hljs-doctag {
  color: #d14;
}

.cnblogs-markdown .hljs-title,
.cnblogs-markdown .hljs-section,
.cnblogs-markdown .hljs-selector-id {
  color: #900;
  /*font-weight: bold;*/
}

.cnblogs-markdown .hljs-subst {
  font-weight: normal;
}
#blogTitle h2 {
    float: left;
    line-height: 1.5;
    margin-left: 10px;
    margin-right: 10px;
    padding: 8px 0;
    color: darkgray;
}
.cnblogs-markdown .hljs-type,
.cnblogs-markdown .hljs-class .cnblogs-markdown .hljs-title {
  color: #458;
  /*font-weight: bold;*/
}

.cnblogs-markdown .hljs-tag,
.cnblogs-markdown .hljs-name,
.cnblogs-markdown .hljs-attribute {
  color: #000080;
  font-weight: normal;
}

.cnblogs-markdown .hljs-regexp,
.cnblogs-markdown .hljs-link {
  color: #009926;
}

.cnblogs-markdown .hljs-symbol,
.cnblogs-markdown .hljs-bullet {
  color: #990073;
}

.cnblogs-markdown .hljs-built_in,
.cnblogs-markdown .hljs-builtin-name {
  color: #0086b3;
}

.cnblogs-markdown .hljs-meta {
  color: #999;
  /*font-weight: bold;*/
}

.cnblogs-markdown .hljs-deletion {
  background: #fdd;
}

.cnblogs-markdown .hljs-addition {
  background: #dfd;
}

.cnblogs-markdown .hljs-emphasis {
  font-style: italic;
}

.cnblogs-markdown .hljs-strong {
  font-weight: bold;
}

 

---------------------做者：nowgood来源：博客园原文：https://www.cnblogs.com/nowgood/p/3bokejiemain.html

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程