义现代sharepoint站点 - microsoft...branding sharepoint theming documentation:...
TRANSCRIPT
自定义现代SharePoint站点陆虎 <[email protected]> 陆添超 <[email protected]>
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