关于博客园自定义样式

最新推荐文章于 2024-08-09 08:00:00 发布

weixin_30412167

最新推荐文章于 2024-08-09 08:00:00 发布

阅读量98

点赞数

原文链接：http://www.cnblogs.com/Trainoo/p/8045340.html

版权

导读

断断续续的奋斗了不知道多少个晚上，门面装修终于大功告成。作此文以纪念。

众所周知，博客园有一个自由开放的功能，那就是自定义样式，本篇内容不讲述如何调样式等技术知识，只是在此提供一个我是如何去自定义我的博客园样式的思路，供大家参考！欢迎拍砖~

思路以及步骤

我在做这个样式自定义的时候，首先的想法是把别人做的好的，直接拿过来用，但是发现总是达不到别人的那种效果，也许是扒代码水平有限，没有拿到关键部分。好吧，最后我只能自己一点点调，下面是我的整体的一个步骤：

1. 首先选一个自己喜欢的主题，或者说是容易改的主题吧，我这里选的是"darkgreentrip"这个主题
2. 然后把这个主题的主要的那部分css扒拉下来，我记得我这个主题好像是"darkgreentrip.css"和"darkgreentrip-mobile.css"
3. 把这两个文件上传到博客园后台，然后在后台设置“页首Html代码”这个区域放入引用代码
4. 接下来在禁用掉模板默认CSS，点击保存，观察效果
5. 如果跟之前主题效果是一样的，那么，我们现在就可以开始在这个基础上调整css样式了
6. 最后把调整后的css上传，保存，那么，就算大功告成了

这里要说明一下的是，虽然步骤很简单，但是你会发现，你需要花大量的时间做倒数第二步的工作，用浏览器一点点选中样式，然后调css是一个很繁琐的过程，至少我是这么觉得的。但是最后效果出来了是相当开心的！

如何使用我这个样式？

如果你觉的我这个博客的样式还不错哟，那么请别忘了点赞投食丢硬币丢香蕉~~~哈哈哈！回到主题，你可以按照下面的方法去使用它。

首先，你需要选择我使用的主题：darkgreentrip
然后，通过浏览器的调试模式或是其他的方式，拿到我所使用的css文件：trainoo-web.css、trainoo-mobile.css
接着，把这两个文件上传到你的博客园后台
最后，在设置那个模块需要加上如下代码段（有些地方需要做修改，改成自己的内容即可）

博客侧边栏公告（支持HTML代码）（支持JS代码）

 <!---  自定义侧边栏  --->
 <div class="mySideBar">
     <p class="nickName">昵称：<a href="http://www.cnblogs.com/Trainoo/">Trainoo</a></p>
     <p>园龄：大概也就一百年吧~</p>
     <p>粉丝：999999+</p>
     <p>关注：999999+</p>
     <p>邮箱：trainoo@163.com</p>
     <p>代码库：
         <a target="_blank" href="https://gitee.com/trainoo" class="glyphicon glyphicon-fire">码云</a>
         <a target="_blank" href="https://github.com/jj-trainoo" class="glyphicon glyphicon-tint">GitHub</a>
     </p>
     <p id="p_b_follow"><a href="javascript:void(0);" onclick="follow('ca5022e9-4171-4a38-e168-08d4ef52ecb5')">+加关注</a></p>
 </div>

 <!--- 导入js库  --->
 <script src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
 <canvas id="c_n4" width="860" height="958" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>

页首Html代码

 <!-- 链接过来的 css 样式要放在 首页Html代码 里面 才会生效 -->
 <link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
 <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/Trainoo/trainoo-web.css" />
 <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/Trainoo/trainoo-mobile.css" id="mobile-style" media="only screen and (max-width: 767px)" />

 <a id="back-to-top" style="display: inline;" href="javascript:;">
      <i class="glyphicon glyphicon-arrow-up"></i>
 </a>

页脚Html代码

 <script>
 $(function(){
     changeIndReadCommentStyle();

     //返回顶部
     $('#back-to-top').click(function(e){ $('html,body').animate({scrollTop:0}, 500) });

     //滑稽~
     $('#ad_t2').remove();
     $('#under_post_news').remove();
     $('#under_post_kb').remove();
     $('.c_ad_block').remove();
     $('.c_ad_block').remove();
     $('#blog-calendar').remove();
     $('#sidebar_search').remove();
     $('title').html($('title').html())
 });
 // 修改首页 阅读、评论样式
 function changeIndReadCommentStyle(){   
     var count = $('.postDesc').length;
     var pattern = new RegExp("阅读(.*?)<a");
     for (var i=0; i < count; i++){
         var html = "";
         var txt = pattern.exec($('.postDesc').eq(i).html());
         html += "<span class=\"glyphicon glyphicon-eye-open\"></span>";
         html += "  " + txt;
         $('.postDesc').eq(i).html(html);
     }
 }
 </script>

最后点击保存即可！

最后，再来个总结

总结什么呢？第一次用markdown正式编辑博客内容，所以也踩了很多坑，这里记录一个最大的坑！markdown代码段的标记一般使用的是这个符号：

    `      // 方案1

有些编辑器也可以用:

     ```      // 方案2

甚至我还百度了说可以用这个的：

     ~~~      // 方案3

でも，我在尝试这些之后，发现根本没有办法正常嵌入html代码，html在显示的时候会被转义！所以在尝试N遍之后，终于发现，
只需要在贴入的代码前敲两次table缩进一下就好了~~，好吧，再次暴露了我的markdown水平太低。。

最后的最后，我是使用 MarkdownPad2 这个编辑器在本地编辑好了在贴到博客园发布的~

=============2018-06-23================
补充内容：
经过了这么长的一段时间，发现MarkDown水平稍有上涨，证明方案二中的使用方法是正确的。
如果有人发现自己的博客园使用方案二的方法排版显示错误的话，那么可能是你的设置有问题，可以按照如下方法设置一下：
打开博客后台管理 -> 选项 -> 默认编辑器 -> 选择markdown，然后保存设置即可。

转载于:https://www.cnblogs.com/Trainoo/p/8045340.html