正文

自定义博客园主题和自动生成目录(代码片段)

wbxk  wbxk  2023-01-29  380

关键词：

背景

最近觉得博客园网站太老旧了，不好看，并且没有移动端，于是想转到简书去写博客（主要简书有移动端），写出来的效果还是不满意，于是又回到了博客园，只能自己修改下博客主题了。

于是百度了下，找到了两篇参考博客：

主题修改参考了：一套简约漂亮的响应式博客园主题皮肤

添加目录参考了：让博客园博客自动生成章节目录索引

在他们的基础上做了相应的修改，值得注意的一点是，主题修改必须注意当前所使用的默认模板是什么，如果不一样可能会造成样式错乱，因为我发现博客园不同的官方主题之间有的存在HTML结构的差异。我这里默认使用的主题是：

技术分享图片

操作方法

在博客园的后台管理中找到设置。

技术分享图片

在下面会有“页面定制CSS代码”和“博客侧边栏公告（支持HTML代码）”，后者需要申请JS权限，不过也可以直接把JS代码贴到“页脚Html代码”。

技术分享图片

然后点击保存即可。

主题修改

这里我添加了目录的一个CSS，使用的话可以直接拷贝。注意这个是针对博客皮肤为coffee的样式修改。

@font-face 
  font-family: ‘FontAwesome‘;
  font-style: normal;
  font-weight: normal;
  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‘);

* 
  margin: 0;
  padding: 0;

body 
  background: #eee;
  color: #444;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
  text-shadow: 0 0 1px transparent;
  color:#505050;

@media screen and (max-width: 1260px) 
  body 
    margin: 0px;
  

@media screen and (max-width: 600px) 
  body 
    font-size: 13px;
  

h1,h2,h3,h4,h5,h6 font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
h1 font-size: 1.8em;
h2 font-size: 1.5em;
h3 font-size: 1.3em;
a text-decoration: none;color: #258fb8;
a:hover text-decoration: underline;
#home
    margin: 0 auto;
    width: 85%;
    background-color: #fff;
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    border-radius: 20px;

#tbCommentBody width: 100%;
#blogTitle width:50%;margin-top: -10px;text-align: left;
.alignright float: right;
.clearfix zoom: 1;
.clearfix:before,.clearfix:after content: "";display: table;
.clearfix:after clear: both;
#header, #main, #footer width: 100%;margin: 0 auto;
@media screen and (max-width: 1260px) 
  #main 
    width: 95%;
  

#mainContent 
  width: 75%;
  float: left;
  margin-left: 10px;

@media screen and (max-width: 1260px) 
  #main-col 
    width: 100%;
    margin-right: -300px;
  

@media screen and (max-width: 900px) 
  #main-col 
    margin-right: 0;
    float: none;
  

@media screen and (max-width: 1260px) 
  #wrapper 
    margin-right: 300px;
  

@media screen and (max-width: 900px) 
  #wrapper 
    margin-right: 0;
  

#header 
  text-shadow: 0 0 1px #fff;
  margin: 20px auto 30px;
  position: relative;
  height: 60px;
  color: #999;

#header a 
  color: #999;

#header a:hover 
  color: #258fb8;
  text-decoration: none;

#header h1 
  /*font-weight: normal;*/
  font-size: 40px;
  margin-left: 10px;
  font-family: "楷体";

#header h2 
  font-weight: normal;
  font-size: 1.5em;
  margin-top: 10px;
  margin-left: 10px;
  font-family: "楷体";

#mainContent #navigator 
  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  width: 100%;
  font-size: 16px;
    border-bottom: 1px solid #ededed;
    border-top: 1px solid #ededed;
    height: 50px;
    line-height: 50px;
    clear: both;
    margin-top: 25px;

#mainContent #navigator ul 
  list-style: none;

#mainContent #navigator ul li 
  float: left;
  /*width: 10%;*/
  text-align: left;
  margin-right: 50px;

#mainContent .blogStats 
  float: right;
  font-size: 13px;

