Helpcenter / CMS / Website templates

info.yml

Gewijzigd op Jan 24, 2024

Het bestand info.yml definieert een gebruikersinterface (UI) door relevante informatie over de gebruikersinterface op te slaan in een vooraf gedefinieerd formaat. De .yml-extensie verwijst naar het YAML-formaat, een door mensen leesbaar opmaakformaat. Raadpleeg de YAML-specificatie voor meer informatie over de taal zelf.

Kort gezegd bevat de info.yml de volgende soorten informatie over de gebruikersinterface:

Naam van de gebruikersinterface.
Definitie van menu's.
Definitie van varianten.
Definitie van beschikbare containers.
Component gerelateerde config.
Artikel template gerelateerde config.
Definitie van fragmentstijlen.

Schrijfregels

Het schrijven van een YAML-bestand is heel eenvoudig; je moet er alleen rekening mee houden dat `TAB`-tekens voor inspringen niet zijn toegestaan. Houd rekening met het volgende:

Gebruik nooit TAB-tekens voor inspringen. Gebruik in plaats daarvan 2 spaties.
Strings moeten tussen aanhalingstekens worden geplaatst.

Beschikbare properties

Naam van de UI

De eigenschap name wordt gebruikt om de UI te identificeren in de context van de UI-kiezer in het CMS.

name: 'Foobar bazquu'

Klik om te kopiëren

Laden van standaard stylesheets

Standaard laden alle UI's een aantal stylesheets die zijn gedefinieerd in het Procurios Platform. U kunt dit gedrag uitschakelen:

loadDefaultStyleSheets: false

Klik om te kopiëren

Menu's zijn als volgt gedefinieerd:

menulist:
  menuId:
    name: '@{Menu name}'
    maxDepth: 4
  anotherMenuId:
    name: '@{Another menu name}'
    root: menuId
    maxDepth: 2
    startDepth: 1
    hideSingleSubMenu: false
    showImage: true
    imageSize: 48
    classList:
        example: '@{Example}'
        anotherExample: '@{Another example}'

Klik om te kopiëren

Verduidelijking, waarin de term tree betrekking heeft op de siteboom gedefinieerd in het CMS:

De name van een menu wordt gebruikt in het Menubeheer dat toegankelijk is in het CMS. Het hebben van een name is vereist als u wilt dat het menu beschikbaar is in het Menubeheer.
root stelt je in staat de oorsprong van de boom te veranderen.
maxDepth definieert de maximale nestdiepte van de boom.
startDepth definieert de startdiepte van de boom.
hideSingleSubMenu definieert of, wanneer er slechts één (zichtbare) geneste pagina is, deze wel of niet getoond moet worden (categorie gedraagt zich als een pagina). Standaard true
showImage bepaalt of een afbeelding in het CMS kan worden geplaatst en vóór de paginatitel wordt weergegeven. Standaard false
imageSize definieert de hoogte van de afbeelding
classList een lijst met klassen die in het CMS kunnen worden gekozen om styling aan het specifieke menu-item toe te voegen

Als je de waarde van startDepth instelt op -1, wordt de structuur gedwongen om de 'siblings' van de actieve pagina te bevatten. Bijvoorbeeld:

menulist:
  mainMenu:
    name: '@{Main menu}'
    maxDepth: 1
  subMenu:
    root: nav_main
    maxDepth: 1
    startDepth: -1

Klik om te kopiëren

In plaats van een submenu in info.yml te definiëren, zou je ook het standaard ##submenu## token in een template kunnen gebruiken.

Variant definities

Een gebruikersinterface bestaat uit een of meer varianten (inclusief de standaardvariant). Voor elke variant kan een subset van de volgende eigenschappen worden ingesteld:

variantId:
  name: '@{Variant name}'
  menus: [mainMenu, subMenu]
  file: variant.html
  loadPolyfills: [placeholder]
  loadAmdLoader: false
  contentContainers:
    content: '@{Main column}'
    sidebarRight: '@{Right sidebar}'

Klik om te kopiëren

Verduidelijking:

De eigenschap name wordt gebruikt om de variant te identificeren in de context van de UI-kiezer in het CMS.
De eigenschap menus heeft een reeks gedefinieerde menu's (in menulist). Hierdoor zijn de menu's beschikbaar voor gebruik in de variant.
De root file van de variant die moet worden weergegeven.
De eigenschap contentContainers heeft een reeks containers die beschikbaar moeten zijn voor gebruik in het CMS.
Met de eigenschap loadAmdLoader kunt je onze amdLoader laden.
Met de eigenschap loadPolyfillskun je vooraf gedefinieerde polyfills laden.
- placeholder: Laad polyfill voor het "placeholder" -attribuut
- classlist: Laad polyfill voor de ClassList API
- closest: Laad polyfill voor de dichtstbijzijnde API
- requestanimationframe: Laad polyfill voor de requestAnimationFrame API
- promise: Lichtgewicht belofte polyfill voor de browser en het knooppunt. A + compatibel.
- picturefill: Lichtgewicht afbeelding en srcset polyfill voor de browser.
- customEvent: Polyfill voor het maken van CustomEvents op IE9 / 10/11 als native implementatie ontbreekt.

Houd er rekening mee dat:

loadPolyfills is een hamer: het is beter om een polyfill te definiëren als een afhankelijkheid van een component, in plaats van het voor alle gebruikers / browsers te laden.
Het is beter om loadAmdLoader aan te roepen in een component die daadwerkelijk de amdLoader gebruikt

Includes

