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

前言

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

只要你们有需求，我会尽量帮助到大家，在此感谢各位广大粉丝的支持和理解，我会尽量做到最好，希望小主们不要吝啬你们的支持和推荐，动动小手顶一顶，非常感谢大家长久的陪伴~~

全部过程都是在“管理->设置”中完成的，博客皮肤推荐使用Simple Memory，可以自适应，方便我们进行页面CSS定制

论如何改变自己的博客园，变得好不好看我就不敢保证了，也许会出现各种毛病QAQ

①拥有自己的CSS代码

我我直接用皮肤Simple Memory，没有禁用默认模板，然后当前页面的CSS代码如下：

  1 body {
  2     color: #000;
  3     background: url(https://i.loli.net/2017/10/14/59e2065123072.jpg) fixed;
  4     background-size: cover;
  5     background-repeat: repeat;
  6     font-family: "微软雅黑","Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
  7     font-size: 12px;
  8     min-height: 101%;
  9 }
 10 #blogTitle h1 {
 11     font-size: 50px;
 12     font-family: Consolas;
 13     font-weight: bold;
 14     font-style: italic;
 15     margin-top: 20px;
 16 }
 17 .catListTitle {
 18     margin-top: 21px;
 19     margin-bottom: 10.5px;
 20     text-align: left;
 21     border-left: 10px solid rgba(82, 168, 236, 0.8);
 22     padding: 5px 0 5px 10px;
 23     background-color: rgba(245,245,245,0.3);
 24 }
 25 #home {
 26     margin: 0 auto;
 27     width: 65%;
 28     min-width: 950px;
 29     background-color: rgba(255,255,255,0.8);
 30     padding: 30px;
 31     margin-top: 50px;
 32     margin-bottom: 50px;
 33     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 34 }
 35 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {
 36     background: none;
 37     margin-bottom: 35px;
 38     word-wrap: break-word;
 39 }
 40 #blog-calendar td {
 41     font-size: 12px;
 42     font-family: Consolas;
 43 }
 44 .input_my_zzk {
 45     border: 1px solid #ccc;
 46     background: none;
 47     width: 100%;
 48     height: 25px;
 49     padding-right: 30px;
 50     padding-left: 5px;
 51     outline: 0;
 52 }
 53 .CalDayHeader {
 54     background: rgba(245,245,245,0.3) !important;
 55     font-weight: 100;
 56     color: #5E5F63;
 57 }
 58 .CalTitle {
 59     background: none;
 60     width: 100%;
 61     height: 25px;
 62     text-align: center;
 63     font-size: 14px;
 64     font-weight: bold;
 65     padding: 5px 0;
 66     color: #FFF;
 67 }
 68 .CalTitle td {
 69     background: rgba(245,245,245,0.3) !important;
 70     border: 0px !important;
 71     color: #5E5F63;
 72     font-family: "Comic Sans MS";
 73 }
 74 a:link {
 75     color: cornflowerblue;
 76 }
 77 a:visited {
 78     color: cornflowerblue;
 79 }
 80 a:hover {
 81     color:cadetblue;
 82 }
 83 a:active {
 84     color:black;
 85 }
 86 .CalTodayDay {
 87     background: rgba(247,247,247,0.3) !important;
 88     color: #FFF;
 89     font-weight: bold;
 90 }
 91 .cnblogs_code {
 92     background-color: rgba(247,247,247,0.3);
 93     font-family: Consolas !important;
 94     font-size: 12px!important;
 95     border: 1px solid #ccc;
 96     padding: 5px 10px;
 97     overflow: auto;
 98     margin: 5px 0;
 99     color: #000;
100 }
101 .cnblogs_code div {
102     background-color: rgba(247,247,247,0.3);
103 }
104 .cnblogs_code_collapse {
105     border-right: gray 1px solid;
106     border-top: gray 1px solid;
107     border-left: gray 1px solid;
108     border-bottom: gray 1px solid;
109     background-color: rgba(247,247,247,0.3);
110     padding: 2px;
111 }
112 blockquote {
113     background: rgba(247,247,247,0.3);
114     border: 2px solid #efefef;
115     padding-left: 10px;
116     padding-right: 10px;
117     padding-top: 5px;
118     padding-bottom: 5px;
119     margin-top: 10px;
120     margin-bottom: 10px;
121 }
122 div.commentform input.author, div.commentform input.email, div.commentform input.url {
123     background-image: url(http://static.cnblogs.com/images/icon_form.gif);
124     border: 1px solid white !important;
125     padding: 4px 4px 4px 30px;
126     width: 300px;
127     font-size: 13px;
128     background-color: rgba(247,247,247,0.3);
129 }
130 #comment_form_container .comment_textarea {
131     width: 362px;
132     height: 200px;
133     font-size: 13px;
134     padding: 8px;
135     margin-bottom: 10px;
136     color: #555;
137     border: 1px solid white;
138     border-radius: 3px;
139     -moz-border-radius: 3px;
140     -webkit-border-radius: 3px;
141     background-color: rgba(247,247,247,0.3);
142 }
143 .cnblogs_code pre {
144 font-family: Consolas !important;
145 font-size: 12px!important;
146 word-wrap: break-word;
147 white-space: pre-wrap;
148 }
149 .cnblogs_code span {
150 font-family: Consolas !important;
151 font-size: 12px!important;
152 line-height: 1.5!important;
153 }
154 div#cnblogs_c2 {
155 display: none;
156 }
157 div#cnblogs_c1 {
158 display: none;
159 }
160 div#under_post_news {
161 display: none;
162 }
163 div#ad_t2 {
164 display: none;
165 }
166 div#under_post_kb {
167 display: none;
168 }
169 .feedbackItem {
170     margin: 10px 5px 0px;
171     padding: 5px;
172     box-shadow: 0 0 10px 0 #AAA;
173 }
174 #topics .postTitle {
175     font-size:230%;
176 }
177 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
178     color: #21759b;
179     transition: all 0.4s cubic-bezier(0, 0, 0.12, 1) 0s;
180 }
181 #cnblogs_post_body h2 {
182     border-left: 10px solid rgba(82, 168, 236, 0.3);
183     background: rgba(247,247,247, 0.3);
184     padding: 3px 10px;
185 }
186 #cnblogs_post_body h3{
187     border-left: 5px solid rgba(0, 235, 255, 0.3);
188     padding: 2px 5px;
189     background: rgba(247,247,247,0.3);
190 }
191 #cnblogs_post_body h4{
192     border-left: 5px solid rgba(222, 101, 114,0.3);
193     padding-left: 5px;
194     background: rgba(247,247,247,0.3);
195 }
196 #cnblogs_post_body h1{
197     background: rgba(247,247,247,0.3);
198     border-left: 15px solid rgba(0, 122, 255, 0.3);
199     padding: 3px 10px;
200     font-size: 175%;
201     border-right: 15px solid rgba(0, 122, 255, 0.3);
202 }
203 .buryit {
204     display: none;
205 }
206 #div_digg {
207     float: right;
208     position: fixed;
209     width: auto;
210     bottom: 10px;
211     left: 70%;
212     margin-bottom: 10px;
213     background: rgba(247,247,247,0.3);
214     margin-right: 30px;
215     font-size: 12px;
216     box-shadow: 0 0 10px 0 #AAA;
217     padding: 10px;
218     border: 2px solid rgba(82, 168, 236, 0.8);
219     text-align: center;
220     margin-top: 10px;
221 }
222 textarea {
223     background: rgba(247,247,247,0.3);
224 }
225 body{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
226 A{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
227 
228 #navigatorTitleDiv
229 {
230     padding: 3px;
231     position: fixed;
232     top:244px; 
233     right:304px;
234     font-weight:bold;
235     cursor:pointer;
236     background-color: antiquewhite;
237 }
238 
239 #navigatorDiv 
240 {
241     border-style:double;
242     padding: 10px;
243     padding-top:30px;
244     position: fixed;
245     top:240px; 
246     right:300px;
247     background-color: antiquewhite;
248 }
249 
250 /*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
251 .pln{color:#4d4d4c}ol.linenums{margin-top:0;margin-bottom:0;color:#8e908c}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fff;list-style-type:decimal!important;}@media screen{.str{color:#718c00}.kwd{color:#8959a8}.com{color:#8e908c}.typ{color:#4271ae}.lit{color:#f5871f}.pun{color:#4d4d4c}.opn{color:#4d4d4c}.clo{color:#4d4d4c}.tag{color:#c82829}.atn{color:#f5871f}.atv{color:#3e999f}.dec{color:#f5871f}.var{color:#c82829}.fun{color:#4271ae}}
252 
253 /*下面是我设置背景色，字体大小和字体*/
254 .cnblogs-markdown code{
255 background:#fff!important;
256 }
257 .cnblogs_code,.cnblogs_code span,.cnblogs-markdown .hljs{
258     font-size:16px!important;
259 }
260 
261 .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
262     font-size: 16px!important;
263 }
264 
265 .cnblogs_code, .cnblogs_code span, .cnblogs-markdown .hljs{
266 font-family:consolas, "Source Code Pro", monaco, monospace !important;
267 }

②鼠标点击效果升级

最近发现一些人的博客鼠标点击页面会跳出文字出来，有些还会有爱心的点击效果，诶，这个是怎么做出来的，聪明可爱机智的我决定去扒一扒，F12后进行分析，我发现了制作方法，然后研究做出了字样效果，具体实现方法如下：

 1 <script type="text/javascript"> 
 2 /* 鼠标特效 */ 
 3 var a_idx = 0; 
 4 jQuery(document).ready(function($) { 
 5     $("body").click(function(e) { 
 6         var a = new Array("富强","民主","和谐","文明","自由","平等","公正","法治","爱国","敬业","诚信","友善"); 
 7         var $i = $("<span/>").text(a[a_idx]); 
 8         a_idx = (a_idx + 1) % a.length; 
 9         var x = e.pageX, 
10         y = e.pageY; 
11         $i.css({ 
12             "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
13             "top": y - 20, 
14             "left": x, 
15             "position": "absolute", 
16             "font-weight": "bold", 
17             "color": "rgb(72,85,137)" 
18         }); 
19         $("body").append($i); 
20         $i.animate({ 
21             "top": y - 180, 
22             "opacity": 0 
23         }, 
24         1500, 
25         function() { 
26             $i.remove(); 
27         }); 
28     }); 
29 }); 
30 </script>

还真别说，一波神奇的操作~~~

③代码高亮设置

此篇参考rwj学姐的文章博客园设置Google-code-prettify渲染代码高亮写的，学姐真的好棒啊，It's crazy！！！

不管了，Google-Code-Prettify代码高亮效果就是棒(๑•̀ㅂ•́)و✧

首先说一下用pretty的缺点

  • 之前的TinyMCE编辑器下发布代码，如果是插入代码的两个按钮里的右边的那个，pretty渲染后会变成错乱的，<span>标签都会显示出来。
    解决方法就是手动去改以前的文章（这个过程可以让你逃避一下复杂的现实世界，还可以回顾一下以前写过的东西，好吧。。其实就是要花很长时间去干重复的工作）。
  • 如果要设置行号，Markdown编辑模式的代码会渲染成一行一块，很奇怪，因为每一行都有<code>标签，所以只好选择不要行号。

接下来是设置的步骤

首先要确保你已经开启js功能。

jQuery博客园已经自动加载了。就不用我们加了。
prettify.js是在这里下载的：https://code.google.com/p/google-code-prettify/
博客设置页面的页脚Html代码：

<script src="https://files.cnblogs.com/files/flipped/prettify.js"></script>
<script type="text/javascript">
(function() {
     $("pre").addClass("prettyprint");
     prettyPrint();
})();
</script>

配色和字体

默认的配色不喜欢，可以设置css，推荐参考https://jmblog.github.io/color-themes-for-google-code-prettify/ 例如我的就是：

/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.pln{color:#4d4d4c}ol.linenums{margin-top:0;margin-bottom:0;color:#8e908c}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fff;list-style-type:decimal!important;}@media screen{.str{color:#718c00}.kwd{color:#8959a8}.com{color:#8e908c}.typ{color:#4271ae}.lit{color:#f5871f}.pun{color:#4d4d4c}.opn{color:#4d4d4c}.clo{color:#4d4d4c}.tag{color:#c82829}.atn{color:#f5871f}.atv{color:#3e999f}.dec{color:#f5871f}.var{color:#c82829}.fun{color:#4271ae}}

/*下面是我设置背景色，字体大小和字体*/
.cnblogs-markdown code{
background:#fff!important;
}
.cnblogs_code,.cnblogs_code span,.cnblogs-markdown .hljs{
    font-size:16px!important;
}

.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
    font-size: 16px!important;
}

.cnblogs_code, .cnblogs_code span, .cnblogs-markdown .hljs{
font-family:consolas, "Source Code Pro", monaco, monospace !important;
}

然后就很OK了qwq！！！

posted @ 2018-02-25 20:40  Angel_Kitty  阅读(6711)  评论(60)  编辑  收藏  举报