.topicListFooter 
  margin-top:30px;
  margin-bottom: 30px;
  margin-right: 0 !important;

.topicListFooter a 
  display: inline !important;
  padding: 10px 20px;
  background: #ddd;
  color: #999;
  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  text-shadow: 0 0 1px #fff;
  border-radius: 5px;

.topicListFooter a:hover 
  background: #258fb8;
  color: #fff;
  text-decoration: none;
  text-shadow: none;

.topicListFooter .prev:before 
  content: ‘f053‘;
  padding-right: 10px;
  font-family: FontAwesome;

.topicListFooter .next:after 
  content: ‘f054‘;
  padding-left: 10px;
  font-family: FontAwesome;

article 
  -webkit-box-shadow: 1px 2px 3px #ddd;
  box-shadow: 1px 2px 3px #ddd;
  background: #fff;

article.page 
  padding-left: 20px;

article.page .icon 
  display: none;

.postIcon:before 
  content: ‘f016‘;

article.photo .icon:before 
  content: ‘f030‘;

article.link .icon:before 
  content: ‘f0c1‘;

article.link .title a:after 
  content: ‘f08e‘;
  color: #999;
  font: 12px FontAwesome;
  padding-left: 10px;
  vertical-align: super;

/******************************************以下自定义样式***********************************************/
#MySignature
border-top: 2px solid #ccc;
    padding-top: 20px;

.pager
    border-bottom: 1px dashed #ddd;
    padding-bottom: 30px;
margin-bottom: -30px;

#blog-calendar
  width:0px;
  height:0px;
  display: none !important;

#TopViewPostsBlock ul li
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: inline-block;
    height: 30px;
    line-height: 30px;

.day .dayTitle
      display: none !important;

//去掉广告
#ad_t2,#opt_under_post,.c_ad_block,#under_post_news,#under_post_kb
    display: none !important;

.postTitle, .entrylistPosttitle 
  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1.8em;
  padding: 20px 20px 15px 0px;
  background: #fff;
  border-radius: 10px 10px 0px 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid #ddd;

.entrylistPostSummary, .postCon, .postBody 
  padding: 0px 0px 15px 0px;
  -webkit-box-shadow: 1px 2px 3px #ddd;
  box-shadow: 0 2px 0 #ddd;
  background: #fff;
  position: relative;

.postDesc, .entrylistItemPostDesc 
  padding: 0px 20px 15px 0px;
  color: #999;
  font-size: 0.9em;
  line-height: 16px;
  position: relative;
  min-height: 16px;
  background: #fff;
  border-bottom: 1px dashed #ccc;

#blog-calendar 
  display: none;

@media screen and (max-width: 600px) 
  .postCon 
    padding-left: 0px;
  

.postIcon 
  height: 0px;
  margin-right: 25px;
  position: relative;
  top: 25px;
  left: 25px;
  color: #258fb8;

@media screen and (max-width: 600px) 
  article header .icon 
    display: none;
  

.postIcon:before 
  position: absolute;
  font: 32px FontAwesome;
  top: 0;
  left: 0;
  width: 32px;
  text-align: center;

article header time 
  color: #999;
  font: 0.9em "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  margin-bottom: 5px;
  display: block;
  line-height: 1;

article header .title 
  font-weight: normal;

article header .title a 
  color: #444;

article header .title a:hover 
  color: #258fb8;
  text-decoration: none;

#cnblogs_post_body 
  text-align: justify;
  line-height: 1.6;

#cnblogs_post_body p,
#cnblogs_post_body blockquote,
#cnblogs_post_body ul,
#cnblogs_post_body ol,
#cnblogs_post_body dl,
#cnblogs_post_body table,
#cnblogs_post_body iframe,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6,
#cnblogs_post_body .video-container 
  margin-top: 15px;

#cnblogs_post_body blockquote 
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-style: italic;
  font-family: "Georgia", serif;
  font-size: 1.2em;
  padding: 0 30px 15px;

