博客園頁面設置

時間 2019-11-11

標籤博客頁面設置简体版

原文原文鏈接

註冊博客園已經老久老久了，如今依然是個老菜鳥。最近開始嘗試着寫寫博客，一來能夠督促本身，二來能夠回顧本身在過去到底學了些什麼。看到不少人的博客都很炫，本身也就開始慢慢摸索。這裏把本身摸索的一些經驗總結一下。javascript

1、編輯器

1.連接

咱們不少時候須要引用別人或本身之前的代碼。這裏能夠很方便的加上連接。

一個添加連接一個取消連接

選中要連接的文字右鍵就能夠選中連接。

填入URL地址，目標通常選擇在新窗口打開。

2.書籤

插入書籤

寫入書籤名

這樣能夠在文章開始寫目錄跳到任意的書籤。右鍵插入連接的時候能夠綁定到書籤。

3.html

點擊能夠看到源碼，任意修改。

4.插入代碼

這裏能夠選中編程語言。若是代碼量比較多能夠所有摺疊。

2、後臺設置

1.頁面定製CSS代碼

這裏就能夠和前面編輯器聯合起來。在編輯器裏面的文字選中格式時

若是選擇的是標題那麼對應的是<h>標籤，這樣就能夠在用CSS控制其樣式。

顯示效果，風格統一的小標題。

2.公告欄

公告欄通常你們都是貼上本身的靚照，加上本身的簡單介紹。

還有的就是掛個漂亮的flash。

例1：

<embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

例2：

<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;" width="200" height="160">
<param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;">
<param name="AllowScriptAccess" value="always">
<param name="wmode" value="opaque"></object>
<span style="color: #3E8BD6;font-size: 9pt;">求投食~（點圖便可）</span>

補充：發現新大陸好多時鐘flash 地址

例3：

還能夠貼上

<!--把「XXXXXXXX」替換成你的QQ號-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=XXXXXXXX&amp;site=qq&amp;menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:XXXXXXXX:13" alt="有事您Q我" title="有事您Q我"></a>

例4：

還能夠貼上你的主頁被訪問次數

先註冊

<div style="font-size:20px;font-weight:bold;">訪次:&nbsp;<a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=XXXXXXXX&amp;c=XXXXXXXX" alt="AmazingCounters.com"></a>&nbsp;次</div>

例5：

園友補充這個詳細記錄了ip什麼功能詳細強大 http://www.clicki.cn/

3.頁首Html代碼

這個我見得比較多的就是你們的GitHub，源碼管理。

如：

這裏還有不少別的樣式圖片（注意，要將上圖連接中的you換成本身的在Github上的帳號）

GitHub在windows中的使用

4.開通js權限

博客園默認是沒有開通js權限的。能夠向管理員申請開通。郵箱：contact@cnblogs.com

開通js權限後能夠作不少事。

如：在公告欄中本身寫個日曆或者時鐘表什麼的。個人就是本身加了個時鐘表

時鐘代碼

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5     <title></title>
  6 </head>
  7 <body>
  8     <div style="text-align: center; color: #ffffff;">
  9         <canvas id="canvas" height="160" width="160">
 10             您的瀏覽器不支持html5的canvas
 11         </canvas>
 12         <div style="height: 10px">
 13         </div>
 14         <div style="background-color: #0094ff;">
 15             <div id="div1">
 16             </div>
 17             <div id="div2">
 18             </div>
 19         </div>
 20     </div>
 21     <script type="text/javascript">
 22         window.onload = function () {
 23             var canvas = document.getElementById("canvas");
 24             var can = canvas.getContext("2d");
 25             var radius = 80; //半徑
 26             var centre = [80, 80]; //中心點
 27 
 28             setInterval(function () {
 29                 mydrawclock();
 30 
 31             }, 1000);
 32             //   mydrawclock();
 33 
 34             function mydrawclock() {
 35                 //清空畫布
 36                 can.clearRect(0, 0, 500, 500);
 37                 //鐘的大小（圓）
 38                 can.fillStyle = "#ebf0eb";
 39                 can.beginPath();
 40                 can.arc(centre[0], centre[1], radius, 0, Math.PI * 2, true);
 41                 can.closePath();
 42                 can.fill();
 43                 //中心點
 44                 can.fillStyle = "#0094ff";
 45                 can.beginPath();
 46                 can.arc(centre[0], centre[1], 4, 0, Math.PI * 2, true);
 47                 can.closePath();
 48                 can.fill();
 49                 //畫鍾 寬度 度數 顏色 長度
 50                 function drawclock(w, d, c, l) {
 51                     can.beginPath();
 52                     can.strokeStyle = c;
 53                     can.lineWidth = w;
 54                     can.moveTo(centre[0], centre[1]);
 55                     can.lineTo(centre[0] + (radius - l) * Math.cos(d), centre[1] + (radius - l) * Math.sin(d));
 56                     can.stroke();
 57                 }
 58 
 59                 var date = new Date();
 60                 //由於畫圓是從3點鐘方向開始的 因此要減去
 61                 var hours = date.getHours();
 62                 var minutes = date.getMinutes();
 63                 var seconds = date.getSeconds();
 64                 var day = date.getDay();
 65 
 66                 drawclock(4, (hours - 3 + minutes / 60) * 30 * Math.PI / 180, "#0094ff", 33);
 67                 drawclock(3, (minutes - 15 + seconds / 60) * 6 * Math.PI / 180, "#0094ff", 22);
 68                 drawclock(2, (seconds - 15) * 6 * Math.PI / 180, "#0094ff", 1);
 69 
 70                 document.getElementById("div1").innerHTML = hours + ":" + minutes + ":" + seconds;
 71 
 72                 switch (day) {
 73                     case 0:
 74                         day = "星期天";
 75                         break;
 76                     case 1:
 77                         day = "星期一";
 78                         break;
 79                     case 2:
 80                         day = "星期二";
 81                         break;
 82                     case 3:
 83                         day = "星期三";
 84                         break;
 85                     case 4:
 86                         day = "星期四";
 87                         break;
 88                     case 5:
 89                         day = "星期五";
 90                         break;
 91                     case 6:
 92                         day = "星期六";
 93                         break;
 94                     default:
 95                         break;
 96                 }
 97 
 98                 document.getElementById("div2").innerHTML = day; // "</br>" + day;
 99                 // centre[0], centre[1]
100                 //畫分鐘刻度
101                 for (var i = 0; i < 60; i++) {
102                     var angle = i * 6 * Math.PI / 180;
103                     can.strokeStyle = "red";
104                     can.beginPath();
105                     can.lineWidth = 1;
106                     can.moveTo(centre[0] + radius * Math.cos(angle), centre[1] + radius * Math.sin(angle));
107                     can.lineTo(centre[0] + (radius - 5) * Math.cos(angle), centre[1] + (radius - 5) * Math.sin(angle));
108                     can.stroke();
109                 }
110                 //畫時鐘刻度
111                 for (var i = 0; i < 12; i++) {
112                     var angle = i * 30 * Math.PI / 180;
113                     can.strokeStyle = "#0094ff";
114                     can.lineWidth = 2;
115                     can.beginPath();
116                     can.moveTo(centre[0] + radius * Math.cos(angle), centre[1] + radius * Math.sin(angle));
117                     can.lineTo(centre[0] + (radius - 8) * Math.cos(angle), centre[1] + (radius - 8) * Math.sin(angle));
118                     can.stroke();
119                 }
120             }
121 
122 
123         }
124     </script>
125 </body>
126 </html>

