iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 4
0

昨天簡單的介紹Umbraco前台以及後台,

就開始一一探索Umbraco的各項功能吧。

Umbraco Sections

官網說明 https://our.umbraco.org/documentation/Getting-Started/Backoffice/Sections/

Umbraco後台預設就有八個Sections 分別為

  1. Content
  2. Media
  3. Settings
  4. Developer
  5. Members
  6. Users
  7. Forms
  8. Help

1. Content

Content Section內包含的網站所呈現的內容,
Content tree的每個node都是可呈現於前台的一則內容。
要建立node的時候,一定要指定一個document type給他。

在Umbraco的前台所呈現的內容,基本上都跟節點脫離不了關係,
已預設的Umbraco範例網站來講,
前台首頁是一個節點(node),
從節點(node)的Properties tab可以看到此node所設定的document type為 Home,
直接點一下Document Type欄位,Umbraco會將畫面帶到Home document type的設定畫面,
預設document type編輯畫面會在design的部分,
這裡主要是設定這個document type有哪些tab,
每個tab又有哪些屬性,

Home這個document type裡面有兩個Tab分別為Content、Site。
Content tab裡面有一個屬性(Property) Content,
Content Property的DataType為 Grid FrontPage,
Site tab裡面有三個屬性 Site Description,Site Title,Site Logo
三個屬性也分別對應不同的data type。

  • Home (document type)
    • Content (tab)
      • Content (Property) => Grid FrintPage
    • Site (tab)
      • Site Description
      • Site Title
      • Site Logo

Content section,tree,node
http://ithelp.ithome.com.tw/upload/images/20161204/20103518Sa8hzi0rXG.png

Document type 編輯頁
http://ithelp.ithome.com.tw/upload/images/20161204/201035188m1XbdpVhl.png

以常見的文章來比喻的話

在Umbraco的世界裡,通常會先建立一個document type叫做文章,
再設定 content tree可以新增 文章 document type類型的pages(文章列表)
最後設定 文章列表(pages) 可以新增 文章(document tpye)類型的node

新增一個名為 文章 的 document type

點擊左側第三個 Settings Section
點擊第一個Documnt Types節點的右側三個點,選擇建立 Documnt Type
最上方輸入 document type的名稱 "文章"
新增一個 "內容" 的tab
內容tab新增 文章標題、文章內容、文章附件等多個屬性(Property)
文章標題的data type會設定為 Textbox
文章內容的data tpye會設定為 Rich Text Editor
文章附件的data type會設定為 File Upload
Save

  • 文章 (document type)
    • 內容 (tab)
      • 文章標題 => Textbox
      • 文章內容 => Rich Text Editor
      • 文章附件 => File Upload

建立新的Document Type
http://ithelp.ithome.com.tw/upload/images/20161204/20103518HQy71lHFFZ.png
輸入Documnet Type的標題、屬性及對應的Data type
http://ithelp.ithome.com.tw/upload/images/20161204/20103518K1jTu4U4RE.png

新增一個名為 文章列表的 document type

點擊左側第三個 Settings Section
點擊第一個Documnt Types節點的右側三個點,選擇建立 Documnt Type
最上方輸入 文章列表
點擊右邊第三個圖示 Permissions
Add child 點擊後選取剛剛新增的文章 document type
Save
新增Document type,並設定准予在此Document tpye底下新增 文章 document type類型的節點
http://ithelp.ithome.com.tw/upload/images/20161204/20103518gbSK9MiM3X.png

回到 Home document type

點擊右邊第三個圖示 Permissions
Add child 選擇剛剛新增的 文章列表 document type
Save
回到 Content Section
點擊Home 節點的右邊三個點點,並建立文章列表節點
輸入此節點的名稱後 點擊Save and Publish
回到 Content Section可以發現多了一個文章列表的節點
點擊文章列表的右邊三個點點,就可以建立新的文章
設定 Home document type可以新增 文章列表類型的節點
http://ithelp.ithome.com.tw/upload/images/20161204/20103518AaW5sLzvQJ.png
新增文章列表類型的節點
http://ithelp.ithome.com.tw/upload/images/20161204/20103518IcvIBVYCPz.png
輸入節點名稱後儲存並發布
http://ithelp.ithome.com.tw/upload/images/20161204/20103518SH1N6Q0Qcv.png
在新建立的文章列表節點新增一個文章
http://ithelp.ithome.com.tw/upload/images/20161204/20103518AuBc7baczv.png
新增文章的建立頁
http://ithelp.ithome.com.tw/upload/images/20161204/20103518X9p7fU67rz.png

今日總結

  • 初步認識 Node,document type,data type之間的關係
  • 建立了文章,文章列表兩個document type
  • Home 節點下新增 名為 "文章列表" 的子節點
  • 文章列表子節點可以新增文章類型的node

明天會繼續講其他幾個section
我們今天建立的文章列表、文章會在之後將它實際運用在前台上
這幾天的文章會較偏向介紹,
目的是先建立基本的觀念,這樣之後再套版、抓取資料、客製需求時才知道為什麼要這麼做
請大家敬請期待。


上一篇
Day 03 - 初步探索Umbraco CMS吧
下一篇
Day 05 - Umbraco - Sections (2)
系列文
30天打造自己的 Umbraco CMS 18

尚未有邦友留言

立即登入留言