téléchargement blog template - blog template Téléchargement du code source

blog template

Autres catégories

1.0.0

Télécharger

Modèle de blog scientifique basé sur AI Summer

exemple-accueil

Le modèle actuel peut être utilisé pour les blogs scientifiques car il prend en charge une grande variété de composants nécessaires tels que :

Rendu au latex
Blocs de code avec mise en évidence
Références et citations
Intégrer des gifs et des vidéos
Composants interactifs
Table des matières
Articles similaires

Autres fonctionnalités importantes :

Possibilité de filtrer et d'afficher les articles par sujet
Pages d'auteur personnalisables
100% réactif
Les pages peuvent être créées avec du code React standard ou en utilisant Markdown
Rechercher avec un index local à l'aide de flexsearch
Prêt pour le référencement
Images réactives et pipeline de prétraitement d’images
Google Analytics et gestionnaire de balises
génération de robots.txt
Génération de flux XML
Génération de plan de site

Voir un exemple en direct sur notre site Web

Le modèle est basé sur theaisummer.com, que nous supprimons de tout ce qui est inutile afin de fournir un cadre minimal, prêt à l'emploi mais riche en fonctionnalités pour les blogs scientifiques.

exemple-blog-1

Informations importantes

Le modèle est construit avec Gatsby v2, une certaine familiarité avec React est donc requise. Pour ceux qui souhaitent le personnaliser, nous recommandons fortement de consulter la documentation officielle de Gatsby.
Typescript et TSX sont utilisés à la place de Javascript
Le préprocesseur Sass est utilisé pour le style
MDX est utilisé à la place de Markdown afin que nous puissions ajouter des composants React personnalisés dans Markdown. Cela nous permet une grande personnalisation, des widgets interactifs et bien plus encore.
Le latex est rendu avec Katex et remarque-math
Les blocs de code sont rendus avec prism-react-renderer
Suivant le paradigme de Gatsby, GraphQL est utilisé pour interroger le contenu du site Web
Le contenu peut également provenir de fichiers YAML
Les formulaires peuvent être créés à l'aide de React-hook-form
Animations sur le support du défilement

exemple-blog-2

Comment exécuter le modèle

Installer les dépendances nécessaires

 $ yarn install

Exécutez Gatsby

 $ yarn start

Que devez-vous faire avant de déployer ?

Mettez à jour gatsby-config avec les informations de votre site
Téléchargez vos logos et icônes dans assets/images/
Mettre à jour le composant Seo.tsx
Mettez à jour vos thèmes dans styles/
Mettre à jour les fichiers yaml dans site-content

Comment déployer

Construire les fichiers statiques finaux

 $ yarn build

Aperçu du site Web

 $ yarn serve

Transférez le dossier public vers l'option d'hébergement de votre choix. Par exemple, AI Summer est déployé sur l'hébergement Firebase, mais n'importe quel stockage objet fera très bien l'affaire.

 $ firebase deploy

exemple-accueil-2

Soutien

Si vous aimez vraiment ce référentiel et le trouvez utile, pensez à (★) le mettre en vedette , afin qu'il puisse atteindre un public plus large de personnes partageant les mêmes idées. Ce serait très apprécié :) !

Contribuer et signaler des bugs

Vous êtes plus que bienvenu pour contribuer au modèle en ajoutant plus de fonctionnalités, en corrigeant des bugs et bien plus encore. N'oubliez pas que ce modèle a été créé par des ingénieurs en machine learning et non par des développeurs web, alors nos sincères excuses par avance ?

Si vous trouvez un bug, créez un problème GitHub ou, mieux encore, soumettez une pull request. De même, si vous avez des questions, postez-les simplement en tant que problèmes GitHub. Plus d'informations ici.