沒穿方服

使用步驟：

1. 備份 pref.js（保險起見。刪除跟重設不同，砍掉就真的沒救了！）
2. 由網址列進入 about:config（在一般網頁不可執行）
3. 執行 bookmarklet，會詢問要刪除的分支（分支指的是 nsIPrefBranch），可以輸入：

   

   • 整個分支

     例如輸入 browser.startup 會刪除 browser.startup.homepage 等項目。可以將點（.）也輸入而變成 browser.startup.，效果一樣。
     註：與 about:config 的篩選條件不同，輸入 browse 或 browser.startup.h 皆無法找到前述項目。

   • 單一項目

     例如輸入 browser.startup.homepage 就會刪掉 browser.startup.homepage 這個項目。

4. 出現確認畫面。若項目很多（超過 50 個）會再確認一遍。

   

5. 出現「已執行」訊息。不過我沒有真的檢查是否已刪除，需要重新載入才知道成功與否。

   

---

原始碼拆解：

javascript:
var v = "", b = null;
try {
  b = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService);
}
catch(e) {
  alert("錯誤：無法取得 Firefox 服務。");
}
if(b) {
  while( v == "" ) {
    v = prompt("請輸入要刪除的擴充套件分支：\n（例如「megaupload.toolbar.」）","");
  }
  if( v != null ) {
    var str = "" ;
    var dot = (v.substr(-1)==".");
    var count = 0;
    b = b.getBranch(v);
    b.getChildList("",{}).forEach(function(i) {
      if( dot || i[0]=="." || i=="" ) {
        str += ( "\t" + v + i + "\n" );
        count++;
      }
    });
    if(count==0) {alert("沒有符合的項目。");}
    else if( confirm(count+" 個項目將被刪除：\n" + str + "\n") ) {
      if( count<=50 || confirm("（項目超過 50 個）確定要刪除嗎？") ) {
        b.deleteBranch("");
        alert("已執行。");
      }
    }
  }
}
void 1

• html_leq_folder  （匯出資料夾與詳細曲目資料）
  • 預覽 (.html)：html_leq_folder.html
  • 下載 (.mte)：html_leq_folder.zip (DivShare)
• html_leq_folder_index （僅匯出資料夾名稱）
  • 預覽 (.html)：html_leq_folder_index.html
  • 下載 (.mte)：html_leq_folder_index.zip (DivShare)

說明：

• 按照資料夾（folderpath）分類、排序。這點在匯出時已固定，無法更改。 
• 若音軌有註解（comment）標籤，會在標題右邊劃線，且滑鼠移上去會顯示小提示。
• 表格內容、表格標頭（th）可以隱藏／顯示。
• 沒有標題（title）的音軌，會以斜體字顯示檔名代替。
• 若把匯出的網頁跟 sorttable.js 放在同一資料夾，就可以點選表格標頭（th）排序。
• 資料稍多（大約幾 GB 音樂）時，匯出網頁可能會龐大到把瀏覽器凍住……
• 如果音樂 tag 不是 utf-8 編碼，就顯示亂碼給妳看。
• html_leq_folder_index 在 ie6 上不好看。

擷圖：（已為完整尺寸）

※設定檔（.mte）使用方式可參考官方論壇，專收匯出設定檔的討論串 Export Configuration Archive - Mp3tag Forums。

先確認改完後的用法：假設以 dp.SyntaxHighlighter.HighlightAll('code'); 啟動 SyntaxHighlighter，則網頁的 HTML 可以是 <pre class="code html">，或如原文所述用 <code> 標籤的進階語法。至於舊的 <pre name="code" class="html"> 寫法不必全面更新沒關係，仍然可以相容（當然仍不符標準）。

---

詳細步驟原文寫得很清楚，這邊只提出最後 regex 的部分：

options = options.replace(new RegExp("\\s*"+ name +"\\s*"),'');

原文中 RegExp("^"+name+"\\s") 僅符合 class="code html" 其中 code 出現在開頭的情形；改為以上 pattern 的話則會符合 class="html code  "，應該有稍微通用一點才是。

