PaperMod on kenji.blog

Alterar o Layout da Imagem no PaperMod

Sun, 11 Sep 2022 18:50:40 +0900

O layout padrão posiciona a imagem no centro com 100% de largura, mas como às vezes parecia um pouco grande, tentei fazer a imagem contornar abaixo do título, e mudei a largura para cerca de 150px.

As alterações nos arquivos são as seguintes.

blank.css

Para alterar as margens, tamanho da imagem e linhas de exibição do texto, adicionamos a seguinte descrição em blank.css.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


.entry-content {
 -webkit-line-clamp: 4;
}

.entry-footer {
 text-align: right;
}

.entry-cover {
 margin-bottom: initial;
 text-align: center;
}

.entry-cover img {
 border-radius: 4px;
 display: inline;
 max-width: 100%;
}

.post-meta {
 display: block;
 text-align: right;
}

post-entry.css

Como não pude remover a definição no blank.css, excluí 1 linha no seguinte local em post-entry.css.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← Remover esta linha
 height: auto;
}

list.html

Para alterar o layout da imagem, modifiquei o seguinte local em list.html.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<article class="{{ $class }}">
 <!-- {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} --><!-- Movido para baixo -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- Movido para baixo -->
 <header class="entry-header">
 <h2>
 {{- .Title }}
 {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
 </h2>
 </header>
 <div style="display:flex;"><!-- Adicionado -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- Adicionado -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- Movido de cima -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- Movido de cima -->
 </div><!-- Adicionado -->
 <div style="width:100%;"><!-- Adicionado -->
 {{- if (ne (.Param "hideSummary") true) }}
 <div class="entry-content">
 <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
 </div>
 {{- end }}
 {{- if not (.Param "hideMeta") }}
 <footer class="entry-footer">
 {{- partial "post_meta.html" . -}}
 </footer>
 {{- end }}
 <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
 </div><!-- Adicionado -->
 </div><!-- Adicionado -->
</article>

Parece que não são poucos os pedidos semelhantes.

https://github.com/adityatelange/hugo-PaperMod/discussions/159#discussioncomment-247844

Seria bom se os desenvolvedores originais também pudessem suportar isso.

Como Configurar o Twitter Card com o PaperMod

Sat, 10 Sep 2022 18:41:22 +0900

Introdução

O tema PaperMod suporta Twitter Cards. No entanto, as configurações do Twitter Card devem ser descritas no config.toml ou nas informações de cabeçalho de *.md de cada artigo. Se você configurar em cada artigo e no config.toml, as informações de cabeçalho de cada artigo terão prioridade.

Como Configurar

config.toml

No config.toml, adicione um item chamado images em [params]. Em images, descreva o caminho da imagem para exibir no Twitter Card. Se você colocar a imagem na pasta static, especificar apenas o nome do arquivo é o suficiente.

1
2


[params]
 images = ["twitter_card.jpg"]

Estrutura de Pastas

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (Escreva aqui)
├─content
│ └─posts
│ └─Pasta do artigo
│ │ index.md (Escreva aqui)
│ └─images
│ cover.png (Coloque aqui)
└─static
 twitter_card.jpg (Coloque aqui)

Informações de Cabeçalho de Cada Artigo

Nas informações de cabeçalho de cada artigo, adicione um item chamado image sob cover. Se você definir relative como true, poderá especificar com um caminho relativo a partir do *.md do artigo.

1
2
3


cover:
 image: "images/cover.jpg"
 relative: true

Se você não quiser exibir na parte superior do artigo

Se você não deseja exibir a imagem de capa na parte superior do artigo, adicione um item chamado hidden sob cover e defina-o como true.

1
2
3
4


cover:
 image: "images/cover.jpg"
 relative: true
 hidden: true

Sobre o Tamanho da Imagem

Na especificação atual do PaperMod, parece que o tamanho do Twitter Card suporta apenas summary_large_image. O tamanho adequado (resolução) de summary_large_image tem várias teorias, mas cerca de 800 x 418 (proporção de imagem 1.91:1) parece bom.

Site de referência 1 Site de referência 2

Recomendamos redimensionar o tamanho da imagem antes de postar, se possível.

Como Verificar as Configurações

Para verificar as configurações do Twitter Card, use o Twitter Card Validator. No entanto, como a pré-visualização não foi exibida corretamente no meu ambiente, se a pré-visualização não aparecer, recomendo que você verifique uma vez antes de postar usando uma conta privada ou similar.

Alterando o esquema de cores do PaperMod

Wed, 07 Sep 2022 15:30:21 +0900

Alterei o esquema de cores do tema PaperMod. Consultei o seguinte link para o método de alteração.

https://github.com/adityatelange/hugo-PaperMod/discussions/645

O caminho do CSS é o seguinte.

themes/PaperMod/assets/css/extended/blank.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


:root {
 --entry: #fbf7ef;
 --primary: rgba(113, 103, 91, 1.00);
 --secondary: rgba(113, 103, 91, 0.95);
 --tertiary: rgba(113, 103, 91, 0.50);
 --content: rgba(113, 103, 91, 0.85);
 --hljs-bg: #34231B;
 --code-bg: #ebe4d7;
 --border: #fdfaf5;
 --theme: #fbf7ef;
}
.dark {
}

Nenhuma alteração para o modo escuro por enquanto.