Xây dựng blog host trên moss 2007 - phần 3 : Tạo recent post và cấu hình css cho publ
XÂY DỰNG BLOG HOST TRÊN MOSS 2007 - PHẦN 3 : TẠO RECENT POST VÀ CẤU HÌNH CSS CHO PUBLISHING SITE
http://msopenlab.com/uploads/thumb_h_coporateFAoH.jpg I. Giới thiệu: Trong các phần trước, chúng tôi đã giới thiệu với các bạn cách xây dựng blog host, tạo trang chủ cho publishing site. Trong phần cuối của loạt bài viết này, chúng tôi sẽ giúp bạn hoàn thiện trang chủ bằng cách tạo thêm thanh cuộn “Các bài viết mới nhất” được trích ra từ các blog thành viên và tùy biến giao diện CSS. Phần 3 bao gồm các bước: 1. Tạo Recent Post cho trang chủ 2. Tùy biến CSS cho Publishing Site II. Chuẩn bị: - Cấu hình hoàn tất phần 1 và phần 2 - Post một số bài trên các Blog thành viên III. Thực hiện: 1. Tạo “Recent Post” cho trang chủ - Đăng nhập vào trang chủ, vào menu Site Actions, chọn Edit Page. Ở vùng Top Zone, nhấn Add a Web Part http://msopenlab.com/lab/bloghost3/image001.jpg - Trong màn hình Add Web Parts To Top, đánh dấu chọn vào mục Content Query Web Part, sau đó nhấn Add http://msopenlab.com/lab/bloghost3/image002.jpg - Ở mục Content Query Web Part, vào menu Edit, chọn Modify Shared Web Part http://msopenlab.com/lab/bloghost3/image003.jpg - Ở bên tay phải, bạn lần lượt sửa các thuộc tính sau: * Mục Query: + Source: Show items from all sites… + List Type: Posts + Content Type: List Content Types; Items; Include Child Types * Mục Presentation: + Feed: Enable + Feed Title: MSOPENLAB Blogs + Feed Description: Makes Microsoft Technology Available To Everyone * Mục Appearance: + Title: Các bài viết mới nhất Sau đó, bạn nhấn Apply http://msopenlab.com/lab/bloghost3/image004.jpg - Quan sát thấy bạn đã trích xuất được các tiêu đề bài viết từ các blog khác http://msopenlab.com/lab/bloghost3/image005.jpg - Bây giờ chúng ta sẽ tùy biến sao cho hiện cả nội dung bài viết, ngày giờ post bài, và user nào đã post bài ngay trong trang chủ. Bạn mở Microsoft Office Sharepoint Designer 2007, mở site http://server:20009, bung thư mục Syle Library, bung tiếp thư mục XSL Style Sheets, chuột phải vào file ItemStyle.xsl, chọn Check Out http://msopenlab.com/lab/bloghost3/image006.jpg - Mở file ItemStyle.xls, qua tab code, kéo xuống dưới cùng, phía trên thẻ </xsl:stylesheet>, bạn chèn vào đoạn code bên dưới: <xsl:template name="CQFields" match="Row[@Style='CQFields']" mode="itemstyle"> <xsl:for-each select="@*"> P:<xsl:value-of select="name()" /> </xsl:for-each> </xsl:template> <xsl:template name="BlogRecentPosts" match="Row[@Style='BlogRecentPosts']" mode="itemstyle"> <xsl:variable name="SafeLinkUrl"> <xsl:call-template name="OuterTemplate.GetSafeLink"> <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/> </xsl:call-template> </xsl:variable> <xsl:variable name="DisplayTitle"> <xsl:call-template name="OuterTemplate.GetTitle"> <xsl:with-param name="Title" select="@Title"/> <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/> </xsl:call-template> </xsl:variable> <xsl:variable name="LinkTarget"> <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if> </xsl:variable> <div id="post"> <div class="postTitle"> <h2><a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}"> <xsl:value-of select="$DisplayTitle"/> </a></h2> </div> <div class="byLine"> posted @ <xsl:value-of select="msxsl:format-date(substring-before(@PublishedDate, ' '), 'MM/dd/yyy ')" /> <xsl:value-of select="msxsl:format-time(substring-after(@PublishedDate, ' '), 'hh:mm tt')" /> by <xsl:value-of select="@Author" /> </div> <div class="postBody"> <xsl:value-of select="@Body" disable-output-escaping="yes" /> </div> </div> </xsl:template> Sau đó bạn Save lại http://msopenlab.com/lab/bloghost3/image007.jpg - Quay trở lại trang chủ, vào menu Site Actions, chọn Edit Page http://msopenlab.com/lab/bloghost3/image008.jpg - Ở vùng Top Part Zone, vào menu Edit, chọn Export http://msopenlab.com/lab/bloghost3/image009.jpg - Save web part ở Desktop và lưu lại với tên newpost.webpart http://msopenlab.com/lab/bloghost3/image010.jpg - Tiếp tục ở vùng Top Part Zone, vào menu Edit, chọn Delete http://msopenlab.com/lab/bloghost3/image011.jpg - Mở file newpost.webpart bằng notepad, sửa lại 2 dòng sau: a. Tìm đến dòng: <property name="CommonViewFields" type="string"/> Thay thế lại thành: <property name="CommonViewFields" type="string">Body, RichHTML;PublishedDate, DateTime</property> b. Tìm đến dòng: <property name="AdditionalGroupAndSortFields" type="string" null="true" /> Thay thế lại thành: <property name="AdditionalGroupAndSortFields" type="string" >PublishedDate,Published Date</property> Sau đó bạn Save lại - Quay trở lại trang chủ ở vùng Top Part Zone, nhấn Add a Web Part http://msopenlab.com/lab/bloghost3/image012.jpg - Chọn Advanced Web Part gallery and options http://msopenlab.com/lab/bloghost3/image013.jpg - Nhìn bên tay phải, bên dưới mục Browse, nhấn biểu tượng hình mũi tên chọn Import http://msopenlab.com/lab/bloghost3/image014.jpg - Browse đến file newpost.webpart, nhấn Upload. Kéo web part vào vùng Top Zone. Bạn sẽ thấy nó giống như lúc ban đầu. http://msopenlab.com/lab/bloghost3/image015.jpg - Tiếp tục, vào menu Edit, chọn Modify Shared Web Part http://msopenlab.com/lab/bloghost3/image016.jpg - Nhìn sang phía bên phải, sửa lại các thông số sau: * Mục Present: + Sort Item by: chọn Published Date * Mục Styles: + Item Style: chọn BlogRecentPosts Sau đó bạn nhấn Apply và OK http://msopenlab.com/lab/bloghost3/image017.jpg - Và cuối cùng bạn được giao diện như sau: http://msopenlab.com/lab/bloghost3/image018.jpg 2. Tùy biến CSS cho Publishing Site Xem thêm về CSS Chart tại đây - Mở Microsoft Office Sharepoint Designer 2007, mở site http://server:20009, chuột phải vào thư mục Style Library, nhấn New, chọn CSS http://msopenlab.com/lab/bloghost3/image019.jpg - Đặt tên là blog.css, paste đoạn code bên dưới vào. Sau đó Save lại div.postTitle h2 { border-top: 1px #999999 solid; font-family: Verdana; line-height: 17pt; padding-top: 5px; padding-bottom: .1em; margin-bottom: 2px; margin-top: 0px; } .postBody { padding-bottom: 20px; } .byLine { color: maroon; font-family: Verdana; font-size: 7pt; padding-bottom: 10px; border-bottom: 1px maroon dotted; margin-bottom: 10px; } .ms-WPBody a:link { color: black; text-decoration: none; } .ms-WPBody a:visited { color: #999999; text-decoration: none; } .ms-WPBody a:visited:hover, .ms-WPBody a:link:hover { text-decoration: underline; } .level-description { font-weight: normal; } /* TOC web Part */ #tocwp.toc-layout-main { padding-left: 5px; } .level-header { white-space:nowrap; } div.item { margin-left : 0px; padding-left: 5px; } - Quay trở lại trang chủ, vào menu Site Actions, chọn Modify All Site Settings http://msopenlab.com/lab/bloghost3/image020.jpg - Chọn Master Page. Kéo chuột xuống dưới cùng tìm đến mục Alternate CSS URL, nhấn Browse http://msopenlab.com/lab/bloghost3/image021.jpg - Browse đến file blog.css mà chúng ta vừa tạo, sau đó nhấn OK http://msopenlab.com/lab/bloghost3/image022.jpg - Quay lại trang chủ, bạn sẽ thấy mục Posted đã đổi màu theo CSS đã cấu hình http://msopenlab.com/lab/bloghost3/image024.jpg By Nguyễn Mạnh Trọng www.msopenlab.com |
Bây giờ là 08:16 PM. Giờ GMT +7 |
Diễn đàn tin học QuantriNet
quantrinet.com | quantrimang.co.cc
Founded by Trương Văn Phương | Developed by QuantriNet's members.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.