‐‐‐
title: À propos de nous
description: Ce que nous faisons.
‐‐‐

Quelques informations sur nous.

 ‐‐‐
title: Notre équipe
description: Informations sur nous.
‐‐‐

Qui sommes-nous et ce que nous faisons.

 ‐‐‐
title: Politique de confidentialité
description: Nous gardons vos coordonnées confidentielles.
‐‐‐

Notre politique de confidentialité.

 {
   "layout" :   "page.njk" 
} 

• index.html : la page d'accueil
• about / index.html : page à propos de nous
• about / team / index.html : page d'équipe
• about / privacy / index.html : page de politique de confidentialité

 npm  i @ 11ty / eleventy-navigation --save- dev

 module .  exports   = [19659033] config   =>   {

  

  
  config .  addPlugin  (  require  ( '@ 11ty / eleventy-navigation' )  ) ; 


  
   return [19659035] {

    dir :   {
      entrée :   'src' 
      sortie :   'build' 
    } 

  } ; 
} ; 

1. Une touche pour le menu de la page. Cela peut être identique au titre mais il est souvent plus court.
2. Un parent facultatif qui fait référence à la clé de la page parente .
3. Un
4. facultatif numéro de commande ; les valeurs inférieures apparaissent en premier dans le menu.

 ‐‐‐
titre: 11ty site de démarrage
description: Il s'agit d'un site Web de démonstration généré à l'aide du générateur de site statique 11ty.
mise en page: page.njk
onzeNavigation:
  clé: maison
  commande: 100
‐‐‐

 ‐‐‐
title: À propos de nous
description: Ce que nous faisons.
onzeNavigation:
  clé: à propos
  commande: 200
‐‐‐

 ‐‐‐
title: Notre équipe
description: Informations sur nous.
onzeNavigation:
  clé: équipe
  parent: à propos
  commande: 210
‐‐‐

 ‐‐‐
title: Politique de confidentialité
description: Nous gardons vos coordonnées confidentielles.
onzeNavigation:
  clé: confidentialité
  parent: à propos
  commande: 220
‐‐‐

 {% include "partials / htmlhead.njk"%}

 < en-tête > 
   < nav > 
    {{collections.all | eleventyNavigation | eleventyNavigationToHtml | sûr }}
   </  nav > 
 </  en-tête > 

 < main > 
...

Améliorer la navigation

 < ul > 
   < li >   < a   href  =  " / "  >  domicile  </  a >   </  li > 
   < li > 
     < a   href  =  " / about / "  >  about  </  a > 
     < ul > 
       < li >   < a   href  =  " / about / team / "  >  équipe  </  a >   </  li > 
       < li >   < a   href  =  " / about / privacy / "  >  confidentialité  </  a >   </  li > 
     </  ul > 
   </  li > 
 </  ul > 

• offre une option pour afficher le menu à un niveau spécifique - tel que le niveau supérieur uniquement dans l'en-tête et toutes les pages du pied de page
• mettre en évidence la page active tout en la rendant non cliquable
• définir les classes de style pour les éléments de menu actifs et ouverts.

 {% include "partials / htmlhead.njk"%}

 < en-tête > 
   < nav > 
    {% navlist collections.all | onzeventyNavigation, page, 1%}
   </  nav > 
 </  en-tête > 

 < main > 
{% block content%}

   < h1 >  {{title}}  </  h1 > 

  {{contenu | sûr }}

{% endblock%}
 </  main > 

 < pied de page > 
   < nav > 
    {% navlist collections.all | onzeventyNavigation, page, 2%}
   </  nav > 
 </  pied de page > 

{% include "partials / htmlfoot.njk"%}

