編輯設計

Edit Design

 

添加文章/產品

當網站中添加文章或產品時，不是用單頁面做的，需要用到【應用頁面】。所謂【應用頁面】可以將它理解為【母版頁面】或者【框架頁面】，在【應用頁面】中添加好內容框架、樣式位置排版、色彩設定等，最後在【內容管理】中去上傳詳細的文字、圖片、視頻等資料。

在需要給網站中添加文章或產品時，需要先進入網站編輯器，在左側最上方的站點名稱旁邊的下拉箭頭中，打開隱藏的網站頁面和菜單欄。添加一個應用板塊。

Adding Articles/Products

When adding articles or products to the website, it’s not done using a single page; you’ll need to use Application Pages. These are like Master Pages or Framework Pages, where you add the content framework, style layout, color settings, etc. Finally, in Content Management, you upload detailed text, images, videos, etc.

When you need to add articles or products to the website, first enter the website editor. In the dropdown arrow next to the site name at the top left, open the hidden site pages and menu bar. Add an application section

2 設置應用分類的基礎設置和分類的顯示字段，設置好的字段就是在添加文章或者產品的內容種類，如文本、多圖、視頻等。在添加字段的時候，就需要先明確：文章/產品的詳情內容中，需要顯示什麼內容，做好規劃，減少不必要的重複操作。

2 Set up the basic settings and display fields of the application category. The fields you set will be the content types when adding articles or products, such as text, multiple images, videos, etc. When adding fields, you need to first clarify what content needs to be displayed in the details of the article/product, plan well, and reduce unnecessary repetitive operations.

3 在應用分類中設置好字段之後，回到編輯器頁面中，左上角下拉鍵打開隱藏的頁面和菜單，在應用頁面中添加【產品】應用的分類項，然後設置分類頁面和詳情頁展示樣式（鼠標移動到分類頁面，就會顯示）

3 After setting the fields in the application category, return to the editor page, open the hidden pages and menu with the dropdown key at the top left, add the “Products” application category in the application pages, and then set the display style for the category page and detail page (the style will be shown when the mouse moves over the category page)

因為新聞和產品等是多個內容，所以他們有一個列表頁面，列表模板就是新聞/產品統一展示標題、簡介的頁面。

詳情頁面就是點擊新聞/產品列表簡介進入的具體內容頁面。

在添加子項分類的時候，列表頁面默認是已經設置好框架了，只需要設置綁定【數據】就可以使用。

【數據】功能就是將列表頁面展示的內容與【內容管理】中添加的內容相對應鏈接的

Since news and products consist of multiple pieces of content, they have a list page. The list template is a page that displays the titles and summaries of news/products uniformly.

The detail page is the specific content page you enter by clicking the summary on the news/product list.

When adding subcategories, the framework of the list page is set by default. You only need to bind the [Data] to use it.

The [Data] function links the content displayed on the list page to the content added in [Content Management]

點擊列表頁中的空白圖片，則會彈出編輯條，在編輯條的【數據】中，可以選擇應用數據（這裡的應用數據，就是對應的應用頁面分類和內容管理中的內容）；由於我們案例中編輯的是【產品】這個應用頁面，並且顯示的內容也是需要顯示這類內容的，所以就選擇【當前頁面】數據就行。

由於【產品】這個應用中是還沒有添加具體產品的，所以在頁面中目前是不顯示內容

lick on the blank image in the list page, an editing bar will pop up. In the editing bar’s [Data], you can choose application data (here, the application data corresponds to the application page categories and the content in content management); since in our case, we are editing the [Products] application page and the content to be displayed needs to show this type of content, we just choose [Current Page] data.

Since the [Products] application has not yet had specific products added, no content is currently displayed on the page

4 在設置好列表頁面之後，就可以設置詳情模板了，點擊詳情模板，我們就進入了詳情頁面的編輯頁面。這個頁面和列表及單頁面是有區別的，頁面中只會顯示【綁定###字段】不會直接顯示內容（如果是自己顯示了某些文字或者圖片內容，說明不是綁定調用的數據，而是直接添加組件元素，這個內容就會在所有的詳情中顯示）。

4 After setting up the list page, you can set up the detail template. Click on the detail template, and we will enter the detail page editing page. This page is different from the list and single page; it will only show [Bind ### Fields] and will not display content directly (if you see some text or images, it indicates that it’s not bound data but directly added component elements, which will be displayed in all details)

 

在文本中，由於文本的多樣性，使用者可能需要的一種展示方式是【發布者：##】；或者【閱讀量：##】格式的文本數據，所以我們又設置了另一種文本編輯綁定數據的方式。

添加文本組件，雙擊文本，將詳情頁面中需要固定顯示的內容，比如：“閱讀量：”、“發佈人：”、“文章來源：”等，手動輸入，然後在文本的【富編輯欄中】選擇【數據源】，在彈出的【數據源列表】中選擇需要顯示的字段內容，這就綁定好了。

點擊右上角的預覽，即可預覽當前詳情模板的樣式，如果需要調整，退出預覽模式，即可再次對詳情模板操作編輯。

In the text, due to the diversity of text, users might need a display format like [Publisher: ##] or [Read Count: ##]. Therefore, we have set up another method for editing and binding text data.

Add a text component, double-click on the text, and manually input the fixed content needed in the detail page, such as “Read Count:”, “Publisher:”, “Source:”, etc. Then, in the text’s [Rich Edit Bar], select [Data Source], and in the [Data Source List] that pops up, choose the field content you need to display. This binds the data.

Click on the preview at the top right to see the current style of the detail template. If adjustments are needed, exit the preview mode to edit the detail template again.

编辑好列表页和详情页之后，就可以【退出】编辑（编辑是实时保存的，不需要单独保存，如果需要浏览最新内容，需要发布之后才会生效），去【内容管理】中，添加几个产品案例看看效果了。


添加好产品案例之后，我们现在看一下列表和详情的显示效果。