用 Umbraco 開發網站[2]:使用 Umbraco建立一個基本網站(上)

來源:互聯網
上載者:User

標籤:9.png   device   get   oda   目標   頁面   別名   添加   ssi   

 

經過前面的準備,我們已經充分具備了開發一個 Umbraco 網站的條件,Let‘s go on~~~

Umbraco 官網提供了一個學習的靜態模板資源套件,蠻多前往的人還真不容易找到,地址在下面:

https://github.com/verekia/initializr-template/archive/master.zip

 

一、建立第一個【Document Type】(文件類型)

1、製作任何網站的第1步都是建立一個“文件類型”。文件類型是資料的容器,在這裡您可以添加編輯資料欄位/屬性,使用者可以輸入資料和然後 Umbraco可以使用它來輸輸出到“模板”的相應位置(更多的資訊,我們將逐步講到)。

文件類型是可以無限擴充的,但是一般來說都包含如下的資料欄位:

  • Page Title
  • Sub Heading
  • Body Text
  • Meta Title
  • Meta Description

點擊左側的『Setting』section,會在樹形地區中看到很長的一個列表,先不要管其他內容,在【Document Type節點】的右側,點擊三個小點…,會出現菜單,包含三個選項供選擇,點擊【Document Type】選項,系統會幫你自動建立好對應的模板頁面。選擇【Folder】,你可以更好的組織管理你的文件類型,不過暫時都還不需要。

 

2、給新建立的文件類型起個名字,例如:HomePage,你可以看見,別名將被自動建立,非常重要!非常重要!非常重要!在 Description 中輸入描述,這有利於在後面選擇正確的文件類型。然後點擊『Save』 按鈕儲存

3、現在已經有第一個文件類型建立在樹形結構的節點下了。繼續幫文件類型設定一個便於識別的 icon,點擊文件類型名字左邊的白色 icon,在彈出的面板中輸入『home』進行搜尋

 

4、下一步,點擊 Permissions 表徵圖,並勾選『Allow as root』。這樣才會允許我們在內容節點的根一級,建立 homepage 類型的內容。

5、點擊上方的『Design』按鈕,返回到設計版面。建立一個新的 tab,命名為『Contents』,記得隨後點擊『Save』按鈕

6、現在我們點擊下方的『Add property』連結,為文件類型Homepage 添加必要的資料屬性,用於在內容部分中錄入其中包含的內容。在名字一欄輸入『Page Title』,當該文字框失去焦點時,你會發現系統已經幫你產生好了別名『pageTitle』。接下來點擊『Add editor』連結,你可以看見一個很長的編輯列表,選擇其中的『Textbox』

7、系統會為這個類型產生一個很長的名字,現在先不用管他,點擊右下角的『Submit』按鈕,然後在【Description】 中輸入屬性的描述

8、重複6-7步驟,建立下面的屬性

9、最終,你所建立的文件類型應該如所示:

 

10、現在我們建立好了第一個文件類型。Umbraco 開發網站需要最基本的三項元素:文件類型、模板、內容,而這是最重要的。它將其對應的執行個體資料,綁定到模板中,用於輸出。

二、建立第一個【Template】(模板)和【Content Node】內容節點

建立了第一個文件類型之後,我們接著建立與之對應的模板和內容。

1、展開 【Setting】section 的『Templates』目錄,你會發現已經有一個名為『Homepage』的模板存在了,Umbraco 在建立文件類型的時候已經幫我們自動建立好了對應的模板。建立文件類型時,如果選擇了另外一個選項『……Without Template』,則不會自動建立對應的模板。 

點擊已經產生的模板節點,系統會自動載入模板檔案,除了少量的 Razor 代碼之外,就是一個空的檔案。

2、現在我們開啟前面下載的html 樣式檔案,複製 index.html 裡的代碼,到上面的 code 編輯器中,注意位置,位於結束花括弧}之後。看起來如所示:

點擊『Save』按鈕。

現在我們已經完成了製作一個頁面的第二步。

3、我們的第三,也是最後一個步驟,是在 Content節點中建立一個可以編輯的頁面,配合對應的文件類型和模板,可以將最終的html 頁面呈現給瀏覽者。

