![Como usar a função slice() do Python](https://optimuscloud.com.br/wp-content/uploads/2024/01/1706151002_Como-usar-a-funcao-slice-do-Python-150x150.jpg)
Como usar a função slice() do Python
24 de janeiro de 2024![4 fatores de um mundo nativo do WebAssembly](https://optimuscloud.com.br/wp-content/uploads/2024/01/1706152681_4-fatores-de-um-mundo-nativo-do-WebAssembly-150x150.jpg)
4 fatores de um mundo nativo do WebAssembly
25 de janeiro de 2024Na 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:
![](https://optimuscloud.com.br/wp-content/uploads/2024/01/Atualizando-se-com-Eleventy-Configuracao-e-Colecoes.png)
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:
![](https://optimuscloud.com.br/wp-content/uploads/2024/01/1706151163_939_Atualizando-se-com-Eleventy-Configuracao-e-Colecoes.png)
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:
![](https://optimuscloud.com.br/wp-content/uploads/2024/01/1706151163_788_Atualizando-se-com-Eleventy-Configuracao-e-Colecoes.png)
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>© 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, é:
![](https://optimuscloud.com.br/wp-content/uploads/2024/01/1706151164_968_Atualizando-se-com-Eleventy-Configuracao-e-Colecoes.png)
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.