{"data":{"markdownRemark":{"html":"

Bien le bonjour !\nContrairement à d'habitude, cet article ne portera pas sur mon avancé de la refonte du site de commit42. Aujourd'hui je vous montre comment créer son propre thème pour Semantic UI React avec GatsbyJS.

\n

Les ressources à ce sujet sont très limitées ; pour ainsi dire je n'en ai trouvé que deux: une en anglais et une en japonais (d'après google traduction)\nJe me suis dit que ça ne serait pas une mauvaise idée de faire une synthèse de tout ce que j'ai compris. Ça pourra peut-être aider d'autre développeur..es !

\n

Installation des dépendances

\n

Pour commencer, installez semantic-ui-react et semantic-ui-css de la façon suivante:

\n
npm install --save semantic-ui-css semantic-ui-react
\n

Ensuite installez less et le plugin gatsby-plugin-less comme ceci:

\n
npm install --save gatsby-plugin-less less
\n

Ajoutez le plugin dans gatsby-config.js:

\n
module.exports = {\n  ...\n  plugins: [\n    ...,\n    `gatsby-plugin-less`,\n    ...\n  ]\n  ...\n}
\n

Ensuite installez semantic-ui-less:

\n
npm install --save semantic-ui-less
\n

Initialiser le dossier pour créer son thème

\n

Allez dans les nodesmodules: node-modules/semantic-ui-less.\nCopiez le fichiertheme.config.example et le dossier`site`.

\n

Retournez dans le dossier de votre projet et créez un dossier /semantic dans src/ .\nY copier ce que vous venez d'aller chercher dans les nodemodules. Renommez theme.config.example en theme.config et `siteensite`.

\n

Ensuite, dans le fichier theme.config que vous venez de copier, remplacez les lignes suivantes:

\n\n

Enfin, tout à la fin ajoutez: @fontPath : "../../../themes/@{theme}/assets/fonts";.

\n

Important: Si vous souhaitez ajouter vos propres fonts, mettez les dans src/semantic/site/globals/fonts.

\n

Votre fichier theme.config devrait ressembler à ça:

\n
/*\n\n████████╗██╗  ██╗███████╗███╗   ███╗███████╗███████╗\n╚══██╔══╝██║  ██║██╔════╝████╗ ████║██╔════╝██╔════╝\n   ██║   ███████║█████╗  ██╔████╔██║█████╗  ███████╗\n   ██║   ██╔══██║██╔══╝  ██║╚██╔╝██║██╔══╝  ╚════██║\n   ██║   ██║  ██║███████╗██║ ╚═╝ ██║███████╗███████║\n   ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝     ╚═╝╚══════╝╚══════╝\n\n*/\n\n/*******************************\n        Theme Selection\n*******************************/\n\n/* To override a theme for an individual element\n   specify theme name below\n*/\n\n/* Global */\n@site        : 'default';\n@reset       : 'default';\n\n/* Elements */\n@button      : 'default';\n@container   : 'default';\n@divider     : 'default';\n@flag        : 'default';\n@header      : 'default';\n@icon        : 'default';\n@image       : 'default';\n@input       : 'default';\n@label       : 'default';\n@list        : 'default';\n@loader      : 'default';\n@placeholder : 'default';\n@rail        : 'default';\n@reveal      : 'default';\n@segment     : 'default';\n@step        : 'default';\n\n/* Collections */\n@breadcrumb  : 'default';\n@form        : 'default';\n@grid        : 'default';\n@menu        : 'default';\n@message     : 'default';\n@table       : 'default';\n\n/* Modules */\n@accordion   : 'default';\n@checkbox    : 'default';\n@dimmer      : 'default';\n@dropdown    : 'default';\n@embed       : 'default';\n@modal       : 'default';\n@nag         : 'default';\n@popup       : 'default';\n@progress    : 'default';\n@rating      : 'default';\n@search      : 'default';\n@shape       : 'default';\n@sidebar     : 'default';\n@sticky      : 'default';\n@tab         : 'default';\n@transition  : 'default';\n\n/* Views */\n@ad          : 'default';\n@card        : 'default';\n@comment     : 'default';\n@feed        : 'default';\n@item        : 'default';\n@statistic   : 'default';\n\n/*******************************\n            Folders\n*******************************/\n\n/* Path to theme packages */\n@themesFolder : 'themes';\n\n/* Path to site override folder */\n@siteFolder: '../../src/semantic/site';\n\n/*******************************\n         Import Theme\n*******************************/\n\n@import (multiple) \"~semantic-ui-less/theme.less\";\n@fontPath : \"../../../themes/@{theme}/assets/fonts\";\n\n/* End Config */
\n

Afin d'utiliser notre propre configuration webpack pour semantic-ui-less ajoutez ce code à votre fichier gatsby-node.js :

\n
const path = require('path');\n\nexports.onCreateWebpackConfig = ({ actions }) => {\n  actions.setWebpackConfig({\n    resolve: {\n      alias: {\n        '../../theme.config$': path.join(__dirname, 'src/semantic/theme.config'),\n      },\n    },\n  });\n};
\n

Si vous n'avez pas déjà de gatsby-browser, créez ce fichier à la racine de votre projet et mettez la ligne suivante dans ce fichier:

\n
require(\"semantic-ui-css/semantic.min.css\")
\n

Pour terminer, dans votre composant layout.js ajoutez: import "semantic-ui-less/semantic.less"; et dans votre page index.js ajoutez import "semantic-ui-css/semantic.min.css"

\n

Créer son thème

\n

Votre configuration est maintenant fin prête, vous allez pouvoir commencer à créer votre thème !

\n

Allez dans src/semantic/site/globals/site.variables et ajoutez les lignes suivantes (par exemple):

\n
@emSize: 13px;\n@fontSize: 13px;\n@fontName: 'Helvetica';
\n

Re-développez votre application avec gatsby develop et observez le résultat !

\n

Utiliser ses propres fonts

\n

Si vous souhaitez utiliser des fonts autres que celles par défaut, voici comment faire:

\n

Dans src/semantic/site/global/site.overrides créer vos @font-face:

\n
@font-face {\n  font-family: 'Poppins';\n  font-style: normal;\n  src: url('fonts/Poppins-BlackItalic.ttf');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;\n}\n\n@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 400;\n  src: url('fonts/Roboto-Light.ttf');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;\n}
\n

Ensuite dans src/semantic/site/global/site.variables créez vos styles de caractères:

\n
@headerFont: 'Poppins';\n@pageFont: 'Roboto';
\n

Ici j'ai défini Poppins comme étant la font pour les titres et Roboto celle pour le corps du texte.

\n

Conclusion 👏

\n

Si tout s'est bien passé vous devriez pouvoir créer votre propre thème pour Semantic UI React ! Vous trouverez juste en dessous mon repo Gihub si vous souhaitez consulter le code.

\n

Mon repo github: https://github.com/EvaSpessotto/theming-gatsby-sui

\n

Sources 🔗

\n

Créer une thème avec Semantic UI React pour React\nhttp://nephewapps.com/2018/02/25/theming-semantic-ui-with-create-react-app/

\n

https://jsramblings.com/2018/03/04/how-to-use-semantic-ui-with-a-custom-theme-in-your-CRA-app.html

\n

Changer les polices de votre thème

\n

https://stackoverflow.com/questions/49621165/how-do-you-include-custom-fonts-in-semantic-ui-instead-of-google-fonts

\n

https://github.com/Semantic-Org/Semantic-UI/issues/6435#issuecomment-398339397

\n

Theming Semantic UI + Gatsby

\n

https://edmcman.github.io/blog/2018-12-31--theming-semantic-ui-react-in-gatsby-js/

\n

https://blog.yohei.tokyo/2019/02/gatsbyjs-semantic-ui/

","excerpt":"Bien le bonjour !\nContrairement à d'habitude, cet article ne portera pas sur mon avancé de la refonte du site de commit42. Aujourd'hui je…","timeToRead":5,"fields":{"slug":"/blog/creer-un-theme-avec-semantic-ui-react-pour-gatsbyjs/"},"frontmatter":{"date":"2019-03-25T15:09:32.644Z","tags":["Semantic UI","GatsbyJS","React"],"title":"Créer un thème avec Semantic UI React pour GatsbyJS","author":"Eva","thumbnail":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAACkUlEQVQoz2WS208TQRTG+z8ZtbfIk4kx+KIPJsbEBx9M9JHExIQURBNJlAcSlcC2YmnFhEtIjEWIXIQWxCJtWrGsBrDhprDd2+zStOzufM4OUEp4+PLNmZz5zZlzxnPl3MX5+40BXL9zoRps8FkBf8AKBAKWz+c7Jb/ffyp2c+pUDQaD8Hq9S5433T0YjAqIve+GEBYg9AgIh8OIxWJcfX19XNFolMfxeJzHbo4gCPWikUgEHttxqlXLxkHVprZlU8dxaKVSoYuLizSdTtNcLkdXVlaoKIo0m83Subk5ms/neY6ba9v2scBix1OSJKtUKqFUkuieJEFWFBSLRYRaWhAKhdDZ2Yn29nb09vaio6MDTU1NaG5uxvb2DuSSDImdYaLH7lEUxVJVFcypztzUNOwzEQbWmNg+ZFmGm+NKlt09GcTQcHSu5q5qQE1V6Sa7pfBvB9mdLSwzX5f2DkFHyYqiwjAJdv9K+PNri8N1op2CcqD7zANC6NP8d5yf/IDHPzO4uTCNa8lx7LHq9k0ThmGCmDoKmXXEX0wh8mQcw11JbG/sQtdPoDWgTQz6MPMVd5dSKOgqB17+MsogJiYnJjA4NAiiGxh6PYvnD4bx6EYULbfe4WN0AeWKwft5psLWXBoNM6MY2Sqif2MNV2fHoBkGUskkEqMJKJLGqpvklbXe7ke4bQyJ2DcY+4Qe9lbhQzmQ1ZMKvdMJdK2JuJeZxyW2dp9cZlWaTMTQkfr0AwMvZ/H22WdE2sYh5oqsrzpVZP5k6uGTY2SDTXZmo4hXhRwi4jL3gVWRf6P6SWuaimzqN6ZGslgXN/klR/2jhBC4wFX3drbplHUdlDXfIQZ31oa6r6HUvoZZJihXzTMwtt78D9VEH4c/fim0AAAAAElFTkSuQmCC","aspectRatio":1.6507413509060955,"src":"/static/39c80a5fe49a891f2a6a31ac90336fa5/c7e19/creer-un-theme-thumbnail.png","srcSet":"/static/39c80a5fe49a891f2a6a31ac90336fa5/475cb/creer-un-theme-thumbnail.png 245w,\n/static/39c80a5fe49a891f2a6a31ac90336fa5/0b65f/creer-un-theme-thumbnail.png 490w,\n/static/39c80a5fe49a891f2a6a31ac90336fa5/c7e19/creer-un-theme-thumbnail.png 980w,\n/static/39c80a5fe49a891f2a6a31ac90336fa5/4cca6/creer-un-theme-thumbnail.png 1002w","sizes":"(max-width: 980px) 100vw, 980px"}}}}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/blog/creer-un-theme-avec-semantic-ui-react-pour-gatsbyjs/"}}