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