info.yml

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'

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

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}'

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

Component thema-instellingen

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

componentThemeSettings:
  TabLinks-892b: 1

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

Editor (TinyMCE 4)

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'

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
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
    Tags:
Hebt u meer vragen? Een aanvraag indienen
Was dit artikel nuttig?
Aantal gebruikers dat dit nuttig vond: 0 van 0
Mogelijk gemaakt door Zendesk