Memulai dengan Umbraco: Bagian 2

Indonesian (Bahasa Indonesia) translation by Fodal Fadul (you can also view the original English article)

Dalam .NET, masterpage adalah template untuk halaman konten, mana serangkaian halaman ASPX bahwa semua menggunakan masterpage sama dapat semua berbagi kode dasar yang sama.

Juga tersedia dalam seri ini:

Masterpage kemudian dapat memiliki satu atau lebih contentPlaceHolders didefinisikan dan setiap halaman ASPX yang menggunakan masterpage yang hanya perlu mendefinisikan kode yang ada di dalam contentPlaceHolder. Masterpages dapat juga diulang, yang adalah bagaimana mereka akan disusun dalam situs contoh kami.

Mendefinisikan kode dalam Template halaman basis kami

Halaman dasar, ingat ini adalah Template dan jenis dokumen yang akan mewarisi semua halaman berikutnya, harus berisi hanya unsur-unsur yang umum untuk semua halaman situs. Buka file BasePage.master di Visual Web Developer Express (VWD). Sudah akan memiliki sedikit ASPX kode dalam file termasuk elemen <asp:Content>. Elemen ini menunjuk kepada <asp:ContentPlaceHolder>elemen dalam salah satu Umbraco's masterpages.</asp:ContentPlaceHolder> </asp:Content>

Hal ini dimungkinkan untuk menambahkan kode ke masterpages sepenuhnya melalui Umbraco back-end; Bila Anda memilih salah satu template dalam pengaturan daerah, beban salinan file ke kanan panel back-end untuk mengedit, fitur ini lebih berguna untuk membuat perubahan kecil dan update ke masterpages, dan untuk memasukkan Macro atau item. Ketika kita menggunakan .net penuh IDE kita mendapatkan intellisense dan berbagai fitur-fitur lainnya yang tidak hadir dalam Umbraco sehingga menciptakan masterpages biasanya akan memerlukan pengeditan di kedua kawasan tersebut.

Tambahkan kode berikut dalam elemen <asp:Content> :

<!DOCTYPE HTML> 
  <html lang="en"> 
		<meta charset="utf-8" /> 
		<head> 
			<title><umbraco:Macro Alias="pageTitle" runat="server"></umbraco:Macro></title> 
			<!--[if lt IE 9]> 
				<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
			<![endif]--> 
			<link rel="Stylesheet" href="/css/site.css" /> 
		</head> 
		<body> 
			<form runat="server"> 
				<header> 
					<hgroup> 
						<h1><a class="accessible-hidden logo" href="/" title="Return To Home Page">The company name</a></h1> 
						<h2>This is the company's tag line</h2> 
					</hgroup>                 
					<nav> 
						<ul> 
							<li><a href="/" title="Home">Home</a></li> 
							<li><a href="/" title="About Us">About Us</a></li> 
							<li><a href="/" title="News">News</a></li> 
							<li><a href="/" title="Contact Us">Contact Us</a></li> 
						</ul> 
					</nav> 
				</header> 
 
				<div id="innerContent" class="clear-float"> 
					<asp:ContentPlaceHolder id="BaseContent" runat="server"></asp:ContentPlaceHolder> 
				</div> 
				<footer> 
					<nav> 
						<ul> 
							<li><a href="/" title="Home">Home</a></li> 
							<li><a href="/" title="About Us">About Us</a></li> 
							<li><a href="/" title="News">News</a></li> 
							<li><a href="/" title="Contact Us">Contact Us</a></li> 
						</ul> 
					</nav> 
	                <p>Copyright The Company <%=DateTime.Now.Year %></p> 
				</footer> 
			</form> 
	        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
		</body> 
	</html>

