ทำ Breadcrumb ให้ถูกต้องใน Publishing site

Submitted by ezybzy on Wed, 2015-12-23 - 15:31

Breadcrumb เป็นรูปแบบการกระโดดย้อนไปยังหน้าเว็บที่ผ่านมาที่คลาสสิคอีกรูปแบบหนึ่ง จนทุกวันนี้ในหลาย ๆ เว็บที่มีความเป็นโครงสร้างก็ยังคงมีการใช้งานมันอยู่ แม้ว่า SharePoint 2013 จะพยายามเอามันออกไปจากหน้าจอ แต่จนแล้วจนรอดด้วยความต้องการของลูกค้า หรือของทางผู้ออกแบบก็ยังหยิบยกมันขึ้นมาใช้ แต่จะทำอย่างไรจึงได้ Breadcrumb ที่ถูกต้องเหมาะสมกับสถานการณ์มาใช้ใน SharePoint 2013 ล่ะ?

การใส่ Breadcrumb

บน SharePoint นั้นมี User Control ที่สามารถสร้าง Breadcrumb อยู่แล้ว นั่นคือ <SharePoint:ListSiteMapPath /> ซึ่งสามารถขโมยมาจาก div ซ่อนตัวหนึ่งใน seattle.master ดังเช่น

<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">-->
    <!--SPM:<SharePoint:ListSiteMapPath
        runat="server"
        SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
        RenderCurrentNodeAsLink="false"
        PathSeparator=""
        CssClass="ms-breadcrumb"
        NodeStyle-CssClass="ms-breadcrumbNode"
        CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
        RootNodeStyle-CssClass="ms-breadcrumbRootNode"
        NodeImageOffsetX="0" NodeImageOffsetY="0"
        NodeImageWidth="0" NodeImageHeight="0"
        NodeImageUrl="/_layouts/15/images/blank.gif?rev=41"
        RTLNodeImageOffsetX="0" RTLNodeImageOffsetY="0"
        RTLNodeImageWidth="0" RTLNodeImageHeight="0"
        RTLNodeImageUrl="/_layouts/15/images/blank.gif?rev=41"
        HideInteriorRootNodes="true"
        SkipLinkText=""/>-->
<!--SPM:</asp:ContentPlaceHolder>-->

จากตัวอย่างนี้มีการแก้ไขส่วนของ CssClass จาก s4-... เป็น ms-... เนื่องจากพบว่า บนหน้าหลัง /_layouts/ หลาย ๆ หน้า ค่าเหล่านี้แทนที่จะเป็นค่าที่เรากำหนดกลับกลายเป็นค่าที่ถูกตั้งจากที่ไหนก็ไม่ทราบ แถมการบังคับไม่ให้มีหัวลูกศรคั่นระหว่างชั้น ก็กลับใช้การไม่ได้อีก เมื่อแปะแท็กชุดนี้ลงใน Master Page แล้ว ขั้นตอนต่อไปก็คือการเขียน CSS เพื่อมาปรับแต่งจัดการมันให้อยู่ในรูปแบบที่ต้องการ

ปัญหากับ Publishing Page

เมื่อนำ Control ตัวนี้ไปใช้งาน เราก็จะได้ Breadcrumb ในรูปแบบนี้

Site Collection > Sub site > Sub sub site > List/Library Title > Item Title

โดยแบ่งออกเป็นส่วนแรก (Site Collection ถึง Sub sub site) ได้มาจาก SPSiteMapProvider ส่วน List/Library Title เป็นต้นไปนั้นมาจาก SPContentMapProvider ซึ่งเมื่อดูเผิน ๆ ก็ไม่น่าจะมีปัญหาอะไร แต่เมื่อนำไปใช้งานคู่กับ Publishing Page สิ่งที่เราได้บนหน้าจอก็คือ

Site Collection > Sub site > Sub sub site > Pages > Item Title

จะเห็นว่าจะมีคำว่า Pages ปรากฏขึ้นเสมอ ซึ่งทำให้ผู้ใช้สามารถคลิ้กลิงค์ไปยังหน้าแสดงผลของ Page Library ซึ่งไม่ใช่สิ่งที่เราต้องการให้เกิดขึ้น

วิธีแก้เฉพาะ Publishing Page

ทางแก้ของปัญหานี้คือ เปลี่ยนค่า Provider ด้านในของ SiteMapProviders เป็น CurrentNavigationSwitchableProvider หรือ CombinedNavSiteMapProvider ซึ่งจะทำให้ได้ผลลัพธ์เป็น

Site Collection > Sub site > Sub sub site > Item Title

แต่เราไม่สามารถนำ Provider ตัวนี้ไปใช้บน Master Page ได้เนื่องจากจะส่งผลกระทบกับ List/Library ประเภทอื่นที่จะทำให้ลิงค์ย้อนกลับไปยังหน้าแสดงผลรวมหายไป โดยปรกติ <SharePoint:ListSiteMapPath /> นั้นจะถูกวางอยู่ใต้ ContentPlaceHolder ชื่อ PlaceHolderTitleBreadcrumb เพียงแค่เราทำการ override ค่าของ ContentPlaceHolder นี้บน Page Layout ของเราก็จะสามารถบังคับให้ Page Layout นั้นแสดงผล Breadcrumb ในรูปแบบที่เราต้องการได้

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.