#cnblogs_post_body blockquote footer 
  border-top: none;
  font-size: 0.8em;
  line-height: 1;
  margin: 20px 0 0;
  padding-top: 0;

#cnblogs_post_body blockquote footer cite:before 
  content: ‘—‘;
  color: #ccc;
  padding: 0 0.5em;

#cnblogs_post_body code,
#cnblogs_post_body pre 
  font-family: Monaco, Menlo, Consolas, Courier New, monospace;

#cnblogs_post_body code 
  background: #eee;
  color: #666;
  padding: 0 5px;
  margin: 0 2px;
  font-size: 0.9em;
  border: 1px solid #ddd;
  -webkit-border-radius: 3px;
  border-radius: 3px;

#cnblogs_post_body pre 
  background: #eee;
  overflow: auto;
  padding: 7px 15px;
  -webkit-border-radius: 2px;
  border-radius: 2px;

#cnblogs_post_body pre code 
  background: none;
  padding: 0;
  margin: 0;
  border: none;
  -webkit-border-radius: 0;
  border-radius: 0;

#cnblogs_post_body ul ul,
#cnblogs_post_body ol ul,
#cnblogs_post_body dl ul,
#cnblogs_post_body ul ol,
#cnblogs_post_body ol ol,
#cnblogs_post_body dl ol,
#cnblogs_post_body ul dl,
#cnblogs_post_body ol dl,
#cnblogs_post_body dl dl 
  margin-top: 0;

#cnblogs_post_body h1,
#cnblogs_post_body h2 
  font-weight: bold;
  /* border-bottom: 1px solid #ddd; */
  padding-bottom: 10px;
  margin-top: 20px;
  border: 1px dashed #aaa;
  padding: 8px;
  /* opacity: 0.8; */
  background: #eee;
  border-radius: 6px;

/*#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6 
    font-weight: normal;
    background: #eee;
    border-radius: 6px;
    color: Red;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    height: 25px;
    line-height: 25px;
    margin: 18px 5px !important;*/
    padding: 8px;
    opacity: 0.8;
    border: 1px dashed #aaa;
*/
.postBody img, 
.entrylistPostSummary img, .postCon img,
.postBody video 
  max-width: 100%;
  height: auto;
  border: none;

#cnblogs_post_body iframe 
  border: none;

#cnblogs_post_body .caption 
  display: block;
  margin-top: 5px;
  color: #999;
  position: relative;
  font-size: 0.9em;
  padding-left: 25px;

#cnblogs_post_body .caption:before 
  content: ‘f040‘;
  position: absolute;
  font: 1.3em FontAwesome;
  position: absolute;
  left: 0;
  top: 3px;

#cnblogs_post_body .video-container 
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;

#cnblogs_post_body .video-container iframe,
#cnblogs_post_body .video-container object,
#cnblogs_post_body .video-container embed 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;

#cnblogs_post_body .pullquote 
  float: right;
  border: none;
  padding: 0;
  margin: 1em 0 0.5em 1.5em;
  text-align: left;
  width: 45%;
  font-size: 1.5em;

#blog-comments-placeholder, #comment_form 
  padding: 20px;
  background: #fff;
  -webkit-box-shadow: 1px 10px 10px #ddd;
  box-shadow: 10px 10px 10px #ddd;
  margin-bottom: 50px;
    border: 1px solid #ccc;
padding-top:0;

.feedback_area_title 
  margin-bottom: 15px;
  font-size: 1.8em;

.feedbackItem 
  border-bottom: 1px dashed #CCC;
  margin-bottom: 10px;
  padding: 5px;

.color_shine background: rgb(226, 242, 255);
.feedbackItem:hover -webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;
#comment_form .title 
  font-weight: normal;
  margin-bottom: 15px;

#ad_under_post_holder 
  display: none;

.entrylistTitle 
  color: #999;
  font-weight: normal;
  margin-bottom: 30px;
  text-shadow: 0 0 1px #fff;

