Textcube Taiwan Group

全文轉載：[TextCube] 自訂樣板超完整教學

首先，這個教學是完全參考官方設置的方式，所以如果有需要的話，可以去官方的部落格看看會比較完整，只是都是韓文就是了。網址在此：http://www.textcube.org/manual/category/스킨

以官方樣板 coolant 為範例來說明，他總共有兩個資料夾，五個檔案：

skin.html (必要)
style.css (必要)
index.xml (必要)
preview.gif (樣板預覽縮圖，非必要)
wysiwyg.css (樣板專用編輯器樣式，非必要)
/images (樣板用資料夾，可自行建立與更名)
/styles (樣板用資料夾，可自行建立與更名)

首先先來看 skin.html 這支樣板核心檔案，它的基本結構如下：

詳細結構如下：

more..

標題設定..

<div id="content">
<div class="searchList">搜尋本文結果清單</div>

more..

<div class="searchRplist">搜尋回應/引用結果清單</div>

more..

more..

more..

<div class="guestbook">訪客留言
<div class="guestWrite">訪客留言表單編輯區域</div>
<div class="guestList">訪客留言清單</div>

more..

</div>
<div class="entryNotice">公告文章</div>

more..

<div class="entryProtected">被保護的文章</div>

more..

<div class="entry">文章
<div class="titleWrap">文章標題、分類、作者、文章詳細資訊、文章操作</div>
<div class="article">本文</div>
<div class="tagTrail">標籤清單</div>
<div class="actionTrail">引用操作、刪除</div>
<div class="trackback">引用清單</div>
<div class="comment">回應
<div class="commentList">回應清單</div>
<div class="commentWrite">回應表單編輯區域</div>
</div>

more..

</div> 
<div class="paging">分頁</div>

more..

</div>
<div id="sidebar">

more..

<div class="blogImage">部落格識別圖示</div>

more..

more..

<div class="adminMenu">管理者操作</div>

more..

more..

more..

more..

more..

more..

more..

more..

more..

more..

<div class="counter">部落格瀏覽計數</div>

more..

more..

</div>
<div id="footer">
<div class="menu">選單</div>
<div class="copyright">Copyright</div>

more..

</div>
</div>

額外的兩種 skin.html 設定：

