花水妹

[Module] FeedBurner (D6 only)

花水木 — Sat, 04 Apr 2009 08:49:51 +0000

這個網站的前身是Wordpress，本來是個純部落格的架構，然後RSS訂閱都是使用Feedburner來計算。換成Drupal之後，Feedburner訂閱數驟減，才想起我沒把預設的RSS換成Feedburner連結，所以可能有些人變成是訂閱未經Feedburner燒錄的RSS。

今天介紹的Drupal模組功能跟Wordpress的FeedSmith相同，主要都是幫你把你的站內RSS訂閱轉換成Feedburner的URL，都很好用，以下有本站擷圖。

不過這個模組只支援Drupal 6.x，且目前是beta版，從去年八月底就無更新了。

相關網頁:

官方模組頁面

正體中文支援站模組頁面

Plurk2:花水木版圓角作法&原始檔

花水木 — Thu, 19 Feb 2009 06:08:04 +0000

這個貼紙的圓角邊框作法是參考這個網站製作的。
http://www.schillmania.com/content/projects/even-more-rounded-corners/

他的好處是

沒有javascript，速度快
只需要一張圖就可以有圓角邊框
區塊寬和高都可以隨意設定
透明的背景，很漂亮

他的壞處是

內容如果太複雜有時會跑版
XHTML/CSS code不算簡潔
圖檔不算小(15~20K)

不過對我來說好處大於壞處，所以還是使用了。背景圖檔他有給原始檔，可以去那邊下載，本文最下面的下載是Plurk2貼紙的背景。有PLURKPlug字樣。

作法

在HTML的地方輸入

<div class="dialog">
 <div class="content">
  <div class="t"></div>
  這裡放你的內容
 </div>
 <div class="b"><div></div></div>
</div>

在CSS的地方輸入

/* 
  -- Even more rounded corners with CSS: Base stylesheet --
*/
 
.dialog {
 position:relative;
 margin:0px auto;
 min-width:8em;
 max-width:760px; /* based on image dimensions - not quite consistent with drip styles yet */
 color:#fff;
 z-index:1;
 margin-left:12px; /* default, width of left corner */
 margin-bottom:0.5em; /* spacing under dialog */
}
 
.dialog .content,
.dialog .t,
.dialog .b,
.dialog .b div {
 background:transparent url(dialog2-blue-800x1600.png) no-repeat top right;
 _background-image:url(dialog2-blue.gif);
}
 
.dialog .content {
 position:relative;
 zoom:1;
 _overflow-y:hidden;
 padding:0px 12px 0px 0px;
}
 
.dialog .t {
 /* top+left vertical slice */
 position:absolute;
 left:0px;
 top:0px;
 width:12px; /* top slice width */
 margin-left:-12px;
 height:100%;
 _height:1600px; /* arbitrary long height, IE 6 */
 background-position:top left;
}
 
.dialog .b {
 /* bottom */
 position:relative;
 width:100%;
}
 
.dialog .b,
.dialog .b div {
 height:30px; /* height of bottom cap/shade */
 font-size:1px;
}
 
.dialog .b {
 background-position:bottom right;
}
 
.dialog .b div {
 position:relative;
 width:12px; /* bottom corner width */
 margin-left:-12px;
 background-position:bottom left;
}
 
.dialog .hd,
.dialog .bd,
.dialog .ft {
 position:relative;
}
 
.dialog .wrapper {
 /* extra content protector - preventing vertical overflow (past background) */
 position:static;
 max-height:1000px;
 overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
}
 
.dialog h1
.dialog p {
 margin:0px; /* margins will blow out backgrounds, leaving whitespace. */
 padding:0.5em 0px 0.5em 0px;
}
 
.dialog h1 {
 padding-bottom:0px;
}

事實上他的CSS寫得很細，但不代表完全不需要微調，我甚至還改了許多選擇器(Selector)的名稱，所以其實我的code現在很亂，應該要來整理一下了。

Plurk2:噗浪插頭的貼紙美化

花水木 — Thu, 19 Feb 2009 04:22:03 +0000

plurk.tw

Plurk Plug(噗浪插頭XD)樣式目前有3種，範例如下：

PLURK² Clean Style：
乾淨的版本，沒有CSS，所以會直接套用你原本部落格的CSS。

PLURK²Hana Style：
較花俏的版本。