View Code

5.推薦按鈕

本來的推薦按鈕是在最底下，不熟悉的人有時候可能找都找不到。

爲了方便咱們能夠設置樣式，使之懸浮。

/*快速評論*/
#div_digg {
  position: fixed;
  bottom: 10px;
  right: 15px;
  border: 2px solid #ECD7B1;
  padding: 10px;
  width: 140px;
  background-color: #fff;
  border-radius: 5px 5px 5px 5px !important;
  box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

若是開通了js權限的話，咱們還能夠動態添加別的快捷按鈕。

如：關注，回到頂部，快速評價。

 1 <script type="text/javascript">
 2         /**
 3           不知道爲何頁面加載完成時還讀不到div_digg。可能也是動態生成的。
 4           因此這裏只能用定時器 不斷的讀取，當讀取到了再給它動態添加快捷按鈕
 5         **/
 6 
 7         //自定義 定時器[當元素加載完成是執行回調函數]
 8         function customTimer(inpId, fn) {
 9             if ($(inpId).length) {
10                 fn();
11             }
12             else {
13                 var intervalId = setInterval(function () {
14                     if ($(inpId).length) {  //若是存在了
15                         clearInterval(intervalId);  // 則關閉定時器
16                         customTimer(inpId, fn);              //執行自身
17                     }
18                 }, 100);
19             }
20         }
21 
22         //頁面加載完成是執行
23         $(function () {
24             customTimer("#div_digg", function () {
25                 var div_html = "<div class=''>\
26                         <a href='javascript:void(0);' onclick='c_follow();'>關注</a>\
27                          &nbsp;|&nbsp;\
28                         <a href='#top'>頂部</a>\
29                          &nbsp;|&nbsp;\
30                         <a href='javascript:void(0);' onclick=\" $('#tbCommentBody').focus();\">評論</a>\
31                    </div>";
32                 $("#div_digg").append(div_html);
33                 //tbCommentBody    
34             });
35         });
36  </script>

ps：平時看你們的博客看得特爽。今天才知道原來寫博客是件費時又費力的事情。不過寫博客的好處也只有誰寫誰知道！

你們若是有本身的竅門謝謝分享到評論區。

-----------------------------------------------------分割線---------------------------------------------------------------------------------------

有朋友問代碼具體放哪裏，有朋友問放入了代碼爲何沒有效果。那麼我在這裏詳細說說。

1.爲何沒有效果

注意沒有效果頗有多是沒有開通js權限。那麼怎麼測試本身是否有js權限呢？很簡單放入一段測試代碼就ok了。

<script type="text/javascript">console.log("測試成功~");</script>

把這句代碼放入「頁腳Html代碼」保存便可。而後刷新你的頁面。按F12點擊Console，是否有打印了「測試成功」。（博客園貌似屏蔽了alert函數，因此不能彈出測試。）

若是沒有，那麼你能夠發郵件到contact@cnblogs.com確認是否開通，沒有開通的話能夠申請開通。

2.代碼具體放哪裏

具體步驟圖片分解

公告，頁首和腳本地方均可以放html和js代碼。

這裏最後注意了！！以前我沒有測試原來代碼直接貼進去是有問題的。不知道博客園有什麼限制仍是什麼。

像我這樣引用js是沒有問題的。至於你的js代碼放哪裏？你能夠上傳到博客園的文件，也能夠用https://git.oschina.net 或 https://github.com

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。