1. 技术文章
  2. 博客园自定义皮肤

博客园自定义皮肤

由 半世苍凉 提交于 2019-11-28 05:28:12

一、背景

    在园子里浪迹有很长一段时间了，里面遇到了很多大神，学习了很多知识，也帮助我解决很多现实工作的问题……非常感谢各位园友们的分享。说来惭愧，在园子这么久，很少发布博文。主要原因是自己有点懒，其他的客观原因也就不说了，每个人都有自己当时的想法。结果现在就有一种“我虽在江湖，但江湖没有我的传说”的尴尬，本着“迟到比不到好”的思想，就想着在这里记录一下自己平凡的学习成长历程，也希望能帮助园友们避免我踩过的坑。

   之前在逛园子的时候，就发现有些博主的主题很好看，查找了一些攻略，根据自己的喜好，简单的修改了主题样式以及添加了一些功能。如果你想定制自己的博客，可以跟我一起，需要有css基础。

二. 定制自己的博客

1、准备工作

     先在博客主页依次点击“管理”=》“设置”，下面找到“申请JS权限”，等待审核，审核通过之后才能，定制的主题才能成功。同时在博客皮肤那里选择博客园提供的皮肤。我没有像园子里面的大神直接自定义一套css样式，我觉得站在巨人的肩上，一样也可以摘到自己的星星。于是我选择了我觉得合适的皮肤[“SimpleBlue”]，每个人的爱好不一样，你可以选择你喜欢的皮肤进行修改，不过下面的一些样式可能需要做一些修改，具体看你想要怎么展示。imageimage

  自定义主题样式操作，对于你不满意的元素，你可以在该页面按F12调出Debug工具，然后对该元素的css进行修改，调整满意之后，你把修改过的css保存到“页面定制CSS代码”里面。

2、公共样式

下面是我对SimpleBlue皮肤的公共样式做了一些调整，如果你想跟博主一样的定制，可以直接copy到"页面定制CSS代码"里面

  1 @font-face {
  2   font-family: 'FontAwesome';
  3   font-style: normal;
  4   font-weight: normal;
  5   src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg');
  6 }
  7 * {
  8   margin: 0;
  9   padding: 0;
 10 }
 11 body {
 12   background: #eee;
 13   color: #444;
 14   font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
 15   font-size: 14px;
 16   text-shadow: 0 0 1px transparent;
 17   color:#505050;
 18 }
 19 @media screen and (max-width: 1260px) {
 20   body {
 21     margin: 0px;
 22   }
 23 }
 24 @media screen and (max-width: 600px) {
 25   body {
 26     font-size: 13px;
 27   }
 28 }
 29 h1,h2,h3,h4,h5,h6 {
 30   font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
 31 }
 32 h1 {
 33   font-size: 1.8em;
 34 }
 35 h2 {
 36   font-size: 1.5em;
 37 }
 38 h3 {
 39   font-size: 1.3em;
 40 }
 41 a {
 42   text-decoration: none;
 43   color: #258fb8;
 44 }
 45 a:hover {
 46   text-decoration: underline;
 47 }
View Code

注意：前往不要勾选“禁用模板默认CSS”。

在“博客侧边栏公告”里面添加上我自己写的js方法

  1 <script type="text/javascript" src="https://files.cnblogs.com/files/snailblog/util.js"></script>
View Code

3、生成文章目录

在"页面定制CSS代码"里面添加样式

  1 /* --目录样式 start-- */
  2 #sideCatalog a{
  3   font-size:12px;
  4   font-weight:normal !important;
  5 }
  6 
  7 /* --目录样式 end-- */
View Code

在"博客侧边栏公告"里面添加JS引用

  1 <!--目录 start-->
  2 <script type="text/javascript" src="https://files.cnblogs.com/files/snailblog/catalog.js"></script>
  3 <!--目录 end-->
View Code

在"页首Html代码"里面添加样式引用

  1 <!--目录 start-->
  2 <link  type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/snailblog/maodian.css">
  3 <!--目录 end -->
View Code