ph2(Plurk Hana 2) Style：
比較中性、適合各種佈景的部落格。(但有用jQuery)

這應該是第一次，畫出來的東西真的把他用程式套成可以貼的貼紙。看到Gene貼到他的部落格，感覺頗有趣的。

噗浪插頭 = Plurk Plug = Plurk2

不過當我試著貼一張到自己部落格，我發現我的部落格CSS都用太兇了。
比如說我把文章內文的所有圖片，都padding(偏移)了10px，因為我想要這樣的效果。

但Plurk2貼紙貼上去之後，因為這張貼紙是javascript自動會寫入內容，並非iframe的方式，所以不只自己的CSS會生效，部落格本身的CSS Selector如果碰巧有指到這張貼紙，那也會生效。因此貼紙裡的圖片也變成有padding:10px這個屬性。很醜。

這部份不難，就找到貼紙專屬的CSS，然後加上：

padding:0;
margin:0;

這是最簡單的CSS Reset。我另外也在其他html元素也加上這個東西。不過不確定還會不會有其他問題，目前只能等大家測了。

另外，我還有個問題就是，一般CSS教學都說以下語法要寫在<head></head>之間，
<link rel="stylesheet" type="text/css" href="plurk-plug.css">

可是當貼紙想要使用這個語法，不可能貼在<head></head>裡面，但貼在body裡面也是生效的！不知會不會有什麼後遺症？

本站RSS訂閱一覽

花水木 — Wed, 18 Feb 2009 02:18:50 +0000

往下拉到最後，看右邊，會看到一個「RSS訂閱一覽」。這是剛才完成的，因為不是每個人都想照單全收我的所有文章呀！所以我苦心把不同分類的Feed都分開來讓人訂閱，並有個清楚的說明。

點這邊看本站RSS訂閱一覽

其實每個項目都很推薦訂閱，因為會在RSS Feed出現的文章，都會是我用心寫的東西。也就是說，其實有些文章是不會出現在RSS Feed裡面的，而標準就是由我來判斷囉！有些無聊的公告性、流水帳的文章就不會放到RSS Feed裡面，所以你可以放心訂閱，絕對不會讓你的Reader變一堆垃圾喔！

這個靈感是來自於數位時代的RSS一覽(但目前有點故障的感覺)。我喜歡他們那樣一目瞭然的感覺，不過他們可訂閱的太多，又都沒做說明，所以會讓人不知要訂閱什麼，因此我有在每個可訂閱的RSS Feed都做說明，讓大家更方便收看我的文章！

有任何意見歡迎在這篇文章留言。 :)

[Module] AJAX Comments

花水木 — Tue, 17 Feb 2009 16:40:00 +0000

如這篇公告新增「花之回應」及Ajax回應效果所說的，今天試了Ajax Comments這個模組。對Wordpress來說，這好像是很普通的功能，在Drupal卻沒這麼容易達成。話說回來，Drupal的Comment功能在版型設計上也是頗困難，這部份可能仍舊是Drupal的死點吧！

不過去年(2008)年12月之後，Ajax Comments這個模組似乎越來越成熟，目前已經是堪用的狀態囉！而且5.x和6.x版本皆已穩定。

可以在本站留言的時候測試看看，也可以到官方模組的測試頁面去。

安裝之後，一定要在內容類型中把「預覽回應」調為選填，不然人家會變成只能預覽沒辦法真的送出。

這是我的畫面(點送出之後的Ajax畫面)。

後台畫面(只有這個頁面，不需調整權限)：

[公告] 超級大改版完成！

花水木 — Mon, 16 Feb 2009 08:46:49 +0000

對！你現在正在花水木大改版之後的新站，也就是花水妹。往後我會繼續在這邊為我的夢想而努力。這邊主要的主題仍舊是接案的筆記。無論是技術上的、或是對網站架設的心得筆記，都會出現在這邊。

其實我忘記在最後把舊的網站先擷圖，不過去找google還是找到了。下圖就是我．花水木，正式告別WP+Sandbox時代的最後一瞥。

(點圖可以看全部)

目前已經把之前的文章都全部整理、篩選過，經過時間的洗禮、到現在還能成立的文章我才手動移到這邊，至於那些被時間淘汰掉、比較沒價值的文章，就跟他說再見吧！另外留言的部份，因為實在太難轉移過來了，所以只好放棄囉！但資料庫有備份下來，看有沒有重見天日的一天囉！

