如何使用文章詳情組件？

一、什麼是文章詳情組件？

文章詳情組件是一個根據規則自動調取不同文章詳情內容的模塊。文章詳情組件通常被添加在系統頁面或自定義頁面的文章詳情頁面，該組件會自動根據傳入的文章id調用該文章下的文章詳細數據，比如文章名稱、文章附圖、文章摘要、文章內容等，同後台內容管理中的文章系統的文章數據自動匹配對應。文章詳情頁面是所有文章頁面的通用模板，頁面上的組件配置和頁面結構是一樣的，但是文章組件的數據會動態讀取。

二、如何使用文章詳情組件？

1、如何查看文章詳情組件是否已經存在？

如果你的頁面上已經有這個組件了，就不需要再添加，直接根據需要進行相關操作就可以（具體操作見下文所述）；

如果你的頁面上需要這個組件，但是還沒有添加，就需要先添加文章詳情組件了；

請注意，文章詳情組件支持添加在系統頁面或者自定義頁面的產品詳情頁面，其它頁面是不支持添加的。

2、如何添加文章詳情組件？

2.1 支持添加文章詳情組件的頁面有系統頁面或自定義頁面的文章詳情頁面，系統頁面的文章詳情（新聞詳情）頁面是指如下截圖上的頁面：

2.2 在頁面上添加組件的方法都是一樣的，要添加的組件名稱為“文章詳情”，如下圖所示：

3、如何設置文章詳情組件？

3.1 進入組件的“設置”分兩種場景

1）此組件已經添加好的場景：進入所有這類組件設置項方法都是一樣的。

2）新添加的組件的場景：在添加此組件時會彈出這個組件的的設置話框。

3.2在組件的設置中可以設置組件展示的內容

支持上/下一篇：支持在文章內容底端顯示上一篇和下一篇；

上/下一篇標題：支持展示上/下一篇的標題或不顯示標題只展示“上一篇”、“下一篇”；

上/下一篇排序方式：支持按添加日期升序或降序、按修改日期升序或降序、發布日期升序或降序（可以在某一篇文章的編輯頁面自定義發佈時間）；

是否顯示作者來源發布日期：支持顯示作者來源、發布日期；

選擇日期格式：支持設置日期展示格式；

是否顯示分享工具：只是顯示分享工具，方便訪客把文章一件分享到微信、微博等第三方平台；

是否顯示瀏覽數量：支持顯示瀏覽數量；

設置詢價按鈕：支持展示詢價按鈕，方便訪客戶點擊發送詢價信息；

點擊詢價交互類型：客戶點擊詢價以後，支持跳轉到新頁面來填寫詢價信息提交，或在新的彈出窗口填寫詢價信息提交；

3.3在組件的設置中可以設置組件內容的展示風格

顯示設置：文章詳細內容有多種展示風格，有的帶文章附圖（在文章編輯頁面來修改文章附圖），有的不帶文章圖片。有的客戶不喜歡文章附圖默認展示在文章中就可以選擇“不顯示附圖”此風格；

設置文章標題樣式：支持自定義文章標題樣式，可以自定義這些內容：文字大小、行高、文字間距、對齊方式、文字風格、文字顏色；

3.4設置好文章列表組件的內容及風格、高級功能後，單擊設置框右下方“保存”按鈕，以保存所設置的內容。

4、保存、預覽、發布

設置好以上內容以後要單擊頁面右上角的“保存”按鈕，目的是把此修改保存到網站後台；

然後可以單擊“預覽”按鈕查看不同終端下展示的效果，如果不合適可以到後台再做修改；

如果需要讓訪客也看到，請單擊頁面右上角的“發布”按鈕，發布之後稍等兩分鐘左右即可看網站前台展示效果。

三、關於“文章詳情組件”的版本優化內容

1、2017年12月第一周，文章詳情組件、產品詳情組件的詳情描述中的圖片新增在手機端可點擊放大查看圖片的效果。

【應用場景】在查看文章詳情時，當用戶在手機端進行瀏覽圖片時，會存在圖片太小不便於查看的問題，因此需要支持當用戶在手機端瀏覽時，圖片可供放大查看的效果。

【操作方式】在文章詳情組件的設置中找到是否開啟手機端圖片放大功能，勾選“是”則開啟此效果，開啟後，在手機瀏覽時點擊圖片即可放大查看圖片，歡迎大家嚐鮮試用~