聚合頁面 cover
more..
包含的 XML 結構：<s_cover>, </s_cover>
包含 XML 子結構：<s_cover_rep>, </s_cover_rep>
可以使用的替換標籤有：
- [##_cover_content_##]，顯示聚合頁面所有內容
關鍵字 Keyword UI
more..
包含的 XML 結構：<s_keyword>, </s_keyword>
包含 XML 子結構：<s_keyword_rep>, </s_keyword_rep>
可以使用的替換標籤有：
- [##_onclick_keyword_##]，關鍵字按鈕程序
- [##_keyword_label_##]，關鍵字標簽名稱
包含的 XML 結構：<s_keyword_rep>, </s_keyword_rep>
可以使用的替換標籤有：
- [##_keyword_rep_title_##]，關鍵字名稱
- [##_keyword_rep_desc_##]，關鍵字描述
附註：獨立使用<s_keyword_rep>, </s_keyword_rep>會應用在 Keyword UI 這個插件啟用後的頁面。

看玩了 skin.html 之後，有頭暈腦脹的感覺吧。接著，不急著看 style.css，先來看看 index.xml 再做什麼。這個檔案是用來讓 TextCube 識別用的，也包含了樣板的作者資訊，樣板設定資訊等等。

詳細內容說明如下：

more..

最後是 style.css，依照你的 skin.html 的設定來做，這是廢話。這裡提一下沒辦法在 skin.html 裡面控制的部分，特別是自動升成的日曆、分類清單以及鏈結清單等等。

內容就不多提了，直接看看官方說明吧。

分頁樣式
more..
/* 已選擇的分頁樣式 */
.selected
{
text-align:center;
border-right:1px solid #ccc;
padding-right:10px;
margin-right:10px;
font-weight:bold;
color:#f30;
}

/* 沒有上一頁、下一頁樣式 */
.no-more-prev,
.no-more-next
{
color:#ccc;
}
文字標籤 (td 標籤)
more..
.ib
{
cursor:pointer;
}

.branch3
{
cursor:pointer;
}
顯示數目
more..
.c_cnt
{
font:0.75em Tahoma; color:#f30;
}
日曆設定
more..
/* 月份 */
.cal_month
{
font-size:0.85em;
height:18px;
font-weight:bold;
}

/* 星期 */
.cal_week1
{
font:0.95em dotum;
height:18px;
font-weight:normal;
}
.cal_week2
{
font:0.95em dotum;
color:#f30;
}
a.cal_week
{
background-color:#fff;
}
.cal_current_week
{
background-color:#eee;
}

/* 日期 */
.cal_day
{
font-size:0.85em;
color:#999;
text-align:center;
}
.cal_day_sunday
{
color:#f30 !important;
}
.cal_day_sunday a
{
color:#f30 !important;
}
.cal_day1
{
color:#ccc;
}
.cal_day2
{
color:#ccc;
}
.cal_day3
{
color:#666;
}
.cal_day4
{
color:#000;
text-decoration:underline;
}

/* 鏈結樣式 */
a.cal_click:link { color:#333; font-weight:bold;}
a.cal_click:visited { color:#333; font-weight:bold;}
a.cal_click:hover { color:#f30; font-weight:bold;}
識別樣式 [##_rp_rep_class_##]
more..
.rp_general {}
.rp_admin
{
background:url(images/iconAdmin.gif) no-repeat;
padding-left:20px;
}
.rp_secret
{
color:#f30;
font-weight:bold;
}
.hiddenComment
{
background:url(images/iconSecret.gif) no-repeat;
padding-left:20px;
font-weight:normal;
}
識別樣式 [##_guest_rep_class_##]
more..
.guest_general {}
.guest_admin
{
background:url(images/iconAdmin.gif) no-repeat;
padding-left:20px;
}
.guest_secret
{
color:#f30;
font-weight:bold;
}
More/Less 樣式設定
more..
.moreless_fold
{
background:url(images/iconMore.gif) top left no-repeat;
padding-left:20px;
color:#000;
}

.moreless_top
{
background:url(images/iconLess.gif) top left no-repeat;
padding-left:20px;
color:#000;
}

.moreless_Body {}

.moreless_bottom
{
background:url(images/iconLess.gif) top right no-repeat;
padding-right:20px;
color:#999;
text-align:right;
}
其它樣式
more..
.cap1
{
color:#999;
text-align:center;
}

.imageblock {}
{
border:1px solid #ddd;
padding:5px;
margin:5px 0;
}

.left {}
.center {}
.right {}

.dual
{
background-color:#eee;
margin-bottom:5px;
}

.triple
{
background-color:#eee;
margin-bottom:5px;
}
聚合頁面官方提供樣式
more..
/*-------------------------------*/
/* cover */
/*-------------------------------*/

.coverpost
{
   clear: both;
   border-bottom: 1px solid #ddd;
   margin: 10px 0;
}

.coverpost h2
{
   font-size: 120%;
   padding-right: 5px;
}

.coverpost h2 a
{
   letter-spacing: -1px;
   line-height: 125%;
}

.coverpost .img_preview
{
   background-color: #fff;
   float: left;
   padding: 0 7px 7px 0;
}

.coverpost .img_preview img
{
   border: 2px solid #ccc;
   cursor: pointer;
   height: 80px;
   width: 80px;
}

.coverpost .post_info
{
   background-color: #faf9f8;
   border-bottom: 1px solid #e8e8e8;
   font: 0.9em Dotum, Arial, sans-serif;
   padding: .3em .6em .3em 0;
}

.coverpost .post_info span
{
   line-height: 1.2em;
   padding: .3em 0 .3em 22px;
}

.coverpost .post_info .category
{
   background: url('./images/bullet_folder.gif') no-repeat 6px 50%;
}

.coverpost .post_info .category a
{
   color: #888;
   margin-right: 6px;
}

.coverpost .post_info .date
{
   background: url('./images/bullet_clock.gif') no-repeat 0 50%;
   color: #888;
   font-family: Verdana, Helvetica, Arial, Gulim, sans-serif;
   padding-left: 16px;
}

.coverpost .post_info .author .preposition
{
   display: none;
}

.coverpost .post_info .author
{
   background: url('./images/bullet_author.gif') no-repeat 6px 50%;
}

.coverpost .post_content
{
   margin: 5px 0;
   line-height: 125%;
   overflow: hidden;
}

.coverpost .post_tags
{
   background: url('./images/bullet_tag.gif') no-repeat 0 0.35em;
   clear: both;
   line-height: 1.2em;
   padding: 5px 5px 5px 20px;
}

.coverpost .post_tags a
{
   font-size: 0.9em;
}

.coverpost .post_tags span
{
   display: none;
}
關鍵字官方提供樣式
more..
/*-------------------------------*/
/* keyword log */
/*-------------------------------*/

#keywords ul
{
   list-type-style: none;
   text-align: left;
}

#keywords ul li
{
   display: inline;
   line-height: 2.2em
   list-type-style: none;
   padding-right: 10px;
}

完畢，收工。

Writer profile

Hello...
I am Chieh™
http://chieh.me

Posted by Chieh™

日	一	二	三	四	五	六
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

Textcube Taiwan Group

Search Results for '查看全部分類'

48 POSTS

[插件] 自訂插件載入順序

Comments List

正港的 TextCube Domain 一枚！

Comments List

TextCube 樣板自訂教學

Trackbacks List

Fioricet.

Comments List

Tag Cloud

Notices

Archives

Categories

Recent Posts

Recent Comments

Recent Trackbacks

Calendar

Bookmarks

Site Stats