jigsaw blog template

Modelo inicial de blog Jigsaw

Este é um modelo inicial para criar um blog bonito e personalizável no Jigsaw com o mínimo de esforço. Você só precisará alterar algumas configurações e estará pronto para começar.

Veja uma prévia do modelo de blog.

Instalação

Depois de instalar o Jigsaw, execute o seguinte comando no diretório do seu projeto:

./vendor/bin/jigsaw init blog

Este modelo inicial inclui exemplos de tipos de páginas comuns e vem pré-configurado com:

• Uma barra de navegação totalmente responsiva
• Tailwind CSS, uma estrutura CSS utilitária que permite personalizar seu design sem tocar em uma linha de CSS
• Purgecss para remover seletores não utilizados do seu CSS, resultando em arquivos CSS menores
• Destaque de sintaxe usando destaque.js
• Um script que gera automaticamente um arquivo sitemap.xml
• Uma página 404 personalizada
• Um componente para aceitar inscrições em um boletim informativo Mailchimp
• Um exemplo de formulário de contato
• Uma barra de pesquisa desenvolvida por Fuse.js e Alpine.js, que indexa seu conteúdo automaticamente e não requer configuração

---

---

Configurando seu novo site

Tal como acontece com todos os sites Jigsaw, as definições de configuração podem ser encontradas em config.php ; você pode atualizar as variáveis ​​nesse arquivo com configurações específicas do seu site. Você também pode adicionar novas variáveis ​​de configuração para usar em seu site; dê uma olhada na documentação do Jigsaw para saber mais.

 // config.php
return [
    ' baseUrl ' => ' https://my-awesome-jigsaw-site.com/ ' ,
    ' production ' => false ,
    ' siteName ' => ' My Site ' ,
    ' siteDescription ' => ' Give your blog a boost with Jigsaw. ' ,
    ...
];

Dica: Este arquivo de configuração também é onde você definirá quaisquer "coleções" (por exemplo, uma coleção de colaboradores do seu site ou uma coleção de postagens de blog organizadas por tópico). Confira a documentação oficial do Jigsaw para saber mais.

---

Adicionando conteúdo

Você pode escrever seu conteúdo usando vários tipos de arquivo. Por padrão, este modelo inicial espera que seu conteúdo esteja localizado na pasta source/_posts/ .

A parte superior de cada página de conteúdo contém um cabeçalho YAML que especifica como ela deve ser renderizada. O atributo title é usado para gerar dinamicamente title HTML e tags OpenGraph para cada página. O atributo extends define com qual layout pai do Blade este arquivo de conteúdo será renderizado (por exemplo, _layouts.post será renderizado com source/_layouts/post.blade.php ), e o atributo section define a "seção" do Blade que espera que esse conteúdo seja colocado nisso.

---
extends : _layouts.post
section : content
title : Getting Started
date : 2022-08-02
description : Getting started with the Jigsaw blog starter template
cover_image : /assets/img/post-cover-image-2.png
featured : true
---

---

Adicionando ativos

Quaisquer ativos que precisam ser compilados (como arquivos JavaScript, Less ou Sass) podem ser adicionados ao diretório source/_assets/ e o Laravel Mix irá processá-los ao executar npm run dev ou npm run prod . Os ativos processados ​​serão armazenados em /source/assets/build/ (observe que não há sublinhado neste segundo diretório assets ).

Então, quando o Jigsaw construir seu site, todo o diretório /source/assets/ contendo seus arquivos construídos (e quaisquer outros diretórios contendo ativos estáticos, como imagens ou fontes, que você escolher armazenar lá) serão copiados para as pastas de construção de destino ( build_local , na sua máquina local).

Arquivos que não requerem processamento (como imagens e fontes) podem ser adicionados diretamente a /source/assets/ .

Leia mais sobre como compilar ativos no Jigsaw usando Laravel Mix.

---

Construindo Seu Site

Agora que você editou suas variáveis ​​de configuração e sabe como personalizar seus estilos e conteúdo, vamos construir o site.

 # build static files with Jigsaw
./vendor/bin/jigsaw build

# compile assets with Laravel Mix
# options: dev, prod
npm run dev