Générer des pages Web à partir de Markdown avec Docsify-This


  • Français


  • Êtes-vous intéressé à tirer parti de Markdown pour le contenu en ligne sans aucun processus de configuration ou de création de site Web ? Que diriez-vous d’intégrer de manière transparente Markdown ou HTML sans contrainte dans plusieurs plates-formes (telles qu’un système de gestion de contenu ou un système de gestion de l’apprentissage) ? Le projet open source Docsify-ceciconstruit avec Docsify.jsoffre un moyen simple de publier, partager et réutiliser du contenu Markdown.

    [ Get the Markdown cheat sheet ]

    Qu’est-ce que Docsify-This ?

    Avec Docsify-This, vous pouvez transformer instantanément n’importe quel fichier Markdown accessible au public en une page Web autonome réactive. Vous pouvez également lier plusieurs fichiers Markdown pour créer un site Web simple. Les concepteurs peuvent modifier l’apparence visuelle des pages affichées à l’aide de l’interface pointer-cliquer de Web Page Builder ou des paramètres d’URL. Vous pouvez également utiliser un ensemble de classes CSS Markdown fournies lors de la création de votre propre contenu Markdown. De plus, si vous utilisez Codeberg ou GitHub pour stocker vos fichiers Markdown, un Modifier cette page Un lien peut être fourni automatiquement pour chaque page afin de prendre en charge la création collaborative.

    C’est open source, vous pouvez donc héberger une instance Docsify-This en utilisant votre propre domaine personnalisé sans risque de verrouillage de la plate-forme.

    Utiliser le générateur de pages Web Docsify-This

    Pour utiliser Web Page Builder, ouvrez un navigateur et naviguez jusqu’au Docsify-Ce site ou votre instance locale. Dans le Générateur de pages Web entrez l’URL d’un fichier Markdown dans un référentiel public de Codeberg ou GitHub (d’autres hôtes Git peuvent également être utilisés via les paramètres Docsify-This URL mais pas dans le Web Page Builder), puis cliquez sur le Publier en tant que page Web autonome bouton.

    (Paul Hibbitts, CC BY-A 4.0)

    Le fichier Markdown est rendu sous la forme d’une page Web autonome avec une URL que vous pouvez copier et partager. Voici un exemple d’URL :

    https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md

    Les pages Web rendues par Docsify-This sont parfaites pour l’intégration, avec la possibilité de styliser visuellement les pages Docsify-This sur la plate-forme de destination.

    (Paul Hibbitts, CC BY-A 4.0)

    Rendu d’autres fichiers dans le même référentiel

    Vous pouvez rendre d’autres fichiers Markdown dans le même référentiel en modifiant directement le paramètre Docsify-This URL page d’accueil. Par exemple:

    https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=anotherfile.md

    Modifier l’apparence de la page Web

    Vous pouvez modifier l’apparence de n’importe quel fichier Markdown affiché dans Docsify-This en utilisant Paramètres d’URL. Par exemple, font-family, font-size, link-coloret line-height sont tous des attributs CSS courants et sont des paramètres valides pour Docsify-This :

    https://docsify-this.net/?basePath=https://raw.githubusercontent.com/hibbitts-design/docsify-this-one-page-article/main&homepage=home.md&font-family=Open%20Sans,sans-serif

    Vous pouvez également modifier l’apparence visuelle à l’aide d’un ensemble de Classes CSS Markdown. Par exemple, vous pouvez ajouter le button classe à un lien :

    [Required Reading Quiz due Jun 4th](https://canvas.sfu.ca/courses/44038/quizzes/166553 ':class=button')  

    Cela produit une image de bouton au lieu d’un simple lien texte :

    (Paul Hibbitts, CC BY-A 4.0)

    En plus des classes CSS Markdown prises en charge par Docsify-This, vous pouvez définir vos propres classes personnalisées dans vos fichiers Markdown affichés. Par exemple:

    <style>
    .markdown-section .mybutton, .markdown-section .mybutton:hover {
      cursor: pointer;
      color: #CC0000;
      height: auto;
      display: inline-block;
      border: 2px solid #CC0000;
      border-radius: 4rem;
      margin: 2px 0px 2px 0px;
      padding: 8px 18px 8px 18px;
      line-height: 1.2rem;
      background-color: white;
      font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
      font-weight: bold;
      text-decoration: none;
    }
    </style>
    
    [Custom CSS Class Button](# ':class=mybutton')

    Produit ceci :

    (Paul Hibbitts, CC BY-A 4.0)

    Inclure des extraits HTML

    Comme pris en charge par Markdown standard, vous pouvez inclure des extraits de code HTML. Cela vous permet d’ajouter des éléments de mise en page à votre rendu HTML. Par exemple:

    <div class="row">
    <div class="column">
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    
    </div>
    <div class="column">
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    
    </div>
    </div>

    Intégrer Docsify-This en tant qu’iFrame

    Vous pouvez intégrer des pages Web Docsify-This à l’aide d’un iFrame dans presque toutes les plateformes. Vous pouvez également utiliser des paramètres d’URL pour vous assurer que votre contenu intégré correspond à votre plate-forme de destination :

    <p><iframe style="overflow: hidden; border: 0px #ffffff none; margin-top: -26px; background: #ffffff;" src="https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=home.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue,Helvetica,Arial,sans-serif&font-size=1&hide-credits=true" width="800px" height="950px" allowfullscreen="allowfullscreen"></iframe></p>

    (Paul Hibbitts, CC BY-A 4.0)

    Intégrer Docsify-This avec une URL externe

    Dans certains systèmes de gestion de l’apprentissage (LMS), y compris l’open source Moodle et même le propriétaire Toile, vous pouvez lier des pages Web externes à un menu de navigation de cours et parfois plus. Par exemple, vous pouvez utiliser l’outil de redirection dans Canvas pour afficher les pages Web Docsify-This.

    url=https://docsify-this.net/?basePath=https://raw.githubusercontent.com/paulhibbitts/cmpt-363-222-pages/main&homepage=resources.md&edit-link=https://github.com/paulhibbitts/cmpt-363-222-pages/blob/main/resources.md&font-family=Lato%20Extended,Lato,Helvetica%20Neue, Helvetica,Arial,sans-serif&font-size=1&hide-credits=true

    Nos ressources préférées sur l’open source

    Intégrer Docsify-This et Git

    Pour tirer pleinement parti des avantages du contrôle de version et potentiellement de la collaboration à l’aide d’un Modifier cette page lien, stockez vos pages Docsify-This Markdown dans un référentiel Git sur Codeberg ou GitHub. Plusieurs outils open source fournissent une interface graphique pour Git, notamment Bureau GitHub (récemment publié en open source), Git-Cola et SparkleShare. Les éditeurs de texte VSCode et Pulsar Edit (anciennement Atom.io) intègrent également Git.

    [ Get the Git tips and tricks eBook ]

    La publication Markdown simplifiée

    Les avantages de la publication basée sur Markdown sont accessibles à tous, grâce à Docsify. Et grâce à Docsify-This, c’est plus facile que jamais. Essayez-le au Docsify-Ce site.

    Source

    Houssen Moshinaly

    Pour contacter personnellement le taulier :

    Laisser un commentaire

    Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    Copy code