在"页脚Html代码"里面添加JS引用

  1 <script src="https://files.cnblogs.com/files/snailblog/bootstrap.min.js"></script>
View Code

保存成功之后，就可以看到如下效果

image

4、设置滚动条样式

在"页面定制CSS代码"里面添加样式

  1 
  2 /* --好看的滚动条 start-- */
  3 ::-webkit-scrollbar{
  4     width:10px!important;
  5     height:10px!important;
  6     -webkit-appearance:none;
  7 }
  8 ::-webkit-scrollbar-thumb{
  9     height:5px;border:1px solid transparent;
 10     border-top:none;border-bottom:none;
 11     -webkit-border-radius:6px;
 12     background-color:rgba(0,0,0,.3);
 13     background-clip:padding-box;
 14 }
 15 
 16 /* --好看的滚动条 end-- */
View Code

5、返回顶部

在"页面定制CSS代码"里面添加样式

  1 
  2 /* --返回顶部 start-- */
  3 
  4 #scrollTop div{
  5   left:0;
  6   overflow:hidden;
  7   position:absolute;
  8   top:0;
  9   width:149px;
 10   margin:0;
 11   padding:0
 12 }
 13 #scrollTop .level-2{
 14   background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent;
 15   display:none;
 16   height:250px;
 17   opacity:0;
 18   z-index:1
 19 }
 20 #scrollTop .level-3{
 21   background:none repeat scroll 0 0 transparent;
 22   cursor:pointer;
 23   display:block;
 24   height:150px;
 25   z-index:2
 26 }
 27 #scrollTop{
 28   background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent;
 29   cursor:default;
 30   display:block;
 31   height:180px;
 32   overflow:hidden;
 33   position:fixed;
 34   right:0;
 35   top:90%;
 36   width:149px;
 37   z-index:11;
 38   margin:-125px 0 0;
 39   padding:0
 40 }
 41 
 42 /* --返回顶部 end-- */
View Code

在"页脚Html代码"里面添加下面代码

  1 <script src="https://files.cnblogs.com/files/snailblog/jquery-migrate-1.2.1.js"></script>
  2 <div id="scrollTop" style="display:none;">
  3       <div class="level-2"></div>
  4       <div class="level-3"></div>
  5 </div>
  6 <script src="https://files.cnblogs.com/files/snailblog/scroll2top.js"></script>
  7 <script type="text/javascript">
  8     UI.global_search();
  9     var uvOptions = {};
 10     // !important
 11     (function() {
 12         initScrollTop();
 13     })();
 14 </script>
View Code

点击小火箭，小火箭升天回到顶部

image

6、点赞按钮

在"页面定制CSS代码"里面添加样式

  1 
  2 /* --点赞按钮 start-- */
  3 #div_digg{
  4   padding: 5px;
  5   border-radius: 5px;
  6   position: fixed;
  7   right: 320px;
  8   bottom: 80px;
  9   width:80px;
 10   z-index:100;
 11 }
 12 .diggit{
 13   background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat;
 14   width: 60px;
 15   height: 60px;
 16 }
 17 #div_digg .diggnum{
 18   position: absolute;
 19   bottom: -20px;
 20   left: 6px;
 21   background: #D0D0D0;
 22   padding: 2px 0;
 23   display: block;
 24   color: #555;
 25   font-size: 12px;
 26   text-align: center;
 27   width: 60px;
 28   -moz-border-radius: 4px;
 29   -webkit-border-radius: 4px;
 30   font-weight: bold;
 31 }
 32 /* 删除反对按钮,有点邪恶了 */
 33 .buryit{
 34   display: none;
 35 }
 36 
 37 /* --点赞按钮 end-- */
View Code

屏蔽掉反对按钮的效果

image

7、鼠标点击效果

在"博客侧边栏公告"里面添加JS引用

  1 <!--鼠标点击样式 start-->
  2 <script type="text/javascript" src="https://files.cnblogs.com/files/snailblog/mouseclick.js"></script>
  3 <!--鼠标点击样式 end-->
  4
