设为首页 收藏本站
查看: 797|回复: 0

[经验分享] Sharepoint 2010 自定义布局页

[复制链接]

尚未签到

发表于 2015-9-25 08:27:03 | 显示全部楼层 |阅读模式
  这里主要介绍如何使用Sharepoint Designer自定义布局页,及如何使用Visual Studio 2010创建部署解决方案。
  1:创建内容类型
  1-1:首先我们使用VS2010 创建一个内容类型项目。   
DSC0000.png
  1-2:该内容类型继承“页面”内容类型,页面内容类型属于发布内容。
DSC0001.png
  1-3:我希望在页面上面显示一些“版权” ,“图像”等。所以需要为这些内容提供一个栏位来存醋。所以我们需要在这内容类型里面新增几个栏。代码如下:
<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>
<Elements xmlns=&quot;http://schemas.microsoft.com/sharepoint/&quot;>
<!-- Parent ContentType: 页面 (0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF39) -->
<ContentType ID=&quot;0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900d9382e6c08b34b38af10610a206f51c1&quot;
Name=&quot;Ylsoft门户网站页面&quot;
Group=&quot;YLSoft Portal&quot;
Description=&quot;Ylsoft门户网站页面内容类型&quot;
Version=&quot;0&quot;>
<FieldRefs>
<FieldRef ID=&quot;{F55C4D88-1F2E-4ad9-AAA8-819AF4EE7EE8}&quot; Name=&quot;PublishingPageContent&quot; DisplayName=&quot;网页内容&quot;/>
<FieldRef ID=&quot;{3de94b06-4120-41a5-b907-88773e493458}&quot; Name=&quot;PublishingPageImage&quot; DisplayName=&quot;页面图像&quot; />
<FieldRef ID=&quot;{543BC2CF-1F30-488e-8F25-6FE3B689D9AC}&quot; Name=&quot;PublishingRollupImage&quot; DisplayName=&quot;滚动图像&quot; />
<FieldRef ID=&quot;{31E5E0E6-73C7-41BA-BFC8-7E43B454C1EB}&quot; Name=&quot;PublishingPageSideContent&quot; DisplayName=&quot;网页边栏内容&quot;/>
<FieldRef ID=&quot;{6f7a46dc-94e6-46b6-916b-cd05092e42ec}&quot; Name=&quot;PublishingPageAreaShow&quot; DisplayName=&quot;显示区域&quot;/>
<FieldRef ID=&quot;{FB0A88BB-8D83-4436-B650-2C14D1A2C1BC}&quot; Name=&quot;PublishingPageCopyRight&quot; DisplayName =&quot;版权&quot;/>
</FieldRefs>
</ContentType>
<Field ID=&quot;{31E5E0E6-73C7-41BA-BFC8-7E43B454C1EB}&quot;
Name=&quot;PublishingPageSideContent&quot;
StaticName=&quot;PublishingPageSideContent&quot;
SourceID=&quot;http://schemas.microsoft.com/sharepoint/v3&quot;
Group=&quot;YLSoft Portal&quot;
DisplayName=&quot;网页边栏内容&quot;
Type=&quot;HTML&quot;
Required=&quot;FALSE&quot;
Sealed=&quot;TRUE&quot;
RichText=&quot;TRUE&quot;
RichTextMode=&quot;FullHtml&quot; />
<Field ID=&quot;{FB0A88BB-8D83-4436-B650-2C14D1A2C1BC}&quot;
Name=&quot;PublishingPageCopyRight&quot;
DisplayName =&quot;版权&quot;
StaticName=&quot;PublishingPageCopyRight&quot;
SourceID=&quot;http://schemas.microsoft.com/sharepoint/v3&quot;
Group=&quot;YLSoft Portal&quot;
Type=&quot;HTML&quot;
Required=&quot;FALSE&quot;
Sealed=&quot;TRUE&quot;
RichText=&quot;TRUE&quot;
RichTextMode=&quot;FullHtml&quot; />
<Field Type=&quot;MultiChoice&quot;
DisplayName=&quot;显示区域&quot;
Required=&quot;FALSE&quot;
EnforceUniqueValues=&quot;FALSE&quot;
Indexed=&quot;FALSE&quot;
FillInChoice=&quot;FALSE&quot;
Group=&quot;YLSoft Portal&quot;
ID=&quot;{6f7a46dc-94e6-46b6-916b-cd05092e42ec}&quot;
SourceID=&quot;{f67bda5f-fa92-48f8-b1d5-0cfcf724358b}&quot;
StaticName=&quot;显示区域&quot;
Name=&quot;显示区域&quot;>
<Default>无</Default>
<CHOICES>
<CHOICE>无</CHOICE>
<CHOICE>网站导航</CHOICE>
<CHOICE>页眉导航</CHOICE>
<CHOICE>页脚导航</CHOICE>
</CHOICES>
</Field>
</Elements>
DSC0002.png
  然后我们发布此内容类型。
