7 UmbracoNewsSite 新聞詳情頁

這一篇我們建立乙個新聞詳情頁文件型別，然後嘗試編輯新聞內容。

首先確定新聞詳情頁需要什麼？應該有新聞標題、新聞內容、新聞簡介、新聞縮圖；其中後兩個是為了在新聞列表展示該新聞資訊設定的。確定了這些，現在就可以開始編寫了。

開啟document types節點新建乙個名為news post的新文件型別，master document type同樣選擇none…。

然後分別設定需要的幾個屬性：注意用來設定新聞內容的屬性content的資料型別設定為richtext editor(富文字編輯器);其次我們先不設定新聞縮圖這個屬性，因為我們需要去對的資料型別做一些修改，控制的大小和名稱。

現在去修改設定資料型別。開啟developer節點，點選data types節點後面的三個小圓點按鈕，新建乙個名為featured image的新資料型別，並且選擇屬性編輯器為image cropper。

解釋一下umbraco中的資料型別(data types)：umbraco中的資料型別都是umbraco自己定義的，使用的時候只能選擇，而不能去新建立乙個新的資料型別，那麼你會問，那我們剛剛建立的這個也是新的啊？這個確實是新的，但是就算是新的，也必須選擇使用什麼型別的資料型別作為屬性編輯器，也就是property editor這個選項的作用，可以理解為繼承的關係吧，umbraco定義的資料型別都是父類，我們需要乙個子類去幹實際完成的事，只要繼承父類的一些特徵就可以了，這就是我們在這裡為什麼編寫新的資料型別的原因，為了讓功能更加的細分。

然後點選add new crop按鈕，編輯別名(儲存到資料庫中的欄位名)和大小，最後先點選s**e crop按鈕儲存編輯，然後點選s**e按鈕儲存。

現在我們可以設定新聞縮圖這個屬性了，回到news post文件型別，編輯news image屬性。

然後將news post型別設定成news list型別的子型別，因為內容詳情是存在於新聞列表下面的。

接下來去templates節點下編寫新聞詳情頁具體展現的**。

先開啟news post模板，然後將母板頁設定為master。

然後編寫具體的**，在news post模板中新增如下**：

解釋一下這幾個方法的使用：currentpage是獲得當前頁面的所有資料，也就是當前頁面所在的文件型別的所有屬性，這是乙個動態型別，只能在內容發布後才能獲取到實際的值；getpropertyvalue方法可以獲取對應的名稱的屬性的值，需要乙個字串(屬性名稱)作為引數；createdata是乙個唯讀屬性，用來獲取當前頁面建立的時間；creatorname是乙個唯讀屬性，用來獲取當前頁面的建立者。

1
@inherits umbraco.web.mvc.umbracotemplatepage2@
5class="
container
" style="
padding-top:30px
">67"
text-align:center
89 @currentpage.getpropertyvalue("
content")
10

**編寫完成後，我們回到內容編輯節點content，點選keji後面的三個小圓點按鈕，建立乙個news post型別的頁面，編輯所需要的內容。如下：

點選s**e and publish按鈕，但是這時，我們還不能直接去瀏覽這條新聞，因為還沒有設定任何可以指向這條新聞的鏈結。但是為了檢視效果，我們可以點選properties選項卡中的link to document後面的位址，這樣就可以檢視效果了。

最後的效果如下：

7 UmbracoNewsSite 新聞詳情頁

第7章函式 7

7 centos7 使用者管理

win7安裝centos7，win7不能引導

7 UmbracoNewsSite 新聞詳情頁

第7章 函式 7

7 centos7 使用者管理

win7安裝centos7，win7不能引導

相關推薦

第7章函式 7