View Code

8、页面左右布局调整

   由于SimpleBlue皮肤左边的侧边栏，右边是内容。我们的工具很多都是在右下角，所以导致了内容的一些覆盖，调整一下页面的左右布局。

在"页面定制CSS代码"里面添加样式

  1 
  2 /* --调整左右布局 start-- */
  3 #sideBar{
  4     right: 30px;
  5     left: auto;
  6     top:106px;
  7 }
  8 #mainContent{
  9     margin-left: 30px;
 10     margin-right: 325px;
 11     margin-top: 30px;
 12 }
 13 
 14 div.blogStats{
 15     right: 360px;
 16     top: 135px;
 17 }
 18 
 19 /* --调整左右布局 end-- */
View Code

9、添加打赏

在管理后台上传自己的支付宝和微信的收款码。注意需要转化成bmp格式。

在"页首Html代码"里面添加下面代码：

  1 
  2 <script>
  3     window.tctipConfig = {
  4       staticPrefix: "http://static.tctip.com",
  5       buttonImageId: 7,
  6       buttonTip: "dashang",
  7       list:{
  8         alipay: {qrimg: "https://files.cnblogs.com/files/snailblog/alipayqr.bmp"},
  9         weixin:{qrimg: "https://files.cnblogs.com/files/snailblog/wechatqr.bmp"},
 10       }
 11     };
 12 </script>
 13 <script src="https://files.cnblogs.com/files/snailblog/tctip.min.js"></script>
 14 <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/snailblog/myRewards.css">
View Code

注意：上面alipay后面填自己支付宝收款二维码链接、weixin后面填自己微信收款二维码链接。

10、定制首页文章列表样式

在"页面定制CSS代码"里面添加样式

  1 
  2 /* --文章列表页 start-- */
  3 .postTitle, .entrylistPosttitle {
  4   font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  5   font-size: 1.8em;
  6   padding: 20px 20px 15px 0px;
  7   background: #fff;
  8   border-radius: 10px 10px 0px 0px;
  9   white-space: nowrap;
 10   overflow: hidden;
 11   text-overflow: ellipsis;
 12 }
 13 .postTitle, .entrylistPosttitle {
 14     font-size:14px;
 15     padding: 20px 20px 15px 0px;
 16   }
 17 
 18 .postTitle {
 19   font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
 20   clear: both;
 21   background-color: #FBF9F9;
 22   margin-bottom: 8px;
 23   padding-top: 10px;
 24   padding-bottom: 10px;
 25   margin-top: 20px;
 26   border-left: 3px solid #209E85;
 27   padding-left: 20px;
 28   font-size: 20px;
 29   border-radius:5px;
 30   box-shadow: 5px 5px 5px #ccc;
 31 }
 32 .postTitle a:hover {
 33   text-decoration: none;
 34   margin-left: 20px;
 35   color: #E00000;
 36 }
 37 .postTitle a:link,
 38 .postTitle a:visited,
 39 .postTitle a:active {
 40   transition: all 0.4s linear 0s;
 41 }
 42 
 43 
 44 /* --文章列表页 end-- */
View Code

11、定制文章内容样式

