Blog Customization
0 前言
从大二开始写博客,主要为了记录自己学习过程中的问题。尝试使用过CSDN、博客园等公共服务,也用Github pages搭建过自己的博客,但效果都不令人满意。CSDN广告太多,界面乌烟瘴气,而且很多博客内容都是抄袭而来;博客园模板比较单一,而且对Markdown的支持不友好;Github pages很自由,但是搭建以及发布文章比较麻烦。
后来在网上浏览别人的博客园时,才发现原来是可以自己定制博客的,遂写此文。
1 皮肤
皮肤也就是博客的背景,博客园提供了一些模板,可以在管理->设置->博客皮肤中选择。
如果你对于CSS比较熟悉,那完全可以自己写一个网页的样式,然后勾选禁用模板默认CSS。
如果你不熟悉Web开发,可以找一些别人写好的页面定制代码,复制到页面定制CSS代码框中。
/*
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/ pre {
/*控制代码不换行*/
white-space: pre;
word-wrap: normal;
} .cnblogs-markdown .hljs {
display: block;
overflow: auto;
padding: 1.3em 2em !important;
font-size: 16px !important;
background: #272822 !important;
color: #FFF;
max-height: 700px;
} .hljs,
.hljs-tag,
.hljs-subst {
color: #f8f8f2;
} .hljs-strong,
.hljs-emphasis {
color: #a8a8a2;
} .hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
color: #ae81ff;
} .hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
color: #a6e22e;
} .hljs-strong {
font-weight: bold;
} .hljs-emphasis {
font-style: italic;
} .hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
color: #f92672;
} .hljs-symbol,
.hljs-attribute {
color: #66d9ef;
} .hljs-params,
.hljs-class .hljs-title {
color: #f8f8f2;
} .hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
color: #e6db74;
} .hljs-comment,
.hljs-deletion,
.hljs-meta {
color: #75715e;
} /* 黑色主题makedown代码结束 */ /*makedown行间代码样式 */
.cnblogs-markdown code {
color: #c7254e;
border: none !important;
font-size: 1em !important;
background-color: #f9f2f4 !important;
font-family: sans-serif !important;
} /*引言样式*/
blockquote {
border-left: 5px solid #55895B;
} blockquote strong {
color: red;
font-size: 18px;
} /*博客顶部容器包括标题、副标题、导航栏*/
/* 博客标题和副标题 */
#blogTitle {
overflow: hidden;
height: auto;
text-align: center;
} #blogTitle h1 {
font-size: 35px;
width: 100%;
margin-left:;
} #blogTitle h2 {
margin-left:;
width: 100%;
font-size: 20px;
font-weight: bold;
color: #000;
} /*博客导航栏 */
#navList {
float: left;
} #navList li {
border: none;
font-size: 16px;
} .blogStats {
display: none;
} /*sideBar博客侧边栏容器*/
#sideBar {
width: 300px;
box-sizing: border-box;
margin-left: 30px;
padding:;
} .newsItem, .catListComment, .catListEssay, .catListView, .catListFeedback,
#blog-calendar, #sidebar_postcategory, #sidebar_postcategory, #sidebar_postarchive, #sidebar_search {
border-radius: 10px;
box-shadow: 1px 2px 3px #A7A8AD;
background-color: #fff;
} #sideBarMain h3, .newsItem h3 {
font-size: 1.2em;
height: 50px;
line-height: 50px;
text-indent: 0.5em;
background: url(http://www.cnblogs.com/skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff;
padding: 0 0 0 50px;
margin-bottom:;
border: 1px solid #55895B;
border-left-width: 5px;
border-radius: 10px;
border-right-width: 5px;
} #sideBarMain ul {
background-color: #fff;
padding: 15px 20px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
} #sideBarMain li {
line-height: 40px;
border-bottom: 1px solid #ddd;
font-size: 14px;
} /*侧边栏公告*/
#blog-news > img {
/*头像*/
display: block;
margin: auto;
border-radius: 50%;
} #profile_block {
font-size: 15px;
padding: 30px;
line-height: 1.8;
} #profile_block > a:link {
color: #F60;
} /*公告结束*/ /* 日历 */
#blog-calendar, #calendar {
width: 300px;
} #blog-calendar td {
padding: 5px 3px;
font-size: 14px;
} #blog-calendar td a {
font-weight: bold;
color: #59a020;
} #blog-calendar table a:hover {
color: #59a020;
text-decoration: underline;
background: transparent;
} #blog-calendar table u {
text-decoration: none;
} /*日历结束*/ /*设置背景色和字体大小*/ body {
font-size: 15px;
box-sizing: border-box;
} /*mainContent主体内容容器*/
#main {
display: flex;
width: 95%;
} #mainContent .forFlow {
margin: 0 0 0 310px;
} #mainContent {
margin: 0 0 0 -310px;
} #post_detail {
overflow: hidden;
} /* 标题title样式 */ #topics .postTitle {
font-size: 25px;
padding: 0 40px;
border: none;
box-sizing: border-box;
} #cb_post_title_url {
border: 1px solid #55895B;
border-left-width: 5px;
border-radius: 10px;
border-right-width: 5px;
background-position: left center;
padding: 15px 50px;
width: 100%;
display: inline-block;
box-sizing: border-box;
} /* 主体内容样式 */
.postBody {
padding: 20px 40px;
} #cnblogs_post_body {
font-size: 15px;
} #cnblogs_post_body h2 {
/*标题h2*/
border-left: 5px solid #55895B;
padding: 10px 20px;
line-height:;
background: #d6dbdf8a;
margin: 30px 0;
font-size: 25px;
} #cnblogs_post_body h3 {
margin: 20px 0;
padding: 10px 20px;
border-left: 5px solid #55895B;
font-size: 20px;
} #cnblogs_post_body h4{
font-size: 18px;
margin: 20px 0;
} #topics .postDesc {
display: none;
} /* 个性签名 */
#MySignature {
box-shadow: 8px 1px 10px #989898;
padding: 10px;
text-shadow: 1px 1px 1px #FFF;
font-size: 17px;
border-left: solid 5px #55895B;
background: #F3F3F3;
border-radius: 10px 10px 50% 10px;
line-height: 2.4;
margin: 40px 0;
} #MySignature a {
text-decoration: none;
color: #4183c4;
font-weight: bold;
} #MySignature a:hover {
text-decoration: underline;
color: #f60;
} #MySignature span {
color: #f60;
} /* 关注收藏等几个按钮 */
#green_channel {
padding: 10px;
margin: 20px 0;
font-size: 15px;
width: 400px;
} #green_channel a {
border-radius: 3px;
text-shadow: none;
font-weight: normal;
box-shadow: none;
} /* 禁用下划线 */
.postBody a:link, .postBody a:visited, .postBody a:active {
text-decoration: none;
} /* 上一篇下一篇 */
#post_next_prev {
font-size: 14px;
color: #535353;
} /*底部隐藏作者,隐藏推荐和反对*/
#author_profile {
display: none;
} #div_digg {
display: none;
} /*隐藏广告*/
#ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb {
display: none;
} /*评论*/
/*评论列表*/
#blog-comments-placeholder {
border-radius: 10px;
background: #fff;
padding: 30px 40px;
} .feedback_area_title {
background: url(//www.cnblogs.com/skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff;
border: 1px solid #55895B;
border-left-width: 5px;
border-radius: 10px;
border-right-width: 5px;
padding: 15px 50px;
} /*侧边评论*/
li.recent_comment_body {
line-height: 30px;
} /* 提交评论按钮 */
#btn_comment_submit {
border: solid 1px #fd6d0dd1 !important;
width: 90px;
height: 40px;
color: #fff !important;
background-color: #fd6d0dd1 !important;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
2 标题和导航栏
标题和子标题的修改也在管理->设置中;
导航栏的控件在管理->选项中勾选,这里还包含侧边栏的控件,可以根据需要自行选择。
3 侧边栏公告
这部分的修改也在管理->设置中,不过修改前需要发邮件给博客园后台申请JS权限。
这里主要有3点:
一、动态时钟
这个我是copy了详谈如何定制自己的博客园皮肤 - 静默虚空 - 博客园;
二、背景音乐
背景音乐的添加需要进入网易云音乐网页后,找到喜欢的音乐,生成外链播放器,然后复制那段HTML代码到侧边栏公告即可。
这里要注意:博客园不支持iframe插件,所以只能采用flash插件!
三、访客统计
这个功能可以去http://www.flagcounter.com/完成,同样复制HTML代码到侧边栏公告即可。我的博客把这个放到了页脚html代码中,所以可以看到这个在左下角显示。
完整的博客侧边栏公告代码,注意:其中的网易云音乐和访问人数需要自己生成外链!
<!--- 自定义侧边栏 --->
<div class="mySideBar">
<p id="p_b_follow"><a href="javascript:void(0);" onclick="follow('ca5022e9-4171-4a38-e168-08d4ef52ecb5')">+Follow Me</a></p>
<p>student@XJTU</p>
<p>Email:andrew_ren@163.com</p>
</div> <!--- 动态时钟 --->
<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"> <!--- 网易云音乐 --->
<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> <!--- 访问人数 --->
<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> <!--- 导入js库 --->
<script src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
<canvas id="c_n4" width="860" height="968" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
最后点击保存即可。
4 自适应手机屏幕
博客园的模板并没有自适应手机屏幕,可以参考这篇博文https://www.cnblogs.com/lvdabao/p/5245247.html
修改CSS中的参数,就可以得到自适应移动设备的网页。
Blog Customization的更多相关文章
- 日向blog开发记录
一点历史关于,Sonne Blog 2016.03.25springmvc + hibernate框架搭建.2016.04.21日向blog首页.2016.04.24分页实现.2016.04.30登录 ...
- blog (后续更新)
设计Model(设计数据库) from django.db import models # Create your models here. class BlogsPost(models.Model) ...
- tensorflow 一些好的blog链接和tensorflow gpu版本安装
pading :SAME,VALID 区别 http://blog.csdn.net/mao_xiao_feng/article/details/53444333 tensorflow实现的各种算法 ...
- http://blog.csdn.net/java2000_wl/article/details/8627874
http://blog.csdn.net/java2000_wl/article/details/8627874
- [Android Pro] http://blog.csdn.net/wuyinlei/article/category/5773375
http://blog.csdn.net/wuyinlei/article/category/5773375
- android 蓝牙 http://blog.csdn.net/u012843100/article/details/52384219
http://blog.csdn.net/u012843100/article/details/52384219
- 【三】用Markdown写blog的常用操作
本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...
- django开发个人简易Blog—nginx+uwsgin+django1.6+mysql 部署到CentOS6.5
前面说完了此项目的创建及数据模型设计的过程.如果未看过,可以到这里查看,并且项目源码已经放大到github上,可以去这里下载. 代码也已经部署到sina sea上,地址为http://fengzhen ...
- 使用Hexo搭建专属Blog
喜欢折腾的自己最开始在博客园有仿写几篇Blog,虽也可以自己改变风格,可是到底不是独立的一块儿地方,要知道独立的才是自己的;有属于自己独立的域名和Blog,真真是一件很爽的存在.在各种大牛的分享下在G ...
随机推荐
- 使用 python 查看谁没有交作业
话说实验报告每天都要查人数,何不用程序实现 使用 python 查看谁没有交作业 version 1.0 程序嘛,肯定是可以改进的.使用该程序的前提是实验报告文件名中包含学号信息.将以上程序放在实验报 ...
- django->model模型操作(数据库操作)
一.字段类型 二.字段选项说明 三.内嵌类参数说明abstract = Truedb_table = 'table_name' #表名,默认的表名是app_name+类名ordering = ['id ...
- 中阶d03.4 JDBC_DAO
1.环境准备(单项目下用,在大jdbc项目下只用配置一次) jdbc的驱动(mysqlxxjdbc.jar).util工具(包装释放资源.建立连接.访问properties文件等方法) 2.dao的概 ...
- "html富文本"组件:<richtext> —— 快应用原生组件
    <template> <div class="container-full"> <richtext type="html&q ...
- cmd批处理转义字符%的详细解释
cmd批处理转义字符%的详细解释 在命令行中使用for时不需要双%,这源于命令解释器对命令行与批处理的处理方式不同. 1.%是个ESCAPE字符,通常将之译为转义字符,但也有更形象的译名脱逸字符.逃逸 ...
- 用Jenkins集成ios项目设置多scheme,同一代码自动输出多个环境包 实现便捷切换API环境
Jenkins 安装使用参考我的博客http://www.cnblogs.com/zhujin/p/9064820.html Xcode 配置:说明 一个schema 对应一套环境(如生产,测试),一 ...
- 对于之间不平凡的我,为什么会选择IT!(上)
我相信有很多小伙伴看了我发布的文章后,不知道对大家有无启发,在这里我都非常感谢大家的收看,因为现在收疫情影响,我也看到很多朋友私信我,看你经历这么多是经历了什么,如果大家在上一篇发现的时候会看见我父亲 ...
- mvc传递json数据到view简单实例
基于extjs4.2 controller //存储数据的类 public class DataLink { public string Name { get; set; } public strin ...
- sqli-labs通关教程----21~30关
第二十一关 第二十一关我们正常登陆后看到,uname后面变成了一堆字母 这是经过base64编码之后的样子,所以就照葫芦画瓢,将我payload的uname后面的部分转码成base64,这里可以用正常 ...
- stand up meeting 12/18/2015 ~12/20/2015(weekend)
part 组员 工作 工作耗时/h 明日计划 工作耗时/h UI 冯晓云 完成主页面设计和非功能性PDF reader UI设计实现 ...