目前這個網站還在測試中，所以有遇到怪怪的地方，歡迎在這邊留言告訴我！

平衡主內容和側邊欄的高度

花水木 — Thu, 22 Jan 2009 08:33:01 +0000

如果設計網站的時候，主內容和側邊欄都有設底色或底圖時，當側邊欄和主內容長度不同時，會有不平衡的感覺。

像是Dan Cederholm示範的這張圖：

如果一直想朝著「偵測主內容和側邊欄區塊高度，並自動讓高度較大者的值等於高度較小者的高值」這種方向來找解法的話，可能會很複雜，這裡有個較簡單的技倆，可以說是用視覺上來欺騙人。

這個作法以及圖是轉自這篇文章，也就是「設定背景圖」。

這張圖顯示，其實整個背景是個橫條、長長的圖，並且repeat-y。在整體的背景設定這張圖之後，主內容和側邊欄就都不用設底圖了，像本站也是用這個方法。

這個概念顯示，其實若對CSS和網站layout了解更深的話，許多事情是可以很容易解決的呢！

用Pathauto顯示特定分類名稱

花水木 — Thu, 22 Jan 2009 07:33:17 +0000

用Pathauto的時候，若你想把某種內容類型的網址路徑設為
http://網址/文章分類/文章名稱

這時應該使用這樣的Token：
[termpath]/[title-raw]

但有個問題是，[termpath]顯示的是最上層分類(Name of top taxonomy term)，不一定會是你想要的。尤其是如果這個類型你用了兩種分類，比如「文章分類」和「文章標籤」，這時如果有篇文章，標籤是A開頭的，分類是B開頭的，那網址路徑就會變成
http://網址/文章標籤/文章名稱

這個問題麻煩，但其實解法很簡單。

解決方式就是到後台，把「文章分類」的重量(weight)都設為-99，這樣無論如何都只會讀到這個分類囉！

移除留言者的(未確認)字樣

花水木 — Thu, 22 Jan 2009 07:04:55 +0000

Drupal網站中，若開放未註冊訪克留言的話，在留言名稱後面就會加上一個(未確認)標記(not verified)，這個東西適合用在社群網站裡面，讓使用者一看就知道誰是有註冊才留言、誰沒有。

不過若是個人網站的話，通常都不需要，因此可以手動修改掉他。

要修改很容易，不過在修改之前，請想想「這東西為何存在」，Drupal核心有這功能，一定有他的意義，搞清楚他的初始功能立意之後，要活用這個功能就容易多啦！

以下方法可以拿掉全站的(未確認)字樣。

找出theme_username
複製整個function到自己的template.php
把function名稱改成自己的版型名稱
找到這行字，把他註解
$output .= ' ('. t('not verified') .')';
註解後這行字變這樣

//$output .= ' ('. t('not verified') .')';

如果你有安裝realname的話，第一個步驟變成是去模組檔案裡找phptemplate_username這個function，其餘步驟是一樣的。

用WP-Sticky做文章置頂及高亮

花水木 — Thu, 22 Jan 2009 04:31:29 +0000

http://lesterchan.net/wordpress/readme/wp-sticky.html

本篇介紹WP-Sticky的用法。他有兩種功能，分別叫做Announcement Posts和Sticky Posts，所謂的Announcement Posts就是會永遠在最上方，而Sticky Posts則是在「當日」最上方。

以下範例來自官方，可以很清楚表達兩者差異。

Announcement
- Post 5 (Announcement Post)

29th March 2007
- Post 6
- Post 7
- Post 8

28th March 2007
- Post 4 (Sticky Post)
- Post 1
- Post 2
- Post 3

用法

打開佈景原始檔，輸入想要的東西，如下。

The Post Sticky Status

<?php post_sticky_status($before,$after); ?>
$before 文字之前要出線的字
$after 文字之後要出線的字

Announcement Banner

如果你的佈景使用the_date();，這東西會自動出現，如果沒出現的話，可以手動加上：
<?php announcement_banner(); ?>

判斷是否為置頂文章

<?php
   if(is_announcement()):
      // If post is an Announcement
   else:
      // If post is NOT an Announcement
   endif;
?>

以此類推

<?php
   if(is_stickied()):
      // If post is Sticky
   else:
      // If post is NOT Sticky
   endif;
?>

用CSS美化

CSS的class分別是sticky_post和announcement_post。