在"页面定制CSS代码"里面添加样式

  1 
  2 #cnblogs_post_body {
  3   text-align: justify;
  4   line-height: 1.6;
  5 }
  6 #cnblogs_post_body p,
  7 #cnblogs_post_body blockquote,
  8 #cnblogs_post_body ul,
  9 #cnblogs_post_body ol,
 10 #cnblogs_post_body dl,
 11 #cnblogs_post_body table,
 12 #cnblogs_post_body iframe,
 13 #cnblogs_post_body h2,
 14 #cnblogs_post_body h3,
 15 #cnblogs_post_body h4,
 16 #cnblogs_post_body h5,
 17 #cnblogs_post_body .video-container {
 18   margin-top: 15px;
 19 }
 20 #cnblogs_post_body blockquote {
 21   border-top: 1px solid #ddd;
 22   border-bottom: 1px solid #ddd;
 23   font-style: italic;
 24   font-family: "Georgia", serif;
 25   font-size: 1.2em;
 26   padding: 0 30px 15px;
 27 }
 28 #cnblogs_post_body blockquote footer {
 29   border-top: none;
 30   font-size: 0.8em;
 31   line-height: 1;
 32   margin: 20px 0 0;
 33   padding-top: 0;
 34 }
 35 #cnblogs_post_body blockquote footer cite:before {
 36   content: '—';
 37   color: #ccc;
 38   padding: 0 0.5em;
 39 }
 40 #cnblogs_post_body code,
 41 #cnblogs_post_body pre {
 42   font-family: Monaco, Menlo, Consolas, Courier New, monospace;
 43 }
 44 #cnblogs_post_body code {
 45   background: #eee;
 46   color: #666;
 47   padding: 0 5px;
 48   margin: 0 2px;
 49   font-size: 0.9em;
 50   border: 1px solid #ddd;
 51   -webkit-border-radius: 3px;
 52   border-radius: 3px;
 53 }
 54 #cnblogs_post_body pre {
 55   background: #eee;
 56   overflow: auto;
 57   padding: 7px 15px;
 58   -webkit-border-radius: 2px;
 59   border-radius: 2px;
 60 }
 61 #cnblogs_post_body pre code {
 62   background: none;
 63   padding: 0;
 64   margin: 0;
 65   border: none;
 66   -webkit-border-radius: 0;
 67   border-radius: 0;
 68 }
 69 #cnblogs_post_body ul ul,
 70 #cnblogs_post_body ol ul,
 71 #cnblogs_post_body dl ul,
 72 #cnblogs_post_body ul ol,
 73 #cnblogs_post_body ol ol,
 74 #cnblogs_post_body dl ol,
 75 #cnblogs_post_body ul dl,
 76 #cnblogs_post_body ol dl,
 77 #cnblogs_post_body dl dl {
 78   margin-top: 0;
 79 }
 80 #cnblogs_post_body h1 {
 81   font-weight: bold;
 82   border-bottom: 1px solid #ddd;
 83   padding-bottom: 10px;
 84   margin-top: 20px;
 85 }
 86 #cnblogs_post_body h2,
 87 #cnblogs_post_body h3,
 88 #cnblogs_post_body h4,
 89 #cnblogs_post_body h5 {
 90   font-weight: normal;
 91   background: #eee;
 92   border-radius: 6px;
 93   color: Red;
 94   font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
 95   min-height: 25px;
 96   line-height: 25px;
 97   margin: 18px 5px !important;
 98   padding: 8px;
 99   opacity: 0.8;
100   border: 1px dashed #aaa;
101 }
102 #cnblogs_post_body h4 {
103   padding-left:20px !important;
104   color:Green !important;
105 }
106 .postBody img,
107 .entrylistPostSummary img, .postCon img,
108 .postBody video {
109   max-width: 100%;
110   height: auto;
111   border: none;
112 }
113 #cnblogs_post_body iframe {
114   border: none;
115 }
116 #cnblogs_post_body .caption {
117   display: block;
118   margin-top: 5px;
119   color: #999;
120   position: relative;
121   font-size: 0.9em;
122   padding-left: 25px;
123 }
124 #cnblogs_post_body .caption:before {
125   content: '\f040';
126   position: absolute;
127   font: 1.3em FontAwesome;
128   position: absolute;
129   left: 0;
130   top: 3px;
131 }
132 #cnblogs_post_body .video-container {
133   position: relative;
134   padding-bottom: 56.25%;
135   padding-top: 30px;
136   height: 0;
137   overflow: hidden;
138 }
139 #cnblogs_post_body .video-container iframe,
140 #cnblogs_post_body .video-container object,
141 #cnblogs_post_body .video-container embed {
142   position: absolute;
143   top: 0;
144   left: 0;
145   width: 100%;
146   height: 100%;
147   margin-top: 0;
148 }
149 #cnblogs_post_body .pullquote {
150   float: right;
151   border: none;
152   padding: 0;
153   margin: 1em 0 0.5em 1.5em;
154   text-align: left;
155   width: 45%;
156   font-size: 1.5em;
157 }
158 
159 
160 #cnblogs_post_body pre {
161   padding: 0;
162 }
163 #cnblogs_post_body th,
164 #cnblogs_post_body td {
165   padding: 0;
166 }
167 
168 
169 
170 
171 
172 
173 #cnblogs_post_body h2:hover,
174 #cnblogs_post_body h3:hover {
175   color: green;
176   font-size: x-large;
177   font-weight: bold;
178 }
179 
180 
181 
182 
183 
184 
185 
186 
187 #cnblogs_post_body {
188   overflow: hidden;
189 }
190 #cnblogs_post_body ol {
191   padding-left: 40px;
192 }
193 #cnblogs_post_body ul {
194   margin-left: 35px;
195 }
View Code