Simpan file. Mari kita lihat apa yang kita punya. Hal ini dalam HTML5 format, seperti kita dapat mengatakan langsung dari minimal DOCTYPE dan meta charset elemen. Itu tidak penting untuk menggunakan HTML5, tapi kami juga mungkin benar? Dalam<head>Halaman kita telah terhubung ke sebuah style sheet (yang kami belum membuat belum, tapi akan di beberapa titik nanti) dan<title>elemen.</title></head> The<title>berisi tag Umbraco kami pertama dan menunjuk makro. Jangan khawatir terlalu banyak tentang hal ini untuk sekarang, kami belum mendiskusikan Macro belum dan ini akan dibahas secara lebih rinci dalam bagian selanjutnya dari seri.</title> Isi dari halaman yang terbungkus<form>elemen dengan runat atribut diatur ke server, yang adalah praktik standar untuk situs .net.</form> Kami juga menyertakan link ke HTML5shiv file di Google code jadi IE8 itu atau di bawah ini mampu menampilkan unsur-unsur HTML5 kami dengan benar.

Selanjutnya kita memiliki sebuah elemen <header>yang berisi elemen <hgroup>untuk situs utama judul dan tag line (terdiri dari<h1>dan<h2>Tag masing-masing), dan <nav>elemen yang mengandung navigasi utama untuk situs, yang akan dibangun dari standar unordered list.</nav></h2></h1></hgroup></header> HTML ditampilkan untuk navigasi utama tidak benar-benar akan digunakan dalam bentuk final situs, itu tercantum di sini sebagai panduan untuk bagaimana HTML seharusnya ketika itu dibangun secara otomatis menggunakan makro yang lain. Hal ini berguna untuk menambah struktur dasar untuk dibangun secara dinamis elemen, dalam kasus mereka perlu untuk ditata sebelum dinamis bit ditambahkan. Ini sangat penting jika Anda bekerja sebagai bagian dari tim dan orang lain akan menangani semua hal yang menyenangkan.

Kita kemudian memiliki<div>elemen yang berisi <asp:ContentPlaceHolder>.</asp:ContentPlaceHolder></div> The<div>memiliki id untuk tujuan styling, dan <asp:ContentPlaceHolder>memiliki atribut id sehingga dapat diisi dengan halaman lain (atau masterpages).</asp:ContentPlaceHolder></div> Hotel ini juga memiliki runat = "server" atribut karena ini adalah elemen ASPX ditangani oleh server. Perhatikan bahwa beberapa elemen kami diberi nama kelas untuk ketika kami datang ke gaya situs dekat akhir seri.

Kami juga memiliki <footer>elemen yang berisi salinan lain navigasi (lagi HTML disediakan pada tahap ini terutama untuk styling tujuan dan sebagai contoh bagaimana ia akan akhirnya muncul di browser ketika halaman disajikan), dan pernyataan hak cipta.</footer> Pernyataan hak cipta berisi sedikit potongan C#; Semua hal ini adalah output tahun saat ini dalam format standar 4 digit, sehingga hal ini selalu mencerminkan tahun bahwa halaman yang dilihat. Akhirnya kami link ke versi Google-CDN host jQuery, seperti yang kita akan membutuhkan untuk menambah beberapa perilaku ke situs kami di bagian akhir dari seri.

Coding halaman rumah

Selanjutnya kita dapat menambahkan kode yang akan membuat halaman rumah. Jika kita membuka file HomePage.master dalam VWD kita dapat melihat bahwa itu sudah menjadi bersarang di bawah BasePage.master (BasePage.master file ditetapkan sebagai MasterPageFile di Master Deklarasi di bagian atas dari file), kita hanya perlu mengubah ContentPlaceHolderID dari <asp:Content>elemen jadi itu poin untuk <asp:ContentPlaceHolder>elemen kita ditambahkan ke BasePage.master:</asp:ContentPlaceHolder> </asp:Content>

1	<asp:Content ContentPlaceHolderID="BaseContent" runat="server">
2
3	</asp:Content>

Sekarang tambahkan kode berikut ke elemen <asp:Content> yang ditunjukkan di atas:

