SharePoint Online技术问询：如何用Term Store创建微软官网样式页脚并应用到Master Page

Got it, let's break this down step by step—this approach uses Term Store to manage your footer content (so updates are easy later) and ties it to your Master Page for full-site coverage. I’ve implemented this for several SharePoint environments, so here’s what works:

1. First, Structure Your Footer Content in Term Store #

Microsoft’s footer has organized sections (Products, Resources, Legal, etc.)—we’ll mirror that in Term Store to keep content manageable:

• Head to your SharePoint Admin Center, open Term Store Management
• Create a new Term Set (name it something like Global Footer Links) under a relevant Group (or make a new Group like Site Content Assets)
• Add parent Terms for each footer section (e.g., Products, Company, Resources, Legal)
• For each parent Term, add child Terms for individual links. Then use Custom Properties to store critical data:
  • For parent Terms: Add a DisplayTitle property if you want a cleaner section name than the Term itself
  • For child Terms: Add Url (the link target) and LinkText (the text users see) properties

  Pro tip: Make sure you have Term Store edit permissions—you’ll need to be a Term Store admin or have access to the Group you’re using.

2. Build the Footer Rendering Logic (Two Solid Options) #

Option 1: SPFx Web Part (Recommended for Modern SharePoint) #

If you’re on SharePoint Online or 2019+, SPFx is the most maintainable choice:

• Spin up a new SPFx Web Part project (name it GlobalFooter or similar)
• Use PnP JS to fetch your Term Store data—here’s a quick snippet to get you started:

  import { sp } from "@pnp/sp";
  import "@pnp/sp/taxonomy";
  
  // Fetch your footer term set (replace IDs with your own)
  const termSet = await sp.taxonomy.termSets.getById("<Your Term Set GUID>")
    .expand("terms")
    .get();
  
  // Map terms to a usable structure for rendering
  const footerSections = termSet.terms.map(parentTerm => ({
    sectionTitle: parentTerm.LocalizedLabels[0].Value,
    links: parentTerm.Terms.map(childTerm => ({
      text: childTerm.LocalizedLabels[0].Value,
      url: childTerm.CustomProperties.Url
    }))
  }));
  

• Write React/HTML to render the sections into a multi-column footer (match Microsoft’s layout with flexbox or grid CSS)
• Package and deploy the Web Part to your site’s App Catalog

Option 2: Direct Master Page Edit (For Classic SharePoint) #

If you’re working with SharePoint 2016 or prefer not to use SPFx:

• Open SharePoint Designer, load your site’s active Master Page (e.g., seattle.master)
• Scroll to the footer section (look for #s4-footer or add a new container like <div id="global-footer"></div>)
• Add a script block to fetch Term Store data via REST and inject the footer HTML:

  // Fetch footer terms (replace IDs with your own)
  fetch("/_api/taxonomy/termstores('<Term Store GUID>')/termSets('<Term Set GUID>')/terms?$expand=terms", {
    headers: { "Accept": "application/json;odata=nometadata" }
  })
  .then(res => res.json())
  .then(data => {
    const footerContainer = document.getElementById("global-footer");
    data.value.forEach(section => {
      // Build section header
      const sectionDiv = document.createElement("div");
      sectionDiv.className = "footer-column";
      sectionDiv.innerHTML = `<h4>${section.LocalizedLabels[0].Value}</h4>`;
      
      // Build link list
      const linkList = document.createElement("ul");
      section.Terms.forEach(linkTerm => {
        const listItem = document.createElement("li");
        listItem.innerHTML = `<a href="${linkTerm.CustomProperties.Url}">${linkTerm.LocalizedLabels[0].Value}</a>`;
        linkList.appendChild(listItem);
      });
      
      sectionDiv.appendChild(linkList);
      footerContainer.appendChild(sectionDiv);
    });
  });
  

• Add custom CSS to style the footer (gray background, fixed bottom, responsive columns—match Microsoft’s look)

3. Add the Footer to Your Master Page & Deploy Site-Wide #

For SPFx Web Part: #

• Edit your Master Page, add the GlobalFooter Web Part to the footer area
• Save and publish the Master Page—every page using this Master Page will now show the footer

For Direct Master Page Edit: #

• Save your changes in SharePoint Designer, then publish the Master Page as a major version
• Confirm all site pages are using this Master Page (check Site Settings > Master Page)

4. Easy Updates Going Forward #

The best part? When you need to add a new link or section, just edit the Term Store—no code changes or Master Page edits required. It’s a scalable way to manage site-wide footer content.

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