制作一个好看的博客园样式模版

Posted 2023-05-15 SunShine

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了制作一个好看的博客园样式模版相关的知识，希望对你有一定的参考价值。

1-向博客园申请js权限

我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷新一下，页面就会显示支持js代码，博客园也会在用户邮箱给你发送是否开通js权限的邮件。

2-添加css样式

我们在【管理】-->【设置】-->【博客设置】

3-粘贴代码到"博客园侧边栏公告"


<!-- 添加公告栏时钟 -->
<div >
<div id="clockdiv">
    <canvas id="dom"  >时钟canvas</canvas>
</div>
</div>
<script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>






<script type="text/javascript">
//以下是锚点JS，自动生成目录
var a = $(document);
a.ready(function() 
    var commentDiv = $("#blog-comments-placeholder");
    if (commentDiv.length <= 0) 
      return;
    
    var b = $(\'body\'),
        d = \'sideToolbar\',
        e = \'sideCatalog\',
        f = \'sideCatalog-catalog\',
        g = \'sideCatalogBtn\',
        h = \'sideToolbar-up\',
        i = \'<div id="sideToolbar"><div class="sideCatalogBg"id="sideCatalog"><div id="sideCatalog-sidebar"><div class="sideCatalog-sidebar-top"></div><div class="sideCatalog-sidebar-bottom"></div></div><div id="sideCatalog-catalog"><ul class="nav"></ul></div></div><a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable" ></a></div>\',
        j = \'\',
        k = 500,
        l = 0,
        m = 0,
        n = 0,
        //限制存在个数，如数量过多，则只显示h2，不显示h3
        //o, p = 13,
        o, p = 100,
        q = true,
        r = true,
        s = b;
    if(s.length === 0) 
        return
    ;
    b.append(i);
    //指定获取目录的范围-------------这一点非常重要，因为每个人指定的范围都不一样，所以这是要修改的地方
    //o = s.find(\':header\');
    o = $(\'#cnblogs_post_body\').find(\':header\');
    if(o.length > p) 
        r = false;
        var t = s.find(\'h3\');
        var u = s.find(\'h4\');
        if(t.length + u.length > p) 
            q = false
        
    ;
    o.each(function(t) 
        var u = $(this),
            v = u[0];

        var title = u.text();
        var text = u.text();

        u.attr(\'id\', \'autoid-\' + l + \'-\' + m + \'-\' + n)
        //if (!u.attr(\'id\')) 
        //    u.attr(\'id\', \'autoid-\' + l + \'-\' + m + \'-\' + n)
        //;
        if(text.length > 12) text = text.substr(0, 12) + "...";
        if(v.localName === \'h3\') 
            l++;
            m = 0;
            //if(text.length > 12) text = text.substr(0, 12) + "...";
            j += \'<li><a href="#\' + u.attr(\'id\') + \'" title="\' + title + \'">\' + text + \'</a><span class="sideCatalog-dot" ></span></li>\';
         else if(v.localName === \'h4\') 
            m++;
            n = 0;
            if(q) 
                //if(text.length > 12) text = text.substr(0, 12) + "...";
                j += \'<li class="h2Offset"><a href="#\' + u.attr(\'id\') + \'" title="\' + title + \'">\' + text + \'</a></li>\';
            
         else if(v.localName === \'h5\') 
            n++;
            if(r) 
                j += \'<li class="h3Offset"><a href="#\' + u.attr(\'id\') + \'" title="\' + title + \'">\' + u.text() + \'</a></li>\';
            
        
    );
    $(\'#\' + f + \'>ul\').html(j);
    b.data(\'spy\', \'scroll\');
    b.data(\'target\', \'.sideCatalogBg\');
    $(\'body\').scrollspy(
        target: \'.sideCatalogBg\'
    );
    $sideCatelog = $(\'#\' + e);
    $sideToolbar = $(\'#\' + d);
    $(\'#sideCatalogBtn\').hover(function () 
        $sideCatelog.css(\'display\', \'block\');
    );
    $sideToolbar.hover(function(), function()
        $sideCatelog.css(\'display\', \'none\');
    );
    $(\'#\' + h).on(\'click\', function() 
        $("html,body").animate(
            scrollTop: 0
        , 500)
    );
    a.on(\'scroll\', function() 
        var t = a.scrollTop();
        if(t > k) 
            $sideToolbar.css(\'display\', \'block\');
            $(\'#gotop\').show()
         else 
            $sideToolbar.css(\'display\', \'none\')
            $(\'#gotop\').hide()
        
    )
);
//以上是锚点JS
</script>

4-粘贴代码到"页面定制css代码"

/*标题h1 h2 h3样式*/
#cnblogs_post_body color: black;font: 0.875em/1.5em"微软雅黑", "PTSans", "Arial", sans-serif;font-size: 16px;

#cnblogs_post_body h1 background: #2B6695;border-radius: 6px 6px 6px 6px;box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);color: #FFFFFF;font-family:"微软雅黑", "宋体", "黑体", Arial;font-size: 18px;font-weight: bold;height: 25px;line-height: 25px;margin: 18px 0 !important;padding: 8px 0 5px 5px;text-shadow: 2px 2px 3px #222222;

#cnblogs_post_body h2 background: #ddbb26;border-radius: 6px 6px 6px 6px;box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);color: #FFFFFF;font-family:"微软雅黑", "宋体", "黑体", Arial;font-size: 15px;font-weight: bold;height: 24px;line-height: 23px;margin: 12px 0 !important;padding: 5px 0 5px 10px;text-shadow: 2px 2px 3px #222222;

#cnblogs_post_body h3 background: #5B9600;border-radius: 6px 6px 6px 6px;box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);color: #FFFFFF;font-family:"微软雅黑", "宋体", "黑体", Arial;font-size: 13px;font-weight: bold;height: 24px;line-height: 20px;margin: 12px 0 !important;padding: 5px 0 5px 10px;text-shadow: 2px 2px 3px #222222;

#cnblogs_post_body h4 background: #910096;border-radius: 6px 6px 6px 6px;box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);color: #FFFFFF;font-family:"微软雅黑", "宋体", "黑体", Arial;font-size: 13px;font-weight: bold;height: 24px;line-height: 20px;margin: 12px 0 !important;padding: 5px 0 5px 10px;text-shadow: 2px 2px 3px #222222;






/* 文章title自定义带动画样式 */
.postTitle 
  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  clear: both;
  background-color: #FBF9F9;
  margin-bottom: 8px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 20px;
  border-left: 3px solid #21759b;
  padding-left: 20px;
  font-size: 20px;
  border-radius:0px;

.postTitle a:hover 
  text-decoration: none;
  margin-left: 20px;
  color: #E00000;

.postTitle a:link,
.postTitle a:visited,
.postTitle a:active 
  transition: all 0.4s linear 0s;



/*scroll to top*/
#scrollTop div
  left:0;
  overflow:hidden;
  position:absolute;
  top:0;
  width:149px;
  margin:0;
  padding:0

#scrollTop .level-2
  background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent;
  display:none;
  height:250px;
  opacity:0;
  z-index:1

#scrollTop .level-3
  background:none repeat scroll 0 0 transparent;
  cursor:pointer;
  display:block;
  height:150px;
  z-index:2

#scrollTop
  background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent;
  cursor:default;
  display:block;
  height:180px;
  overflow:hidden;
  position:fixed;
  right:0;
  top:90%;
  width:149px;
  z-index:11;
  margin:-125px 0 0;
  padding:0






/*目录样式*/
#sideCatalog a
  font-size:12px;
  font-weight:normal !important;




/*好看的滚动条*/
::-webkit-scrollbar
    width:10px!important;
    height:10px!important;
    -webkit-appearance:none;

::-webkit-scrollbar-thumb
    height:5px;border:1px solid transparent;
    border-top:none;border-bottom:none;
    -webkit-border-radius:6px;
    background-color:rgba(0,0,0,.3);
    background-clip:padding-box;




#div_digg
  padding: 5px;
  border-radius: 5px;
  position: fixed;
  left: 0;
  bottom: 80px;
  width:80px;
  z-index:100;

.diggit
  background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat;
  width: 60px;
  height: 60px;

#div_digg .diggnum
  position: absolute;
  bottom: -20px;
  left: 6px;
  background: #D0D0D0;
  padding: 2px 0;
  display: block;
  color: #555;
  font-size: 12px;
  text-align: center;
  width: 60px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  font-weight: bold;

/* 删除反对按钮,有点邪恶了 */
.buryit
  display: none;

5-粘贴代码到"页首HTML代码"

<link  type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/feedback.css">






<link href="http://files.cnblogs.com/files/jiangxuling/cnblog-scroller.css" type="text/css" rel="stylesheet">
<script src="http://files.cnblogs.com/files/jiangxuling/scrollspy.js" type="text/javascript"></script>
<script src="http://files.cnblogs.com/files/jiangxuling/stickUp.min.js" type="text/javascript"></script>
<script src="http://files.cnblogs.com/files/jiangxuling/cnblog-scroller.js" type="text/javascript"></script>

6-粘贴代码到"页脚HTML代码"

<script type="text/javascript">
$(function()
    $(\'#blogTitle h1\').addClass(\'bounceInLeft animated\');
    $(\'#blogTitle h2\').addClass(\'bounceInRight animated\');
    // 删除反对按钮
    $(\'.buryit\').remove();
    initCommentData();
);
function initCommentData() 
    $(\'.feedbackItem\').each(function() 
        var text = $(this).find(\'.feedbackListSubtitle .layer\').text();
        // 将楼层信息放到data里面
        // $(this).find(\'.blog_comment_body\').attr(\'data-louceng\', text.replace(/^#/g, \'\'));
        if($(this).find(\'.feedbackListSubtitle .louzhu\').length>0) $(this).addClass(\'myself\');
        var avatar = $(this).find(\'> .feedbackCon > span\').html() || \'http://pic.cnitblog.com/face/sample_face.gif\';
        $(this).find(\'> .feedbackCon > .blog_comment_body\').append(\'<img class="user-avatar" src="\'+avatar+\'"/>\')
    );


$(document).ajaxComplete(function(event, xhr, settings) 
  // 监听获取评论ajax事件
  if(settings.url.indexOf(\'/mvc/blog/GetComments.aspx\') >= 0) 
    initCommentData();
  
);
</script>

7-上传以下文件到文件里,如下图

四个js文件下载地址:
链接：https://pan.baidu.com/s/1oNumlyfzXSEr-GNeNRHqow
提取码：ccd2
`

如何设置博客园好看的标题样式

1.向博客园申请js权限

　　我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷新一下，页面就会显示支持js代码 ，博客园也会在用户邮箱给你发送是否开通js权限的邮件。

2.添加css样式

　　我们在【管理】-->【设置】-->【博客设置】-->【页面定制CSS代码】中粘贴如下面的代码

#cnblogs_post_body
{
    color: black;      
    font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
    font-size: 15px;
}
#各个等级标题的颜色样式
#cnblogs_post_body h1    {
    background: #2B6695;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 23px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h2    {
    background: #008eb7;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 20px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h3    {
    background: #399ab2;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 18px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h4{
    background: #2B6600;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 16px;
    font-weight: bold;
    height: 24px;
    line-height: 23px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
}
#页面中a标签鼠标位置
#cnblogs_post_body h2:a{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h2 a:hover{
   color: rgb(255, 102, 0);
}
#页面中标题位置
#cnblogs_post_body h1{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h1:hover{
   color: rgb(255, 102, 0);
}
#cnblogs_post_body h2{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h2:hover{
   color: rgb(255, 102, 0);
}
#cnblogs_post_body h3{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h3:hover{
   color: rgb(255, 102, 0);
}
#cnblogs_post_body h4{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h4:hover{
   color: rgb(255, 102, 0);
}

博客园[标题样式]

　　保存后，刷新一下文章的内容，就会发现样式已经应用上了

以上是关于制作一个好看的博客园样式模版的主要内容，如果未能解决你的问题，请参考以下文章