so simple theme
3.2.0
So Simple é um tema Jekyll simples para suas palavras e imagens. Construído para fornecer:
Veja as novidades no CHANGELOG. documentação v2 .
| Descrição | ||
|---|---|---|
| Uma postagem com uma grande imagem de herói. | Visualização | Fonte |
| Uma postagem com uma variedade de elementos HTML comuns mostrando como o tema os estiliza. | Visualização | Fonte |
| Post exibindo o código destacado. | Visualização | Fonte |
| Uma postagem exibindo imagens com uma variedade de alinhamentos. | Visualização | Fonte |
| Todas as postagens agrupadas por ano. | Visualização | Fonte |
| Todas as postagens agrupadas por categoria. | Visualização | Fonte |
| Todas as postagens agrupadas por tag. | Visualização | Fonte |
| Página de categoria. | Visualização | Fonte |
| Listagem de documentos em visualização em grade. | Visualização | Fonte |
Postagens de amostra adicionais podem ser visualizadas no site de demonstração. Os arquivos de origem destes (e de todo o site de demonstração) podem ser encontrados na pasta /docs .
Se você estiver executando o Jekyll v3.5+ e auto-hospedado, poderá instalar rapidamente o tema como uma jóia Ruby. Se você estiver hospedando com GitHub Pages, poderá instalar como um tema remoto ou copiar diretamente todos os arquivos do tema (veja a estrutura abaixo) em seu projeto.
Adicione esta linha ao Gemfile do seu site Jekyll (ou crie um):
gem "jekyll-theme-so-simple" Adicione esta linha ao arquivo _config.yml do seu site Jekyll:
theme : jekyll-theme-so-simpleEm seguida, execute o Bundler para instalar a gem do tema e as dependências:
bundle install
GitHub Pages adicionou suporte completo para qualquer tema hospedado no GitHub.
Substitua gem "jekyll" por:
gem "github-pages" , group : :jekyll_plugins Execute bundle update e verifique se todas as gemas foram instaladas corretamente.
Adicione remote_theme: "mmistakes/[email protected]" ao seu arquivo _config.yml . Remova qualquer outra entrada theme: ou remote_theme:
Observação: seu site Jekyll deve estar visível imediatamente em http://USERNAME.github.io. Caso contrário, você pode forçar uma reconstrução enviando commits vazios para o GitHub (veja abaixo para mais detalhes).
Se você estiver hospedando vários sites baseados em Jekyll com o mesmo nome de usuário do GitHub, você terá que usar páginas de projeto em vez de páginas de usuário. Essencialmente, você renomeia o repositório para algo diferente de USERNAME.github.io e cria uma ramificação gh-pages de master . Para obter mais detalhes sobre como isso funciona, consulte a documentação do GitHub.
Se você bifurcou ou baixou o repositório so-simple-theme poderá remover com segurança os seguintes arquivos e pastas:
.githubdocsexample.editorconfig.gitattributesbanner.jsCHANGELOG.mdGemfilejekyll-theme-so-simple.gemspecpackage.jsonRakefileREADME.mdREADME-OLD.mdscreenshot.pngSe você estiver usando o Ruby Gem ou versões de tema remoto do So Simple, a atualização é bastante fácil.
Para verificar qual versão você está usando atualmente, visualize a fonte do seu site construído e você deverá fazer algo semelhante a:
<!--
So Simple Jekyll Theme 3.0.0
Copyright 2013-2018 Michael Rose - mademistakes.com | @mmistakes
Free for personal and commercial use under the MIT license
https://github.com/mmistakes/so-simple-theme/blob/master/LICENSE
-->
Isso estará no topo de cada arquivo .html , /assets/css/main.css e /assets/js/main.js .
Simplesmente execute bundle update se você estiver usando Bundler (tem um Gemfile ) ou gem update jekyll-theme-so-simple se não estiver.
Verifique se você tem a versão mais recente atribuída em _config.yml
remote_theme: "mmistakes/[email protected]"
Nota: Se @xxx for omitido, o branch master atual do tema será usado. É aconselhável "bloquear" remote_theme em uma versão específica para evitar a introdução de alterações significativas em seu site.
A próxima etapa requer a reconstrução do site GitHub Pages para que ele possa obter as atualizações mais recentes do tema. Isso pode ser conseguido enviando um commit para seu repositório GitHub.
Um commit vazio também fará o trabalho se você não tiver nada para enviar no momento:
git commit --allow-empty -m "Force rebuild of site"
Se quiser aproveitar ao máximo o fluxo de trabalho do Jekyll + GitHub Pages, você precisará utilizar o Git. Para baixar atualizações de tema manualmente, primeiro você deve garantir que haja um controle remoto upstream. Se você bifurcou o repositório do tema, provavelmente está pronto para prosseguir.
Para verificar novamente, execute git remote -v e verifique se você pode buscar na origin https://github.com/mmistakes/so-simple-theme.git .
Para adicioná-lo você pode fazer o seguinte:
git remote add upstream https://github.com/mmistakes/so-simple-theme.git
Agora você pode extrair quaisquer commits feitos no branch master do tema com:
git pull upstream master
Dependendo da quantidade de personalizações feitas após a bifurcação, é provável que haja conflitos de mesclagem. Trabalhe com quaisquer sinalizadores Git de arquivos conflitantes, preparando as alterações que deseja manter e, em seguida, confirme-as.
Outra maneira de lidar com atualizações é baixar o tema – substituindo manualmente seus layouts, inclusões e ativos pelos mais novos. Para ter certeza de que você não perderá nenhuma alteração, revise o histórico de commits do tema para ver o que mudou.
Aqui está uma lista de verificação rápida das pastas/arquivos importantes que você deve ter em mente:
| Nome | |
|---|---|
_layouts | Substitua tudo. Aplique edições se você personalizou algum layout. |
_includes | Substitua tudo. Aplique edições se você personalizou alguma inclusão. |
assets | Substitua tudo. Aplique edições se você personalizou folhas de estilo ou scripts. |
_sass | Substitua tudo. Aplique edições se você personalizou parciais do Sass. |
_data/navigation.yml | Seguro para manter. Verifique se não houve grandes alterações ou acréscimos estruturais. |
_data/text.yml | Seguro para manter. Verifique se não houve grandes alterações ou acréscimos estruturais. |
_config.yml | Seguro para manter. Verifique se não houve grandes alterações ou acréscimos estruturais. |
Observação: se você não estiver vendo a versão mais recente, limpe os caches do navegador e do CDN. Dependendo do seu ambiente de hospedagem, versões mais antigas de /assets/css/main.css , /assets/js/main.min.js ou arquivos *.html podem ser armazenados em cache.
Layouts, inclusões, parciais Sass e arquivos de dados são todos colocados em seus locais padrão. Folhas de estilo e scripts podem ser encontrados em assets e em alguns arquivos relacionados ao desenvolvimento no diretório raiz do projeto.
Observação: se você instalou o So Simple por meio do Ruby Gem ou de métodos de tema remoto, os arquivos de tema encontrados em /_layouts , /_includes , /_sass e /assets estarão ausentes do seu projeto. Isso é normal, pois eles vêm com a joia jekyll-theme-so-simple .
├── _data # data files
| ├── navigation.yml # navigation bar links
| └── text.yml # theme text
├── _includes # theme includes
├── _layouts # theme layouts (see below for usage)
├── _sass # Sass partials
├── assets
| ├── css
| | └── main.scss
| └── js
| └── main.min.js
├── _config.yml # sample configuration
└── index.md # sample home page (recent posts/not paginated)
Após criar um Gemfile e instalar o tema você precisará adicionar e editar os seguintes arquivos:
_config.yml/_data/navigation.yml/_data/text.ymlindex.mdNota: Consulte a documentação de paginação abaixo para obter instruções sobre como habilitá-la na página inicial.
jekyll new Usar o comando jekyll new irá colocá-lo em funcionamento o mais rápido possível.
Edite seus arquivos Gemfile e _config.yml seguindo o guia de instalação acima e o guia de configuração abaixo e, em seguida, crie _data/text.yml conforme as instruções anteriores.
A configuração dos elementos de todo o site ( locale , title , description , url , logo , author , etc.) acontece no _config.yml do seu projeto. Consulte o exemplo de configuração neste repositório para referência adicional.
| Nome | Descrição | Exemplo |
|---|---|---|
locale | Idioma principal do site. | "en-us" |
title | Título do site. | "My Awesome Site" |
description | Uma breve descrição. | "This is my site, it is awesome." |
baseurl | Usado para testar o site com o mesmo URL base no qual será implantado. | /my-base-path |
url | O URL completo do seu site. | "https://your-site.com" |
logo | Caminho para um logotipo de todo o site usado no cabeçalho. | /images/your-logo.png |
Três skins (padrão, claro e escuro) estão disponíveis para alterar a paleta de cores do tema.
default.css | light.css | dark.css |
|---|---|---|
skin : " /assets/css/skins/default.css "
skin : " /assets/css/skins/light.css "
skin : " /assets/css/skins/dark.css "Para usar uma capa personalizada diferente das fornecidas:
/assets/css/skins/default.scss para seu repositório local.skin em _config.yml para fazer referência a esse novo arquivo .css do skin. site.locale é usado para declarar o idioma principal de cada página da web do site.
Exemplo: locale: "en-US" define o atributo lang do site para o estilo de inglês dos Estados Unidos, enquanto en-GB seria para o estilo de inglês do Reino Unido. Os códigos de país são opcionais e a variação locale: "en" também é aceitável. Para encontrar o código do seu idioma e país, verifique esta tabela de referência.
A configuração adequada da localidade é importante para associar o texto localizado encontrado no arquivo de dados de texto.
Nota: O tema padrão é texto em inglês ( en , en-US , en-GB ). Se você alterar a localidade em _config.yml para outra coisa, certifique-se de adicionar a chave de localidade correspondente e o texto traduzido em _data/text.yml .
O nome do host e o protocolo base do seu site. Se você estiver hospedando com GitHub Pages, será algo como url: "https://github.io.mmistakes" ou url: "https://your-site.com" se você tiver um nome de domínio personalizado.
O GitHub Pages agora força https:// para novos sites, portanto, lembre-se disso ao definir seu URL para evitar avisos de conteúdo misto.
Nota: Jekyll substitui o valor de url por http://localhost:4000 ao executar jekyll serve localmente no desenvolvimento. Se você quiser evitar esse comportamento, configure JEKYLL_ENV=production para forçar o ambiente à produção.
Esta opção causa todo tipo de confusão na comunidade Jekyll. Se você não estiver hospedando seu site como uma página de projeto do GitHub ou em uma subpasta (por exemplo, /blog ), não mexa com isso.
No caso do site de demonstração So Simple , ele está hospedado no GitHub em https://mmistakes.github.io/so-simple-theme. Para definir corretamente esse caminho base, eu usaria url: "https://mmistakes.github.io" e baseurl: "/so-simple-theme" .
Para obter mais informações sobre como usar site.url e site.baseurl corretamente conforme pretendido pelos mantenedores do Jekyll, verifique a postagem de Parker Moore sobre o assunto.
Observação: ao usar baseurl lembre-se de incluí-lo como parte do link e dos caminhos de ativos em seu conteúdo. Valores de url: e baseurl: "/blog" tornariam seu site local visível em http://localhost:4000/blog e não em http://localhost:4000. Você pode preceder todos os seus ativos e caminhos de link interno com {{ site.baseurl }} ou usar relative_url do Jekyll.
Para usar os valores de exemplo acima, o seguinte caminho de imagem de {{ '/images/my-image.jpg' | relative_url }} seria exibido corretamente como http://localhost:4000/blog/images/my-image.jpg .
Sem o filtro relative_url , o caminho do ativo estaria faltando /blog e você teria uma imagem quebrada em sua página.
Você pode alterar o formato de data padrão especificando date_format em _config.yml . Ele aceita qualquer um dos formatos de data Liquid padrão.
Por exemplo, o valor padrão de "%B %-d, %Y" poderia ser alterado assim:
date_format : " %Y-%m-%d " Ative trechos de tempo de leitura estimado em todo o site com read_time: true . 200 foi definido como o valor padrão de palavras por minuto - que pode ser alterado por meio de words_per_minute em seu arquivo _config.yml .
read_time : true
words_per_minute : 200Habilite o MathJax (um mecanismo de exibição JavaScript para matemática) em todo o site com
mathjax :
enable : true A opção combo permite escolher uma combinação de componentes MathJax – o padrão é “tex-svg”. E a opção tags permite controlar a numeração das equações - as opções são "ams" (padrão), "all" e "none".
Configuração de amostra:
mathjax :
enable : true # MathJax equations, e.g. true, false (default)
combo : " tex-svg " # "tex-svg" (default), "tex-mml-chtml", etc.
tags : " ams " # "none", "ams" (default), "all" Use facilmente o Google Fonts em todo o seu site, substituindo o name e weights da fonte de acordo. Os pares de fontes sugeridos são os seguintes:
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i " Observação: se outras famílias de fontes forem usadas, adicione e substitua as seguintes variáveis SCSS em /assets/css/main.scss pelos valores font-family fornecidos pelo Google.
$serif-font-family : " Lora " , serif ;
$sans-serif-font-family : " Source Sans Pro " , sans-serif ;
$monospace-font-family : Menlo, Consolas, Monaco, " Courier New " , Courier ,
monospace ;
$base-font-family : $sans-serif-font-family ;
$headline-font-family : $sans-serif-font-family ;
$title-font-family : $serif-font-family ;
$description-font-family : $serif-font-family ;
$meta-font-family : $serif-font-family ;Consulte a documentação da folha de estilo abaixo para obter mais informações sobre como substituir as variáveis padrão do tema.
Divida a lista principal de postagens na página inicial em várias páginas ativando a paginação.
Inclua o plugin jekyll-paginate em seu Gemfile .
group :jekyll_plugins do
gem "jekyll-paginate"
end Adicione jekyll-paginate ao array plugins (anteriormente gems ) em seu arquivo _config.yml e as seguintes configurações de paginação:
paginate : 10 # amount of posts to show per page
paginate_path : /page:num/ Crie index.html (ou renomeie index.md ) na raiz do seu projeto e adicione o seguinte tema inicial:
layout : home
paginate : true Para indexar o conteúdo completo dos seus documentos para uso em uma página de pesquisa, defina search_full_content como true em _config.yml :
search_full_content : true Observação: grandes quantidades de postagens aumentarão o tamanho do índice de pesquisa, impactando o desempenho de carregamento da página. Definir search_full_content como false (o padrão) restringe a indexação às primeiras 50 palavras do conteúdo do corpo.
Por padrão, as categorias e tags adicionadas a uma postagem não estão vinculadas às páginas do arquivo de taxonomia. Para ativar esse comportamento e vincular páginas com postagens agrupadas por categoria ou tag, adicione o seguinte:
category_archive_path : " /categories/# "
tag_archive_path : " /tags/# " Esses caminhos devem imitar os links permanentes usados para suas páginas de arquivo de categorias e tags . O # no final é necessário para direcionar a seção de taxonomia correta nas páginas.
Por exemplo, se você criasse categories.md com o seguinte tema inicial:
title : Categories Archive
layout : categories
permalink : /foo/ Você precisaria alterar category_archive_path para "/foo/# para que os links de categoria funcionassem corretamente.
Nota: Você pode criar categorias dedicadas e páginas de tags manualmente com layout: category e layout: tag . Ou use plugins como jekyll-archives ou jekyll-paginate-v2 para gerá-los automaticamente.
Se você tiver uma conta Disqus , poderá mostrar uma seção de comentários abaixo de cada postagem.
Para habilitar comentários do Disqus, adicione seu nome abreviado do Disqus ao arquivo _config.yml do seu projeto:
disqus :
shortname : my_disqus_shortname Os comentários só aparecem na produção quando criados com o seguinte valor de ambiente: JEKYLL_ENV=production para evitar poluir sua conta Disqus com conteúdo localhost .
Se você não quiser exibir comentários para uma postagem específica, você pode desativá-los adicionando comments: false ao assunto inicial dessa postagem.
Para ativar o Google Analytics , adicione seu ID de rastreamento a _config.yml assim:
google_analytics : UA-NNNNNNNN-N Semelhante aos comentários do Disqus acima, o script de rastreamento do Google Analytics só aparecerá na produção ao usar o seguinte valor de ambiente: JEKYLL_ENV=production .
Para obter mais opções de configuração, consulte a documentação de: jekyll-seo-tag , jekyll-feed , jekyll-paginate e jekyll-sitemap .
Este tema fornece os seguintes layouts, que você pode usar definindo o layout inicial em cada página, da seguinte forma:
---
layout : name
---layout: default Este layout lida com toda a estrutura básica da página, colocando o conteúdo da página entre os elementos do cabeçalho e do rodapé. Todos os outros layouts herdam este e fornecem estilos e recursos adicionais dentro do bloco {{ content }} .
layout: postEste layout acomoda o seguinte assunto inicial:
| Nome | Tipo | Descrição |
|---|---|---|
image | Corda | Caminho para uma imagem grande associada à postagem. Também usado para OpenGraph, Twitter Cards e miniatura de feed de site, se ativado. Tamanhos de imagem sugeridos. |
image.path | Corda | O mesmo que acima. Usado quando uma thumbnail ou caption também precisa ser atribuída ao objeto image . |
image.caption | Corda | Descreve a imagem ou fornece crédito. Markdown é permitido. |
author | Objeto ou string | Especifique o name do autor, picture , twitter , links , etc. |
comments | Booleano | Desative comentários com comments: false . |
share | Booleano | Adicione links de compartilhamento social a uma postagem com share: true . |
Exemplo de postagem de imagem:
image :
path : /images/post-image-lg.jpg
thumbnail : /images/post-image-th.jpg
caption : " Photo credit [Unsplash](https://unsplash.com/) " Nota: o front mate image.feature foi descontinuado para oferecer suporte total ao jekyll-seo-tag. Se você não estiver usando thumbnail ou caption a imagem da postagem poderá ser atribuída de forma mais concisa como image: /images/your-post-image.jpg .
Exemplo de pós-autor:
# post specific author data if different from what is set in _config.yml
author :
name : John Doe
picture : /images/john-doe.jpg
twitter : johndoe Nota: As informações do autor podem ser centralizadas em _data/authors.yml fazendo o seguinte no início do documento:
author : johndoe Com a chave do autor correspondente em _data/authors.yml :
johndoe :
name : John Doe
picture : /images/john-doe.jpg
twitter : johndoe Nota: o tamanho recomendado author.picture é 150 x 150 pixels.
Para definir quais links aparecem na barra lateral do autor, use a authors.links em _config.yml ou /_data/authors.yml .
| Nome | Descrição |
|---|---|
title | Descreve o link. Não visível, usado para fins de acessibilidade. |
url | URL para o qual o link aponta. |
icon | Corresponde a um ícone Font Awesome, por exemplo, fab fa-twitter-square . |
Exemplo:
author :
links :
- title : Twitter
url : https://twitter.com/username
icon : fab fa-twitter-square
- title : Instagram
url : https://instagram.com/username
icon : fab fa-instagram
- title : GitHub
url : https://github.com/username
icon : fab fa-github-squareNota: Para desativar completamente os links do autor, use:
author :
links : falselayout: page Visualmente, esse layout se parece e funciona de maneira semelhante layout: post , com as seguintes diferenças.
O layout da página forma a base para vários outros layouts, como home , posts , categories , tags , collection , category , tag e search .
layout: home Este layout acomoda o mesmo tema inicial do layout: page , com a adição do seguinte:
paginate : true # enables pagination loop, see section above for additional setup
entries_layout : # list (default), gridQuando a paginação não está habilitada, o padrão da página mostra as últimas 10 postagens. Para alterar a quantidade de postagens exibidas, atribua um valor limite adicionando o seguinte ao cabeçalho da página.
posts_limit : 5 Por padrão, as postagens são mostradas em uma visualização de lista. Para mudar para uma visualização em grade, adicione entries_layout: grid ao cabeçalho da página.
layout: posts Este layout exibe todas as postagens agrupadas por ano em que foram publicadas. Ele acomoda o mesmo tema inicial do layout: page .
Por padrão, as postagens são mostradas em uma visualização de lista. Para mudar para uma visualização em grade, adicione entries_layout: grid ao cabeçalho da página.
layout: categories Este layout exibe todas as postagens agrupadas por categoria. Ele acomoda o mesmo tema inicial do layout: page .
Por padrão, as postagens são mostradas em uma visualização de lista. Para mudar para uma visualização em grade, adicione entries_layout: grid ao cabeçalho da página.
layout: tags Este layout exibe todas as postagens agrupadas por tag. Ele acomoda o mesmo tema inicial do layout: page .
Por padrão, as postagens são mostradas em uma visualização de lista. Para mudar para uma visualização em grade, adicione entries_layout: grid ao cabeçalho da página.
layout: collection Este layout exibe todos os documentos agrupados por uma coleção específica. Ele acomoda o mesmo front mate que layout: page com a adição do seguinte:
collection : # collection name
entries_layout : # list (default), grid
show_excerpts : # true (default), false
sort_by : # date (default) title
sort_order : # forward (default), reverse Para criar uma página mostrando todos os documentos da coleção recipes , você criaria recipes.md na raiz do seu projeto e adicionaria este assunto inicial:
title : Recipes
layout : collection
permalink : /recipes/
collection : recipes Por padrão, os documentos são mostrados em uma exibição de lista. Para mudar para uma visualização em grade, adicione entries_layout: grid ao cabeçalho da página. Se você quiser classificar a coleção por título, adicione sort_by: title . Se você quiser classificação reversa, adicione sort_order: reverse . Se você está simplesmente procurando uma lista que mostre títulos de receitas (sem trechos), adicione show_excerpts: false .
layout: category Este layout exibe todas as postagens agrupadas por uma categoria específica. Ele acomoda o mesmo front mate que layout: page com a adição do seguinte:
taxonomy : # category name
entries_layout : # list (default), grid Por padrão, as postagens são mostradas em uma visualização de lista. Para mudar para uma visualização em grade, adicione entries_layout: grid ao cabeçalho da página.
Para criar uma página mostrando todos os posts atribuídos à categoria foo você criaria foo.md na raiz do seu projeto e adicionaria este assunto inicial:
title : Foo
layout : category
permalink : /categories/foo/
taxonomy : foolayout: tag Este layout exibe todas as postagens agrupadas por uma tag específica. Ele acomoda o mesmo front mate que layout: page com a adição do seguinte:
taxonomy : # tag name
entries_layout : # list (default), grid Por padrão, as postagens são mostradas em uma visualização de lista. Para mudar para uma visualização em grade, adicione entries_layout: grid ao cabeçalho da página.
Para criar uma página mostrando todas as postagens atribuídas à tag foo bar você criaria foo-bar.md na raiz do seu projeto e adicionaria este assunto inicial:
title : Foo Bar
layout : tag
permalink : /tags/foo-bar/
taxonomy : foo barlayout: searchEste layout exibe um formulário de pesquisa e páginas relacionadas com base na consulta.
Índice de conteúdo da página: title , excerpt , content (quando ativado), categories , tags e url .
Se você deseja excluir páginas/postagens específicas do índice de pesquisa, defina o sinalizador de pesquisa como false em seu cabeçalho.
search : false Para indexar o conteúdo completo dos seus documentos, defina search_full_content como true em _config.yml :
search_full_content : true Observação: grandes quantidades de postagens aumentarão o tamanho do índice de pesquisa, impactando o desempenho de carregamento da página. Definir search_full_content como false (o padrão) restringe a indexação às primeiras 50 palavras do conteúdo do corpo.
Os tamanhos de imagem sugeridos em pixels são os seguintes:
| Imagem | Descrição | Tamanho |
|---|---|---|
site.logo | Logotipo de todo o site usado no cabeçalho. | 200 x 200 |
page.image.path | Imagem de documento grande e de largura total. | Imagens altas empurrarão o conteúdo para baixo na página. 1600 x 600 é um bom tamanho intermediário a ser alcançado. |
page.image | Abreviação de page.image.path quando usado sozinho (sem thumbnail , caption ou outras variáveis). | O mesmo que page.image.path |
page.image.thumbnail | Imagem de documento pequeno usada na visualização em grade. | 400 x 200 |
author.picture | Foto do autor na barra lateral da postagem. | 150 x 150 |
Para alterar o texto encontrado em todo o tema, copie o seguinte arquivo /_data/text.yml e personalize conforme necessário.
Ao adicionar novos textos, certifique-se de que as chaves correspondam aos códigos de idioma/país, que podem ser usados para site.locale .
Para definir quais páginas estão vinculadas na navegação superior:
Crie um arquivo /_data/navigation.yml .
Adicione as páginas na ordem em que deseja que apareçam:
- title : Posts
url : /posts/
- title : Categories
url : /categories/
- title : External Page
url : https://whatever-site.com/page.html
- title : Search
url : /search/Observação: títulos longos ou muitos links podem fazer com que a barra de navegação seja dividida em diversas linhas, especialmente em telas menores. Tenha isso em mente ao desenvolver a navegação principal do seu site.
As informações do autor são usadas como metadados para postagem "por linhas" e propagam o campo creator dos cartões de resumo do Twitter com o seguinte assunto em _config.yml :
author :
name : John Doe
twitter : johndoetwitter
picture : /images/johndoe.pngAs informações do autor em todo o site podem ser substituídas no cabeçalho de um documento da mesma maneira:
author :
name : Jane Doe
twitter : janedoetwitter
picture : /images/janedoe.png Ou especificando uma chave correspondente no cabeçalho do documento, que existe em site.data.authors . Por exemplo, você tem o seguinte no cabeçalho do documento:
author : megaman E você tem o seguinte em _data/authors.yml :
megaman :
name : Mega Man
twitter : megamantwitter
picture : /images/megaman.png
drlight :
name : Dr. Light
twitter : drlighttwitter
picture : /images/drlight.png Atualmente author.picture é usado apenas em layout: post . O tamanho recomendado é 150 x 150 pixels.
Os links do rodapé e o texto dos direitos autorais podem ser personalizados.
Os links de rodapé são definidos em _config.yml na chave footer_links .
| Nome | Descrição |
|---|---|
title | Descreve o link. Não visível, usado para fins de acessibilidade. |
url | URL para o qual o link aponta. |
icon | Corresponde a um ícone Font Awesome 5, por exemplo, fab fa-twitter-square . |
Exemplos:
footer_links :
- title : Twitter
url : https://twitter.com/username
icon : fab fa-twitter-square
- title : GitHub
url : https://github.com/mmistakes
icon : fab fa-github-square
- title : Feed
url : atom.xml
icon : fas fa-rss-square Nota: Para desativar completamente os links de rodapé, use footer_links: false .
Por padrão, os direitos autorais inserem o ano atual, site.title e as palavras "Powered by Jekyll & So Simple." Para alterar isso, adicione copyright ao seu _config.yml assim (Markdown é permitido):
copyright : " This site is made with <3 by *me, myself, and I*. " Você pode pensar nesses ajudantes do Jekyll como códigos de acesso. Como o GitHub Pages não permite a maioria dos plug-ins, as tags personalizadas estão fora de questão. Em vez disso, o tema aproveita a inclusão para fazer algo semelhante.
Incorpore um vídeo do YouTube/Vimeo ou qualquer outro conteúdo iframe que seja dimensionado de forma responsiva para caber na largura de seu pai.
| Parâmetro | Obrigatório | Descrição |
|---|---|---|
url | Sim | URL do vídeo ou iframe, por exemplo, https://www.youtube.com/watch?v=-PVofD2A9t8 |
ratio | Opcional | Proporção do conteúdo do vídeo ou iframe. 21:9 , 16:9 , 4:3 , 1:1 . Se uma proporção não for atribuída, 16:9 será usado. |
Exemplo:
{% include responsive-embed url="https://www.youtube.com/watch?v=-PVofD2A9t8" ratio="16:9" %}Para incluir um índice gerado automaticamente para postagens e páginas, adicione o seguinte auxiliar onde deseja que ele apareça.
{% include toc %}So Simple 3 é uma grande reescrita de todo o tema. As alterações mais notáveis estão resumidas abaixo, seguidas de alterações mais específicas.
É seguro dizer que você provavelmente desejará abandonar todos os arquivos _layouts , _includes , _sass , .css e .js da v2 e usar a gem Ruby ou as opções de instalação remota do tema.
_layouts , _includes , _sass e JavaScript foram reconstruídos.site.url e site.baseurl corretamente aproveitando os filtros relative_url e absolute_url ./_includes/open-graph.html personalizado substituído por jekyll-seo-tag .tags e posts ) para facilitar o uso.404.md removida.atom.xml personalizado substituído por jekyll-feed .favicon.ico e favicon.png removidos.float para que as coisas não pareçam muito quebradas em navegadores que não suportam display: grid e flexbox. O formato mudou de en_US (com sublinhado) para en-US com hífen.
site.owner agora é site.author para oferecer melhor suporte a jekyll-seo-tag e jekyll-feed.
| v2 | v3 |
|---|---|
site.owner.name | site.author.name |
site.owner.avatar | site.author.picture |
site.owner.email | site.author.email |
site.owner.twitter | site.twitter |
site.owner.google.analytics | obsoleto , substituído por jekyll-seo-tag |
site.owner.bing-verify | obsoleto , substituído por jekyll-seo-tag |
site.owner.google.analytics agora é site.google_analytics . Consulte a documentação para obter mais informações.
site.owner.disqus-shortname agora é site.disqus.shortname . Consulte a documentação para obter mais informações.
Para desabilitar comentários em uma postagem específica, adicione comments: false ao seu tema inicial.
search_omit foi renomeado para search . Para excluir uma postagem ou página da pesquisa, adicione search: false ao seu assunto inicial.
Ao atribuir caminhos de imagem para coisas como site.logo , page.image.path , author.picture , etc., eles agora exigem um caminho relativo ou absoluto completo.
No So Simple v2, as imagens foram todas colocadas em /images/ e atribuídas no front mate apenas com o nome do arquivo. Para que as imagens sejam carregadas corretamente, agora você precisa anexar todos os caminhos com /images/ ... se estiver armazenando imagens lá, por exemplo, /images/your-image.jpg .
Para melhor suportar plug-ins Jekyll como jekyll-seo-tag, jekyll-feed e jekyll-sitemap, a maioria das chaves image foram renomeadas. Ajuste o assunto inicial em todas as suas postagens e páginas de acordo.
| v2 | v3 |
|---|---|
image.feature | image.path |
image.thumb | image.thumbnail |
image.credit | image.caption (Markdown permitido) |
image.creditlink | obsoleto, use **image.caption** em vez disso |
Uma postagem com o seguinte assunto v2:
image :
feature : feature-image-filename.jpg
thumb : thumb-image-filename.jpg
credit : Michael Rose
creditlink : https://mademistakes.comSeria convertido no seguinte assunto v3:
image :
path : /images/feature-image-filename.jpg
thumbnail : /images/thumb-image-filename.jpg
caption : " [Michael Rose](https://mademistakes) "Etapas básicas para migrar um fork So Simple v2 padrão (sem alterações) para o mais recente.
Remova _includes/ , _layouts/ , _sass/ , jshintrc , Gruntfile.js e search.json .
Edite Gemfile para os métodos de instalação Ruby gem ou GitHub Pages e siga essas instruções.
Adicione as seguintes fontes do Google a _config.yml :
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i " Edite _config.yml prestando muita atenção às chaves que foram renomeadas ou que possuem novos requisitos de caminho relativo. locale , logo e owner são bons lugares para começar.
Renomeie todas as instâncias de image.feature , image.thumb e image.credit em postagens/páginas aderindo às alterações de imagem acima.
Remova o conteúdo do corpo em index.html e altere layout: page para layout: home . Configure a paginação, se necessário.
Remova o conteúdo do corpo em /search/index.md e altere layout: page para layout: search .
Remova o conteúdo do corpo em /tags/index.md e altere layout: page para layout: tags .
Remova o conteúdo do corpo em /articles/index.md e altere layout: page para layout: category e adicione taxonomy: articles .
Remova o conteúdo do corpo em /body/index.md e altere layout: page para layout: category e adicione taxonomy: blog .
Renomeie o assunto modified em postagens/páginas para last_modified_at para melhorar a paridade com plug-ins que o suportam.
Adicione tag_archive_path: "/tags/#" a _config.yml para ativar links de tags na barra lateral post meta.
Renomeie avatar para picture em _data/authors.yml (e em qualquer matéria inicial de postagens/páginas) e edite os caminhos de acordo com as alterações do caminho da imagem acima.
Ao instalar como uma gem Ruby ou tema remoto, os arquivos principais do tema ( _layouts , _includes , _sass , assets , etc.) estarão ausentes do seu projeto.
A estrutura, o estilo e os scripts padrão deste tema podem ser substituídos e personalizados das duas maneiras a seguir:
Os arquivos de tema podem ser substituídos colocando um arquivo com o mesmo nome no diretório _includes ou _layouts do seu projeto. Por exemplo:
_includes/social-share.html , crie um diretório _includes em seu projeto, copie _includes/social-share.html da pasta gem do So Simple para <your_project>/_includes e edite esse arquivo. Dica: para localizar os arquivos do tema em seu computador, execute bundle show jekyll-theme-so-simple . Isso retorna a localização dos arquivos de tema baseados em gem.
O tema vem com dois arquivos para ajudar a injetar marcação e conteúdo personalizados em locais predefinidos.
| Descrição | |
|---|---|
_includes/head-custom.html | Inserido dentro do elemento <head> para adicionar metadados, favicons, etc. |
_includes/footer-custom.html | Inserido dentro do elemento <footer> antes dos scripts do site e das informações de direitos autorais. |
Para substituir o Sass padrão (localizado no diretório _sass do tema), siga um destes procedimentos:
Copie diretamente da joia So Simple
bundle show jekyll-theme-so-simple para obter o caminho para ele)./assets/css/main.scss de lá para <your_project> .<your_project>/assets/css/main.scss .Copie deste repositório.
<your_project> .<your_project/assets/css/main.scss . Nota: Para personalizar os parciais Sass reais incluídos na gem, você precisará copiar o conteúdo completo do diretório _sass para <your_project> . Devido à forma como o Jekyll atualmente importa esses arquivos, é tudo ou nada. Substituir um único Sass parcial (ou dois) não funcionará como _includes e _layouts .
Para fazer ajustes básicos no estilo do tema, as variáveis Sass podem ser substituídas adicionando-as <your_project>/assets/css/main.scss . Por exemplo, para alterar a cor de destaque usada em todo o tema, adicione o seguinte antes de todas as linhas @import :
$accent-color : tomato ;Para substituir o JavaScript padrão incluído no tema, siga um destes procedimentos:
Copie diretamente da joia So Simple
bundle show jekyll-theme-so-simple para obter o caminho para ele)./assets/js/main.js de lá para <your_project> .<your_project>/assets/js/main.js .Copie deste repositório.
/assets/js/main.js para <your_project> .<your_project>/assets/js/main.js . O arquivo /assets/js/main.min.js do tema é construído a partir de plug-ins jQuery e outros scripts encontrados em /assets/js/ .
├── assets
| ├── js
| | ├── lunr # Lunr search plugin
| | | ├── lunr.xx.js # Lunr language plugins
| | | ├── ...
| | | ├── lunr.min.js
| | | └── lunr.stemmer.support.min.js
| | ├── plugins
| | | ├── jquery.smooth-scroll.min.js # make same-page links scroll smoothly
| | | ├── lity.min.js # responsive lightbox
| | | └── table-of-contents.js # table of contents toggle
| | ├── main.js # jQuery plugin settings and other scripts
| | ├── main.min.js # concatenated and minified scripts
| | ├── search-data.json # search index used by Lunr
Para modificar ou adicionar seus próprios scripts, inclua-os em assets/js/main.js e depois reconstrua usando npm run build:js . Veja abaixo para mais detalhes.
Se você adicionar scripts adicionais a /assets/js/plugins/ e quiser que eles sejam concatenados com os outros, certifique-se de atualizar o script uglify em package.json . O mesmo vale para scripts que você remove.
Você também pode adicionar scripts aos elementos <head> ou fechar </body> adicionando caminhos às seguintes matrizes em _config.yml .
Exemplo:
head_scripts :
- https://code.jquery.com/jquery-3.2.1.min.js
- /assets/js/your-custom-head-script.js
footer_scripts :
- /assets/js/your-custom-footer-script.js Nota: Se você atribuir caminhos a footer_scripts o arquivo /assets/js/main.min.js do tema será desativado. Este script inclui plug-ins e outros scripts que deixarão de funcionar, a menos que você os adicione especificamente ao array footer_scripts .
O tema utiliza a versão Font Awesome SVG com JS para iconografia. Os locais de destaque em que esses ícones aparecem estão na barra lateral do autor e nos links de rodapé.
Para configurar seu ambiente para desenvolver este tema:
cd em /example e execute bundle install .Para testar o tema localmente à medida que você faz alterações nele:
cd na pasta raiz do repositório (por exemplo, jekyll-theme-so-simple ).bundle exec rake preview e abra seu navegador em http://localhost:4000/example/ . Isso inicia um servidor Jekyll usando os arquivos do tema e o conteúdo do diretório example/ . À medida que as modificações são feitas, atualize seu navegador para ver as alterações.
Em um esforço para reduzir dependências, um conjunto de scripts npm é usado para construir main.min.js em vez de executores de tarefas como Gulp ou Grunt. Se essas ferramentas são mais do seu estilo, então use-as.
Para começar:
cd para a raiz do seu projeto. Nota: Se você atualizou de uma versão anterior do tema, certifique-se de copiar package.json antes de executar npm install . Você também pode precisar remover seu diretório node_modules .
Se tudo correr bem, a execução de npm run build:js compactará/concatenará main.js e todos os scripts de plug-in em /assets/js/main.min.js .
Encontrou um erro de digitação na documentação? Solicitando um recurso ou correção de bug? Pesquise os problemas abertos e fechados antes de enviar um problema para evitar duplicação.
Solicitações pull também são apreciadas. Se esta for sua primeira vez, pode ser útil ler o GitHub Flow.
Se sua contribuição adicionar ou alterar o comportamento do tema, certifique-se de atualizar a documentação e/ou conteúdo de amostra. A documentação fica em README.md, enquanto postagens, páginas e coleções de amostra estão nos docs e nas pastas example .
Ao enviar uma solicitação pull:
master e dê a ela um nome significativo (por exemplo, my-awesome-new-feature ).Michael Rosa
A Licença MIT (MIT)
Copyright (c) 2013-2019 Michael Rose e colaboradores
É concedida permissão, gratuitamente, a qualquer pessoa que obtenha uma cópia deste software e dos arquivos de documentação associados (o "Software"), para negociar o Software sem restrições, incluindo, sem limitação, os direitos de usar, copiar, modificar, mesclar , publicar, distribuir, sublicenciar e/ou vender cópias do Software e permitir que as pessoas a quem o Software seja fornecido o façam, sujeito às seguintes condições:
O aviso de direitos autorais acima e este aviso de permissão serão incluídos em todas as cópias ou partes substanciais do Software.
O SOFTWARE É FORNECIDO "COMO ESTÁ", SEM GARANTIA DE QUALQUER TIPO, EXPRESSA OU IMPLÍCITA, INCLUINDO, MAS NÃO SE LIMITANDO ÀS GARANTIAS DE COMERCIALIZAÇÃO, ADEQUAÇÃO A UM DETERMINADO FIM E NÃO VIOLAÇÃO. EM HIPÓTESE ALGUMA OS AUTORES OU DETENTORES DE DIREITOS AUTORAIS SERÃO RESPONSÁVEIS POR QUALQUER RECLAMAÇÃO, DANOS OU OUTRA RESPONSABILIDADE, SEJA EM UMA AÇÃO DE CONTRATO, ATO ILÍCITO OU DE OUTRA FORMA, DECORRENTE DE, OU EM CONEXÃO COM O SOFTWARE OU O USO OU OUTRAS NEGOCIAÇÕES NO SOFTWARE.
So Simple incorpora Font Awesome, Copyright (c) 2017 Dave Gandy. Font Awesome é distribuído sob os termos da licença SIL OFL 1.1 e MIT.
So Simple incorpora fotografias do Unsplash.
Tão simples incorpora fotografias da WeGraphics
Tão simples incorpora ponto de interrupção. O ponto de interrupção é distribuído nos termos das licenças MIT/GPL.
Tão simples incorpora JQuery Smooth Scroll, Copyright (C) 2017 Karl Swedberg. O rolagem suave do jQuery é distribuída nos termos da licença do MIT.
Tão simples incorpora Lunr, direitos autorais (c) 2017 Oliver Nightingale. O LUNR é distribuído sob os termos da licença do MIT.
Tão simples incorpora a vida, direitos autorais (c) 2015-2016, Jan Sorgalla. A vida é distribuída nos termos da licença do MIT] (http://opensource.org/license/MIT).
Tão simples incorpora o índice de retenção, direitos autorais (c) 2017 Timothy B. Smith. Índice A alternância é distribuída nos termos da licença do MIT] (http://opensource.org/license/MIT).
