建立文章摘要、客製化文章摘要的「繼續閱讀」連結

繼續閱讀功能可讓blog中的文章在首頁中以較精簡的文章摘要方式呈現，而且可以經由點選[閱讀更多] 的連結來呈現整篇的文章。

經又透過「文章編輯器」來建立建立文章摘要的呈現方式，不需變更HTML程式碼，既簡單又快速。而且經由簡單的建立CSS類別，文章摘要的呈現方式可以經由套用該CSS類別而呈現不同的變化。

Step 1、建立繼續閱讀標示

1、進入文章編輯器

• 點選新文章或點選已發佈的文章。

• 進入文章編輯器

2、建立繼續閱讀標示的位置

• 在文章內，將游標移至文章摘要的結束處。

• 按一下工具列上的「插入繼續閱讀標示」圖示

• 在文章的游標處會插入灰色的長條狀圖示，代表呈現的文章摘要的範圍到此。

Note：灰色的長條狀圖示的位置可以使用拖曳的方式調整。

3、將文章發佈或更新

Step 2、設定點選[閱讀更多] 的連結

1、按一下 [版面配置]的「網誌文章」的[編輯]

2、變更[張貼頁面連結顯示文字]的文字內容

3、呈現結果(看到”閱讀更多”的選項)：

Step 3、改造"閱讀更多按鈕"

1、編寫改造"閱讀更多按鈕"的 CSS

• 點選[版面配置]的[自訂]

• 點選[進階]的[新增CSS]

• 新增一個jump-link2 的CSS樣式，加好後，點右上套用至網誌。

• 代碼如下：

.jump-link2{

margin: 25px 0 25px 0;  /*閱讀更多位置*/

padding: 0 0 0 0;

}

.jump-link2 a{  /*點選前的字*/

color: #ffffff;text-decoration:none; /*文字顏色*/

background-color: #F76541; /*背景顏色*/

padding: 1px 1px 4px 4px; /*邊界弧度*/

font-size: 16px;

font-weight: bold;

}

.jump-link2 a:hover{  /*點選後的字*/

background-color: #FF9754; /*文字顏色*/

}

2、套用新增的CSS樣式：jump-link2

• 點選[版面配置]的[編輯HTML]

• 按”control+F “鍵，出現尋找對話窗，輸入”jump-link”為尋找字元，找到參考該CSS Class的地方。

• 修改DIV的class為"jump-link2"

Note：”<data:post.jumpText/>”則是[張貼頁面連結顯示文字]的文字內容，Default為”閱讀更多”。

3、察看結果

• 點選預覽範本