Quản trị net diễn đàn chia sẻ thông tin các thủ thuật mạng, internet bảo mật thông tin dành cho giới IT VIệt hy vọng là nơi bổ ích cho cộng đồng

Quản trị net diễn đàn chia sẻ thông tin các thủ thuật mạng, internet bảo mật thông tin dành cho giới IT VIệt hy vọng là nơi bổ ích cho cộng đồng (http://quantrinet.com/forum/index.php)
-   Module 6: Configuring and Managing SharePoint 3.0 (http://quantrinet.com/forum/forumdisplay.php?f=268)
-   -   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 (http://quantrinet.com/forum/showthread.php?t=3007)

hoctinhoc 23-07-2009 10:40 PM

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 1phầ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 partDesktop 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 ApplyOK


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.