<p id="introText"><umbraco:Item field="introText" runat="server" /></p> 
 
	<umbraco:Item field="bannerImage" xslt="concat('&\lt;img src=&\quot;',umbraco.library:GetMedia({0}, false())/umbracoFile, '&\quot; alt=&\quot;',umbraco.library:GetMedia({0}, false())/@nodeName, '&\quot; /&\gt;')" xsltDisableEscaping="true" runat="server"/> 
 
	<div id="hero"> 
	    <div id="viewer"> 
	        <div id="slider"> 
	            <umbraco:Macro Alias="heroPanels" runat="server"></umbraco:Macro> 
	        </div> 
	    </div> 
	    <ul id="ui" class="clear-float"> 
	        <li id="prev"><a href="#" title="View Previous Panel">Previous</a></li> 
	        <li id="next"><a href="#" title="View Next Panel">Next</a></li> 
	    </ul> 
	</div>

Masterpage ini berisi jenis lain Umbraco elemen-Item. Item pertama kami menggunakan set teks pengantar di halaman. Ingat, kita didefinisikan ini sebagai properti jenis dokumen Home Page pada bagian satu dari seri ini dan mengaturnya untuk data jenis editor Richtext editor. <umbraco:Item>Elemen di sini dalam template akan menampilkan isi dari apa pun yang dimasukkan ke dalam editor teks kaya bila kita membuat sebuah node konten untuk halaman rumah di back-end.</umbraco:Item>

Itu harus sedikit lebih jelas sekarang bagaimana properti di jenis dokumen yang berhubungan dengan unsur-unsur yang berakhir di halaman kami, tapi jangan khawatir jika tidak 100% jernih di titik ini-kita masih belum membuat setiap halaman yang sebenarnya belum, tetapi ketika kita melakukan bagian akhir dari puzz Le harus klik dengan rapi ke tempatnya.

Selanjutnya kita memiliki elemen gambar; karena kita menggunakan pemilih media (saya akan menjelaskan persis apa pemilih media adalah ketika kita membuat halaman) kode untuk ini jauh lebih kompleks daripada apa yang telah kita lihat sejauh ini. Salah satu bagian Umbraco back-end adalah bagian Media mana semua konten media untuk situs bisa upload dan disimpan. Seperti sumber daya lainnya untuk situs, masing-masing item media adalah sebuah node node pohon dan diberi nama ketika media item ditambahkan ke CMS.

Ketika kita menambahkan <img> </img>elemen, kita menggunakan <umbraco:Item>mirip dengan introText, tetapi kita perlu menggunakan potongan kode XSLT inline dan beberapa potongan HTML benar-benar mendapatkan jalan gambar yang disimpan di Perpustakaan media. Snipet XSLT menggunakan concat() metode, yang menerima array dipisahkan koma dari string untuk menggabungkan, untuk membangun <img> elemen.</umbraco:Item> Dalam array ini kami menggunakan entitas HTML dan menandai untuk membangun elemen secara manual dan juga menggunakan fungsi dari kelas umbraco.library. Fungsi ini adalah GetMedia dan memungkinkan kita untuk mendapatkan path ke mage di perpustakaan Media (ada folder yang cocok di sistem file Umbraco di mana semua item media disimpan) menggunakan properti umbracoFile, dan nama node menggunakan @nodeName. Catatan untuk mendapatkan kode contoh di atas untuk menampilkan dengan benar harus memasukkan \ karakter dalam entitas HTML. Menghapus mereka jika Salin dan sisipkan ke dalam file Anda sendiri.

Akhirnya, kami menambahkan beberapa mark-up dasar untuk panel pahlawan termasuk wadah luar (<div>dengan id dari pahlawan),<div>masing-masing untuk unsur-unsur #viewer dan #slider, dan UI sederhana yang akan memungkinkan panel yang berbeda dari konten ke internet (wireless).</div></div> Elemen #slider yang juga berisi elemen <umbraco:Macro>, jadi kita akan membangun Bagian panel pahlawan menggunakan makro XSLT yang kita akan membuat di kemudian bagian dari seri. Panel pahlawan akan awalnya dibangun dari XSLT dan mark-up yang ditunjukkan di sini, dan kemudian akan dibuat untuk bekerja dengan script</umbraco:Macro>

Membuat Template Konten

