static timeline generator
1.0.0
Créez facilement une page Web de chronologie statique comme ma chronologie Wikimedia. Découvrez un aperçu de cet exemple de site, déployé avec les pages GitHub : https://molly.github.io/static-timeline-generator/.
Contenu
Clonez ce référentiel, puis exécutez npm install à partir du répertoire.
npm run-script serve construira le projet et servira les fichiers statiques localement sur http://localhost:8080. npm run-script build exécute simplement l'étape de construction sans démarrer le serveur de développement.
Presque tout le contenu que vous devez modifier se trouve dans src/_data/content.js .
header (HTML, facultatif) : Le contenu à afficher dans l'en-tête en haut de la page.footer (HTML, facultatif) : Le contenu à afficher dans le pied de page en bas de la page.entries (tableau d'objets, obligatoire ) : La liste des entrées à afficher sur la timeline, dans l'ordre dans lequel elles doivent s'afficher.id (chaîne, obligatoire ) : un identifiant unique pour cette entrée de chronologie.categories (tableau de chaînes, facultatif) : une liste de catégories qui s'appliquent à cette entrée. Ceux-ci apparaîtront sous forme de cases à cocher en haut de la page et permettront aux lecteurs de filtrer la chronologie. Ils ne peuvent pas contenir de virgules. Ils peuvent être séparés par des traits d'union ou des espaces ( sample category ou sample-category s'afficheront toutes deux sur la page en tant que Sample category ). Les entrées sans aucune catégorie seront toujours affichées.color (chaîne, facultatif) : couleur du cercle qui s'affiche sur la ligne temporelle. Les options déjà définies sont green , red et grey . Vous pouvez définir des couleurs supplémentaires dans css/custom.css (voir ci-dessous).faicon (chaîne, facultatif) : Le nom d'une icône Font Awesome à utiliser dans le cercle sur la chronologie. Explorez les options. C'est juste le nom de l'icône (sans le préfixe fa- ). Par exemple : anchor .datetime (chaîne, datetime ou date doit être présente) : un spécificateur de date et d'heure pour l'élément. Cela peut être dans n’importe quel format reconnu par moment.js . Je fais normalement "AAAA-MM-JJ HH-SS". S'il n'y a pas d'heure, seulement une date, utilisez le paramètre date au lieu de datetime .date (chaîne, datetime ou date doit être présente) : un spécificateur de date pour l'élément. "AAAA-MM-JJ".title (HTML, obligatoire ) : le titre de l'entrée de la chronologie.image (facultatif) : une image à afficher dans l'entréesrc (chaîne, obligatoire) : Une URL directe vers le fichier image à intégrer dans la page, ou un lien relatif vers une image de ce répertoire (par exemple img/filename.png ).link (chaîne, facultatif) : un lien hypertexte vers la page contenant l'image, si vous souhaitez que les gens puissent cliquer dessus pour voir une version plus grande, etc.alt (chaîne, facultatif) : texte alternatif décrivant l'image.caption (HTML, facultatif) : une légende décrivant l'image.body (HTML, obligatoire ) : le texte de l'entrée de la chronologie. Si vous souhaitez plusieurs paragraphes, vous devez inclure vous-même les balises <p> ; sinon, il sera ajouté.links (tableau d'objets, facultatif) : Un tableau de liens à afficher au bas de l'entrée.href (string, obligatoire ) : la cible du lien.linkText (HTML, obligatoire ) : texte du lien.extra (HTML, facultatif) : HTML supplémentaire à afficher à la fin du lien.pageTitle (string, obligatoire ) : Le texte à placer dans la balise <title> , pour définir le titre de la page dans le navigateur.pageDescription (chaîne, facultatif) : description de la page à inclure dans les balises méta.pageAuthor (string, optinal) : auteur de la page pour accéder aux balises méta. Si vous souhaitez ajouter plus d'options de couleur pour les cercles sur la timeline, vous pouvez modifier le fichier src/css/custom.css pour ajouter les vôtres. Vous pouvez utiliser cet outil pour choisir des couleurs et obtenir leurs codes de couleur hexadécimaux. Ils sont définis ainsi :
. timeline-icon . yourcolorhere {
background-color : # hexcol or code;
} Vous utiliserez ensuite color: yourcolorhere dans le fichier content.js.
Remplacez les images dans le dossier src/img pour personnaliser le favicon de la page et l'image OpenGraph.
Une fois que vous avez exécuté npm run-script buld , vous verrez un répertoire _site contenant des fichiers HTML/CSS/JS statiques avec le contenu de votre site. Vous pouvez désormais utiliser n’importe quel hébergement de site statique pour déployer ces fichiers !
Pour déployer votre site statique sur les pages GitHub (gratuit), créez une branche contenant les fichiers statiques dans le répertoire racine en exécutant git subtree push --prefix _site origin gh-pages . Ensuite, vous pouvez accéder aux options Paramètres > Pages de votre référentiel et choisir « Déployer à partir d'une branche », puis sélectionner gh-pages comme branche.
Il existe de bons tutoriels pour déployer un site statique sur divers autres services gratuits. Quelques-uns sont répertoriés ci-dessous.
Vous pouvez également rechercher des didacticiels sur la façon de déployer un site construit avec Eleventy, puisque c'est ce qui alimente ce projet. Certains services d'hébergement Web comme Vercel prennent spécifiquement en charge onze-dix de manière très pratique.
npm run-script build_site Les chronologies s'afficheront bien sur les tablettes :
ou appareils mobiles :
Cela devrait bien fonctionner sur tous les navigateurs modernes. IE <9 n'est pas pris en charge.
Sans JavaScript activé, la page se dégrade gracieusement. Cependant, les publications s'afficheront dans une chronologie à une seule colonne et les filtres ne s'afficheront pas.
Ce projet utilise
Il est publié sous licence MIT.
