http://chagg.blogspot.com/2006/10/blogger-beta.html
這篇文章裡將如何在 Blogger 上的文章使用 "繼續閱讀" 的功能描述的非常詳細, 可是人心是貪婪的, 我對於這樣的呈現顯得極度不滿足.
在這篇參考文章中, "繼續閱讀" 的部份的呈現是:
...Read More我希望出現的效果則是:
... Read More "文章標題"這是我個人的問題, 所以自己想辦法解決...
那該怎麼做?
借用參照文章的內容, 加上顏色及說明來表示 --
進入編輯 html，請記得把 Expand Widget Templates 打勾，然後在<head>間放入Javascript code
<script type="text/Javascript">
function hidePost(postUrl, postTitle)
{
var label=document.getElementById("fullpost");
if(label!=null){
eA = document.createElement("a");
eA.setAttribute("href",postUrl);
eA.setAttribute("title","Read More Продложение");
Fulltitle='... Продолжение "' + postTitle + '"';
eA.appendChild(document.createTextNode("...Read More"Fulltitle));
eB = document.createElement("p");
eB.setAttribute("id","read-more");
eB.appendChild(eA);
label.parentNode.appendChild(eB);
label.parentNode.removeChild(label);}
}
</script>既然要俄文化, 就要持續下去, 繼續閱讀, 用名詞的 "繼續" 來表示, 所以就是 "продолжение"
然後加入那幾行紅色的.
接下來找到 ...
<p><data:post.body/></p>事實上我找到的只有
<data:post.body/>用下面的code取代它
<p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.url'>
<script type='text/javascript'>hidePost('<data:post.url/>', '<data:post.title/>');</script>
</b:if>
</b:if>這整個大改造花了我三個多小時的時間, 連我家老爺都一起拉進來傷腦筋, 最後是他的一句 keyword 讓整個謎團出現一線曙光, 我們之前一直是卡在最前面的 javascript code 內, 怎樣也轉不出來, 後來我決定從果導回因, 由最後的結果開始找起, 先是找到在文章區段裡的這段, 如何去呼叫 javascript 變數, 如何將值傳回去給 code, 由以上的片段裡可以看到 postUrl 接收的是 data:post.url 這個 Blogger 的內定變數, 那也就是說, 我只要能夠依樣畫葫蘆的將 data:post.title 丟回去給 hidePost 這支程式即可達到我的要求, 最後就在我家老爺多年的程式編輯功夫協助下, 用一個新變數, 去替代那串混合字串與變數的文字.
因此, 所以, 就是這樣子, 我可以在首頁的文章裡取得這樣的結果 --
... Продолжение "post title"至於最後, 利用 "設定" ... "格式", 將以下的 html code 放進文章範本中, 往後在建立文章時, 就會自動將這行 code 帶進新文章裡, 不善 html 編輯的人, 也可以輕鬆使用這樣工具了.
<div id="fullpost"> //隱藏部分的文章 </div>css 的部份, 以下是我的網頁, 對於 read more 標籤的控制:
#read-more {
font-size: 0.8em;
text-align: right;
}
#read-more a {
text-decoration: underline;
color: #5588aa;
}終於, 在今天結束前, 我完成這項工作, 雖然又是一整晚就花在電腦前, 至少是完成, 而沒有因為時間緣故而中斷工作.
所有想要達成的外觀工作, 到今天都算成功完成了, 有 "最新文章", "最新回應", "繼續閱讀", 接下來就是最後的版面大改造, 只等找到一個喜歡的三欄式樣版, 就可以擇日動工了.
沒有留言:
張貼留言
* 所有回應必經本人檢閱後發佈 *