R1d40

Posté le dans technologie

40ème jour 100daysofcode. Pluie en Anjou. Irène nous a conté avec plein d’enthousiasme son stage en Irlande auprès des bébés phoques. Menus travaux pour personnaliser le site. Réglage des dates en français, personnalisation des favicons, enrichissement de l’archétype post. Bataille difficile sur le markup OpenGraph pour partager des images sur FB.

Date en français

Le thème appelle plusieurs types de dates dans les layouts (Date, lastmod, Publishdate…).

Afin de disposer d’une date en français, j’ai modifier les partiels suivants :

(Le code source est disponible sur ce repo github).

Pour le fun, je songe aux usages de la variable front matter ‘expirydate’

the datetime at which the content should no longer be published by Hugo; expired content will not be rendered unless the –buildExpired flag is passed to the hugo command.

Partager sur Facebook

lien de référence

Pour créer une carte de partage social, il faut spécifier author dans le fichier config.toml et on doit pouvoir remplacer l’image à partir du front matter comme suit :

title: Comment J'ai Sauvé 3 Bébés Phoques en Irlande
description: Tout ce que vous devez savoir pour aider .
author: Irène Ducamp
date: 2017-02-02T11:57:24+08:00
publishdate: 2017-01-28T02:31:22+08:00
images: [http://christophe.ducamp.me/img/pets/thumbnails/andrew-branch-phoque-unsplash.jpg/
]

D’après ce fil de discussion, un site servi avec https pose problème à FB pour extraction de l’image d’une URL relative sur https. Pas encore testé ce hack, mais il s’agirait donc (si votre site est servi sous https) de créer et tester un nouveau partiel /layouts/partials/meta/ogimage-maybe.html sur la base de cette proposition qui suit. À savoir, utiliser une URL relative dans le metatag og:image en entrant manuellement la version http du domaine ou sous-domaine

{{ if .Params.og_image }}
<meta property="og:image" content="http://example.com{{ .Params.og_image | relURL }}"/>
<meta property="og:image:secure_url" content="{{ .Params.og_image | absURL }}"/>
{{ else }}
<meta property="og:image" content="http://example.com{{ .Site.Params.og_image | relURL }}"/>
<meta property="og:image:secure_url" content="{{ .Site.Params.og_image | absURL }}"/>
{{ end }}

Étude en cours

Sur une image Open Graph actuellement choisie au hasard sur Unsplash pour afficher une image extraite.

Mis à part ça… Unsplash est génial mais il existe d’autres alternatives dans l’industrie des photothèques.

Remplacement de la Favicon

La “ favicon ” du thème After Dark est un logo GoHugo au format SVG qui ne s’affiche pas dans tous les navigateurs.

  1. création d’une image SVG adaptée de l’icône fa-universal-access trouvée chez font-awesome.
  2. ajouté un partiel favicon.html associé à un dossier favicon contenant la liste des liens proposés par RealFaviconGenerator
  3. todo : la favicon s’affiche en page d’accueil mais pas sur les pages de posts.

Archétypes

Raffinage de l’archétype post (ajout de dates, aliases et slug)