.entrylistTitle:before 
  font-family: FontAwesome;
  /*content: ‘f07b‘;*/
  padding-right: 15px;

.archive 
  -webkit-box-shadow: 1px 2px 3px #ddd;
  box-shadow: 1px 2px 3px #ddd;
  border-bottom: 1px solid #ddd;
  margin-bottom: 50px;

.archive article 
  -webkit-box-shadow: none;
  box-shadow: none;

.archive article .post-content 
  margin-bottom: 0;

#sideBar
  width: 22%;
  line-height: 1.8em;
  float: right;

@media screen and (max-width: 900px) 
  #sideBar 
    float: none;
    width: 100%;
  

.catListLink, .catListMyTeams, .catListComment, .catListFeedback 
  display: none;

.search, .newsItem, .catListPostCategory, .catListPostArchive, .catListTag, .catListView, .catListBlogRank 
  background: #fff;
  -webkit-box-shadow: 1px 2px 3px #ddd;
  box-shadow: 10px 10px 10px #ddd;
  margin-bottom: 30px;
  word-wrap: break-word;
  border-radius: 10px;
  margin-top: 23px;
  border: 1px solid #ddd;

#blog-sidecolumn h3, .newsItem h3 
  padding: 15px 20px;
  font-size: 1em;
  border-bottom: 1px solid #ddd;
  font-weight: normal;

#blog-sidecolumn ul, .newsItem #blog-news 
  font-size: 0.9em;
  padding: 15px 20px;

#blog-sidecolumn ul,
#blog-sidecolumn ol,
#blog-sidecolumn dl 
  list-style: none;

#blog-sidecolumn ul ul,
#blog-sidecolumn ol ul,
#blog-sidecolumn dl ul,
#blog-sidecolumn ul ol,
#blog-sidecolumn ol ol,
#blog-sidecolumn dl ol,
#blog-sidecolumn ul dl,
#blog-sidecolumn ol dl,
#blog-sidecolumn dl dl 
  list-style: disc;
  margin-left: 20px;

#q 
  background: #fff;
  font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: 1em;
  padding: 10px 15px;
  border: 1px solid #ddd;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #999;
  height: 100%;

#q:focus 
  color: #444;

/*隐藏搜索框中的无用组件*/
.mySearch 
  display: none;


#sideBar .tag small 
  margin-left: 15px;
  color: #999;

#sideBar .tag small:before 
  content: ‘(‘;

#sideBar .tag small:after 
  content: ‘)‘;

#sideBar .twitter li 
  border-bottom: 1px solid #ddd;
  padding: 15px 20px;
  font-size: 0.9em;

#sideBar .twitter li:last-of-type 
  border-bottom: none;

#sideBar .twitter small 
  display: block;
  margin-top: 10px;
  color: #999;
  line-height: 1;

#sideBar .tagcloud .entry 
  padding-right: 5px;

#sideBar .tagcloud a 
  margin-right: 10px;
  display: inline-block;

#footer 
  color: #999;
  margin-bottom: 50px;
  font: 0.9em/1.6 "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
  text-shadow: 0 0 1px #fff;
  text-align:center;
  margin: 30px 0px 50px;

.entry .gist 
  background: #eee;
  border: 1px solid #ddd;
  margin-top: 15px;
  padding: 7px 15px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  text-shadow: 0 0 1px #fff;
  line-height: 1.6;
  overflow: auto;
  color: #666;

.entry .gist .gist-file 
  border: none;
  font-family: inherit;
  margin: 0;
  font-size: 0.9em;

.entry .gist .gist-file .gist-data 
  background: none;
  border-bottom: none;

.entry .gist .gist-file .gist-data pre 
  padding: 0 !important;
  font-family: Monaco, Menlo, Consolas, Courier New, monospace;

.entry .gist .gist-file .gist-meta 
  background: none;
  color: #999;
  margin-top: 5px;
  padding: 0;
  text-shadow: 0 0 1px #fff;
  font-size: 100%;

