小松鼠嚇了一跳,有了魔法眼鏡後,這世界看起來完全不一樣了

顯示具有 blog 標籤的文章。 顯示所有文章
顯示具有 blog 標籤的文章。 顯示所有文章

2007年3月28日 星期三

blogger 自動隱藏全文 修改

這是之前的自動隱藏全文的修改版本。雖然早已有很多不同的自動隱藏全文方式,但是自己寫可以符合自己的偏好,順便熟悉一下一些語法。比方說,我不喜歡一開始先把全文顯示,然後等 sidebar 出現後才隱藏全文。這個版本目前然仍有許多缺點。
相較於原來的版本,這個版本修正了一些缺點且能讓沒有 script 的人也能隱藏全文,也因為使用了 jQuery 比較短了一點。但是還是有 IE6 顯示不正確的毛病。這個版本仍然是要把全文放入 <div id='fullpost'> </div> 之中。修改方式如下

先展開小裝置範本。然後下面這段放在 </b:skin> 後面

<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script type='text/Javascript'>function hpactl(postid) {
if(!$("#pbody_"+postid+" #fullpost").length) $("#toggle"+postid).hide();
}
function toggled(o){
o.href="javascript:void(0)";
$("#pbody_"+$(o).attr("postid")+" #fullpost").toggle();
if(o.innerHTML!="收起全文")
o.innerHTML="收起全文";
else
o.innerHTML="...請按此繼續閱讀全文";
}
</script>
可以發現比之前的版本短了很多,因為有一部分東西移到後面了。
然後下面這段放在 <p><data:post.body/></p> 後面
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.url'>
<div expr:id='"toggle"+data:post.id'>
<a expr:href='data:post.url' onclick='toggled(this)'
expr:postid='data:post.id' onmouseover='hpactl($(this).attr("postid"))'>
...請按此繼續閱讀全文
</a></div>
<script type='text/javascript'>hpactl(&#39;<data:post.id/>&#39;);</script>
</b:if>
</b:if>
然後只要在的設定->格式->文章範本裡面放上這段文字
摘要<div id='fullpost'>全文</div>
然後就能很方便的修改變成新的 post。

2007年3月23日 星期五

實用 css 片段

2007年3月20日 星期二

兩行式 CSS 固定寬度 side bar

這是一個簡單的筆記,簡述兩行式版面,右邊 side bar 固定寬度,左邊主要欄位浮動寬度的作法。

我個人不喜歡在 blog 使用那種限定像素寬度的版面,因為每個人選擇螢幕和視窗大小的自由。
一個原則是資料類型的網頁(如 blog 或者資料查詢),比較類似設計應用程式介面的思維,所以使用可調整寬度的設計會比較好,想想,如果你的 word 固定 800x600大小,會不會很難用?在 1600x1200 的螢幕下面,會不會很小?
所以說,用那種 70%:30% 或者 80%/20% 比較好了嗎?也不會,因為 side bar 的常常放一些小元件和圖片,這些都是固定寬度的,如果照比例放大縮小,對於有些螢幕太大的人,或者習慣用小視窗瀏覽的人,可能會造成 sidebar 太大太小的問題。
所以理想的版型應該是 side bar 固定寬度,主欄位變動寬度。那這樣怎麼弄呢?以 blogger 為例,原來通常是在 #content-wrapper 裡面包含一個 #sidebar-wrapper 和 #main-wrapper。如果我們要讓 #sidebar-wrapper 固定寬度,我們可以這樣改,先增加一個 #main-wrapper2 這個 style,這個將要放到 #main-wrapper 裡面。接下來的原理是,我們要讓 #main-wrapper 向左對齊佔據全部的空間,然後 #sidebar 也向左對齊,不過重點是我們把 sidebar 向左對齊的邊緣設成的,這樣原本會緊鄰在 main 右邊的 sidebar,會往左移,只要把寬度調整好, sidebar 就會和 main-wrapper 重疊。
但是這樣,因為重疊的原因,我們不能直接把文章放進 #main-wrapper,這樣文章會有一部分被遮住,這也就是我們為什麼要 #main-wrapper2 的原因,我們把他放入 #mainwrapper 中,並且調整右邊界 ,讓他不會和 sidebar 重疊,這樣就行了。
了解原理之後就比較容易自己修改了。
一個示範的 css 2.0 代碼如下:
#content-wrapper {
width: 90%;
}
#main-wrapper {
margin-left: 14px;
width: 100%;
float: left;
}
#main-wrapper2 {
margin-right: 310px;
}
#sidebar-wrapper {
width: 280px;
margin-left: -294px;
float: left;
}
這個代碼我只留下關鍵的部份,顏色等等其他的部份,保留原來的設定即可。 310 > 294 >280 是因為我要留下一些空白,這三個數字是相關的。content-wrapper 的寬度 90% 是看你兩邊的留白而定。#main-wrapper2 的樣式設定基本上可以 copy #main-wrapper,因為他其實是真正的 #main-wrapper。
最後,要修改一點 html 把 #main-wrapper2 放進 #main-wrapper。在不打開小裝置的情形下,其實大致上是如同下面的 html code
<div id="main-wrapper">$lt;div id="main-wrapper2">
<b:section class="main" id='main "showaddelement="'no"'>
<b:widget id="'Blog1'" locked="'true'" title="'blog" type="Blog" />
</b:section>
</div></div>
也就是原先包一層,現在變成包兩層了。這樣就能達到理想的效果。

