最新的CSDN博客自定义方案（公告栏，皮肤切换）-2018年7月

摘要

本文重点讲述：1）怎么自定义公告栏；2）怎么切换博客皮肤。

前言

本来今天在学习人工智能的，但是中间对一些大神在CSDN右侧（或者左侧）添加的自定义的公告栏（比如CSDN官博d的右侧边栏就自定义了一个叫做“学习交流群”的公告栏）产生了兴趣，所以自己也尝试设置了一下，这里记录如下，分享给大家。

一、自定义公告栏

1）登录CSDN之后，找到“栏目管理”

图一 红色标记处即为栏目管理

2）之后在这个页面添加公告栏就行，现在规定是每人只能添加一个自定义的公告栏，如图一：我添加了一个叫做“Something else”的公告栏。

3）点击编辑，即可以自定义公告栏的内容。注意：因为CSDN的公告栏编辑内容是支持html等格式的，所以会写html的同学就可以更加顺遂心意的定制自己喜欢的内容了

我自己写的是：

<p font-size=20px> Welcome to my blog.</p>
<br>
<p> My moto: 保持警惕，时刻准备战斗。</p>
<br>
<p>For those who are interested in my projects, you can visit <a href="https://github.com/DehengYang" target="_blank"><b>My GitHub</b></a> </p>
<br>
<p><img src="https://img-blog.csdn.net/20180703094031458?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTI3ODI2NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70"></a></p>

4）最后的视觉效果：

图二 公告栏视觉效果截图

二、博客皮肤切换

1）为什么要特意用一段讲皮肤切换？（没有技术含量我会浪费笔墨？）
因为！—— CSDN的博客皮肤这一栏只能预览，不能选中切换！…（也有可能是我看差了，但是我目前确实没看到“切换”选项）

下面讲下怎么操作 [1]：

2）依旧是登录，找到“博客设置”（就在“栏目管理”的上面）

3）按“F12”打开网页调试器，可以看到网页的html代码（前端代码）：

图四 网页调试器（在此修改代码）

我们找到”博客皮肤”这一块对应的html代码，发现这里是这么写的：

图五 博客皮肤对应代码

他们的共同点：class都是opt-skin-box

4）替换第一个div class里面的name和id（替换成你想要的皮肤对应的值）。（具体教程可以参考[1]）

图六 改变皮肤对应的值

5）重新进入自己的博客界面，你会发现自己的博客皮肤已经发生了改变。

三、CSDN的markdown语法

有时候总觉得写对自己的CSDN博客排版不满意，这里可以借鉴 [2].

总结

写的好累，这个截图，解释起来太麻烦了。下次写的时候要大概统筹一下，提前保存一些比较重要的图片，到时候直接信手拈来就行，因为边做边搞感觉有点累，而且复杂，工作量大。

参考文献

[1] 2018最新csdn修改博客皮肤模板教程. https://blog.csdn.net/qq_37142340/article/details/80696318
[2] CSDN-markdown语法——缩进、图片居中、字体、字号与颜色. https://blog.csdn.net/so_geili/article/details/53028039