.entry .gist .gist-file .gist-meta a 
  color: #258fb8;

.entry .gist .gist-file .gist-meta a:visited 
  color: #258fb8;

figure.highlight 
  background: #eee;
  border: 1px solid #ddd;
  margin-top: 15px;
  padding: 7px 15px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  text-shadow: 0 0 1px #fff;
  line-height: 1.6;
  overflow: auto;
  position: relative;
  font-size: 0.9em;

figure.highlight figcaption 
  color: #999;
  margin-bottom: 5px;
  text-shadow: 0 0 1px #fff;

figure.highlight figcaption a 
  position: absolute;
  right: 15px;

figure.highlight pre 
  border: none;
  padding: 0;
  margin: 0;

figure.highlight table 
  margin-top: 0;
  border-spacing: 0;

figure.highlight .gutter 
  color: #999;
  padding: 7px 10px 7px 5px !important;
  border-right: 1px solid #ddd;
  text-align: right;

figure.highlight .code 
  padding: 7px 7px 7px 10px !important;
  border-left: 1px solid #fff;
  color: #666;

pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc 
  color: #93a1a1;
  font-style: italic;

pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title 
  color: #859900;

pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor 
  color: #2aa198;

pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl,
pre .literal,
pre .id 
  color: #268bd2;

pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type 
  color: #b58900;

pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title 
  color: #cb4b16;

pre .deletion 
  color: #dc322f;

.feedbackListSubtitle  position: relative;
.feedbackManage width: 160px;position: absolute;right: 0;text-align: right;
.cnblogs_code_toolbar display: none;
#cnblogs_post_body overflow: hidden;
#cnblogs_post_body ol  padding-left: 40px;
#cnblogs_post_body ul  margin-left: 35px;
.fixedReadRank  position: fixed; top: 20px; width: 270px; 
.fixedRecRank  position: fixed; top: 360px; width: 270px; 
figure.highlight  margin-top: 0; padding: 0;
figure table width: 100%; margin: 0 !important;
#cnblogs_post_body pre  padding: 0; 
#cnblogs_post_body th, #cnblogs_post_body td  padding: 0; 
.cnblogs_code pre  padding: 7px 15px !important; background: #f5f5f5;border: 0;margin-top: 0;
.cnblogs_code th border: 1px solid silver; padding: 3px;
.cnblogs_code  padding: 0;
/*评论标题*/
.feedback_area_title 
    padding:10px;
    font-size:24px;
    font-weight:bold;
    color:#aaa;
    border-bottom:1px dashed #ccc;

.feedbackListSubtitle 
    font-size:12px;
    color:#888;

.feedbackListSubtitle a 
    color:#888;

.comment_quote 
    background:#FCFAAC;
    padding:15px;
    border:1px solid #CCC;

#commentform_title 
    color:#aaa;
    background-image:none;
    background-repeat:no-repeat;
    margin-bottom:10px;
    padding:10px 20px 10px 10px;
    font-size:24px;
    font-weight:bold;
    border-bottom:1px dashed #ccc;

/*评论框*/
#comment_form 
    margin:10px 0;
    padding:25px;
    border-radius: 10px;
    height: 343px;
    overflow: hidden;

.commentform 
    margin:10px 0;
    padding:10px 20px;
    background:#fff;

/*评论输入域*/
#tbCommentBody 
    font-family:‘MIcrosoft Yahei‘;
    margin-top:10px;
    background:white;
    color:#333;
    border:2px solid #fff;
    box-shadow:inset 0 0 8px #aaa;
    height:120px;
    font-size:14px;
    min-height:120px;
    border-radius: 10px;

/*评论条目*/
.feedbackItem 
    font-size:14px;
    line-height:24px;
    margin:10px 0;
    padding:20px;

.feedbackListSubtitle 
    font-weight:normal;


/*green_channel*/
#green_channel 
    text:align:right;
    padding-left:0px;
    font-weight:normal;
    font-size:13px;
    width:100%;
    border:1px dashed #ccc;
    color:#fff;
    border-radius:4px;
    margin:5px auto;

