在您的範本裡安裝Neo

　發表了Neo+Kubrick的Neokubrick後，這次來分享如何直接將Neo的功能加到現有的範本。如果您想要自己把自己的範本改造成具有Neo的功能，這篇主要是寫給有心研究Neo的進階使用者，所以可能對初學者會有點難懂。

警告：你很有可能把自己的template搞爛，請新開一個Blog測試，或是完整備份您的樣版。
　
　首先要先研究您的範本，Blog的範本大部份都是二欄式或三欄式（一欄式或四欄式還滿屌的）。無論是幾欄式，要將Neo加入您的範本前，要注意一件事---那就是顯示最新文章列表的那個widget，要放在顯示文章區塊之前。

　換言之

<b:widget id='Posts' locked='false' title='Posts' type='HTML'>
　要放在
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
　的前面。
　如果不醬子放的話會如何呢？你可以試看看啊～（保持神袐）好啦，你不必試，答案是＂回應＂會跑不出來。
　那麼問題來了，很多二欄式或三欄式的範本，文章區塊都在左邊，而放置最新文章列表的側邊欄都在左邊，在範本裡的原始碼通常是長醬子：
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main-wrapper'>→main-wrapper就是主文章區塊

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='blog post' type='Blog'/>

</b:section>
</div>
<div id='sidebar-wrapper'>→sidebar-wrapper就是塞巴，不對，是側邊欄
<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='HTML1' locked='false' title='Label Posts' type='HTML'/>

<b:widget id='HTML3' locked='false' title='Neo Logo' type='HTML'/>
</b:section>

</div>
</div>


為了使Neo正常運行，您必需把main-wrapper移到最後面（最右邊）
然後再使用css的float功能讓它置左。


<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>
<div id='sidebar-wrapper'>→sidebar移到了mainwrapper的上面
<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='HTML1' locked='false' title='Label Posts' type='HTML'/>

<b:widget id='HTML3' locked='false' title='Neo Logo' type='HTML'/>
</b:section>

</div>
<div id='main-wrapper'>→可憐的main-wrapper乖乖待在下面吧
<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='blog ??' type='Blog'/>
</b:section>

</div>
</div>


再用CSS來設定位置

#sidebar-wrapper {
margin-right: 14px;
width: 240px;
float: right;
background-color: $mainBgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main-wrapper {
margin-left: 14px;
width: 464px;
float: left;
background-color: $mainBgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


OK，如果需要安裝Neo到您現有範本的話，要安裝下列widget。

Neo的Javascript連結

放在head裡面。
var numpost是最新文章顯示的篇數。



<script charset='big5' language='javascript' src='http://nautica716.googlepages.com/neochinese.js'/>
<script language="javascript">
var numPosts = 10;
</script>


標籤與Logo的widget


<b:widget id='Labels' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<div id='LabelList'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>

<b:else/>
<a expr:href='"javascript:fetchLatestPosts(\"" + data:blog.homepageUrl + "\",\"" + data:label.name + "\");"'><data:label.name/></a>&amp;nbsp;(<data:label.count/>)
</b:if>
</li>
</b:loop>

</ul>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='NeoLogo' locked='false' title='Neo Logo' type='HTML'>

<b:includable id='main'>
<div class='widget-content'>
<p><a href='http://hackosphere.blogspot.com/2006/12/now-available-neo-template.html'><img src='http://www.anniyalogam.com/neo.png'/></a></p>
</div>
<b:include name='quickedit'/>

</b:includable>
</b:widget>

顯示＂最新文章列表＂的widget

<b:widget id='Posts' locked='false' title='Posts' type='HTML'>
<b:includable id='main'>
<div id='LabelDisplay'>
<div id='LabelTitle'>
</div>
<div class='widget-content' id='LabelPosts'>
<script language='javascript'>fetchLatestPosts('<data:blog.homepageUrl/>', &#39;');</script>

</div>
</div>
</b:includable>
</b:widget>

文章區塊主體的widget

註：

這個widget要覆蓋您範本裡原有的blog1 widget。

你可以不展開小裝置範本，直接覆蓋id=blog1的那個widget，它通常長醬子：

<b:widget id='Blog1' locked='true' title='blog 文章' type='Blog'/>

當然你也可以選擇展開小裝置範本來貼，只是範本裡的blog1的widget通常都落落長－＿－。

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<span class='quick-edit-icon'>&#160;</span>

</a>
</span>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>

<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>

</h4>

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>

<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>

<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</b:loop>
</dl>

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>

</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>

</div>
</div>
</div>
</b:includable>
<b:includable id='main' var='top'>
<!-- POSTS -->
<div class='blog-posts'>

<b:loop values='data:posts' var='post'>
<b:include data='top' name='status-message'/>
<b:include data='post' name='post'/>

<script language='javascript'>
var blogAuthor = '<data:post.author/>';
fetchComments(&#39;<data:post.id/>&#39;);
</script>

</b:loop>
</div>
<b:if cond='data:blog.pageType != "archive"'>
<div class='comments' id='comments'>
<center><h2>No comments yet</h2></center>

</div>
</b:if>

</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='"item-control " + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>

<span class='delete-comment-icon'>&#160;</span>
</a>
</span>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>

<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>

</div>
</b:includable>
<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>

<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'>&#160;</span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>

<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<dd class='comment-footer collapseable'>

<span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
<span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
</dd>

</div>
</b:loop>
</dl>
</b:if>
<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>

</p>
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>

</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>

</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->

<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

<b:else/> <!--Post feed links -->

<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>

</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>

<span expr:class='"item-control " + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<span class='delete-comment-icon'>&#160;</span>
</a>
</span>

</b:includable>
<b:includable id='post' var='post'>
<div class='post' id='post'>
<a expr:name='data:post.id'/>
<h2 class='date-header' id='PostDate'>
<data:post.dateHeader/>
</h2>

<h3 class='post-title' id='PostTitle'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>

</b:if>
</h3><br/>

<div class='post-header-line-1'/>
<style>#fullpost {display:none;}</style>
<div class='post-body' id='PostContent'>

<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<span id='showlink' style='display:none'>
<p><a href='javascript:showFullNeo();'>Read More...</a></p>

</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:hideFullNeo();'>Collapse...</a></p>
</span>
<script type='text/javascript'>

checkFullNeo();
</script>
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>

</b:if>
</span>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass' id='PostEditLink'>
<a expr:href='data:post.editUrl' title='Edit Post'>
<span class='quick-edit-icon'>&#160;</span>

</a>
</span>
</b:if>
</p>
<h3 class='post-comment-link' id='PostCommentLink'>
<a expr:href='data:post.addCommentUrl' target='_blank'>Post a Comment</a>

</h3>

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>

<span class='email-post-icon'>&#160;</span>
</a>
</span>
</b:if>
</span>

</div>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>

</div>
</div>
</div>
</b:includable>
</b:widget>

相關文章：

• Neokubrick
• Neogadget