點擊左側的 section 地區,選擇 Content,在展開的樹形地區中,點擊灰色Content 菜單條右側的三個點『…』,如果前面的步驟都操作正確的話,將會看到一個選項用於建立 Homepage。

如果在這裡看不到面板中的內容,請返回檢查  Settings> Document Types > Homepage node > Permissions > Allow at root 是勾選狀態。

4、你可以看到之前設定的文件類型描述,點擊 icon 建立首頁,文件類型會根據屬性建立對應的 Content,同時將需要填寫編輯的欄位呈現出來。

 

輸入需要輸入的資訊之後,點擊右下角的『Save And Publish』按鈕。菜單會自動重新整理,然後我們會看到homepage 節點已經被建立在 Content 菜單之下。接下來我們就可以在地址欄中輸入網站網域名稱進行訪問了。只是現在看到的頁面光禿禿的,因為還沒有引入任何樣式資訊。

三、CSS 和 Javascript

Umbraco 系統可以建立、管理 css 以及 js,但是出於分工以及效率的考慮,建議還是將樣式工作交給前端來進行,在 Umbraco 的模板頁中直接引用即可。

代碼可能類似於:

<head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <title></title>    <meta name="description" content="">    <meta name="author" content="">    <meta name="viewport" content="width=device-width,initial-scale=1">    <link rel="stylesheet" href="/assets/css/style.css">    <script src="/assets/js/libs/modernizr-2.0.6.min.js"></script></head> 
四、輸出【Document Type】屬性

當瀏覽頁面時,我們會發現實際輸出的頁面,和我們前面建立的文件類型和 內容並沒有什麼直接的關係。是因為我們前面只是簡單的把 html 代碼複製到模板中,而並沒有添加任何輸出語句。

現在我們要做的,就是將前面錄入的內容,輸出出來。

1、返回前面的模板編輯頁面:Setting-->Templates-->Homepage,然後選中想要輸出屬性的佔位字元,大約在27行左右

2、點擊模板編輯器的第一個按鈕『Insert Umbraco Page Field』,開啟的面板後,在『Choose Field』下拉中選擇pageTitle

 3、接下來,用同樣的方法,將模板中的h1和 p 程式碼片段,替換為 pageBody,將底部的h3標籤替換為footerTitle

4、完成上面的操作後,點擊『Save』按鈕,儲存模板。然後再前往重新整理首頁,我們可以看到頁面中的資料已經從 Content中取出,我們完成了第一步目標。現在我們類比真是的頁面狀況,在模板的article 標籤中再增加兩個 section 標籤和 footer 標籤,現在我們的模板代碼看起來類似於:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage@{    Layout = null;}<!doctype html><!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--><!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]--><!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]--><!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <title></title>    <meta name="description" content="">    <meta name="author" content="">    <meta name="viewport" content="width=device-width,initial-scale=1">    <link rel="stylesheet" href="css/style.css">    <script src="js/libs/modernizr-2.0.6.min.js"></script></head><body>    <div id="header-container">        <header class="wrapper clearfix">            <h1 id="title">@Umbraco.Field("pageTitle")</h1>            <nav>                <ul>                    <li><a href="#">nav ul li a</a></li>                    <li><a href="#">nav ul li a</a></li>                    <li><a href="#">nav ul li a</a></li>                </ul>            </nav>        </header>    </div>    <div id="main-container">        <div id="main" class="wrapper clearfix">            <article>                <header>                    @Umbraco.Field("bodyText")                </header>                <section>                    <h2>article section h2</h2>                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>                </section>                <section>                    <h2>article section h2</h2>                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>                </section>                <footer>                    <h3>article footer h3</h3>                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor.</p>                </footer>            </article>            <aside>                <h3>aside</h3>                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>            </aside>        </div> <!-- #main -->    </div> <!-- #main-container -->    <div id="footer-container">        <footer class="wrapper">            <h3>@Umbraco.Field("footerText")</h3>        </footer>    </div></body></html>

 

後面我們將繼續學習如果管理組織模板讓代碼更加具有重用性,以及如果使用節點關係,使內容之間的關聯更加靈活。

 

用 Umbraco 開發網站[2]:使用 Umbraco建立一個基本網站(上)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.