12、设置个性化签名格式

在"页面定制CSS代码"里面添加样式

  1 
  2 /* --设置签名格式 定制css样式  start-- */
  3 
  4 #MySignature{
  5 border-top: 2px solid #ccc;
  6   padding-top: 20px;
  7 }
  8 
  9 /* --设置签名格式 定制css样式 end-- */
View Code

在"博客侧边栏公告“里面添加

  1 
  2 <script type="text/javascript">
  3 (function() {
  4        $("#recommend").click(function(){
  5 
  6 $('.diggit').click();
  7 
  8 
  9 })
 10 
 11  $("#follow_me_btn").click(function(){
 12 follow('6daecedb-b097-46ad-e0ff-08d7188de755');
 13 })
 14     })();
 15 
 16 </script>
View Code

注意：follow('6daecedb-b097-46ad-e0ff-08d7188de755');里面的id修改成自己的guid。

查找方法：未登陆状态打开自己的博客页(如：https://www.cnblogs.com/snailblog)，按F2打开Debug工具，选中“加关注”，然后更换成自己的Guid即可。如下图：

image

然后将博客签名填写如下内容（下面是我的内容，你可以根据自己的情况填写）：

  1 <div style="font-size: 13px; border: 1px dashed rgb(45, 161, 45); padding: 10px 15px; background-color: rgb(248, 248, 248)">
  2 <label style="font-weight: bold">
  3 &nbsp;&nbsp;&nbsp;&nbsp;如果您觉得阅读本文对您有帮助，请点一下右下角<a id="recommend" style="font-weight: bold; color: red; font-size: 15px; text-decoration: underline">推荐”</a>按钮，博主在此感谢！另外您也可以选择<a id="follow_me_btn" style="cursor: pointer; color: blue; text-decoration: underline">【<strong>关注我</strong>】</a>，可以很方便找到我！</label><br>
  4 &nbsp;&nbsp;&nbsp;&nbsp;感谢您花时间阅读此篇文章，如果您觉得看了这篇文章之后心情还比较高兴，可以打赏一下，请博主喝上一杯咖啡，让博主继续码字……<br>
  5 &nbsp;&nbsp;&nbsp;&nbsp;本文版权归作者和博客园共有，来源网址：<a href="https://www.cnblogs.com/snailblog" style="color: red; text-decoration: underline" target="_blank">https://www.cnblogs.com/snailblog</a> 欢迎各位转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接
  6 </div>
View Code

注意，如果推荐和关注的id有更改，记住需要修改"博客侧边栏公告“里对应元素的单击事件。

三、后语

定制化到这里，我觉得页面的效果已经能满足我的要求了。有的功能或许你觉得不喜欢，你也可以添加一些没有的功能，去实现属于你自己的定制化需求。
这里特别感谢下面链接的博主，很多内容都是基于他们的插件来使用的，特别是hafiz的一些样式。
参考链接：
https://www.cnblogs.com/hafiz/p/9276689.html
https://www.cnblogs.com/shwee/p/9060226.html

标签
博客园
background
自定义view
scrolltop
border-radius
border
post
padding
font
margin
css样式
css
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!