注冊部落格園已經老久老久了，現在依然是個老菜鳥。最近開始嘗試着寫寫部落格，一來可以督促自己，二來可以回顧自己在過去到底學了些什麼。看到很多人的部落格都很炫，自己也就開始慢慢摸索。這裡把自己摸索的一些經驗總結一下。
目錄
一、編輯器
1.連結
2.書簽
3.html
4.插入代碼
二、背景設定
1.頁面定制CSS代碼
2.公告欄
3.首頁html代碼
4.開通js權限
5.推薦按鈕
補充
1.為什麼沒效果
2.代碼具體放哪裡
一、編輯器
1.連結
我們很多時候需要引用别人或自己以前的代碼。這裡可以很友善的加上連結。
一個添加連結 一個取消連結
選中要連結的文字右鍵就可以選中連結。
填入URL位址，目标一般選擇在新視窗打開。
2.書簽
插入書簽
寫入書簽名
這樣可以在文章開始寫目錄 跳到任意的書簽。右鍵插傳入連結接的時候可以綁定到書簽。
3.html
點選
可以看到源碼，任意修改。
4.插入代碼
這裡可以選中程式設計語言。如果代碼量比較多可以全部折疊。
二、背景設定
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&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="200" height="160">
<param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&">
<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&uin=XXXXXXXX&site=qq&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;">訪次: <a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=XXXXXXXX&c=XXXXXXXX" alt="AmazingCounters.com"></a> 次</div> 例5：
園友補充 這個詳細記錄了ip什麼 功能詳細 強大 http://www.clicki.cn/
3.頁首Html代碼
這個我見得比較多的就是大家的GitHub，源碼管理。
如：
這裡還有很多别的樣式圖檔 （注意，要将上圖連結中的you換成自己的在Github上的賬号）
GitHub在windows中的使用
4.開通js權限
部落格園預設是沒有開通js權限的。可以向管理者申請開通。郵箱：[email protected]
開通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 | \
28 <a href='#top'>頂部</a>\
29 | \
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函數，是以不能彈出測試。）
如果沒有，那麼你可以發郵件到[email protected]确認是否開通，沒有開通的話可以申請開通。
2.代碼具體放哪裡
具體步驟圖檔分解
公告，頁首和腳本地方都可以放html和js代碼。
這裡最後注意了！！之前我沒有測試 原來代碼直接貼進去是有問題的。不知道部落格園有什麼限制還是什麼。
像我這樣引用js是沒有問題的。至于你的js代碼放哪裡？你可以上傳到部落格園的檔案，也可以用https://git.oschina.net 或 https://github.com
- 學習本是一個不斷抄襲、模仿、練習、創新的過程。
- 雖然，園中已有本人無法超越的同主題博文，為什麼還是要寫。
- 對于自己，博文隻是總結。在總結的過程發現問題，解決問題。
- 對于他人，在此過程如果還能附帶幫助他人，那就再好不過了。
- 由于部落客能力有限，文中可能存在描述不正确，歡迎指正、補充！
- 感謝您的閱讀。如果文章對您有用，那麼請輕輕點個贊，以資鼓勵。
- 工控物聯Q群：995475200