2007年3月19日 星期一

一些關於 json 的用法

這個又是另外一個關於網頁技術的筆記。主要在說明利用 json 的 blog mashup 玩法

目前網路上面將資料轉成 json 的方式很多,各有優缺點。
  • 最一個方式是使用 google reader,這個很基礎,我就不多說了,可以參考DIY Google Reader 聯播網 (初階+進階)。這個用來做聯播是輕鬆如意,但是缺點是 google reader 提供的 json 只提供 summary而沒有全文。雖然 google reader 的 atom feed 有提供全文,但是似乎不吃 gdata 的 alt=json 這招。
  • 第二個方式是 Yahoo! Pipes,這個一般而言還挺不錯的,還有許多程式上的優點,比方說可以做 feed 的翻譯。不過他的 replace 模組還無法做大規模的替換, feed 的翻譯會去掉格式,而且 content 裡面的原始文字格式會亂掉。
  • 第三個方式是使用 feedburner, 可以用這個網址http://api.feedburner.com/format/1.0/JSONP?uri=ptt/beauty&callback=myappfn 來傳回 json。其中的 ptt/beauty 換成你的 feed, callback 也要換成你的 callback。這個方式基本上簡單清楚,feedburner 本身也提供 feedflare 等等花樣讓你來玩。
  • 第四種方式是使用 openkapow 產生 json。 openkapow 基本上是網頁機器人,他可以將普通網頁轉換成為 json。這個用途就很多了,用法幾乎無限。比方說你其實可以在你的網頁中讀取「任何」一個 website 的 html 都行,只要設定一個 rest,抓取body 的 html 就行了。
  • 第五種是使用內建的 json。比方支援 google data api的,或者 yahoo web 服務的,都有原生的 json 可用。

實際的使用可以參考下面是幾個簡單範例
  1. ptt beauty 縮圖。這個和之前寫的 自動縮圖bookmarlet 原理相同。 ptt 的板本身有提供 rss,但是格式有時後會出錯。我原來使用 google reader 和 yahoo pipes 都有問題,一個是只有 summary,一個是文字排版資訊會不見,最後使用 feedburner 才完成。
  2. 某日本 AV 女優部落格日翻英。這是最早的例子,所以做得不好。 這裡使用了 feedburner -> yahoo pipes 然後利用 openkapow 來翻譯。雖說是 AV 女優部落格,但是沒有什麼有色情的內容。原來打算直接 利用 yahoo pipes 做聯播和翻譯的工作,但是 yahoo 的翻譯會把格式弄不見,想要先把內文的html 做轉換,發現也會有問題,所以改用 openkapow 來進行翻譯。你會先看到日文的內容,然後自動慢慢轉換成英文。如果使用 google 翻譯時,html 格式會保留,但是 google 似乎有時會有使用限制,大量的查詢翻譯,他會停止服務。這時 openkapow 會自動改用其他翻譯引擎。這時,翻譯結果就不會保留 html 格式了。(這個範例請使用 Firefox。使用 IE 結果會不太好)(補充日翻中)
  3. 影集 Heores 的 Beaming Beeman blog 標題英翻中。同樣上面的日翻英,原本是想用這鏡子取代上面那個 AV女優的例子,但是在弄的時候,發現不能用太長的句子去翻譯,因為句子是放在 url 裡面的。這樣就要斷句,會產生大量的翻譯查詢,有點濫用翻譯系統。所以改成只翻譯標題。這個系統使用 blogger 的 gdata api而來產生 json,然後再利用 openkapow 來翻譯。
  4. Slashdot 的中文翻譯。使用 google reader 和 openkapow。
  5. 可愛過頭(cute overload)BoinBoing 的中英對照。這兩個都是使用 feedburner +openkapow。當 google 翻譯器願意為我們工作的時候,翻譯出來的文字是圖文並茂的。當 google 不工作的時候,會中英對照。翻譯速度有時後會有點慢。(主要測試平台是 flock(mozilla/firefox 類的))