註：我自己是用 <pre class="javascript sh-code"> 這種型式。

手動插入「彈出留言視窗」鏈結

在模版中找到 <b:includable id='comment-form' var='post'> ……（中略） </b:includable> 一段，裡面會有 <h3><data:postCommentMsg/></h3>，該 h3 就是內嵌表單上方的「張貼意見」幾個字。接著插一行鏈結的原始碼進去，變成：

<h3>
  <data:postCommentMsg/>
  <a class="comment-link" title="彈出留言視窗" expr:href='&quot;http://www.blogger.com/comment.g?blogID=把我改掉&amp;amp;postID=&amp;quot; + data:post.id + &quot;&amp;amp;isPopup=true&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,resizable=yes,width=400,height=740&quot;); return false;'>彈出視窗</a>
</h3>

其中 blogID（把我改掉）要改成自己的 blog 號碼，有疑問請參考官方說明 我的 Blog ID 號碼是多少？
其餘文字和 width 什麼的參數比較不重要，可以視需要修改。

至此就完成了…… 其實「內嵌」與「彈出視窗」應該可以共存才對，沿用彈出視窗的模板 <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>彈出視窗</a> 也比較單純，不過目前這樣寫 data 都沒東西，似乎跟「表單已內嵌」相衝的樣子。

v2.04 Changelog

• NEW - Prototype 版本由 v1.4 升級至 v1.6.0.2。
• NEW - 新增 labelImage 和 labelOf 設定項目，用來改「Image 1 of 4」部分的文字。
• UPDATE - 程式碼大幅改寫。考慮全域命名空間和原生的 javascript 物件。（反正有變聰明就對了）
• FIXED - 展示有 caption（說明文字）的圖片後，再展示無 caption 的圖片，caption 會顯示 "null" 而非沿用之前的文字。
• FIXED - 按下 close 按鈕後位置不會因 focus 的框線而跑掉。

再補幾個：

• 檔案大小由 24 KB 減至 19 KB。
• 現在不會建立 myLightbox 這個物件了，之前有靠這個亂改的也會出狀況。
• 不只滑鼠左鍵，連中鍵、右鍵都會啟動 Lightbox。

使用上跟舊版相容，若之前就按官網的 How to Use 安裝，直接升級也不會有問題。

---

接下來負責的作者要修正之前寫的 以 JavaScript 啟動 Lightbox 2 (更新版) 系列文章。

以 JavaScript 啟動 Lightbox 2（又改版）

先貼上發表文章用的 HTML：

<a href="http://原圖.png">  
  <img src="http://縮圖.png" alt="替代文字" />  
</a>

之前最大問題是可能在 a 裡面又 insert 一個 a 元素，現在把整段 script 改成：（使用 Lightbox 2.04、Prototype 1.6.0.2）

$$('.postcontent img').each( function(i) {
  var fullSrc = i.src;              // 原圖的位址（預設跟縮圖位址相同）
  if( i.up('a') && i.up('a').href ) // img 外層有 a 的話，其 href 值可能就是原圖位址
  {
    var srcExt = i.up('a').href.split('.').pop().toLowerCase();
    if( srcExt == 'png' || srcExt == 'jpg' || srcExt == 'gif' || srcExt == 'bmp' )
    { fullSrc = i.up('a').href; }
  }
  if( i.up('a') ) {  // 把 Lightbox 需要的屬性/值寫到 a 上
    i.up('a').writeAttribute( { rel: 'lightbox[post]', href: fullSrc, title: i.alt } );
  }
  else {             // 外層沒有 a 就做一個包上去
    i.wrap('a', { rel: 'lightbox[post]', href: fullSrc, title: i.alt });
  }
});
Lightbox.prototype.updateImageList();   // updateImageList 會再次解析圖片，然後把 Lightbox 的功能綁上去

然後我還動了 lightbox.js 幾根寒毛：