1. Chaque page filtrée via la fonction eleventyNavigation () qui renvoie une liste hiérarchique d'objets page. Chaque page définit un tableau children de sous-pages.
2. La page actuelle .
3. Un niveau facultatif . Une valeur de 1 renvoie le HTML pour le niveau supérieur uniquement. 2 renvoie le niveau supérieur et toutes les pages enfants immédiates.

  

  
   config .  addShortcode  ( 'navlist'   require  ( '. /lib/shortcodes/navlist.js'[19659040[/)[19659040[/)[19659040Often;

  const 
  listType  =   'ul' 
  elementActive  =   'fort' 
  classActive  =   'actif' 
  classOpen  =   'open' ; 


module .  exports   =   ( pageNav  page  maxLevel  =   999   ])   =>   {

   function   navRecurse  ( entry  level  =   1  )   {

     let  childPages  =   '' ; 

     if   ( level  < maxLevel ) [19659035] {
       pour   ( let  enfant  de  entrée .  enfants )   {
        childPages  + =   navRecurse  ( child  level  ++ ) ; 
      } 
    } 

     laissez 
      active  =   ( entrée .  url   ===  page .  url ) 
      classList  =   [] ; 

     if   ( ( active  &&  childPages )   ||  childPages .  includes  ( ` < $ { elementActive }  > "  ] ) )  classList .  push  ( classOpen ) ; 
     if   ( active )  classList .  push  ( classActive ) ; 

     return   (
       '<li'   + 
       ( classList .  length  ?   ` class ="  $ { classList .  join  ( '' )  }   "`   :   '' )   + 
       '> «  + 
       ( actif ?   ` < $ { elementActive }  > `   :   ` < a href = " $ { entrée .  url  }  ">  " )   + 
      entrée .  title   + 
       ( active ?   ` </  $ { elementActive }  >  `  :   '' )   + 
       ( childPages ?  «  < $ { listType }  >  $ { childPages }   </  $ { listType }  >  «  :  » )   + 
       «» 
    ) [19659040]; 

  } 

   let  nav  =   '' ; 
   for   ( let  entry  of  pageNav )   {
    nav  + =   navRecurse  ( entry ) ; 
  } 

   return   ` < $ { listType }  >  $ { nav }   </  $ { listType }  >  ` ; 

} ; 

 < ul > 
   < li >   < a   href  =  " / "  >  domicile  </  a >   </  li > 
   < li   class  =  " active "  >   < strong >  environ  </  strong >   </  li > 
 </  ul > 

 < ul > 
   < li >   < a   href  =  " / "  >  domicile  </  a >   </  li > 
   < li   class  =  " open active "  > 
     < fort >  environ  </  fort > 
     < ul > 
       < li >   < a   href  =  " / about / team / "  >  équipe  </  a >   </  li > 
       < li >   < a   href  =  " / about / privacy / "  >  confidentialité  </  a >   </  li > 
     </  ul > 
   </  li > 
 </  ul > 
 

Ajout d'articles / de billets de blog

 ‐‐‐
title: Le premier article
description: Ceci est le premier article.
date: 2020-09-01
Mots clés:
   -  HTML
   -  CSS
‐‐‐

Ceci est un article d'article.

 ##  Sous-titre 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 ‐‐‐
title: Le sixième article
description: Ceci est le sixième article.
brouillon: vrai
date: 2029-09-06
Mots clés:
   -  HTML
   -  CSS
   -  JavaScript
‐‐‐

  const 
  dev  =  global .  dev    =   ( process .  env .  ELEVENTY_ENV   == =   'développement' ) 
  maintenant  =   nouvelle   Date  () ; 

module .  exports   =   config   =>   {
 ... 
} 

  
   config .  addCollection  ( 'post'   collection   => 

    collection
      .  getFilteredByGlob  ( './ src / articles / *. Md' ) 
      .  filter  ( p   = >  dev  ||   (!  p .  data .  draft   &&  p .  date   <=  maintenant ) ) 

  ) ; 

 {% étend "page.njk"%}

{% block content%}

   < h1 >  {{title}}  </  h1 > 

  {% if date%}  < p   class  =  " time "  >   < time   datetime  =  " {{date}} "  >  {{date}}  </  time >   </  p >  {% endif%}

   < p   class  =  " words "  >  {{content | wordcount}} mots  </  p > 

  {{contenu | sûr }}

  {% set nextPost = collections.post | getNextCollectionItem (page)%}
  {% if nextPost%}  < p >  Article suivant:  < a   href  =  " {{nextPost .url}}  " >  {{nextPost.data.title}}  </  a >   </  p >  {% endif%}

  {% set previousPost = collections.post | getPreviousCollectionItem (page)%}
  {% if previousPost%}  < p >  Article précédent:  < a   href  =  " {{previousPost .url}}  " >  {{previousPost.data.title}}  </  a >   </  p >  {% endif%}

{% endblock%}

 {
   "layout"  :   "post.njk" 
} 

 ‐‐‐
title: Index des articles
description: Une liste d'articles publiés sur ce site.
mise en page: page.njk
onzeNavigation:
  clé: articles
  commande: 900
pagination:
  données: collections.post
  alias: pagelist
  inverse: vrai
  taille: 3
‐‐‐

Les articles suivants sont disponibles.

1. Elle définit le modèle standard page.njk .
2. Elle ajoute la page en tant qu'élément de menu articles .
3. ] Il crée une liste nommée pagelist à partir de collections.post l'inverse (les messages les plus récents en premier) et autorise jusqu'à trois éléments par page. Avec six articles, Eleventy générera deux pages avec trois articles sur chacun.

 {% block content%}

   < h1 >  {{title}}  </  h1 > 

  {{contenu | sûr }}

  {% include "partials / pagelist.njk"%}

{% endblock%}

 {% if pagelist%}
 < à part   classe  =  " pagelist "  > 

  {% - pour le message dans la liste de pages -%}
   < article > 

     < h2 >   < a   href  =  " {{post.url}} "  >  {{post.data.title}}  </  a >   </  h2 > 

    {% if post.data.date%}  < p   class  =  " time "  >  [19659060] < time   datetime  =  " {{post.data.date}} "  >  {{post.data. date}}  </  heure >   </  p >  {% endif%}

     < p >  {{post.data.description}}  </  p > 

   </  article > 
  {% - endfor -%}

 </  mis à part > 
{% fin si %}

 {% si pagination.href.previous ou pagination.href.next %}
 < nav   class  =  " pagenav "  > 

  {% if pagination.href.previous%}
     < p >   < a   href  =  " {{pagination.href.previous}}  " >  précédent  </  a >   </  p > 
  {% fin si %}

  {% if pagination.href.next%}
     < p >   < a   href  =  " {{pagination.href.next}}  " >  suivant  </  a >   </  p > 
  {% fin si %}

 </  nav > 
{% fin si %}

  ELEVENTY_ENV  =  development

  set   ELEVENTY_ENV  =  development

  $ env : ELEVENTY_ENV  =  "development" 

Creating Custom Filters

1. ymd () qui convertit une date en format lisible par machine YYYY-MM-DD pour l'attribut HTML datetime et
2. friendly () qui convertit une date en un format lisible par l'homme, par ex. 1er janvier 2020 .

  const  toMonth  =   new   Intl .  DateTimeFormat  ( ' fr '  { mois :  ' long ' } ) ; 



module .  exportations .  ymd   =   date   =>   (

  date  instanceof   Date  ? 
     ` $ { date .  getUTCFullYear  ()  }   -  $ {  Chaîne  ( date .  getUTCMonth  ()   +   1 ) ) [19659040].  padStart  ( 2   '0' )  }   -  $ {  String  ] ( date .  getUTCDate  () ) .  padStart  ( 2   » 0 ')  }   «  :  » 

) ; 



module .  exportations .  amical   =   date   =>   (

  date  instanceof   Date  ? 
    date .  getUTCDate  ()   +   ''   +  au mois .  format  ( date )   +   ','   +  date .  getUTCFullYear  ()  :   '' 

 ) ; 

  const 
  roundTo  =   10 
  readPerMin  =   200 
  numFormat  =   nouveau   Intl .  NumberFormat  ( 'en' ) ; 

module .  exports   =   count   =>   {

   const 
    words  =   Math .  ceil  ( count  /  roundTo )   *  roundTo 
    mins  =   Math .  ceil  ( count  /  readPerMin ) ; 

   return   `[19659469] $ { numFormat .  format  ( mots )  }   mots,  $ { numFormat .  format  ( min )  }   -minute read  " ; 

}  ; 

  

  
    const  dateformat  =   require  ] ( './ lib / filters / dateformat' ) ; 
  config .  addFilter  ( 'datefriendly'  dateformat .  friendly ) ; 
  config .  addFilter  ( 'dateymd'  dateformat .  ymd ) ; 

  
  config .  addFilter  ( 'readtime'   require  ( './ lib / filters / readtime' )  ) ; 

 {% if date%}  < p   class  =  " time "  >   < heure   datetime  =  " {{date | dateymd}} "  >  {{date | datefriendly}}  </  heure >   </  p >  {% endif%}

   < p   class  =  " words "  >  {{content | wordcount | heure de lecture}}  </  p > 

 {[19659225]%   if  post .  data .  date  % }  < p  class  =  "time" >  < time datetime  =  "{{post.data.date | dateymd}}" >  { ] { post .  data .  date   |  datefriendly } }  < /  time >  < /  p >  {%  endif % } 

 < p   class [19659062] =  " heure "  >   < time   datetime  =  " 2020- 09-05  " >  5 septembre 2020  </  time >   </  p > 

 < p   class  =  " words "  >  80 mots, 1 minute de lecture  </  p > 
 

Traiter les images avec des modèles JavaScript

 config .  addPassthroughCopy  (  'src / images' ) ; 

1. une méthode data () qui renvoie les paramètres de front-matière sous forme d'objet JavaScript
2. a render () - qui renvoie généralement une chaîne, mais qui peut également exécuter des processus synchrones ou asynchrones et renvoyer true .

 npm  i imagemin imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-dev

  const 
  dest  =   './ build / images' 

  fsp  =   require  ( 'fs' ) .  promises 
  imagemin  =   require  ( 'imagemin' ) 
  plugins  =   [
     require  ( 'imagemin-mozjpeg' )  () 
     require  ([19659248] 'imagemin-pngquant' )  ( { strip :   true  } ) 
     require  ( 'imagemin-svgo' )  () 
  ] ; 

module .  exports   =   class   {

   data  ()   {

     return   {
      permalien :   false 
      eleventyExcludeFromCollections :   true 
    } ; 

  } 

  
   async   render  ()   {

    
     try   {[19659439] laissez  dir  =   attendre  fsp .  stat  ( dest ) ; 
       if   ( dir .  isDirectory  () )   return   true ; 
    } 
     catch  ( e )  {} 

    
     console .  log  ( 'optimizing images' ) ; 

     attendent   imagemin  ( [ 'src / images / *'   '! Src / images / *. Js' ]   {
      destination :  dest 
      plugins
    } ) ; 

     return   true ; 

  } 
} ; 

 < header > 

   < p   class  =  " logo "  >   < a   href  =  " / "  >   < img   src  =  " / images / logo.svg  "  largeur  = "  50  "  hauteur  = "  50  "  alt  = "  11ty starter  " >  11ty starter  </  a >   </  p > 

   < nav > 
    {% navlist collections.all | onzeventyNavigation, page, 1%}
   </  nav > 

   < chiffre >   < img   src  =  " / images / {% if hero%} {{hero }} {% else%} orb.jpg {% endif%}  "  largeur  = "  400  "  hauteur [19659062] =  " 300 "   alt  =  " décoration "    />  [19659060] </  chiffre > 

 </  en-tête > 

 {
   "layout" :   "post.njk" 
   "hero" :   "phone.jpg" 
} 

Traiter le CSS avec des transformations

 npm  i postcss postcss-advanced-variables postcss-nested postcss-scss cssnano --save-dev

 const 
  postcss  =   require  ( 'postcss' ) 
  postcssPlugins  =   [
     require  ( 'postcss-advanced-variables' ) 
     require  ( 'postcss-nested «) 
     require  (« cssnano ») 
  ] 
  postcssOptions  =   {
     de :   'src / scss / entry.scss' 
    syntaxe :   require  ( 'postcss-scss' ) 
    carte :  dev ?   { inline :   true  }  :   false 
  } ; 

module .  exports   =   async   ( content  outputPath )   =>   {

   if   (!  Chaîne  ( outputPath ) .  endsWith  ( '. Css' )  )   return  content ; 

   return   (
     await   postcss  ( postcssPlugins ) .  process [19659040] ( content  postcssOptions ) 
  ) .  css ; 

} ; 

  
   config .  addTransform  ] ( 'postcss'   require  ( './ lib / transforms / postcss' ) ) ; 
  config .  addWatchTarget  ( './ src / scss /' ) ; 

 @import   '01 -settings / _variables '; 
 @import   '01 -settings / _mixins' [19659040]; 


 @import   '02 -generic / _reset '; 


 @import   '03 -elements / _primary' ; 

 ‐‐‐
permalien: /css/main.css
eleventyExcludeFromCollections: true
‐‐‐
@import 'main.scss';

Minification du HTML avec des transformations

 npm  i html-minifier --save-dev

  const  htmlmin  =   require  ( 'html- minifier ») ; 

module .  exports   =   ( content  outputPath  =   '. html' )   => [19659035] {

   if   (!  String  ( outputPath ) .  endsWith  ( '. Html' ) )   return  content ; 

   return  htmlmin .  minify  ( content   ] {
    useShortDoctype :   true 
    removeComments :   true 
    collapseWhitespace :   true 
  } ) ; 

} ; 

  
   config .  addTransform  ( ] 'htmlminify'   require  ( './ lib / transforms / htmlminify' ) ) ; 

Inlining Assets with Transforms

Le module inline-source peut gérer toutes les situations pour vous. Installez-le avec ceci:

 npm  i inline-source --save-dev

Maintenant, ajoutez un nouveau fichier lib / transforms / inline.js avec le code suivant pour vérifier et traiter le contenu HTML:

  const   { inlineSource  }   =   requiert  ( 'inline-source' ) ; 

module .  exports   =   async   ( content  outputPath )   =>   {

   if   (!  Chaîne  ( outputPath ) .  endsWith  ( '. Html' )  )   return  content ; 

   return   await   inlineSource  ( content   {
    compress :   true 
    rootpath :   './ build /' 
  } ) ; 

} ; 

Enregistrez la transformation dans .eleventy.js avant l'instruction return :

  
   config .  addTransform  ( 'inline'   nécessitent  ( './ lib / transforms / inline' ) ) ; 

Ajoutez maintenant les attributs en ligne à n'importe quelle balise ou . Par exemple:

 < img   src  =  " /images/logo.svg "   width  =  " 50 "   hauteur  =  " 50 "   alt  =  " 11ty starter  "  inline > 

Traitement JavaScript avec des modèles JavaScript

 npm  i rollup rollup-plugin-terser --save-dev

  import   *   as  theme  from   './ lib / theme.js' ; 

 const 
  jsMain  =   'js / main.js' 

  rollup  =   requiert  ( 'rollup' ) 
  terser  =   require  ( 'rollup-plugin-terser' ) .  terser 

  inputOpts  =   {
    entrée :   './ src /'   +  jsMain
  } 

  outputOpts  =   {
    format :   'es' 
    sourcemap :  dev 
    plugins :   [
       terser  ( {
        mangle :   {
          toplevel :   true 
        } 
        compresser :   {
          drop_console :  !  dev 
          drop_debugger :  !  dev
        } 
        output: {
          quote_style: 1
        }
      })
    ]
  }
  ;


module.exports = class {

  data() {

    return {
      permalink: jsMain,
      eleventyExcludeFromCollections: true
    };

  }

  
  async render() {

    const
      bundle = await rollup.rollup(inputOpts),
      { output } = await bundle.generate(outputOpts),
      out = output.length && output[0];

    let code = '';
    if (out) {

      
      code = out.code;

      
      if (out.map) {
        let b64 = new Buffer.from(out.map.toString());
        code += '//# sourceMappingURL=data:application/json;base64,' + b64.toString('base64');
      }

    }

    return code;

  }
};

  config.addWatchTarget('./src/js/');

<script type="module" src="/js/main.js"></script>

 </  corps > 
 </  html > 

Build a Production Site

ELEVENTY_ENV=production

set ELEVENTY_ENV=production

$env:ELEVENTY_ENV="production"

Your Next Steps with Eleventy

• Create an index page for each tag listing the associated articles. Remember Eleventy automatically creates separate collections for each tag.
• Generate an RSS feed.xml file listing all posts.
• Create a sitemap.xml file listing all pages.
• Build a 404 error page and generate appropriate code to handle it (such as an .htaccess file for Apache).
• Generate other root files such as favicon.ico or a service worker.
• Use Eleventy’s pagination feature to generate pages from data.
• And score bonus points for importing WordPress content into static pages.

Is Eleventy for You?

• are new to SSGs or unhappy with your current option
• like Node.js and want to use JavaScript during development
• want to jump on the latest cool thing!