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




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




- 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




- Ở mục Content Query Web Part, vào menu Edit, chọn Modify Shared Web Part




- Ở 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




- 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




- 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




- 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




- Quay trở lại trang chủ, vào menu Site Actions, chọn Edit Page




- Ở vùng Top Part Zone, vào menu Edit, chọn Export



- Save web part ở Desktop và lưu lại với tên newpost.webpart




- Tiếp tục ở vùng Top Part Zone, vào menu Edit, chọn Delete



- 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




- Chọn Advanced Web Part gallery and options




- 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




- 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.



- Tiếp tục, vào menu Edit, chọn Modify Shared Web Part




- 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




- Và cuối cùng bạn được giao diện như sau:




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




- Đặ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




- 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




- Browse đến file blog.css mà chúng ta vừa tạo, sau đó nhấn OK




- Quay lại trang chủ, bạn sẽ thấy mục Posted đã đổi màu theo CSS đã cấu hình



By Nguyễn Mạnh Trọng
www.msopenlab.com