0 前言
从大二开始写博客，主要为了记录自己学习过程中的问题。尝试使用过CSDN、博客园等公共服务，也用Github pages搭建过自己的博客，但效果都不令人满意。CSDN广告太多，界面乌烟瘴气，而且很多博客内容都是抄袭而来；博客园模板比较单一，而且对Markdown的支持不友好；Github pages很自由，但是搭建以及发布文章比较麻烦。
后来在网上浏览别人的博客园时，才发现原来是可以自己定制博客的，遂写此文。
1 皮肤
皮肤也就是博客的背景，博客园提供了一些模板，可以在管理->设置->博客皮肤中选择。
如果你对于CSS比较熟悉，那完全可以自己写一个网页的样式，然后勾选禁用模板默认CSS。
如果你不熟悉Web开发，可以找一些别人写好的页面定制代码，复制到页面定制CSS代码框中。
1 /*
2 Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
3 */
4
5 pre {
6 /*控制代码不换行*/
7 white-space: pre;
8 word-wrap: normal;
9 }
10
11 .cnblogs-markdown .hljs {
12 display: block;
13 overflow: auto;
14 padding: 1.3em 2em !important;
15 font-size: 16px !important;
16 background: #272822 !important;
17 color: #FFF;
18 max-height: 700px;
19 }
20
21 .hljs,
22 .hljs-tag,
23 .hljs-subst {
24 color: #f8f8f2;
25 }
26
27 .hljs-strong,
28 .hljs-emphasis {
29 color: #a8a8a2;
30 }
31
32 .hljs-bullet,
33 .hljs-quote,
34 .hljs-number,
35 .hljs-regexp,
36 .hljs-literal,
37 .hljs-link {
38 color: #ae81ff;
39 }
40
41 .hljs-code,
42 .hljs-title,
43 .hljs-section,
44 .hljs-selector-class {
45 color: #a6e22e;
46 }
47
48 .hljs-strong {
49 font-weight: bold;
50 }
51
52 .hljs-emphasis {
53 font-style: italic;
54 }
55
56 .hljs-keyword,
57 .hljs-selector-tag,
58 .hljs-name,
59 .hljs-attr {
60 color: #f92672;
61 }
62
63 .hljs-symbol,
64 .hljs-attribute {
65 color: #66d9ef;
66 }
67
68 .hljs-params,
69 .hljs-class .hljs-title {
70 color: #f8f8f2;
71 }
72
73 .hljs-string,
74 .hljs-type,
75 .hljs-built_in,
76 .hljs-builtin-name,
77 .hljs-selector-id,
78 .hljs-selector-attr,
79 .hljs-selector-pseudo,
80 .hljs-addition,
81 .hljs-variable,
82 .hljs-template-variable {
83 color: #e6db74;
84 }
85
86 .hljs-comment,
87 .hljs-deletion,
88 .hljs-meta {
89 color: #75715e;
90 }
91
92 /* 黑色主题makedown代码结束 */
93
94 /*makedown行间代码样式 */
95 .cnblogs-markdown code {
96 color: #c7254e;
97 border: none !important;
98 font-size: 1em !important;
99 background-color: #f9f2f4 !important;
100 font-family: sans-serif !important;
101 }
102
103 /*引言样式*/
104 blockquote {
105 border-left: 5px solid #55895B;
106 }
107
108 blockquote strong {
109 color: red;
110 font-size: 18px;
111 }
112
113 /*博客顶部容器包括标题、副标题、导航栏*/
114 /* 博客标题和副标题 */
115 #blogTitle {
116 overflow: hidden;
117 height: auto;
118 text-align: center;
119 }
120
121 #blogTitle h1 {
122 font-size: 35px;
123 width: 100%;
124 margin-left: 0;
125 }
126
127 #blogTitle h2 {
128 margin-left: 0;
129 width: 100%;
130 font-size: 20px;
131 font-weight: bold;
132 color: #000;
133 }
134
135 /*博客导航栏 */
136 #navList {
137 float: left;
138 }
139
140 #navList li {
141 border: none;
142 font-size: 16px;
143 }
144
145 .blogStats {
146 display: none;
147 }
148
149 /*sideBar博客侧边栏容器*/
150 #sideBar {
151 width: 300px;
152 box-sizing: border-box;
153 margin-left: 30px;
154 padding: 0;
155 }
156
157 .newsItem, .catListComment, .catListEssay, .catListView, .catListFeedback,
158 #blog-calendar, #sidebar_postcategory, #sidebar_postcategory, #sidebar_postarchive, #sidebar_search {
159 border-radius: 10px;
160 box-shadow: 1px 2px 3px #A7A8AD;
161 background-color: #fff;
162 }
163
164 #sideBarMain h3, .newsItem h3 {
165 font-size: 1.2em;
166 height: 50px;
167 line-height: 50px;
168 text-indent: 0.5em;
169 background: url(http://www.cnblogs.com/skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff;
170 padding: 0 0 0 50px;
171 margin-bottom: 0;
172 border: 1px solid #55895B;
173 border-left-width: 5px;
174 border-radius: 10px;
175 border-right-width: 5px;
176 }
177
178 #sideBarMain ul {
179 background-color: #fff;
180 padding: 15px 20px;
181 border-bottom-left-radius: 10px;
182 border-bottom-right-radius: 10px;
183 }
184
185 #sideBarMain li {
186 line-height: 40px;
187 border-bottom: 1px solid #ddd;
188 font-size: 14px;
189 }
190
191 /*侧边栏公告*/
192 #blog-news > img {
193 /*头像*/
194 display: block;
195 margin: auto;
196 border-radius: 50%;
197 }
198
199 #profile_block {
200 font-size: 15px;
201 padding: 30px;
202 line-height: 1.8;
203 }
204
205 #profile_block > a:link {
206 color: #F60;
207 }
208
209 /*公告结束*/
210
211
212 /* 日历 */
213 #blog-calendar, #calendar {
214 width: 300px;
215 }
216
217 #blog-calendar td {
218 padding: 5px 3px;
219 font-size: 14px;
220 }
221
222 #blog-calendar td a {
223 font-weight: bold;
224 color: #59a020;
225 }
226
227 #blog-calendar table a:hover {
228 color: #59a020;
229 text-decoration: underline;
230 background: transparent;
231 }
232
233 #blog-calendar table u {
234 text-decoration: none;
235 }
236
237 /*日历结束*/
238
239 /*设置背景色和字体大小*/
240
241 body {
242 font-size: 15px;
243 box-sizing: border-box;
244 }
245
246 /*mainContent主体内容容器*/
247 #main {
248 display: flex;
249 width: 95%;
250 }
251
252 #mainContent .forFlow {
253 margin: 0 0 0 310px;
254 }
255
256 #mainContent {
257 margin: 0 0 0 -310px;
258 }
259
260 #post_detail {
261 overflow: hidden;
262 }
263
264 /* 标题title样式 */
265
266 #topics .postTitle {
267 font-size: 25px;
268 padding: 0 40px;
269 border: none;
270 box-sizing: border-box;
271 }
272
273 #cb_post_title_url {
274 border: 1px solid #55895B;
275 border-left-width: 5px;
276 border-radius: 10px;
277 border-right-width: 5px;
278 background-position: left center;
279 padding: 15px 50px;
280 width: 100%;
281 display: inline-block;
282 box-sizing: border-box;
283 }
284
285 /* 主体内容样式 */
286 .postBody {
287 padding: 20px 40px;
288 }
289
290 #cnblogs_post_body {
291 font-size: 15px;
292 }
293
294 #cnblogs_post_body h2 {
295 /*标题h2*/
296 border-left: 5px solid #55895B;
297 padding: 10px 20px;
298 line-height: 2;
299 background: #d6dbdf8a;
300 margin: 30px 0;
301 font-size: 25px;
302 }
303
304 #cnblogs_post_body h3 {
305 margin: 20px 0;
306 padding: 10px 20px;
307 border-left: 5px solid #55895B;
308 font-size: 20px;
309 }
310
311 #cnblogs_post_body h4{
312 font-size: 18px;
313 margin: 20px 0;
314 }
315
316 #topics .postDesc {
317 display: none;
318 }
319
320 /* 个性签名 */
321 #MySignature {
322 box-shadow: 8px 1px 10px #989898;
323 padding: 10px;
324 text-shadow: 1px 1px 1px #FFF;
325 font-size: 17px;
326 border-left: solid 5px #55895B;
327 background: #F3F3F3;
328 border-radius: 10px 10px 50% 10px;
329 line-height: 2.4;
330 margin: 40px 0;
331 }
332
333 #MySignature a {
334 text-decoration: none;
335 color: #4183c4;
336 font-weight: bold;
337 }
338
339 #MySignature a:hover {
340 text-decoration: underline;
341 color: #f60;
342 }
343
344 #MySignature span {
345 color: #f60;
346 }
347
348 /* 关注收藏等几个按钮 */
349 #green_channel {
350 padding: 10px;
351 margin: 20px 0;
352 font-size: 15px;
353 width: 400px;
354 }
355
356 #green_channel a {
357 border-radius: 3px;
358 text-shadow: none;
359 font-weight: normal;
360 box-shadow: none;
361 }
362
363 /* 禁用下划线 */
364 .postBody a:link, .postBody a:visited, .postBody a:active {
365 text-decoration: none;
366 }
367
368 /* 上一篇下一篇 */
369 #post_next_prev {
370 font-size: 14px;
371 color: #535353;
372 }
373
374 /*底部隐藏作者，隐藏推荐和反对*/
375 #author_profile {
376 display: none;
377 }
378
379 #div_digg {
380 display: none;
381 }
382
383 /*隐藏广告*/
384 #ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb {
385 display: none;
386 }
387
388 /*评论*/
389 /*评论列表*/
390 #blog-comments-placeholder {
391 border-radius: 10px;
392 background: #fff;
393 padding: 30px 40px;
394 }
395
396 .feedback_area_title {
397 background: url(//www.cnblogs.com/skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff;
398 border: 1px solid #55895B;
399 border-left-width: 5px;
400 border-radius: 10px;
401 border-right-width: 5px;
402 padding: 15px 50px;
403 }
404
405 /*侧边评论*/
406 li.recent_comment_body {
407 line-height: 30px;
408 }
409
410 /* 提交评论按钮 */
411 #btn_comment_submit {
412 border: solid 1px #fd6d0dd1 !important;
413 width: 90px;
414 height: 40px;
415 color: #fff !important;
416 background-color: #fd6d0dd1 !important;
417 border-radius: 5px;
418 font-size: 16px;
419 cursor: pointer;
420 }
2 标题和导航栏
标题和子标题的修改也在管理->设置中；
导航栏的控件在管理->选项中勾选，这里还包含侧边栏的控件，可以根据需要自行选择。
3 侧边栏公告
这部分的修改也在管理->设置中，不过修改前需要发邮件给博客园后台申请JS权限。
这里主要有3点：
一、动态时钟
这个我是copy了详谈如何定制自己的博客园皮肤 - 静默虚空 - 博客园；
二、背景音乐
背景音乐的添加需要进入网易云音乐网页后，找到喜欢的音乐，生成外链播放器，然后复制那段HTML代码到侧边栏公告即可。
这里要注意：博客园不支持iframe插件，所以只能采用flash插件！
三、访客统计
这个功能可以去http://www.flagcounter.com/完成，同样复制HTML代码到侧边栏公告即可。我的博客把这个放到了页脚html代码中，所以可以看到这个在左下角显示。
完整的博客侧边栏公告代码，注意：其中的网易云音乐和访问人数需要自己生成外链！
1 <!--- 自定义侧边栏 --->
2 <div class="mySideBar">
3 <p id="p_b_follow"><a href="javascript:void(0);" onclick="follow('ca5022e9-4171-4a38-e168-08d4ef52ecb5')">+Follow Me</a></p>
4 <p>student@XJTU</p>
5 <p>Email：andrew_ren@163.com</p>
6 </div>
7
8 <!--- 动态时钟 --->
9 <embed wmode="transparent" src="https://files.cnblogs.com/files/jingmoxukong/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="240" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
10
11 <!--- 网易云音乐 --->
12 <embed src="//music.163.com/style/swf/widget.swf?sid=26511658&type=2&auto=1&width=320&height=66" width="340" height="86" allowNetworking="all"></embed>
13
14 <!--- 访问人数 --->
15 <a href="https://info.flagcounter.com/myYT"><img src="https://s01.flagcounter.com/count2/myYT/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_4/viewers_0/labels_1/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
16
17 <!--- 导入js库 --->
18 <script src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
19 <canvas id="c_n4" width="860" height="968" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
最后点击保存即可。