Halaman konten kami relatif sederhana dan dibangun dengan menggunakan satu properti dari jenis dokumen konten. Dalam masterpage file mengubah ContentPlaceHolderID dari <asp:Content>elemen BaseContent persis seperti yang kita lakukan untuk home page:</asp:Content>

1
2	<asp:Content ContentPlaceHolderID="BaseContent" runat="server">
3
4	</asp:Content>

Kemudian tambahkan kode berikut untuk <asp:Content>elemen:</asp:Content>

1	<div id="pageCopy"><umbraco:Item field="pageCopy" runat="server" /></div>

Hanya itu, itu semua kita akan menggunakan dalam template halaman konten kami. Pada kenyataannya, halaman konten yang mungkin akan jauh lebih kompleks, tetapi contoh sederhana harus cukup. Kami telah menggunakan bagian luar yang mengandung <div> untuk ini karena item tersebut ditautkan ke editor Richtext dan karenanya dapat berisi banyak jenis konten yang berbeda.

Template Berita

Template NewsList kami akan hampir dasar sebagai kami konten template seperti halaman akan sebagian besar dibangun secara dinamis menggunakan makro XSLT. Jangan lupa untuk memperbarui ContenPlaceHolderID ke BaseContent seperti yang kita miliki dalam template kami yang lain dan kemudian menambahkan unsur-unsur berikut untuk pengganti:

1	<section id="newsList">
2	<h1>Recent News from The Company</h1>
3	<umbraco:Macro Alias="newsList" runat="server" />
4	</section>

Pada Halaman ini kita memiliki <section>elemen, yang merupakan rumah bagi judul halaman utama dan makro yang membangun daftar berita.</section> Ini yang kita butuhkan dalam template ini jadi mari kita beralih ke yang berikutnya dan terakhir; NewsItem. Sekali lagi, ubah ContentPlaceHolderID ke BaseContent dan kemudian tambahkan kode berikut ke placeholder:

<article id="newsItem"> 
		<header> 
			<h1><umbraco:Item field="headline" runat="server" /></h1> 
			<ul class="clear-float"> 
				<li>Posted on <umbraco:Item field="date" formatAsDate="true" runat="server" /></li> 
				<li>By <umbraco:Item field="creatorName" runat="server" /></li> 
			</ul> 
		</header> 
		<div id="newsContent"> 
		<umbraco:Item field="storyImage" xslt="concat('&\lt;img  src=&\quot;',umbraco.library:GetMedia({0}, false())/umbracoFile, '&\quot; alt=&\quot;',umbraco.library:GetMedia({0}, false())/@nodeName, '&\quot; /&\gt;')" xsltDisableEscaping="true" runat="server"/> 
		<div id="newsText"><umbraco:Item field="newsText" runat="server" /></div> 
		</div> 
	</article> 
 
	<nav id="newsNav"> 
		<umbraco:Macro Alias="newsNav" runat="server" /> 
	</nav>

Template NewsItem kami sedikit lebih kompleks daripada kebanyakan orang lain. Wadah utama untuk berita <article>, yang berisi <header>untuk judul dan beberapa informasi tentang berita seperti tanggal dan penulis.</header> </article> Tanggal, yang ditampilkan dalam pertama<li>, yang berkaitan dengan bidang Datepicker kami menambahkan tipe dokumen yang sesuai untuk jenis Halaman ini. Kami menetapkan atribut formatAsDate untuk benar yang format tanggal yang baik sebagai gantinya tanpa string waktu ditambahkan ke akhir.</li> Penulis diperoleh dengan menggunakan properti creatorName yang secara otomatis ditambahkan ke node (halaman) ketika mereka diciptakan di back-end.

Badan artikel adalah wadah luar <div> yang menggunakan bidang newsImage (ini pada dasarnya sama dengan gambar spanduk di laman beranda yang juga menggunakan pemilih media. Sekali lagi entitas HTML memiliki garis miring terbalik di dalamnya sehingga mereka menampilkan di sini dengan benar) dan <div> yang menggunakan <umbraco:Item> yang tertaut ke bidang newsText. Kami juga membuat elemen <nav>sekunder yang akan memungkinkan pengunjung untuk menavigasi langsung dari halaman berita untuk halaman berita lainnya tanpa harus kembali ke daftar berita. Ini akan dibangun dari makro, yang kita akan melihat dalam bagian selanjutnya dari seri ini.</nav>