1. 只讓左鍵啟動 Lightbox
   檢視原始碼複製列印關於

   1. updateImageList: function() {     
   2.   this.updateImageList = Prototype.emptyFunction;  
   3.   
   4.   document.observe('click', (function(event){  
   5.     if( !Event.isLeftClick(event) ) {return;} // 插入這一行  
   6.     var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');  
   7.     if (target) {  
   8.       event.stop();  
   9.       this.start(target);  
   10.       }  
   11.   }).bind(this));  
   12. },  

   updateImageList: function() {   
     this.updateImageList = Prototype.emptyFunction;
   
     document.observe('click', (function(event){
       if( !Event.isLeftClick(event) ) {return;} // 插入這一行
       var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
       if (target) {
         event.stop();
         this.start(target);
         }
     }).bind(this));
   },

2. 把 Lightbox 內 next, prev, close 鏈結的 href='#' 全拿掉

   因為覺得 url# 出現在狀態列很礙眼，所以在原始碼的 initialize 部分把 Builder.node('a',{id:'nextLink', '#'}) 這類鏈結的 , '#' 統統刪除。
   不過滑鼠移上去的游標變成箭頭了，所以又去 lightbox.css 加上一行 #lightbox a {cursor:pointer;}。

---

測試一下連 Picasa 的圖效果如何

第一張是自己從 Picasa 複製圖片網址，第二張是在 blogger 上傳圖片時自動插入的網址。參考原始碼：

<img alt="複製圖片網址 於 Picasa" src="http://lh3.ggpht.com/bootleq/R2aEsSUz5LI/AAAAAAAAAKE/RPzxhtdHhxE/lightbox2_exh1.jpg" width="200" />
 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYleJpEOzCj907jJ25pYEMODGOoMEO8Ex33Nrl03DvxXWKf3R_Ibfpo7uITtju2hRsk_JQpZENS2auJdiQL9V3D7-o1k-KfheOW5MqHhrd-S_eGpjNrJpLEYOK-r5YZRgIB_ZnpwIr_Cg/s1600-h/sansao.png">
  <img id="BLOGGER_PHOTO_ID_5221300718735749538" alt="山臊行樂圖 - 圖片網址由 blogger 產生" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYleJpEOzCj907jJ25pYEMODGOoMEO8Ex33Nrl03DvxXWKf3R_Ibfpo7uITtju2hRsk_JQpZENS2auJdiQL9V3D7-o1k-KfheOW5MqHhrd-S_eGpjNrJpLEYOK-r5YZRgIB_ZnpwIr_Cg/s320/sansao.png" />
</a>

好樣的，blogger 插的還是不行。換網址重貼。

先看看官方解說什麼是定位點(原名導盲磚)？

所謂定位點(原名導盲磚)，其顯示方式是利用三個冒號(:::)來代表，且需要搭配快速鍵設計來使用。主要用途在於幫助使用者快速定位及搜尋。主要優點有以下：

1. 快速跳躍至網頁不同區塊，可避免使用者迷失在網頁中。
2. 方便使用者在各框架頁 (frame) 間快速移動。
3. 可導引使用者依自己需要，跳至所需的區塊中。

定位點的設計程式碼如下：

<a accesskey="L" href="intro.jsp" title="左側區域"> ::: </a>
<a accesskey="C" href="intro.jsp" title="中間區域"> ::: </a>
<a accesskey="R" href="intro.jsp" title="右側區域"> ::: </a>

title 屬性文字方便語音合成器告知使用者，是在網頁中的哪一個區塊。
每一個瀏覽器都有搜尋的功能，可以讓使用者搜尋所需資訊的地方。在 HTML 4.0 中 accesskey 的功能可以搭配 ALT 鍵使用，跳到所需的區塊。
請將網頁定位點 (:::) 搭配快速鍵的使用說明，描述於網站導覽或明顯處供使用者瞭解，請不要隱藏於 ::: 的連結處，以提供各種使用者使用。

所以最基本的認識，就是照抄上面的程式碼，放在網頁各區域的前面。例如 Google 台灣 可能會變成：

先別急著美化（免得改壞），目前網頁應已接近無障礙服務網所重視的幾項要求：

