Atualizando-se com Eleventy: Configuração e Coleções

Na semana passada, configuramos o Eleventy, um gerador de sites estáticos, e o submetemos a algumas etapas básicas. Usei o terminal de comando Warp e o editor Zed para criar uma bela página de índice baseada em gato. Dê uma olhada rápida nessa postagem antes de continuar aqui. Certifique-se de ver como o Eleventy obtém o mínimo índice.md e cria um index.html no _site diretório usando o layout.html modelo. Vamos desenvolver isso neste post.

Agora que aceitamos o Eleventy em nossas vidas, deveríamos criar um ambiente de trabalho um pouco melhor. Onde deixei as coisas na semana passada, o diretório “output” se chamava _site (o nome padrão onze), mas não havia diretório “fonte”, então os arquivos de modelo estavam apenas na raiz do projeto:

Como deixamos as coisas

Tentar descobrir o que está fazendo o que em projetos web já é ruim o suficiente, então vamos pelo menos criar um fonte diretório para que possamos diferenciar os modelos que produzem o site da mecânica de outros lugares.

É hora de iniciar um arquivo de configuração do Eleventy na raiz do projeto. Estou acostumado com um diretório de origem chamado fontee a maioria dos sites mantém sua produção em público, então vamos usar essa convenção:

module.exports = function(eleventyConfig) {
  // Return your Object options:
  return {
    dir: {
      input: "src",
      output: "public"
    }
  }
};

Como estamos alterando a configuração, precisamos reiniciar o servidor. E quando o fizermos, nada acontecerá até que movamos nosso material de origem de maneira adequada e excluamos o site antigo. Isso induz _inclui.

Quando fazemos os movimentos de arquivo necessários e corremos, nosso gatinho (ok, um gatinho diferente) retorna. A estrutura de diretórios, ignorando o diretório de módulos, mas incluindo o arquivo de configuração, agora se parece com isto:

Se você estiver lendo isso em nosso site, verá uma linda foto minha no final, em um balão redondo. Gostaria de colocar isso no meu site, à esquerda do cabeçalho. Engenharia reversa, posso ver que minha imagem está envolvida em uma classe “pós-autor-avatar”. Como a maioria dos hackers, aprendo roubando Empréstimo.

O truque com o pequeno círculo parece estar aqui:

.author-profile-photo-column img 
{ 
  display: block; 
  width: 100%; 
  aspect-ratio: 1/1; 
  -o-object-fit: cover; 
  object-fit: cover; 
  border-radius: 30px 
}

Em primeiro lugar, lidei com a minha imagem foto-de-mim.png e coloque o arquivo no novo fonte diretório. Depois de mexer com o JavaScript em layout.html, Eu tenho esse:

..
header {
            background-color: #333;
            color: white;
            padding: 20px;

            h1 {
                display: inline-block;
                vertical-align: middle;
            }
            img {
                width: 5%;
                border-radius: 30px;
                display: inline-block;
                vertical-align: middle;
                float: left;
            }
}
..

No entanto, se você tentar construir isso, não funcionará. A imagem não será copiada automaticamente para o diretório público. Se você fez um separado estilo.css arquivo também, o mesmo é verdade. O Eleventy sabe converter e copiar o que reconhece como arquivos de modelo, mas não tocará em outros arquivos, a menos que você solicite:

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy('./src/*.css');
  eleventyConfig.addPassthroughCopy('./src/*.png');

  return {
    dir: {
     input: "src",
     output: "public"
    }
  }
};

Assim que salvarmos isso, tudo estará bem:

O gato está de volta

E o diretório fica assim:

Como lembrete, a página de índice é produzida com índice.md:

---
layout: "layout.html"
title: "David's Home Page"
---

Hi there, I like cats!!

Agora devo ressaltar que não gosto de gatos que muito, mas comecei este tema e estou condenado a completá-lo. Então, vou fingir que quero adicionar páginas sobre gatos famosos.

Nosso fio condutor é que queremos escrever conteúdo em Markdown e deixar que a Eleventy cuide da criação do site. Ao manter o site, não queremos lidar com HTML.

Então faremos um gatos diretório no fontee crie nosso primeiro cat garfield.md nele:

---
layout: "layout.html"
title: "Garfield"
---

Garfield doesn't like Mondays.

Se o servidor estiver funcionando (eu o tenho em outra aba Warp), você verá o Eleventy processando-o nos bastidores.

E, de fato, se seguirmos o caminho do navegador criado, veremos o seguinte:

Esse não é o Garfield

OK, essa não é uma foto do Garfield. Além disso, minha bela imagem de avatar desapareceu do canto superior esquerdo. Além disso, queremos criar um link para esta página a partir da página de índice.