Menambahkan halaman

Jadi kami telah menghabiskan beberapa jam baik dari setidaknya sejauh pengaturan hal-hal (lebih jika Anda harus menginstal SQL Server + VWD), jadi mari kita tambahkan beberapa halaman sudah! Dalam situs Umbraco, sebenarnya tidak ada setiap individu 'halaman' seperti itu. Tidak berpikir untuk diri sendiri - "Saya perlu Halaman ini untuk melakukan sesuatu yang unik sehingga saya dapat menambahkan ini atau itu ke halaman mendasari"-hanya tidak bekerja seperti itu, ada tidak ada halaman yang mendasari. Alih-alih halaman, kami memiliki node konten di pohon simpul (khususnya, node di bagian Konten dari backend CMS), dan data dalam database. Ada masing-masing URL yang disimpan dalam database, dan setiap node dipetakan ke URL, jadi ketika pengunjung mengetik alamat halaman, atau menavigasi di sekitar situs, CMS akan memeriksa URL mana yang diminta dan membuat halaman dengan cepat , menggunakan Jenis dan templat Dokumennya.

Jadi, untuk membuat halaman rumah situs, pergi ke bagian konten CMS, klik kanan folder yang konten di panel kiri atas dan pilih Buat. Pada dialog yang muncul, masukkan rumah sebagai nama dan memilih Home Page sebagai jenis dokumen:

Setelah kita memukul tombol Buat dalam dialog, node baru akan dibuat dan ditampilkan di panel kiri atas CMS, dan akan memiliki sebuah bintang jingga kecil kanan itu. Hal ini menunjukkan bahwa node telah diselamatkan, tetapi tidak dipublikasikan. Di panel kanan CMS kita melihat tab dan bidang yang kita didefinisikan dalam jenis dokumen di bagian 1. Tab Konten ditampilkan secara default karena ini adalah tab pertama, properti pertama yang kami definisikan adalah properti Teks Intro, yang memetakan langsung ke textarea di bagian atas tab Content. Kita juga didefinisikan gambar Banner properti, yang memetakan langsung ke kontrol pemilih Media yang ditunjukkan di bawah ini textarea.

Node konten halaman rumah juga akan mewarisi properti dari jenis dokumen dasar halaman - Nama Domain - yang dapat dilihat pada tab properti. Pergi ke tab properti sekarang. Ada beberapa properti penting di sini yang dibuat secara otomatis oleh Umbraco termasuk nama node, yang merupakan bidang yang dapat diedit sehingga kita dapat dengan mudah mengubah nama node di setiap titik, dan jenis dokumen dan Template digunakan. Ada properti berguna lainnya seperti pembuat node dan tanggal publikasi. Masukkan perusahaan di bidang Nama Domain (ini bisa memakan waktu format perusahaan, atau URL aktual seperti www.thecompany.com, itu tidak membuat perbedaan seperti itu hanya akan digunakan untuk judul halaman).

Intro teks dan gambar Banner yang wajib properti, sehingga mereka akan baik perlu diisi sebelum kita dapat mempublikasikan halaman. Teks Intro mudah; Kami baru saja mulai mengetik dalam textarea. Kita bisa melakukan beberapa format dasar menggunakan editor Richtext editor tombol di bagian atas tab, tapi pada dasarnya kita hanya menyelesaikan properti, atau bidang, dengan mengetik. Gambar Spanduk sedikit (tapi tidak lebih) kompleks dan untuk melengkapinya, kita perlu bekerja secara singkat dengan bagian lain dari CMS - perpustakaan Media.

Perpustakaan Media