Een template kan in kleinere stukken worden opgedeeld, die je in de hoofd- of varianttemplate html kunt opnemen. Deze 'include'-templates kunnen allemaal dezelfde tokens bevatten als de normale template bestanden, behalve andere include-bestanden. Deze templates moeten in de map 'includes' worden geplaatst. De definitie in het yml-bestand is gebaseerd op het bestandspad, zonder '.html'.

includes: [header/ribbon, header/header, footer]

Klik om te kopiëren

Deze tokens kunnen in de template of variant worden gebruikt, bijvoorbeeld: ##include:header/ribbon## zal de inhoud van het bestand op ##uipath##/includes/header/ribbon.html bevatten

Component thema-instellingen

Het is mogelijk om een specifiek Theme van een specifieke Component te overschrijven. Gebruik de volgende configuratie:

componentThemeSettings:
  TabLinks-892b: 1

Klik om te kopiëren

Houd er rekening mee dat u de volledig gekwalificeerde naam (de unieke naam) van een component moet gebruiken.

Snippet thema's

Het is mogelijk om thema's te definiëren (snippet styles is de officiële term) voor een specifiek snippet:

snippetStyles:
  PostListSnippet:
    featured-list: '@{Homepage features}'
    must-read-list: '@{Must reads}'

Klik om te kopiëren

In dit specifieke voorbeeld zou het resultaat zijn:

Een selectbox in het `Weblogbericht overzicht` waarmee een gebruiker een van de twee gedefinieerde thema's kan selecteren, of standaard.
Een extra classname op de artikel div zodat de styling kan verschillen tussen thema's.
In snippets die Twig ondersteunen: een extra token met de classname, zodat je er alles mee kunt doen wat je wil.

Momenteel ondersteunde snippets:

PostListSnippet
PostSnippet
MeetingListSnippet
MeetingDetailSnippet
PublicRelationListSnippet
NewsContent

Editor (TinyMCE 4)

List of classnames in link dialog

Bij het toevoegen / bewerken van een link kan de gebruiker een classname op de link zetten. Dit wordt meestal gedaan om de link visueel naar iets anders te transformeren, bijv. een call-to-action-knop.

In deze context heeft de editor twee modi:

Het presenteert de gebruiker een gewoon tekstveld waarin hij de classname kan invoeren (standaard)
Het presenteert de gebruiker een vooraf gedefinieerde lijst met classnames

Als u een lijst met classnames opgeeft, schakelt de editor over naar een lijst. Je kunt het als volgt toevoegen:

tinyMce4:
  linkClassList:
    button-blue: '@{Blue button}'
    button-yellow: '@{Yellow button}'

Klik om te kopiëren

In deze lijst wordt de sleutel gebruikt als classname-waarde, de waarde wordt gebruikt als titel van de optie in de lijst.

Houd er rekening mee dat dit alleen werkt als de editor is voorzien van de klassenlijst. Het CMS doet dit automatisch.

Lijst met classnames voor opmaak

Om enige flexibiliteit aan de editor / sjabloon toe te voegen, zonder het uiterlijk en het gevoel van de sjabloon in gevaar te brengen, kun je sjabloon-specifieke classnames toevoegen. Deze kunnen bijvoorbeeld worden gebruikt om wat tekst te markeren als inleiding. Of om waar nodig stijlen te creëren voor minder belangrijke tekst. Dit alles, binnen de standaard editor en zonder de noodzaak van een article_template

Als je een lijst met classnames opgeeft, voegt de editor 'Sjabloonstijlen' toe aan de lijst met indelingen. Je kunt het als volgt toevoegen:

tinyMce4:
  customClassList:
    myBlockClassName: 
      name: '@{My block classname}'
      block: 'p'
      wrapper: true
    myInlineClassName: 
      name: '@{My inline classname}'
      inline: 'span'

Klik om te kopiëren

In deze lijst wordt de sleutel gebruikt als classname-waarde. Je moet dan een naam en een 'blok'- of' inline'-element definiëren. Het element wordt rond de geselecteerde tekst geplaatst met de gedefinieerde klassenaam.

Houd er rekening mee dat dit alleen werkt als de editor is voorzien van de classlist. Het CMS en blog berichten doen dit.

Voorbeeld

name: "My Example"
html: true

loadAmdLoader: true
loadDefaultStyleSheets: false
loadPolyfills: [classlist]

# Menu definitions:
menulist:
  nav_main:
    name: "@{Main navigation}"
    maxDepth: 2

# Default variant information
menus: [nav_main]
contentContainers:
    content: "@{Main column}"
    footer: "@{Footer}"

variants:
    home:
        name: "@{Home}"
        menus: [nav_main]
        file: variant-home.html
        contentContainers:
            introduction: "@{Introduction}"
            highlights: "@{Highlighted articles}"
            content: true
            footer: true

# Article template definitions
articleTemplates:
  columns:
    name: "@{Columns}"
    category: 5

# Optimize editor
tinyMce4:
  linkClassList:
    button-blue: '@{Blue button}'
	button-yellow: '@{Yellow button}'
  customClassList:
    introduction: 
      name: '@{Introduction}'
      block: 'span'
      wrapper: true

# Lock UI on specific component theme
componentThemeSettings:
  Article-6518: 1

Klik om te kopiëren

Vorige Artikel Website Template maken

Volgende Artikel Artikel templates

Helpcenter

info.yml

Schrijfregels

Beschikbare properties

Naam van de UI

Laden van standaard stylesheets

Menu definities

Variant definities

Includes

Component thema-instellingen

Snippet thema's

Editor (TinyMCE 4)

List of classnames in link dialog

Lijst met classnames voor opmaak

Voorbeeld

CMS

Andere bronnen