如何仅在Document Library落地页显示Site Name？

Got it, I've tackled this exact scenario before—wanting to display the Site Name exclusively on Document Library pages without forcing it into global navigation via master page breadcrumb tweaks. Below are practical, page-specific solutions tailored to modern and classic SharePoint environments:

1. SPFx Web Part (Modern Pages - Recommended for Long-Term Maintenance) #

This is the cleanest, most maintainable approach for modern SharePoint sites:

• Build a lightweight SPFx web part that fetches the current site's title using the SharePoint REST API or @pnp/sp library.
• The web part's render method simply outputs the site name in your desired styling (e.g., a prominent header above the library).
• Key step: Only add this web part to the web part zone of your Document Library pages—skip adding it to any other site pages. Since SPFx web parts are page-specific, this ensures the site name only appears where you want it.

Sample code snippet for the web part's render logic:

import { sp } from "@pnp/sp";

// Inside your web part's onInit method
public async onInit(): Promise<void> {
  await super.onInit();
  sp.setup({
    spfxContext: this.context
  });
}

// Inside your render method
public async render(): Promise<void> {
  const webTitle = await sp.web.title();
  this.domElement.innerHTML = `
    <div class="${styles.siteNameBanner}">
      <h3>当前站点: ${webTitle}</h3>
    </div>
  `;
}

2. Embedded JavaScript (Modern/Classic Pages - Quick Win) #

If you need a fast solution without building a full SPFx component, embed a custom script directly into your Document Library pages:

For Modern Pages #

• Add an Embed Code web part to your Document Library page.
• Paste the following script (adjust styling to match your site's theme):

async function displaySiteName() {
  // Fetch site title via REST API
  const response = await fetch(`${_spPageContextInfo.webAbsoluteUrl}/_api/web/Title`, {
    headers: { 'Accept': 'application/json;odata=nometadata' }
  });
  const siteData = await response.json();
  
  // Create and style the site name element
  const siteNameEl = document.createElement('div');
  siteNameEl.style.cssText = "font-size: 1.2em; font-weight: 600; margin: 10px 0; color: #262626;";
  siteNameEl.textContent = `当前站点: ${siteData.value}`;
  
  // Insert it above the library title (adjust selector if needed)
  const libraryTitleContainer = document.querySelector('[data-automation-id="listTitle"]');
  if (libraryTitleContainer) {
    libraryTitleContainer.parentNode.insertBefore(siteNameEl, libraryTitleContainer);
  } else {
    // Fallback: Add to top of page
    document.body.insertBefore(siteNameEl, document.body.firstChild);
  }
}

// Run the function once the page loads
if (document.readyState === "complete") {
  displaySiteName();
} else {
  window.addEventListener("load", displaySiteName);
}

For Classic Pages #

• Edit the Document Library page, add a Content Editor Web Part (CEWP).
• Edit the CEWP's content and paste this HTML/script:

<div style="font-size:1.2em; font-weight:bold; margin-bottom:10px;">
  当前站点: <script type="text/javascript">document.write(_spPageContextInfo.webTitle);</script>
</div>

• Save the page—this CEWP will only exist on this specific Document Library page.

3. Classic Page Customization via SharePoint Designer #

If you're working with classic sites and have access to SharePoint Designer:

• Open the Document Library page in SharePoint Designer.
• Locate the area where you want the site name to appear (e.g., above the library web part).
• Insert a simple HTML element with the site title using the built-in _spPageContextInfo variable:

<div class="ms-metadata" style="font-size:1.1em;">
  当前站点: <script>document.write(_spPageContextInfo.webTitle);</script>
</div>

• Save the page—this change is isolated to just the Document Library page, no master page modifications needed.

Important Notes #

• For modern sites, ensure your site allows custom script (check SharePoint admin center settings if the script doesn't run).
• The SPFx approach is better for scalability if you need to roll this out to multiple Document Library pages later (you can deploy the web part and add it to relevant pages easily).

内容的提问来源于stack exchange，提问作者mdevm