DSC0003.png
  2:使用Sharepoint Designer 2010创建布局页
  2-1:新建布局页
  进入Sharepoint Designer2010
DSC0004.png
DSC0005.png
  在新建界面,选择我们刚刚发布的内容类型。
DSC0006.png
  我们开始设计这个界面。主要是如何使用我们刚刚创建的那些栏。
  2-2:设计布局页
  布局页使用默认的母板页,母板页我已经做好,或则你就使用系统默认的母板页页可以。建好布局页,我们一般都需要对PlaceHolderMain的内容区域进行排版布局。

<table width=&quot;100%&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<!-- 横幅banner开始-->
<tr>
<td>
</td>
</tr>
<!-- 横幅banner结束-->
<tr>
<td height=&quot;10&quot;></td>
</tr>
<tr>
<td style=&quot;text-align:center;&quot; align=&quot;center&quot;><table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<!-- 位置提示开始-->
<td style=&quot;vertical-align:top; text-align:left; line-height:36px;&quot;>
</td>
<!-- 位置提示结束-->
<td width=&quot;10&quot; rowspan=&quot;2&quot; style=&quot;width:10px;&quot;>&nbsp;</td>
<td rowspan=&quot;2&quot;  style=&quot;width:245px; vertical-align:top;&quot;>
<!--右边栏目开始-->
<div style=&quot;height:10px;&quot;></div>
<!--右边栏目结束-->
</td>
</tr>
<tr>
<td style=&quot;vertical-align:top; text-align:left;&quot;>
<!--文章内容表格开始-->
<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td>
</td>
</tr>
</table>
<!--文章内容表格结束-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style=&quot;text-align:center; height:10px;&quot;></td>
</tr>
</table>
<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;10&quot; cellpadding=&quot;0&quot; style=&quot;border-top:#AACBEE 1px solid; background-image:url(_layouts/images/ylsoft/portal/10soft-bottom-bg.jpg);&quot;>
<tr>
<td align=&quot;center&quot;>
</td>
</tr>
</table>
  我就在PlaceHolderMain插入上面的表格。效果如下图。基本布局就这样。
DSC0007.png
  我们在第一行插入WEBPART
DSC0008.png
  在同一行,我们还想显示我们内容类型里面&#8220;页面图像&#8221;网站栏的内容。很简单,操作如图 :
DSC0009.png
  详细过程就不描述,其中还有一个服务器控件(Sharepoint)里面的EditModePanel也比较有用,这控件只会在编辑模式下才会显示。最后的布局如下:
DSC00010.png
HTML:


<%@ Page language=&quot;C#&quot;   Inherits=&quot;Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c&quot; meta:webpartpageexpansion=&quot;full&quot; meta:progid=&quot;SharePoint.WebPartPage.Document&quot;%>
<%@ Register Tagprefix=&quot;SharePointWebControls&quot; Namespace=&quot;Microsoft.SharePoint.WebControls&quot; Assembly=&quot;Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c&quot; %> <%@ Register Tagprefix=&quot;WebPartPages&quot; Namespace=&quot;Microsoft.SharePoint.WebPartPages&quot; Assembly=&quot;Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c&quot; %> <%@ Register Tagprefix=&quot;PublishingWebControls&quot; Namespace=&quot;Microsoft.SharePoint.Publishing.WebControls&quot; Assembly=&quot;Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c&quot; %> <%@ Register Tagprefix=&quot;PublishingNavigation&quot; Namespace=&quot;Microsoft.SharePoint.Publishing.Navigation&quot; Assembly=&quot;Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c&quot; %>
<asp:Content ContentPlaceholderID=&quot;PlaceHolderPageTitle&quot; runat=&quot;server&quot;>
<SharePointWebControls:FieldValue id=&quot;PageTitle&quot; FieldName=&quot;Title&quot; runat=&quot;server&quot;/>
</asp:Content>
<asp:Content ContentPlaceholderID=&quot;PlaceHolderMain&quot; runat=&quot;server&quot;>
<PublishingWebControls:editmodepanel runat=&quot;server&quot; id=&quot;editmodepanel1&quot;>
<SharePointWebControls:CheckBoxChoiceField FieldName=&quot;6f7a46dc-94e6-46b6-916b-cd05092e42ec&quot; runat=&quot;server&quot;>
</SharePointWebControls:CheckBoxChoiceField>
</PublishingWebControls:editmodepanel>
<asp:ScriptManagerProxy runat=&quot;server&quot; id=&quot;ScriptManagerProxy&quot;>
</asp:ScriptManagerProxy>
<table width=&quot;100%&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<!-- 横幅banner开始-->
<tr>
<td>
<WebPartPages:WebPartZone runat=&quot;server&quot; Title=&quot;顶部&quot; ID=&quot;top&quot;><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
<PublishingWebControls:RichImageField FieldName=&quot;3de94b06-4120-41a5-b907-88773e493458&quot; runat=&quot;server&quot;></PublishingWebControls:RichImageField>
</td>
</tr>
<!-- 横幅banner结束-->
<tr>
<td height=&quot;10&quot;></td>
</tr>
<tr>
<td style=&quot;text-align:center;&quot; align=&quot;center&quot;><table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<!-- 位置提示开始-->
<td style=&quot;vertical-align:top; text-align:left; line-height:36px;&quot;>
<asp:SiteMapPath
runat=&quot;server&quot;
SiteMapProviders=&quot;SPSiteMapProvider,SPXmlContentMapProvider&quot;
RenderCurrentNodeAsLink=&quot;false&quot;
NodeStyle-CssClass=&quot;breadcrumbNode&quot;
CurrentNodeStyle-CssClass=&quot;breadcrumbCurrentNode&quot;
RootNodeStyle-CssClass=&quot;breadcrumbRootNode&quot;
HideInteriorRootNodes=&quot;true&quot;
SkipLinkText=&quot;&quot;/>
</td>
<!-- 位置提示结束-->
<td width=&quot;10&quot; rowspan=&quot;2&quot; style=&quot;width:10px;&quot;>&nbsp;</td>
<td rowspan=&quot;2&quot;  style=&quot;width:245px; vertical-align:top;&quot;>
<!--右边栏目开始-->
<WebPartPages:WebPartZone runat=&quot;server&quot; Title=&quot;右侧1&quot; ID=&quot;Righter1&quot;><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
<PublishingWebControls:RichHtmlField FieldName=&quot;31e5e0e6-73c7-41ba-bfc8-7e43b454c1eb&quot; runat=&quot;server&quot; id=&quot;RichHtmlField1&quot;>
</PublishingWebControls:RichHtmlField>
<WebPartPages:WebPartZone runat=&quot;server&quot; Title=&quot;右侧2&quot; ID=&quot;Righter2&quot;><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
<div style=&quot;height:10px;&quot;></div>
<PublishingWebControls:RichImageField FieldName=&quot;543bc2cf-1f30-488e-8f25-6fe3b689d9ac&quot; runat=&quot;server&quot; id=&quot;RichImageField1&quot;></PublishingWebControls:RichImageField>
<!--右边栏目结束-->
</td>
</tr>
<tr>
<td style=&quot;vertical-align:top; text-align:left;&quot;>
<PublishingWebControls:EditModePanel runat=server id=&quot;EditModePanel2&quot;>
<SharePointWebControls:TextField FieldName=&quot;fa564e0f-0c70-4ab9-b863-0177e6ddd247&quot; runat=&quot;server&quot; id=&quot;TextField1&quot;>
</SharePointWebControls:TextField>
</PublishingWebControls:EditModePanel>
<!--文章内容表格开始-->
<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td>
<PublishingWebControls:RichHtmlField FieldName=&quot;f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8&quot; runat=&quot;server&quot;></PublishingWebControls:RichHtmlField>
</td>
</tr>
</table>
<!--文章内容表格结束-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style=&quot;text-align:center; height:10px;&quot;></td>
</tr>
</table>
<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;10&quot; cellpadding=&quot;0&quot; style=&quot;border-top:#AACBEE 1px solid; background-image:url(_layouts/images/ylsoft/portal/10soft-bottom-bg.jpg);&quot;>
<tr>
<td align=&quot;center&quot;>
<PublishingWebControls:RichHtmlField FieldName=&quot;fb0a88bb-8d83-4436-b650-2c14d1a2c1bc&quot; runat=&quot;server&quot;></PublishingWebControls:RichHtmlField>
</td>
</tr>
</table>
</asp:Content>
  3:利用VS2010发布布局页
  
  
  
  3-1:增加一个Empty Sharepoint Project项目
