funtest

2008年11月16日

動態調整字體大小

張貼者： riceone 於 09:38

網站字體大小及版面配置多由站長喜好設定，有因字體大小造成瀏覽不便或因螢幕解析差異而在用滑鼠滾輪+ctrl時造成版面破碎，因此體貼讀者讓使用者可自行選擇字體大小而使瀏覽更加輕鬆便是站長責無旁貸的。

範例如本站測邊欄的字體縮放

此修改有兩方式，以下為本站採用代碼，兩者差異在於是否在內文增加<span>額外的標籤，至於適用哪種方式端看個人模版

參考文章： Abin's Tech Note-動態調整文章字體大小

修改開始（後台/版面配置/修改html/展開小裝置範本）

Step1.將下列程式碼插入模版<head>或<body>前或Javascript區段內（本模版插入</head>後及<body>前）

<script type='text/javascript'>
function FontZoom(size)
{
  var element = document.getElementsByTagName("div");
  var components = new Array();
  for(i = 0, j = 0; i &lt; element.length; i++) {
    attribute = element[i].getAttribute("id");
    if(attribute == "main-wrapper") {
      components[j] = element[i];
      j++;
    }
  }
  for (i = 0; i &lt; components.length; i++)
    components[i].style.fontSize = size+'px';
}
</script>

從上面的程式碼來看，原理上呼叫這個函示時，它會去把整個檔案裡標籤是 <div>、屬性 id=main-wrapper 的元素抓出來，然後把該元素的字型大小設成指定的數字。這樣，就可以達到即時動態改變本文字體大小的需求了。 By Abin

從上面引用看來，將屬性id=XX的部分改為想縮放字體的區塊便可達到字體縮放效果

Step2.將下列代碼碼放入適當位置，數字部分可自行調整字型大小！（本站放測邊欄，代碼如下，網址部分請自行上傳圖片或只用文字敘述也行（圖片下載）

<a href="javascript:FontZoom(16)" title="字體放大(16px)"><img alt="Large Font Size" src="Fontgroesser.gif網址"/></a>
<a href="javascript:FontZoom(14)" title="字體適中(14px)"><img alt="Default Font Size" src="Fontnorm.gif網址"/></a>
<a href="javascript:FontZoom(12)" title="字體縮小(12px)"><img alt="Small Font Size" src="Fontkleiner.gif網址"/></a>

或者你會喜歡第二種方式Kaie's Blog-[Javascript] Selectable Post Font Size for your best view!

...繼續閱讀

2008年11月6日

標籤和搜尋結果及網誌存檔頁面僅顯示標題（可收合版）

張貼者： riceone 於 12:10

效果如右圖

用說的有點難解釋，這邊是範例。它會把搜尋結果和標籤／封存頁以文章標題顯示，而使用者可以手動展開想看的文章，不用每篇文章都顯示出來。下面是具體的改法（注意！如果你安裝了 Neo Template，那可能會發生文章隱藏但回文無法隱藏的情況，由於此種改法較複雜，請有裝 Neo 的人自行研究吧 XD）。 By NeoBetas

參考文章：
When the Devil Drives.-Peek-A-Boo view of posts in label/archive pages
推薦文章：此作者詳細說出各代碼含意，想做進階修改的人可以參考
Abin's Tech Note-標籤/搜尋頁面只列出標題

修改開始（後台/版面配置/修改html/展開小裝置範本）

Step1.將下列代碼置入模版裡頭（若已加入本站繼續閱讀功能的話，便可跳過這一步驟）

<script type="text/javascript">
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}
</script>

Step2.找下段代碼並加入黃色高亮代碼，修改完儲存完成。

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
       <b:include data='post' name='comments'/>
     </b:if>
     <b:if cond='data:post.includeAd'>
       <data:adEnd/>
       <data:adCode/>
       <data:adStart/>
     </b:if>
   </b:loop>
   <data:adEnd/>
 </div>