Perpustakaan Media adalah repositori untuk semua sumber media, seperti gambar, video, file suara atau lain tertanam file atau dokumen. Bidang gambar Banner kami untuk halaman rumah menggunakan pemilih Media, kontrol yang membuka dialog menampilkan Perpustakaan media dan memungkinkan administrator akhir situs visual memilih gambar yang ingin mereka gunakan. Sebelum itu terjadi Namun, harus ada item di Perpustakaan media yang dapat dipilih.

Untuk menambahkan item ke perpustakaan media kita cukup memilih bagian Media dengan mengklik ikon di panel kiri bawah back-end dan kemudian setelah simpul bagian media telah dimuat di bagian kiri atas, kita klik kanan folder Media dan pilih Buat dari menu. Pada dialog yang muncul kita dapat menetapkan nama untuk gambar (ingat bahwa nama kami memberikan node digunakan dalam atribut alt gambar ketika itu akan ditampilkan di halaman rumah), dan memilih jenis Media. Ada tiga jenis standar yang kita dapat memilih dari; folder yang dapat berguna ketika kita memiliki banyak item media yang berbeda yang kita inginkan untuk mengkategorikan dan menyimpan teratur, jenis File umum atau gambar, yang akan kita gunakan dalam hal ini. Jenis Media lain dapat dengan mudah dibuat di bagian pengaturan.

Setelah tombol Buat dalam dialog telah diklik, item gambar baru akan dibuat dan panel kanan editor akan diisi dengan beberapa properti yang termasuk tombol upload. Kita harus klik tombol upload untuk memilih berkas dari komputer kita yang kita inginkan untuk meng-upload (saya punya gambar yang pra-dibuat siap pada desktop saya untuk meng-upload). Setelah Anda memilih gambar untuk diunggah dan mengklik ikon simpan di bilah alat di bagian atas panel kanan, gambar akan menjadi bagian dari perpustakaan media dan akan terdaftar sebagai simpul di pohon simpul media. Thumbnail untuk gambar juga akan dibuat dan ditampilkan di panel properti di sebelah kanan, bersama dengan beberapa atribut gambar:

Sekarang gambar sudah siap untuk diambil, jadi kembali ke bagian konten dan pilih node rumah yang kita buat sebelumnya. Di bidang gambar Banner di bawah textarea klik link pilih untuk membuka picker, yang akan muncul dalam dialog. Klik Perusahaan Melakukan Ini! simpul di pemilih dan itu akan diatur dalam bidang Gambar spanduk. Node Home sekarang dapat dipublikasikan, jadi klik ikon dunia dengan disk di depannya untuk menyimpan dan menerbitkan halaman.

Hanya itu; Anda membuat halaman Umbraco Anda pertama! Anda dapat melihat halaman baru dengan mengklik ikon Tinjauan (halaman dengan kaca pembesar di atasnya) untuk melihatnya dalam modus pratinjau, atau Anda bisa membuka tab baru di peramban Anda, copy saja URL back-end, menyisipkannya ke tab baru dan knock off semuanya setelah nomor port.

Halaman benar-benar un gaya saat ini, tetapi Anda harus menemukan bahwa intro teks dan gambar kami terletak di back-end yang ditampilkan pada halaman, bersama dengan tanda dari template halaman dasar dan Home.master. <umbraco:Item>Semua elemen telah diisi, tetapi setiap <umbraco:Macro>elemen tidak akan telah dipopulasi namun kita perlu untuk menulis beberapa XSLT ini.</umbraco:Macro> </umbraco:Item>

Ringkasan

Di bagian tutorial ini, kami meninjau cara kerja templat Umbraco (mereka mewakili .Net masterpages), dan bagaimana mereka disarangkan untuk penggunaan kembali kode yang maksimal. Sekarang kita telah membuat halaman, kita telah melihat bagaimana Jenis Dokumen, templat dan node bekerja bersama untuk membuat properti yang dapat kita edit di back-end, dan halaman yang akan dilihat pengunjung kita.

Dalam bagian selanjutnya dari seri ini kita akan membuat sisanya halaman untuk situs dan kemudian mulai menulis XSLT yang akan membangun bagian atas dan bawah navigasi, dan panel pahlawan, antara lain.