Comment puis-je ajouter un bouton dans un fichier .md avec Jekyll
Existe-t-il un moyen d'ajouter un simple bouton HTML, avec une mise en forme CSS à un fichier Markdown en utilisant Jekyll? Je suis très nouveau à Jekyll et je ne connais pas vraiment mon chemin. Je voudrais faire de ce bouton un lien vers une URL externe pour un téléchargement de fichier.
Option 1. Shortcode + javascript
La première consiste à utiliser des shortcodes WordPress style et à les remplacer par jQuery. Vous aurez besoin de regex intelligent en javascript pour y parvenir. Dans ce cas, votre démarque peut ressembler à ceci:
Lorem ipsum dolor sit amet.
[button url="http://www.google.com"]
Option 2. Inclure le fichier Jekyll
Une autre option consiste à utiliser un Jekyll:
Lorem ipsum dolor sit amet.
{% include button.html url="http://www.google.com" %}
Option 3. HTML simple
La troisième option consiste à écrire du HTML simple:
Lorem ipsum dolor sit amet.
<button name="button" onclick="http://www.google.com">Click me</button>
Option 4. La méthode de démarque
La dernière option consiste à utiliser le démarquage pour ajouter une classe et à utiliser CSS pour styliser le lien comme un bouton.
Lorem ipsum dolor sit amet.
[Click me](http://www.google.com){: .btn}
Conclusion
Ce que vous choisirez dépendra de vos préférences. La première solution est la plus simple si vous souhaitez effectuer un portage depuis ou vers WordPress. La seconde est la vraie voie Jekyll. Le troisième (HTML) est tout aussi logique. Le dernier, le démarque, est le plus beau (à mon avis), mais ne génère pas de vrai bouton.
De John Gruber lui-même :
Markdown n'est pas un remplacement pour HTML, ni même proche de lui. Sa syntaxe est très petite, ne correspondant qu'à un très petit sous-ensemble de balises HTML. L'idée n'est pas de créer une syntaxe qui facilite l'insertion de balises HTML. À mon avis, les balises HTML sont déjà faciles à insérer. L'idée de Markdown est de faciliter la lecture, l'écriture et l'édition de la prose.
Un bouton n'est pas en prose. Pour créer, vous devez utiliser HTML:
<button name="button">Click me</button>
Utilisez l'option include (2) recommandée par JoostS. Voici des informations plus spécifiques qui montrent comment incorporer un bouton à l'aide d'inclusions avec paramètres. Dans votre dossier _includes, créez votre modèle de bouton (par exemple, button.html), comme ceci:
<button type="button" class="btn btn-{{include.button_class}} active">{{include.button_name}}</button>
(Ce code HTML suppose que vous utilisez Bootstrap pour vos boutons .)
Les endroits où j'ai écrit {{include.button_name}} seront les paramètres que vous passerez dans votre include.
Maintenant sur votre page Markdown, incluez votre bouton comme ceci:
{% include button.html button_name="My Button" button_class="primary" %}
J'utilise cette technique pour les légendes, les images et les alertes dans ma documentation. Fondamentalement, chaque fois que vous avez un formatage HTML complexe, vous pouvez le masquer dans un modèle d'inclusion comme celui-ci.