2007年3月8日 星期四

blogger 自動隱藏全文

blogger 上自動隱藏全文的方法很多,這是我的作法,測試上 ie/firefox/flock 都可行,而且關掉 javascript 也 ok。當然,你的全文也是要放在 <div id='fullpost'></div> 中間。(更新:新的版本請參考這篇)

先展開小裝置範本。然後下面這段放在 </b:skin> 後面

<b:if cond='data:blog.pageType != "item"'>

<style>#fullpost {display: none;}</style>
<noscript><style>
#fullpost {display: block;}
</style></noscript>
<script type='text/Javascript'>
function toggle_display(num){
el=document.getElementById(&quot;fullpost&quot;+num);
eB=document.getElementById("toggle"+num);
if(!el) {return;}
tmp=el.style.display;
el.style.display=eB.style.display;
eB.style.display=tmp;
}

function hidePost(postid)
{
var label=document.getElementById(&quot;fullpost&quot;);
if(label!=null){
eA = document.createElement("a"); eA.setAttribute(&quot;href","javascript:toggle_display(&#39;"+postid+&quot;')");
eA.innerHTML="收起全文";
eB = document.createElement("p");
eB.appendChild(eA);
eB.setAttribute(&quot;id","toggle"+postid);
eB.style.display=&quot;block";
pa=label.parentNode;
nl = document.createElement("div");
nl.innerHTML=label.innerHTML+"<p>&quot;+eB.innerHTML+"</p>&quot;;
eA.innerHTML="...請按此繼續閱讀全文";
nl.setAttribute(&quot;id","fullpost&quot;+postid);
nl.style.display=&quot;none"
pa.removeChild(label);
pa.appendChild(nl);
pa.appendChild(eB);
}
}
</script>

</b:if>


然後 下面這段放在 <p><data:post.body/></p> 後面

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.url'>
<script type='text/javascript'>hidePost(&#39;<data:post.id/>&#39;);</script>
</b:if>
</b:if>



有些人可能會覺得要加上這個 fullpost tag 很麻煩,所以選擇那種使用行數的方式來顯示摘要。不過其實不會很麻煩,因為你只要在你的設定->格式->文章範本裡面放上這段文字就行了

摘要
<span id='fullpost'>
全文
</span>
然後就能很方便的修改變成新的 post。
其實還有另外一種方式,就是加上分行符號比方 --- , *** 或者 <hr> 或者第一段落,然後用 javascript 來判斷摘要和全文。但是因為我想要自己能完整控制摘要是什麼,全文是什麼,而不用因此破懷我的排版,所以我選擇使用 fullpost 的方式。

2007年3月5日 星期一

Mybloglog 最近訪客 Widget 使用中文

裝了 Mybloglog,因為順便可以看一下流量。能夠掌握資料,會感覺比較自在一點。
但是 Mybloglog 的 Widget 無法正確的使用中文。
搜尋了一下網路,沒有看到解法。我相信一定有人已經找到辦法用中文了,比方餵給 javascript 一些特定的編碼之類的,不過我找了一下就放棄了。
還是直接使用 DHTML 大法。

<script>
r=document.getElementById('MBL_COMM').rows;
r[0].cells[0].innerHTML="最近的訪客";
r[r.length-2].cells[0].innerHTML=
"<a href=http://www.mybloglog.com/buzz/community/weijr/>參訪我的社群</a>";
</script>

這樣就行了。
當然其實也可以把標題 text 設成空,改用 blogger 中的 sidebar 標題也行。
不過下面那個「參訪我的社群」還是得用這個方式。


**更新:
方法更新
把 mybloglog 的 c_heading_text= 設成空字串(所以標題要另外用 html 寫),然後在mybloglog 的 script 後面加上這段 script

<script>
r=(tbl=document.getElementById('MBL_COMM')).rows;
r[r.length-2].cells[0].firstChild.innerHTML='參訪我的社群';
/*因為標題那一列設成空了,所以不會出現,把第一行陰影人 You! 改成中文*/
if((ce1=r[0].cells[1]).firstChild.innerHTML=="You!"){
ce1.firstChild.innerHTML="你!";
ce1.lastChild.innerHTML="加入我的社群";
}
tbl.deleteRow(r.length-1); /*刪除最後的 mybloglog.com 資訊,也可以選擇不刪除*/
</script>