义现代SharePoint站点 - Microsoft...Branding SharePoint theming documentation:...

自定义现代SharePoint站点陆虎 <luh@microsoft.com> 陆添超 <tialu@microsoft.com>

Branding

Core elements ofbranding in SharePoint

Logos

Site designs

& extensibility

Navigation

Content Structure Theming

Navigation

Overview of navigation options

Site navigation:Team site = left navComm site = top nav

Hub navigation:Connects associated sites

Styling options for both:

Cascading

Recently released megamenu navigation styling

Provides more navigation density

Grouping for better organization and hierarchy

Currently available in horizontal communication site nav and hub nav

Theming

Theme consists of main and

accent colors used accessibly

across a site

Out-of-the box SharePoint

themes include 6 light and 2

dark themes

Can be customized from

those starting points

Overview of theming capabilities

Custom theming: your organization's colors on display

Create great-looking

accessible custom themes

that reflect your organization

Incorporate your themes into

the Change the Look so site

owners can use

Admin can remove the out-

of-the-box themes from the

“Change the Look” panel in

favor of custom themes

Themes can also be applied

via a site design so the right

theme is there when site is

provisioned

Microsoft UI Fabric

theme designer

Create your own custom

themes

Enter your organization’s

color values to generate the

custom theme

Accessibility checker will

highlight issues and values

to be changed

Create your own accessible custom themes

T I P

Content structure with section background

Section backgrounddo’s and don’ts

Use to break up a long page or

highlight content; keep to 1

viewport tall

Use theming for changing entire

page background color; not

section background colors

Use Microsoft UI Fabric front-

end framework for applying

theming to your custom web

parts so they work against

section backgrounds

B E S T P R A C T I C E S

The new default teal theme

C O M I N G S O O N

Fluent: team site before & after

C O M I N G S O O N

• Rounded corners

• Text weight and size updates

• Command bar alignment

Fluent: team site before & after

C O M I N G S O O N

Site Scripts and Site Designs

Site Scripts and Site Designs

Site ScriptsA script defining a set of actions to take on a site, such as:

"create list"

"create site column"

Site DesignsA site design can be applied to a site, and can contain one or more site scripts

When to useTo apply consistent site configuration or business logic to sites:

During site creation

As part of hub association

On existing sites

Site Scripts – Where all the Action isactions: [...{

"verb": "createSPList","listName": “Sales Campaign","templateType": 100,"subactions": [

{"verb": "SetDescription","description": "Custom list to illustrate SharePoint site

scripting capabilities"},{

"verb": "addContentType","name": "Contoso Projects"

},{

"verb": "addSPFieldXml","schemaXml": "<Field Type=\"Choice\"

DisplayName=\"Project Status\" Required=\"FALSE\" Format=\"Dropdown\" StaticName=\"ProjectStatus\" Name=\"ProjectStatus\"><Default>In progress</Default><CHOICES><CHOICE>In progress</CHOICE><CHOICE>In review</CHOICE><CHOICE>Hasissues</CHOICE><CHOICE>Done</CHOICE></CHOICES></Field>"

},{

"verb": "addNavLink","url": "Lists/Sales Campaign/All Campaigns.aspx","displayName": "Sales Campaigns","isWebRelative": true

},...

Site Script: JSON file of

actions to be applied to the

site post-creation

Actions can be concatenated in

single file or multiple files can be

used (and reused)

Include Parent and subactions

Field Xml supported

Site design infrastructure

Site Scripts• Title

• ID

• Script actions

(Create List, Apply

Theme, Add to

Nav, Trigger

Flow…)

Site Designs• Title & Desc

• Preview Image

• Web Template

• Site Script Array

• Scope | isDefault

Site scripts – auto-generation

Get-SPOSiteScriptFromList

–ListUrl [listurl]

Get-SPOSiteScriptFromWeb

–WebURL

–IncludeTheming

–IncludeBranding

–IncludeSiteExternalSharingCapability

–IncludeRegionalSettings

–IncludeLists “listurl”

Site script actions

Branding &

Other Site

Settings

Apps & Solutions

SharePoint

Components

JSON Schema: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/site-design-json-schema

SharePoint Components• createSPList

• addSPField

• deleteSPField

• addSPFieldXml

• createSiteColumn

• createSiteColumnXml

• Global Taxonomy

• addSiteColumn

• addContentType

• createContentType

• removeContentType

• addSPView

• removeSPView

• setSPFieldCustomFormatter

Register Solutions:

• installSolution

• SPFx Extension support • associateExtension

• associateListViewCommandSet

• associateFieldCustomizer

Settings• addPrincipalToSPGroup

• addNavLink (QL, Hub, footer)

• removeNavLink (QL, Hub, footer)

• applyTheme

• setSiteLogo

• setSiteBranding

• Header layout

• Header Background

• Navigation Style

• Footer Visibility

• setRegionalSettings

• setSiteExternalSharingCapability

• triggerFlow

• joinHubSite

• activateSPFeature

Branding

SharePoint theming documentation: aka.ms/spsitetheming & aka.ms/spthemegenerator

Designing for accessibility: : aka.ms/fabric-toolkit and aka.ms/fabric-sketch-toolkit

Modern SharePoint PnP starter kit: github.com/SharePoint/sp-starter-kit

Site scripts & site designs

Site design and site script overview: http://aka.ms/spsitedesigns

Site script GitHub repo: http://aka.ms/spsitescriptsamples

Additional Resources

Demo: Site Scripts and Site Designs

https://aka.ms/spdevdays19