@media screen and (max-width: 768px) 
  body 
    font-size: 13px;
  
  #mainpadding:0px !important;
  #mainContentwidth: 96%;float: left;margin: 0px 2%;
  #sideBar display: none;
  #blogTitle width: 100%;float:none;margin: 20px auto 0 !important;
  #headerheight:auto !important;margin: 20px auto 5px;
  #header #navigatorwidth: 100%;text-align: center;float:none;
  #header #navigator ulwidth: 100%;margin-left: 6%;
  #header #navigator ul li float: left;width: 25%;text-align: center;margin-right:0px;
  .postTitle, .entrylistPosttitlefont-size:14px;padding: 20px 20px 15px 0px;
  .postDesc, .entrylistItemPostDescpadding: 0px 20px 15px 0px;
  #green_channelpadding:0px !important;
  #blog_statsdisplay: none;

#blog-news labelbox-shadow:5px 5px 5px #cccccc;text-shadow:5px 5px 5px #cccccc;border-radius:5px;
#div_digg
    padding: 5px;
    border-radius: 5px;
    position: fixed;
    left: 0;
    bottom: 80px;
    width:80px;
    z-index:100;

.diggit
background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat;
    width: 60px;
    height: 60px;

#div_digg .diggnum
position: absolute;
    bottom: -20px;
    left: 6px;
    background: #D0D0D0;
    padding: 2px 0;
    display: block;
    color: #555;
    font-size: 12px;
    text-align: center;
    width: 60px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    font-weight: bold;

.buryit
display: none;

/*scroll to top*/
#scrollTop div
    left:0;
    overflow:hidden;
    position:absolute;
    top:0;
    width:149px;
    margin:0;
    padding:0

#scrollTop .level-2
    background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent;
    display:none;
    height:250px;
    opacity:0;
    z-index:1

#scrollTop .level-3
    background:none repeat scroll 0 0 transparent;
    cursor:pointer;
    display:block;
    height:150px;
    z-index:2

#scrollTop
 background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent;
    cursor:default;
    display:block;
    height:250px;
    overflow:hidden;
    position:fixed;
    right:0;
    top:80%;
    width:149px;
    z-index:11;
    margin:-125px 0 0;
    padding:0

/*评论带头像，且支持旋转*/
.feedbackCon img:hover 
　　-webkit-transform: rotateZ(360deg);
　　-moz-transform: rotateZ(360deg);
　　-ms-transform: rotateZ(360deg);
　　-o-transform: rotateZ(360deg);
　　transform: rotateZ(360deg);

 
.feedbackCon img 
　　border-radius: 40px;
　　-webkit-transition: all 0.6s ease-out;
　　-moz-transition: all 0.5s ease-out;
　　-ms-transition: all 0.5s ease-out;
　　-o-transition: all 0.5s ease-out;
　　transition: all 0.5s ease-out;

/*目录样式*/
#mulustyle
　　font-weight: bold;
　　padding-bottom: 10px;
　　margin-top: 20px;
　　border: 1px dashed #aaa;
　　padding: 8px;
　　background: #eee;
　　border-radius: 6px;
　　font-size: 21px;

添加目录

注意：下述js代码中提取的h2和h3作为章节的标题，如果你的标题不是h2和h3还请在代码注释的地方自行修改。该代码除了在文章的最开始生成目录索引之外，还会在每一个章节最后右下角(也就是下一个章节标题的右上角)会生成一个“回到顶部”的链接，以方便读者回到目录。

<script language="javascript" type="text/javascript">