1. 定位點必須是「找得到」的

   官方堅持使用者以 Ctrl + F 尋找功能搜尋「:::」字串時，必須能「發現」定位點。
   ……在此戲稱「導盲磚必須看得見」原則。參考官方留言板，以下作法會被退件：

   1. 用 display:none 隱藏定位點（相當於由顯示中移除，可能導致沒有定位點）
   2. 把 ::: 幾個字改為圖片（Ctrl + F 找不到）
   3. 把 ::: 字體設為極端小（Ctrl + F 找得到，但是不容易看到，也是不行）

   再者，倒是允許把 ::: 文字顏色設為跟背景色相同，無障礙服務網亦如此設計。

2. 定位點數量不宜過多

   要設計幾個「:::」端視頁面內容而定。例如若網頁沒有選單／內容區的分別，就不必硬加上定位點。

   

3. 定位點應搭配 accesskey 和 title 屬性使用

4. 快速鍵（accesskey）不應與瀏覽器的快速鍵設定相同

   不清楚照範例用 L, C, R 是否就萬事 OK，在常見問題 - 定位點(::: )搭配快速鍵常見問題與解決方案 裡列出了常見的熱鍵，優先避開它們應該就差不多了。

5. 若有標題元素，定位點應置於標題元素之前

   這裡強調定位點在文件中的位置，應置於該區域的完整內容之前。前例中沒有標題元素（h1, h2, ...），有的話應作如下安排：

   :::

   <h5>示範選單</h5>

   • <li>列表項目</li>
   • <li>列表項目</li>
   :::

   <h5>示範段落</h5>

   <p>內文</p>

   
   而不是：

   <h5>示範選單</h5>

   • <li>::: 示範選單區</li>
   • <li>列表項目</li>
   • <li>列表項目</li>

   <h5>示範段落</h5>

   :::

   <p>內文</p>

   
   如此在跳至定位點後，循序瀏覽才不會錯過標題。

6. 展示「定位點 + 快速鍵」的使用說明

   快速鍵的說明一定要提供，並且跟網站導覽（sitemap）擺在一起。形式可參考研考會的網站導覽。

7. 定位點的 href 屬性值應為鏈結錨點，而非連結至其他文件

   定位點的 href 屬性要使用含 # 的頁內鏈結（例如 href="#section_2"）以避免按了快速鍵後瀏覽器跟著鏈結出去。參考官方解說定位點(:::)設定連結時，Firefox與IE瀏覽器瀏覽時的差異：

   若於定位點 (:::) 上設定超連結時，於不同瀏覽器"解析"定位點 (:::) 的超連結語法時，將呈現以下的差異：

   1. Firefox 瀏覽器，解析定位點內含的超連結語法時，將直接執行內含的超連結，而自動轉至超連結指向的頁面，使定位點失去最重要的「定位」功效。
   2. IE 瀏覽器，解析定位點內含的超連結語法時，瀏覽器不會自動執行該超連結，會正常定位在定位點 (:::) 上，而定位點內含指向的超連結頁面，須透過「ENTER」鍵才會觸發。

   故，設計定位點 (:::) 搭配快速鍵時，考量各瀏覽器不同的語法解析，請勿於定位點上設定超連結，並將『快速鍵定義說明』統一載明於「網站導覽」頁內容區上方。

   這點和 <a accesskey="L" href="intro.jsp" title="左側區域"> ::: </a> 形成矛盾…… 看來是發現 Firefox 處理 accesskey 的行為後，為了顧全不同瀏覽器而忍痛自打嘴巴，所以語氣才會有點悻悻然吧。

   

---

其實以上規定，最大特徵不外乎用 Ctrl + F 尋找 ::: 文字的行為，把握這點、合理設計你的網頁應該就能過關了。

但是為什麼要通過檢測？

當然無奈的理由居多，但是此規範是否合理？所謂君子詐善，無異小人之肆惡，負責任的設計者請不能懶得思考，好歹也要看看文章、看看討論才是，這裡引用一位積極貢獻者不惑仔的中肯留言：