Em primeiro lugar, se quisermos mostrar uma imagem do Garfield, teremos que nos referir a ela no assunto frontal. Mas primeiro também precisaremos alterar o layout. Então, vamos colocar o endereço de origem do nosso placekitten no índice.md assunto inicial:

---
layout: "layout.html"
title: "David's Home Page"
catimage: "https://placekitten.com/800/400"
---

Hi there, I like cats!!

E altere nosso layout para usar o novo imagem de gato variáveis:

.. 
<body> 
 <header> 
  <img src="photo-of-me.png"> 
  <h1>{{ title }}</h1> 
 </header> 
 <img class="cat" src="{{ catimage }}" alt="A nice cat"> {{content}} 
 <footer> 
  <p>&copy; 2024 Nice Cat Page. All rights reserved.</p> 
 </footer> 
</body> 
..

Agora, vamos adicionar uma imagem (da Wikipédia) à nossa garfield.mdarquivo.

---
layout: "layout.html"
title: "Garfield"
catimage: "Garfieldand_friends.png"
---

Garfield doesn't like Mondays.

Quase pronto. Mas ainda não vai funcionar. Veja o diretório:

Minha imagem do Garfield não apareceu na saída público diretório. E sabemos o porquê, pela nossa configuração acima. Então, vamos ajustar o arquivo de configuração para que os gatos também passem direto:

module.exports = function(eleventyConfig) {
  // Return your Object options:

  eleventyConfig.addPassthroughCopy('./src/*.css');
  eleventyConfig.addPassthroughCopy('./src/*.png');
  eleventyConfig.addPassthroughCopy('./src/cats/*.png');

  return {
    dir: {
      input: "src",
      output: "public"
    }
  }
};

Agora Garfield se junta aos gatos:

Bem, na verdade a imagem está um diretório abaixo, não é? Então, mais uma alteração no arquivo Garfield:

---
layout: "layout.html"
title: "Garfield"
catimage: "../Garfieldand_friends.png"
---

Garfield doesn't like Mondays.

E finalmente pegamos nosso gato:

Também, usando a mesma lógica, resolvemos nosso problema de avatar. Ele sempre fica no mesmo lugar, pronto para ser compartilhado por todas as páginas, mas não no mesmo lugar em relação à página de chamada. Colocando uma barra na frente dele, afirmamos que o procuramos na raiz:

.. 
 <header> 
  <img src="/photo-of-me.png"> 
  <h1>{{ title }}</h1> 
 </header> 
..

Isso deve lhe dar uma ideia sobre os pequenos problemas que ocorrem e onde persistir ao resolvê-los. Mas você notará que o Eleventy é bastante indulgente e transparente – cometendo erros bastante fáceis de corrigir.

OK, então precisamos de um link para o nosso gato na primeira página. Mas se adicionarmos outros gatos, teremos que começar imediatamente a hackear o layout para adicionar novos links – e não queremos fazer isso. Queremos deixar a Eleventy escolher novos gatos e construir os links para nós.

Coleções e tags

Felizmente, Eleventy cuida disso. Tem o conceito de um coleção de páginas. E nós usamos Tag no cabeçalho para marcar uma página como parte da coleção:

---
layout: "layout.html"
title: "Garfield"
catimage: "../Garfieldand_friends.png"
tags: cats
---

Garfield doesn't like Mondays.

Podemos então percorrer nossos gatos e criar alguma forma de índice:

.. 
 <div class="listcontainer"> 
  <ul> 
   {% for cat in collections.cats %} 
    <li> 
     <a href="/cats/{{ cat.data.title}}">{{ cat.data.title }} </a> 
    </li> 
   {% endfor %} 
  </ul> 
 </div> 
..

Agora podemos ver que Eleventy deu ao Liquid acesso à matéria frontal de cada gato através do dados método. Fora isso, acabei de criar um link que assume que o nome do arquivo é igual ao título. (Poderíamos melhorar isso).

O resultado, com uma pequena ajuda do CSS, é:

Lista de gatos

E isso nos dá um link para a página correta. De agora em diante, poderei adicionar outros gatos no Markdown, e eles simplesmente aparecerão na lista. Nossa próxima parada seria fazer um layout separado para as páginas dos gatos; sempre há mais uma coisa a fazer, mas isso é o suficiente por enquanto.

Então jogue agora e crie seu próprio site com Eleventy. Você descobrirá que aprenderá os truques usuais da web no caminho e que o desenvolvimento iterativo não será punido. Aproveitar.

A postagem Atualizando-se com Eleventy: Configuração e Coleções apareceu pela primeira vez em The New Stack.