// 生成目录索引列表
function GenerateContentList()

    var mainContent = $(‘#cnblogs_post_body‘);
    var h2_list = $(‘#cnblogs_post_body h2‘);//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if(mainContent.length < 1)
        return;
 
    if(h2_list.length>0)
    
        var content = ‘<a name="_labelTop"></a>‘;
        content += ‘<div id="navCategory">‘;
        content += ‘<p id="mulustyle"><b>目录</b></p>‘;
        content += ‘<ul>‘;
        for(var i=0; i<h2_list.length; i++)
        
            var go_to_top = ‘<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label‘ + i + ‘"></a></div>‘;
            $(h2_list[i]).before(go_to_top);
            
            var h3_list = $(h2_list[i]).nextAll("h3");//这里定义了h3
            var li3_content = ‘‘;
            for(var j=0; j<h3_list.length; j++)
            
                var tmp = $(h3_list[j]).prevAll(‘h2‘).first();
                if(!tmp.is(h2_list[i]))
                    break;
                var li3_anchor = ‘<a name="_label‘ + i + ‘_‘ + j + ‘"></a>‘;
                $(h3_list[j]).before(li3_anchor);
                li3_content += ‘<li><a href="#_label‘ + i + ‘_‘ + j + ‘">‘ + $(h3_list[j]).text() + ‘</a></li>‘;
            
            
            var li2_content = ‘‘;
            if(li3_content.length > 0)
                li2_content = ‘<li><a href="#_label‘ + i + ‘">‘ + $(h2_list[i]).text() + ‘</a><ul>‘ + li3_content + ‘</ul></li>‘;
            else
                li2_content = ‘<li><a href="#_label‘ + i + ‘">‘ + $(h2_list[i]).text() + ‘</a></li>‘;
            content += li2_content;
        
        content += ‘</ul>‘;
        /*content += ‘</div><p>&nbsp;</p>‘;
        content += ‘<p style="font-size:18px"><b>正文</b></p>‘;*/
        if($(‘#cnblogs_post_body‘).length != 0 )
        
            $($(‘#cnblogs_post_body‘)[0]).prepend(content);
        
       


GenerateContentList();
</script>

自定义博客园主题样式(代码片段)

背景知识了解图片url获取1.将选定的背景图上传至博客园服务器将选定的图片上传至自己博客园的相册中2.获取上传至博客园服务器背景图的url打开相册，选择需要的背景图片-->单击-->在打开的图片上方右键-->复制图片地... 查看详情

博客园自定义主题样式(代码片段)

记录我在定制个人blog页面效果时遇到的技巧及方法等。基本流程设定博客皮肤为BluSky定制首页代码：引入外部CSS页顶博主名字及副标题在首页html内输入以下代码可添加博主名到页面顶端，也可添加副标题：<headerclass="main-h... 查看详情

如何快速的自定义博客园背景图片(代码片段)

博客园的主题背景风格基本是简洁朴素风格，毕竟淳朴码农的撸码知识共享圣地不需要花里胡哨，但是作为新一代的撸码青年，我还是忍不住把博客园简单的美化了一下打开https://sm.ms/上传一张你喜欢的图片，这个网站很好使，... 查看详情

博客园主题自定义美化(代码片段)

第一步，上传自定义的css 在浏览器中直接打开https://files.cnblogs.com/files/JetpropelledSnake/cnblogs.css，然后按ctrl+s，即可将本人博客用到的自定义css下载下来。接着在博客的管理页面，找到文件选项卡，上传刚刚下载的文件：&n... 查看详情

博客园界面风格代码风格自定义设置(代码片段)

博客园设置界面风格如何添加一个侧边栏导航1.在自定义脚本里面添加如下js##<script>functionCreatePostNavigator()//目录标题的divvarnavigatorTitleDiv='<divid="navigatorTitleDiv">隐藏目录</div>'//目录所有内容的divvarnavigato... 查看详情

博客园博文生成章节目录(代码片段)

一、自动生成章节目录为博文添加目录索引可以得到更加舒适的阅读感受，为此，本文为博客园博客自动生成章节目录索引。1.介绍本代码同时适配如下三种复杂标题情况：“只有一级标题”或“只有二级标题”或“只有三级标... 查看详情

制作博客园目录导航(代码片段)

...功能。 1.向博客园申请JS权限我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟... 查看详情

博客园自动生成目录及页面美化

一、自动生成目录1、在博客园后台管理页面选择“设置”2、生成三级目录2.1、操作步骤找到页脚HTML代码，复制自动生成目录的js代码，保存即可代码如下：ViewCode2.2、效果：3、生成一级目录3.1、操作步骤：找到页脚HTML代码，复... 查看详情

博客园自定义样式(代码片段)

...景，一些星星的悬浮飘扬那么我们怎么来设置博客园的自定义的样式，而不是不个性的默认界面呢？第一步：进入你的首页，打开管理=>设置第二步：我在博客皮肤中选择了SimpleMemory，这个皮肤相对来说要轻快、干净，更方便... 查看详情

自定义博客园首页样式(代码片段)

1、来个效果图2、进入博客园后台（设置->添加页首Html代码），将下面的代码复制粘贴保存即可11<scriptsrc="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">22<canvasid="c_n4"width="860"height="958"style="position:fixed;top:0 查看详情

博客园主题修改分享(代码片段)

马上就要过年了，看着我这毫无生气的博客，感觉有点亏待它。博客过年，马上安排！本篇部分知识基于上两篇博客博客园主题修改分享和博客园主题修改分享-脚本篇。先上效果图1.设置全局css变量主要是通过css3的变量设置，... 查看详情

博客园样式自定义（待更新）(代码片段)

...己学习了，你们怎么不早点来？！！！废话不多说，怎么定义博客园的代码呢。步骤一，屏蔽掉博客园的皮肤样式=>百度一下，你就知道=>其实就是编辑里面打个勾？步骤二，如果你要修改JS=>在编辑的地方申请一下=>一... 查看详情

自定义博客园布局样式(代码片段)

自定义主体样式参数在皮肤里先挑一个现成的模板开始我们的定制之旅，这里我选了SimpleMemory，我还是喜欢这种朴素的风格。选择SimpleMemory模板上图成品的修改源码如下：bodybackground-color:#176d4694;#homewidth:90%;background-color:#f‘f‘f;.... 查看详情

博客园自定义鼠标点击特效(代码片段)

需要申请JS权限，JS权限申请通过之后，将如下代码放入侧边栏，页首，页末，都可以复制如下代码<scripttype="text/javascript">/*鼠标特效*/vara_idx=0;jQuery(document).ready(function($)$("body").click(function(e)vara=newArray("?Linux?","?Shell?","? 查看详情

博客园自定义页面风格设计后续篇(页面设计模式及代码高亮鼠标点击效果升级)(代码片段)

前言在之前所写过的博客园自定义页面风格设计篇中，我们已经说明了其中两种风格的页面设计，鼠标图案的修改，公告栏的设置，背景音乐的制作，关于CSS以及用Canvas和requestAnimFrame做动画特效，在本文中我们将教大家制作当... 查看详情

博客园基于simplememory主题私人订制(代码片段)

博客园后台设置管理->设置：页面定制CSS代码：/*禁用下划线*/.postBodya:link,.postBodya:visited,.postBodya:activetext-decoration:none;/*上一篇下一篇*/#post_next_prevfont-size:14px;color:#535353;/*底部隐藏作者，隐藏推荐和反对*/#author_profile 查看详情

博客园自定义样式修改标签页的icon图标(代码片段)

...一样的个性化icon图标呢？按照以下四步你也可以实现自定义标签图标。FromTo第一步：挑挑拣拣选一张icon图标（尺寸不要太大）不然加载会很慢如果想通过自己的图片生成favicon，可以使用这个网站：FaviconGenerator.Forreal.第二步：... 查看详情

自定义博客园样式(代码片段)

页面定制CSS代码需要禁用博客园自带的页面定制CSS代码 @font-facefont-family:‘RainFate‘;font-style:normal;font-weight:normal;src:url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix")format(‘embedded-opentype‘),url("http://blog.zhaishidan.cn/css/font/... 查看详情