Um tema Jekyll simples, limpo e responsivo para acadêmicos. Se você gosta do tema, dê uma estrela!
Quer saber mais sobre Jekyll? Confira este tutorial. Por que Jekyll? Leia a postagem do blog de Andrej Karpathy!
Para um passo a passo prático da instalação do al-folio, confira este ótimo tutorial em vídeo de um dos membros da comunidade! ? ?
A forma preferida de usar este modelo é clicando em Usar este modelo acima da lista de arquivos. Em seguida, crie um novo repositório em github.com:<your-username>/<your-repo-name>
. Se você planeja fazer upload do seu site para <your-github-username>.github.io
, observe que o nome do seu repositório deve ser <your-github-username>.github.io
ou <your-github-orgname>.github.io
, conforme indicado nos documentos das páginas do GitHub. Para obter mais informações sobre como implantar seu site, verifique a seção Implantação abaixo. Depois de criar seu novo repositório, basta baixá-lo para sua máquina:
$ git clone [email protected]: < your-username > / < your-repo-name > .git
$ cd < your-repo-name >
Usar o Docker para instalar dependências Jekyll e Ruby é a maneira mais fácil.
Você precisa seguir as seguintes etapas para colocar al-folio
em funcionamento em sua máquina local:
$ docker compose pull
$ docker compose up
Observe que quando você executá-lo pela primeira vez, ele baixará uma imagem docker de tamanho aproximado de 400 MB.
Agora fique à vontade para personalizar o tema como quiser (não esqueça de mudar o nome!). Depois de terminar, você pode usar o mesmo comando ( docker compose up
) para renderizar a página da web com todas as alterações. Além disso, certifique-se de confirmar suas alterações finais.
Para alterar o número da porta, você pode editar o arquivo
docker-compose.yml
.
Nota: esta abordagem só é necessária se você quiser construir uma versão mais antiga ou muito personalizada do al-folio.
Crie e execute uma nova imagem do Docker usando:
$ docker compose up --build
Se você deseja atualizar o jekyll, instalar novos pacotes Ruby, etc., tudo o que você precisa fazer é construir a imagem novamente usando o argumento
--force-recreate
no final do comando anterior! Ele baixará Ruby e Jekyll e instalará todos os pacotes Ruby novamente do zero.
Se quiser usar uma versão específica do docker, você pode fazer isso alterando a tag latest
para your_version
em docker-compose.yaml
. Por exemplo, você pode ter criado seu site na v0.10.0
e deseja mantê-lo.
Supondo que você tenha Ruby e Bundler instalados em seu sistema ( dica: para facilitar o gerenciamento de ruby gems, considere usar rbenv ), e também Python e pip ( dica: para facilitar o gerenciamento de pacotes python, considere usar um ambiente virtual, como venv ou conda . Se você usar apenas jupyter
, poderá usar pipx ).
$ bundle install
# assuming pip is your Python package manager
$ pip install jupyter
$ bundle exec jekyll serve --lsi
Agora fique à vontade para personalizar o tema como quiser (não esqueça de mudar o nome!). Depois de terminar, confirme suas alterações finais.
Implantar seu site no GitHub Pages é a opção mais popular. A partir da versão v0.3.5, o al-folio reimplantará automaticamente sua página da web cada vez que você enviar novas alterações ao seu repositório!
Para páginas da web pessoais e organizacionais:
<your-github-username>.github.io
ou <your-github-orgname>.github.io
._config.yml
, defina url
como https://<your-github-username>.github.io
e deixe baseurl
vazio.<your-github-username>.github.io
.Para páginas do projeto:
_config.yml
, defina url
como https://<your-github-username>.github.io
e baseurl
como /<your-repository-name>/
.<your-github-username>.github.io/<your-repository-name>/
.Para ativar a implantação automática:
master
, seu repositório deverá agora ter um branch gh-pages
recém-construído.gh-pages
( NÃO como master
). Para obter mais detalhes, consulte Configurando uma fonte de publicação para seu site GitHub Pages. Se você mantém seu site em outra filial, abra .github/workflows/deploy.yml
na filial em que você mantém seu site e altere on->push->branches e on->pull_request->branches para a filial em que você mantém seu site sobre. Isso acionará a ação de puxar/empurrar nesse galho. A ação irá então implantar o site na filial a partir da qual foi acionada.
Se você precisar reimplantar manualmente seu site nas páginas do GitHub, vá para Ações, clique em “Implantar” na barra lateral esquerda e depois em “Executar fluxo de trabalho”.
Se você decidir não usar GitHub Pages e hospedar sua página em outro lugar, simplesmente execute:
$ bundle exec jekyll build --lsi
que (re)gerará a página estática na pasta _site/
. Em seguida, basta copiar o conteúdo do diretório _site/
para o seu servidor de hospedagem.
Se você também deseja remover classes CSS não utilizadas do seu arquivo, execute:
$ purgecss -c purgecss.config.js
que substituirá os arquivos css na pasta _site/assets/css/
pelos arquivos css eliminados.
Nota: Certifique-se de definir corretamente os campos url
e baseurl
em _config.yml
antes de construir a página da web. Se você estiver implantando sua página da web em your-domain.com/your-project/
, deverá definir url: your-domain.com
e baseurl: /your-project/
. Se você estiver implantando diretamente em your-domain.com
, deixe baseurl
em branco.
Nota: Não tente usar este método a menos que saiba o que está fazendo (certifique-se de estar familiarizado com as fontes de publicação). Esta abordagem permite ter o código-fonte do site em um repositório e a versão de implantação em um repositório diferente.
Vamos supor que a fonte de publicação do seu site seja um subdiretório publishing-source
de um repositório com versão git clonado em $HOME/repo/
. Para um site de usuário, isso poderia ser algo como $HOME/<user>.github.io
.
Em primeiro lugar, no diretório do repositório de implantação, verifique o branch git que hospeda sua fonte de publicação.
Em seguida, no diretório de fontes do site (geralmente o clone do fork do al-folio):
$ bundle exec jekyll build --lsi --destination $HOME /repo/publishing-source
Isso instruirá jekyll a implantar o site em $HOME/repo/publishing-source
.
Nota: Jekyll limpará $HOME/repo/publishing-source
antes de compilar!
A citação abaixo foi retirada diretamente dos documentos de configuração do jekyll:
As pastas de destino são limpas nas compilações do site
O conteúdo de
<destination>
é limpo automaticamente, por padrão, quando o site é construído. Arquivos ou pastas que não forem criados pelo seu site serão removidos. Alguns arquivos podem ser retidos especificando-os na diretiva de configuração<keep_files>
.Não use um local importante para
<destination>
; em vez disso, use-o como uma área de teste e copie os arquivos de lá para o seu servidor web.
Se $HOME/repo/publishing-source
contiver arquivos que você deseja que jekyll deixe intactos, especifique-os em keep_files
em _config.yml
. Em sua configuração padrão, o al-folio copiará o README.md
de nível superior para a fonte de publicação. Se você quiser alterar esse comportamento, adicione README.md
em exclude
em _config.yml
.
Nota: Não execute jekyll clean
em seu repositório de origem de publicação, pois isso resultará na exclusão de todo o diretório, independentemente do conteúdo de keep_files
em _config.yml
.
Se você instalou o al-folio conforme descrito acima, poderá configurar uma ação do GitHub para sincronizar automaticamente seu repositório com a versão mais recente do tema.
Vá para Configurações -> Ações -> Geral -> Permissões de fluxo de trabalho, conceda permissões de leitura e gravação ao GitHub Actions, marque "Permitir que o GitHub Actions crie e aprove solicitações pull" e salve suas alterações.
Em seguida, vá para Ações -> Novo fluxo de trabalho -> configure você mesmo um fluxo de trabalho, configure o seguinte fluxo de trabalho e confirme suas alterações:
name : Sync from template
on :
# cronjob trigger
schedule :
- cron : " 0 0 1 * * "
# manual trigger
workflow_dispatch :
jobs :
repo-sync :
runs-on : ubuntu-latest
steps :
# To use this repository's private action, you must check out the repository
- name : Checkout
uses : actions/checkout@v3
- name : actions-template-sync
uses : AndreasAugustin/[email protected]
with :
github_token : ${{ secrets.GITHUB_TOKEN }}
source_repo_path : alshedivat/al-folio
upstream_branch : master
Você receberá uma solicitação pull em seu repositório se houver algumas alterações disponíveis no modelo.
Outra opção é atualizar manualmente seu código seguindo as etapas abaixo:
# Assuming the current directory is <your-repo-name>
$ git remote add upstream https://github.com/alshedivat/al-folio.git
$ git fetch upstream
$ git rebase v0.9.0
Se você personalizou extensivamente uma versão anterior, pode ser mais complicado atualizar. Você ainda pode seguir as etapas acima, mas git rebase
pode resultar em conflitos de mesclagem que devem ser resolvidos. Consulte o manual do git rebase e como resolver conflitos para obter mais informações. Se o rebase for muito complicado, recomendamos reinstalar a nova versão do tema do zero e transferir manualmente o conteúdo e as alterações da versão anterior.
Aqui estão algumas perguntas frequentes. Se você tiver uma pergunta diferente, pergunte usando as Discussões.
P: Depois de criar um novo repositório a partir deste modelo e configurá-lo, recebo um erro de implantação. O site não deveria ser implantado corretamente e automaticamente?
R: Sim, se você estiver usando a versão v0.3.5
ou posterior, o site será reimplantado de forma automática e correta logo após seu primeiro commit. Faça algumas alterações (por exemplo, altere as informações do seu site em _config.yml
), confirme e envie por push. Certifique-se de seguir as instruções de implantação na seção anterior. (Questão relevante: 209.)
P: Estou usando um domínio personalizado (por exemplo, foo.com
). Meu domínio personalizado fica em branco nas configurações do repositório após cada implantação. Como faço para corrigir isso?
R: Você precisa adicionar o arquivo CNAME
ao branch master
ou source
do seu repositório. O arquivo deve conter seu nome de domínio personalizado. (Questão relevante: 130.)
P: Minha página da web funciona localmente. Mas após a implantação, ele não consegue construir e lança Unknown tag 'toc'
. Como faço para corrigir isso?
R: Certifique-se de seguir as instruções de implantação da seção anterior. Você deveria ter definido o branch de implantação como gh-pages
. (Problema relacionado: 1438.)
P: Minha página da web funciona localmente. Mas após a implantação, ele não é exibido corretamente (CSS e JS não são carregados corretamente). Como faço para corrigir isso?
R: Certifique-se de especificar corretamente os caminhos url
e baseurl
em _config.yml
. Defina url
como https://<your-github-username>.github.io
ou como https://<your.custom.domain>
se você estiver usando um domínio personalizado. Se você estiver implantando um site pessoal ou de organização, deixe baseurl
em branco. Se você estiver implantando uma página de projeto, defina baseurl: /<your-project-name>/
. Se todos os passos anteriores foram feitos corretamente, falta apenas que seu navegador busque novamente a folha de estilo do site.
P: O feed Atom não funciona. Por que?
R: Certifique-se de especificar corretamente os caminhos url
e baseurl
em _config.yml
. O plugin RSS Feed funciona com estes campos configurados corretamente: title
, url
, description
e author
. Certifique-se de preenchê-los de maneira adequada e tente novamente.
P: Meu site não funciona quando eu habilito related_blog_posts
. Por que?
R: Isso provavelmente se deve ao plugin classificador reborn, que é usado para calcular postagens relacionadas. Se o erro indicar Liquid Exception: Zero vectors can not be normalized...
, significa que não foi possível calcular postagens relacionadas para uma postagem específica. Isso geralmente é causado por postagens de blog vazias ou mínimas, sem palavras significativas (ou seja, apenas palavras irrelevantes) ou mesmo caracteres específicos que você usou em suas postagens. Além disso, o cálculo para postagens semelhantes é feito para cada post
, ou seja, todas as páginas que utilizam layout: post
, incluindo os anúncios. Para alterar esse comportamento, basta adicionar related_posts: false
ao cabeçalho da página na qual você não deseja exibir postagens relacionadas.
P: Ao tentar implantar, ele está solicitando credenciais de login do github, que desativam a autenticação por senha do github e sai com um erro. Como consertar?
R: Abra o arquivo .git/config usando seu editor preferido. Altere a parte https
da variável url
para ssh
. Tente implantar novamente.
A página de suas publicações é gerada automaticamente a partir de sua bibliografia BibTex. Simplesmente edite _bibliography/papers.bib
. Você também pode adicionar novos arquivos *.bib
e personalizar a aparência de suas publicações como desejar, editando _pages/publications.md
.
Nas publicações, a entrada do autor para você é identificada pela matriz de strings scholar:last_name
e pela matriz de strings scholar:first_name
em _config.yml
:
scholar :
last_name : [Einstein]
first_name : [Albert, A.]
Se a entrada corresponder a uma forma dos sobrenomes e nomes, ela será sublinhada. Mantenha metainformações sobre seus coautores em _data/coauthors.yml
e o Jekyll inserirá links para suas páginas da web automaticamente. O formato de dados do coautor em _data/coauthors.yml
é o seguinte,
" Adams " :
- firstname : ["Edwin", "E.", "E. P.", "Edwin Plimpton"]
url : https://en.wikipedia.org/wiki/Edwin_Plimpton_Adams
" Podolsky " :
- firstname : ["Boris", "B.", "B. Y.", "Boris Yakovlevich"]
url : https://en.wikipedia.org/wiki/Boris_Podolsky
" Rosen " :
- firstname : ["Nathan", "N."]
url : https://en.wikipedia.org/wiki/Nathan_Rosen
" Bach " :
- firstname : ["Johann Sebastian", "J. S."]
url : https://en.wikipedia.org/wiki/Johann_Sebastian_Bach
- firstname : ["Carl Philipp Emanuel", "C. P. E."]
url : https://en.wikipedia.org/wiki/Carl_Philipp_Emanuel_Bach
Se a entrada corresponder a uma das combinações de sobrenomes e nomes, ela será destacada e vinculada ao URL fornecido.
Existem várias palavras-chave bibtex personalizadas que você pode usar para afetar como as entradas são exibidas na página da web:
abbr
: Adiciona uma abreviatura à esquerda da entrada. Você pode adicionar links a eles criando um arquivo local.yaml na pasta _data e adicionando entradas correspondentes.abstract
: Adiciona um botão "Abs" que expande um campo de texto oculto quando clicado para mostrar o texto abstratoarxiv
: Adiciona um link para o site do Arxiv (Nota: adicione apenas o identificador arxiv aqui - o link é gerado automaticamente)bibtex_show
: Adiciona um botão "Bib" que expande um campo de texto oculto com a entrada bibliográfica completahtml
: Insere um botão "HTML" redirecionando para o link especificado pelo usuáriopdf
: Adiciona um botão "PDF" redirecionando para um arquivo especificado (se um link completo não for especificado, o arquivo será considerado colocado no diretório /assets/pdf/)supp
: Adiciona um botão "Supp" a um arquivo especificado (se um link completo não for especificado, o arquivo será considerado colocado no diretório /assets/pdf/)blog
: Adiciona um botão "Blog" redirecionando para o link especificadocode
: Adiciona um botão "Código" redirecionando para o link especificadoposter
: Adiciona um botão "Poster" redirecionando para um arquivo especificado (se um link completo não for especificado, o arquivo será considerado colocado no diretório /assets/pdf/)slides
: Adiciona um botão "Slides" redirecionando para um arquivo especificado (se um link completo não for especificado, o arquivo será considerado colocado no diretório /assets/pdf/)website
: adiciona um botão "Site" redirecionando para o link especificadoaltmetric
: Adiciona um emblema Altmetric (Nota: se o DOI for fornecido, basta usar true
, caso contrário, adicione apenas o identificador altmetric aqui - o link é gerado automaticamente)dimensions
: Adiciona um emblema de Dimensões (Observação: se DOI ou PMID for fornecido, basta usar true
, caso contrário, adicione apenas o identificador de Dimensões aqui - o link é gerado automaticamente)Você pode implementar seus próprios botões editando o arquivo bib.html.
Este tema Jekyll implementa collections
para permitir que você divida seu trabalho em categorias. O tema vem com duas coleções padrão: news
e projects
. Os itens da coleção news
são exibidos automaticamente na página inicial. Os itens da coleção projects
são exibidos em uma grade responsiva na página de projetos.
Você pode criar facilmente suas próprias coleções, aplicativos, contos, cursos ou qualquer que seja o seu trabalho criativo. Para fazer isso, edite as coleções no arquivo _config.yml
, crie uma pasta correspondente e crie uma landing page para sua coleção, semelhante a _pages/projects.md
.
al-folio vem com layouts elegantes para páginas e postagens de blog.
O tema permite que você crie postagens de blog no estilo destil.pub:
Para obter mais detalhes sobre como criar postagens com estilo destilado usando tags <d-*>
, consulte o exemplo.
al-folio suporta composição matemática rápida por meio de MathJax e destaque de sintaxe de código usando o estilo GitHub:
A formatação de fotos é simplificada usando o sistema de grade do Bootstrap. Crie facilmente lindas grades nas postagens do seu blog e nas páginas do projeto:
al-folio usa github-readme-stats e github-profile-trophy para exibir repositórios GitHub e estatísticas de usuários na página /repositories/
.
Edite _data/repositories.yml
e altere as listas github_users
e github_repos
para incluir seu próprio perfil e repositórios do GitHub na página /repositories/
.
Você também pode usar os seguintes códigos para exibir isso em qualquer outra página.
<!-- code for GitHub users -->
{% if site.data.repositories.github_users %}
< div class =" repositories d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-center " >
{% for user in site.data.repositories.github_users %}
{% include repository/repo_user.html username=user %}
{% endfor %}
</ div >
{% endif %}
<!-- code for GitHub trophies -->
{% if site.repo_trophies.enabled %}
{% for user in site.data.repositories.github_users %}
{% if site.data.repositories.github_users.size > 1 %}
< h4 > {{ user }} </ h4 >
{% endif %}
< div class =" repositories d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-center " >
{% include repository/repo_trophies.html username=user %}
</ div >
{% endfor %}
{% endif %}
<!-- code for GitHub repositories -->
{% if site.data.repositories.github_repos %}
< div class =" repositories d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-center " >
{% for repo in site.data.repositories.github_repos %}
{% include repository/repo.html repository=repo %}
{% endfor %}
</ div >
{% endif %}
Uma variedade de lindas cores de tema foram selecionadas para você escolher. O padrão é roxo, mas você pode alterá-lo rapidamente editando a variável --global-theme-color
no arquivo _sass/_themes.scss
. Outras variáveis de cor também estão listadas lá. As opções de cores do tema padrão disponíveis podem ser encontradas em _sass/_variables.scss
. Você também pode adicionar suas próprias cores a este arquivo, atribuindo um nome a cada uma para facilitar o uso em todo o modelo.
al-folio oferece suporte para visualização de imagens nas redes sociais. Para habilitar esta funcionalidade você precisará definir serve_og_meta
como true
em seu _config.yml
. Depois de fazer isso, todas as páginas do seu site incluirão dados do Open Graph no elemento HTML head.
Em seguida, você precisará configurar qual imagem exibir nas visualizações de mídia social do seu site. Isso pode ser configurado por página, definindo a variável de página og_image
. Se para uma página individual esta variável não estiver definida, o tema retornará para uma variável og_image
em todo o site, configurável em seu _config.yml
. Tanto no caso específico da página quanto no caso de todo o site, a variável og_image
precisa conter o URL da imagem que você deseja exibir nas visualizações de mídia social.
Ele gera um feed Atom (semelhante a RSS) de suas postagens, útil para leitores Atom e RSS. O feed pode ser acessado simplesmente digitando após sua página inicial /feed.xml
. Por exemplo, supondo que o ponto de montagem do seu site seja a pasta principal, você pode digitar yourusername.github.io/feed.xml
Por padrão, haverá uma seção de postagens relacionadas na parte inferior das postagens do blog. Eles são gerados selecionando as postagens mais recentes max_related
que compartilham pelo menos tags min_common_tags
com a postagem atual. Se você não deseja exibir postagens relacionadas em uma postagem específica, basta adicionar related_posts: false
ao início da postagem. Se você quiser desabilitá-lo para todas as postagens, basta definir enabled
como false na seção related_blog_posts
em _config.yml
.
Contribuições para o al-folio são muito bem-vindas! Antes de começar, dê uma olhada nas diretrizes.
Se você quiser melhorar a documentação, adicionar sua página da web à lista abaixo ou corrigir uma pequena inconsistência ou bug, sinta-se à vontade para enviar um PR diretamente para master
. Para problemas/bugs mais complexos ou solicitações de recursos, abra um problema usando o modelo apropriado.
Nossos colaboradores mais ativos são bem-vindos para se juntar à equipe de mantenedores. Se você estiver interessado, entre em contato!
Maruan | Rohan Deb Sarkar | Amir Pourmand | Jorge |
Feito com contrib.rocks.
O tema está disponível como código aberto sob os termos da licença MIT.
Originalmente, o al-folio era baseado no tema *folio (publicado por Lia Bogoev e sob licença do MIT). Desde então, os estilos foram totalmente reescritos e muitos recursos adicionais interessantes.