DSC00011.png
  3-2: 然后在这个项目增加一个Module
DSC00012.png
  把新增后的sample.txt文件删除。
  将刚刚在Sharepoint Dsigner做好的ylsoftportalcontentpage.aspx布局页拷贝到YLSoftPortalPageLayouts Module目录下。
DSC00013.png
  同时把布局页代码里面的meta:webpartpageexpansion=&quot;full&quot; meta:progid=&quot;SharePoint.WebPartPage.Document这段代码移除,如果没有移除,Sharepoint会认为这个布局页有定制过。
  接下来修改这个Elements.xml。

<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>
<Elements xmlns=&quot;http://schemas.microsoft.com/sharepoint/&quot;>
<Module Name=&quot;YLSoftPortalPageLayouts&quot; Url=&quot;_catalogs/masterpage&quot;>
<File Path=&quot;YLSoftPortalPageLayouts\ylsoftportalcontentpage.aspx&quot; Url=&quot;ylsoftportalcontentpage.aspx&quot; Type=&quot;GhostableInLibrary&quot;>
<Property Name=&quot;Title&quot; Value=&quot;YLSoft门户内容页面&quot; />
<Property Name=&quot;MasterPageDescription&quot; Value=&quot;YLSoft门户网站的内容页面布局&quot;/>
<Property Name=&quot;ContentType&quot; Value=&quot;$Resources:cmscore,contenttype_pagelayout_name;&quot; />
<Property Name=&quot;PublishingPreviewImage&quot; Value=&quot;~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/ylsoftportalcontent.png, ~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/ylsoftportalcontent.png&quot; />
<Property Name=&quot;PublishingAssociatedContentType&quot; Value=&quot;;#Ylsoft门户网站页面;#0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900d9382e6c08b34b38af10610a206f51c1;#&quot;/>
</File>
</Module>
</Elements>
  
  Url,指定我这个布局页存放的地址,这里我写的是_catalogs/masterpage,这个地址实际上就是母板页样式库(http://Server/_catalogs/masterpage/Forms/AllItems.aspx)
  Property元素制定了这个布局页的一些属性,也就是母板页样式库的一些栏位的字段。其中PublishingAssociatedContentType的值是我们刚刚创建的布局页内容类型。
  具体Module的帮助,可以访问:http://msdn.microsoft.com/en-us/library/ms453137.aspx。我们发布这个项目。你就可以在母板页样式库看到你所发布的这个母板页了。
DSC00014.png
DSC00015.png

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-118384-1-1.html 上篇帖子: 深入浅出InfoPath——无代码更新SharePoint List条目 下篇帖子: SharePoint CAML In Action——Part II
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表