CSDN博客页面自定义左侧博客栏目
发表于2015/12/16 11:08:15 539人阅读
分类: 其他
在你点进这篇文章的时候,在左侧就可以看到一竖列的小方框了,诸如个人资料啊、博客专栏啊、搜索啊之类的。
首先要说的是这些小方框叫做“博客栏目”,而这些栏目都是可以显示、隐藏、上下交换位置的。
CSDN给我们提供了一些有用的栏目让我们可以直接使用,关于显示、隐藏、上下移动的设置方法如下:
在博客界面上方有一排按钮,在里面找到“管理博客”按钮:
进入博客管理界面。在这个界面上方有一排标签,选择“博客栏目”的标签:
就可以对CSDN提供的栏目进行设置了。
当然本文的重点不是这个简单的东西。而是自定义栏目。
现在查看本文网页左侧的我的栏目列表可以看到,在我的个人资料下方有一个“博客公告”的栏目,如下图:
可以试着点击一下QQ号和GitHub网址,点击QQ号会打开和我聊天的QQ对话框(是可以发送消息的,没事就不要给我发消息测试了哈~),而点击网址则会跳转。
这个栏目不是CSDN提供的,而是自定义的,这也是本文的目的——讲解如果自定义博客栏目。
现在进入到刚才说的博客栏目管理页面,滑到最底下,有一个添加栏目的按钮:
点击它,会出现一个栏目的编辑弹层:
在下方我们看到最多可以添加3个自定义的栏目。
首先填写标题,标题就是类似“个人资料”啊这种,我的自定义栏目标题为“博客公告”。
然后填写内容,而这个内容是支持HTML格式的,因此我们才能达成刚才说的打开QQ对话框、跳转网址等效果。
如果你是前端人员的话,到这里就可以自行发挥了,天高海阔任君写。
如果对HTML不熟悉的话,我将我的模板写出来供大家参考一下,事实上我也是参考的别人的,因为我也不是写前端的哈哈,只是略微知道一点。
<p><span style="color:black; font-size:13px; font-weight:bold">Name:</span> Cloudox</p>
<br>
<p><span style="color:black; font-size:13px; font-weight:bold">QQ:</span><a title="QQ联系" href="http://wpa.qq.com/msgrd?v=3&uin=547286013&site=qq&menu=yes" target="_blank" style="color:black; font-size:13px"> 547286013</a></p>
<br>
<p><span style="color:black; font-size:13px; font-weight:bold">Email:</span> cloudox@foxmail.com
</p>
<br>
<p><span style="color:black; font-size:13px; font-weight:bold">GitHub:</span> <a title="跳转到我的GitHub" href="https://github.com/Cloudox" target="_blank" style="color:black; font-size:13px">
https://github.com/Cloudox</a></p>
以上就是我写进内容框里的HTML代码了,这里稍微讲解一下,可以对照着我的栏目样式看:
- p标签,代表一个段落
- br标签,表示空一行
- span标签,里面的style描述文字的字体等设置。如color描述颜色,font-size描述字号等
- a标签,表示一个链接。