定位點應算是本國自創的方法，其提出的作法個人也不太認同，因為這種方式親和力不夠，對沒有學習過定位點操作的盲人(甚至非盲人)，沒什麼太大作用(根本不知道什麼是::)，必須是經過強迫訓練的盲生才比較有幫助，而這些人應只佔少數之少數吧。

不過定位點的概念是值得認同的，因為可以讓非滑鼠操作者，在一個複雜內容的頁面，以快速鍵快速轉至想要閱讀的區域，其實可以想像成電話語音服務一樣，按1. 做什麼... 2.做什麼... 3. 做什麼...等等，就像我先前提的，如果有一天，上網是用聽和說的時候，這樣的概念就很重要了。因此，個人認為較好的作法，應該是直接在每一頁做成有指示的連結列跳至指定的區域，如，本文(C)|主目錄(M)|分類子目錄(N)|細項目錄(L)...這樣就不需要特別的學習就可以使用了，而且每一頁也可以有不同的連結。其實，對盲人來說，文件內容只有前後(上下)，並沒有所謂的左邊欄、右邊欄、或中間區，硬是要分那邊實在不符實際，而且快速鍵連結本來就直接可以跳至 id 位置，不需要另外製作一個無意義的::，這根本是對語意誤解的作法。

參考 http://www.w3.org/TR/html4/interact/forms.html#adef-accesskey 節錄如下

”...when a user activates a link defined by the A element, the user agent generally follows the link. When a user activates a radio button, the user agent changes the value of the radio button. When the user activates a text field, it allows input, etc.”

真高興終於有人提出這問題了，是沒有必要一定要按照研考會提出的方式製作，用我提出的要比他們的::，更有意義多了，而且更具親和力。

~不惑仔

其建議「本文 (C)｜主目錄 (M)」形式就是個很實在的通用設計，再回頭看「:::」便顯得短視不可靠，舉個例子，在談論 ::: 的文章內按Ctrl + F 搜尋 :::，不是會找到一堆非定位點的東西嗎？

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

更令人不安者，政府的「無障礙」顯然輕忽 W3C 提供的網頁標準。包括研考會、無障礙網路空間服務網在內，送到 W3C Markup Validator 檢驗都無法過關，誤解 HTML 語意的情形也屢受批評。而這諸多障礙，在無障礙網路空間服務網的官僚作風下（參考留言板與網路討論），後續發展教人難以期待。

---

到此心理有底，就別抱怨，標章照貼，寫法看個人良心吧。

以下是我偏好的定位點原始碼，主要在 href 屬性上說事：

<a accesskey="C" href="#start-content" title="主要內容區" id="start-content">:::</a>

沒有規定 a 元素一定要有 href 屬性，但一般瀏覽器對缺少 href 的 a 元素之 accesskey 沒有反應；所以給 a href="#fragment-identifier 並搭配相應的 id（或 name）以做定位。

另外研考會和無障礙服務網使用的 a href="#" 是個很普遍、但不在 W3C 文件中的寫法；一個不指向外部資源或頁內錨點的 a 元素應該是無理、錯誤的。所以瀏覽器對 # 的處理可能出乎設計者的意料（例：重讀頁面、捲至頁首）而喪失定位點的功能，與其等出狀況再滅火，不如現在就停用該寫法，一次做對才是。

li {color:green;}  /* 把整個 li 變成綠色 */
li * {color:blue;}  /* 再把 li 裡的元素變回原色（假設為藍色） */

---

方法已經說完了，補充一下剛講的有包沒包是啥意思：

<ol>
  <li>第一項</li>      <!-- li 之下直接出現內容，這叫做沒包的 -->
  <li><span>第</span><i>二項</i></li> <!-- 這行就不必改了 -->
</ol>

要改為：

<ol>
  <li><span>第一項</span><li>   <!-- 被 span 包起來 -->
  <li><span>第</span><i>二項</i></li>
</ol>

使用前：傳統的檔案總管

使用後：視覺化、機能性、具時尚感的檔案總管

視窗切換功能也變得更加親切、聰明、一目瞭然。

---

使用方法提示

Windows 資料夾上按右鍵 → 內容 → 自訂 → 變更圖示 → 瀏覽至本產品 → 確定。