Développement des macros dans les requêtes de liste de contenu

Propriétés de composant prises en charge

Les propriétés suivantes prennent en charge la syntaxe du modèle Mustache JS :

• Liste des contenus

  • Chaîne de requête supplémentaire

  • Par exemple : updatedDate gt "{{#content.date}}today - 3 days{{/content.date}}"

• Titre/Paragraphe/Texte

  • Texte enrichi saisi via CKEditor

  • Par exemple : "Content REST API format for date: {{#content.date}}now{{/content.date}}"

Syntaxe de composant prise en charge

L'objet content.date est pris en charge et prêt à l'emploi. Il comprend deux paramètres principaux, today et now.

La valeur today convertit l'heure actuelle du navigateur en minuit ce soir, puis convertit cette valeur en heure UTC.

• {{#content.date}}today{{/content.date}} est développée vers la valeur de navigateur de minuit ce soir, convertie en valeur UTC et au format de date d'API REST de contenu. Par exemple :

  2220181008065959999

• Vous pouvez alors compléter la valeur comme suit :

  today +/-  [day | week | month | year]

• La valeur today se comporte également différemment selon si vous y ajoutez ou soustrayez une valeur. Si vous y soustrayez une valeur, elle utilisera l'heure du matin. Si vous y ajoutez une valeur, elle utilisera l'heure à minuit. Par exemple :

  • {{#content.date}}today - 1 day{{/content.date}} est développée vers hier en début de journée.

  • {{#content.date}}today + 2 days{{/content.date}} est développée vers après-demain à minuit.

La valeur now convertit l'heure actuelle du navigateur en heure UTC sans ajustement.

• {{#content.date}}now{{/content.date}} est développée vers l'heure actuelle du navigateur convertie en valeur UTC et au format de date d'API REST de contenu.

• Vous pouvez également compléter now en ajoutant hour. Ce qui donne :

  now +/-  [hour | day | week | month | year]

• Par exemple :

  • {{#content.date}}now + 2 hours{{/content.date}} : valeur correspondant à dans deux heures à partir de maintenant, convertie en heure UTC et au format de date d'API REST de contenu

  • {{#content.date}}now - 1 day{{/content.date}} : valeur hier à cette heure du navigateur, convertie en heure UTC et au format de date d'API REST de contenu

Utilisation de la syntaxe de composant prise en charge

Pour utiliser le développement de macro dans la chaîne de requête supplémentaire (admettons que vous souhaitiez renvoyer toutes les valeurs au cours des 3 dernières semaines), vous devez saisir :

updatedDate gt "{{#code.date}}today - 3 weeks{{/code.date}}"

Seule la date est renvoyée. Par conséquent, pour utiliser l'appel d'API REST de contenu, des guillemets sont ajoutés lorsque vous construisez la chaîne de requête, comme lorsque vous saisissez une valeur statique.

MustacheJS

Pour la syntaxe, référencez les pages du modèle Mustache JS à l'adresse mustache.github.io/mustache.5.html.

Une modification a été apportée à l'instance Mustache exécutée lors du développement des chaînes. Mustache fournit un développement text qui utilise {{ }} et un développement html qui utilise {{{ }}}. Le développement de texte se différencie par le fait qu'il effectue un encodage HTML sur la chaîne. Autrement dit, si la valeur est développée vers a < b, le résultat est a < b. Cela n'est pas recommandé pour la construction de chaînes d'URL. Vous pourriez indiquer à l'utilisateur d'employer le développement HTML, mais cela représenterait une charge supplémentaire et générerait davantage de problèmes, par exemple devoir expliquer à l'utilisateur pourquoi il doit utiliser {{{ }}}.

Pour vous éviter ces complications, Mustache a été configuré de sorte à n'oublier aucune valeur lors de l'utilisation de {{ }}. {{ }} et {{{ }}} se comportent donc de la même façon. L'encodage des résultats est ainsi conservé en tant qu'exercice pour les utilisateurs, si nécessaire.

Modèle Mustache OOTB

Mustache exige l'application d'un modèle pour le développement. Dans l'exemple précédent, {{#content.date}} est déjà définie comme prête à l'emploi, tandis qu'une nouvelle propriété, telle que {{person}}, peut être ajoutée par le développeur. Si l'utilisateur saisit une valeur dans Mustache qui n'est pas dans le modèle, le résultat sera une chaîne vide. Ainsi, dans le cas de Hello {{person}}, la valeur sera développée vers Hello uniquement, sauf si le développeur ajoute person au modèle.

L'objet de modèle utilisé est un objet global appelé SCSMacros. Le développeur peut ajouter des entrées supplémentaires dans cet objet. L'objet sera transmis à Mustache lors de l'évaluation du modèle.

L'objet de modèle prêt à l'emploi prend actuellement en charge uniquement l'objet content.date :

{   
   content: {
     date: <lambda implementation>
   }
}

Modèle Mustache personnalisé

Le développeur peut améliorer les objets pris en charge en fonction des besoins. Il peut ainsi introduire un objet lastTwoDays et simplifier le développement vers {{lastTwoDays}} uniquement.

Pour étendre le modèle afin qu'il prenne en charge des éléments tels que Hello {{person}} dans l'exemple précédent, vous devez ajouter un objet person à SCSMacros. Vous devez procéder à l'ajout avant l'exécution de la page. Pour ce faire, vous pouvez ajouter une balise de script au début de la mise en page. Par exemple :

<script type="text/javascript">
window.SCSMacros = window.SCSMacros || {};  // define/get the SCSMacros object
window.SCSMacros.person = "World";
</script>

Une fois la modification effectuée, le modèle Hello {{person}} sera développé vers : Hello World.

Si vous voulez transmettre des valeurs à l'objet (par exemple, Hello {{#person}}personId{{/person}}), vous devez implémenter mustache lambda, et encapsuler et développer la valeur dans l'implémentation.

Par exemple :

<script type="text/javascript">
window.SCSMacros = window.SCSMacros || {};  // define/get the SCSMacros object
//implement "person" as a lambda
window.SCSMacros.person = function () {
  var people = { '111': { firstName: 'Small', lastName: 'World'}, '222': { firstName: 'Big', lastName: 'Universe'} };  
  return function (text, render) {     
     var expandedText = render(text);
     var chosenPerson = people[expandedText] || people['111'];      
     return chosenPerson.firstName;
  }
};
</script>

Une fois la modification effectuée, le modèle Hello {{#person}}111{{/person}} sera développé vers Hello Small, tandis que le modèle Hello {{#person}}222{{/person}} sera développé vers Hello Big.