Top Tweets for #PaperMod
To celebrate finally migrating my blog and moving to Cloudflare Pages, a post describing how I did it - Migrating to Hugo on Cloudflare Pages https://t.co/dTfivzoOnM #blog #cloudflare #hugo #papermod
💡3 Tips to improve your #PaperMod themed @GoHugoIO blog:
1⃣ Open external links in new tab:
Create
"render-link.html"
File path: ./themes/PaperMod/layouts/_default/_markup/render-link.html
File content:
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
2⃣ Increase content width:
Create
"overrides.css"
File path: ./assets/css/extended/overrides.css
File content:
:root {
--main-width: 960px;
}
3⃣ Image zoom-in effect:
Create
"render-image.html"
File path: ./PaperMod/layouts/_default/_markup/render-image.html
File content:
<!-- Checks if page is part of section and page is not section itself -->
{{- if and (ne .Page.Kind "section") (.Page.Section ) }}
<!-- Generate a unique id for each image -->
{{- $random := (substr (md5 .Destination) 0 5) }}
<input type="checkbox" id="zoomCheck-{{$random}}" hidden>
<label for="zoomCheck-{{$random}}">
<img class="zoomCheck" loading="lazy" decoding="async"
src="{{ .Destination | safeURL }}" alt="{{ .Text }}"
{{ with.Title}} title="{{ . }}" {{ end }} />
</label>
{{- else }}
<img loading="lazy" decoding="async" src="{{ .Destination | safeURL }}"
alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
{{- end }}
---
Additionally, create
"extend_head.html"
File path: ./PaperMod/layouts/partials/extend_head.html
File content:
<style>
@media screen and (min-width: 769px) {
/* .post-content is a class which will be present only on single pages
and not lists and section pages in Hugo */
.post-content input[type="checkbox"]:checked ~ label > img {
transform: scale(1.6);
cursor: zoom-out;
position: relative;
z-index: 999;
}
.post-content img.zoomCheck {
transition: transform 0.15s ease;
z-index: 999;
cursor: zoom-in;
}
}
</style>
Sources:
1⃣ https://t.co/qfE6R6B5uE
2⃣ https://t.co/mxtyBIo5FL
3⃣ https://t.co/fftLtQYTDO
💡3 Tips to improve your #PaperMod themed @GoHugoIO blog:
1⃣ Open external links in new tab:
Create
"render-link.html"
File path: ./themes/PaperMod/layouts/_default/_markup/render-link.html
File content:
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
2⃣ Increase content width:
Create
"overrides.css"
File path: ./assets/css/extended/overrides.css
File content:
:root {
--main-width: 960px;
}
3⃣ Image zoom-in effect:
Create
"render-image.html"
File path: ./PaperMod/layouts/_default/_markup/render-image.html
File content:
<!-- Checks if page is part of section and page is not section itself -->
{{- if and (ne .Page.Kind "section") (.Page.Section ) }}
<!-- Generate a unique id for each image -->
{{- $random := (substr (md5 .Destination) 0 5) }}
<input type="checkbox" id="zoomCheck-{{$random}}" hidden>
<label for="zoomCheck-{{$random}}">
<img class="zoomCheck" loading="lazy" decoding="async"
src="{{ .Destination | safeURL }}" alt="{{ .Text }}"
{{ with.Title}} title="{{ . }}" {{ end }} />
</label>
{{- else }}
<img loading="lazy" decoding="async" src="{{ .Destination | safeURL }}"
alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
{{- end }}
---
Additionally, create
"extend_head.html"
File path: ./PaperMod/layouts/partials/extend_head.html
File content:
<style>
@media screen and (min-width: 769px) {
/* .post-content is a class which will be present only on single pages
and not lists and section pages in Hugo */
.post-content input[type="checkbox"]:checked ~ label > img {
transform: scale(1.6);
cursor: zoom-out;
position: relative;
z-index: 999;
}
.post-content img.zoomCheck {
transition: transform 0.15s ease;
z-index: 999;
cursor: zoom-in;
}
}
</style>
Sources:
1⃣ https://t.co/qfE6R6B5uE
2⃣ https://t.co/mxtyBIo5FL
3⃣ https://t.co/fftLtQYTDO
#Hugo wollte ich schon lange mal einsetzen als Static Site Generator, u.a. auch wegen dem Blog von @stoege. Die letzte Motivation kam dann aus der Inspiration bei @BitlagerPro, da mich #PaperMod optisch sehr angesprochen hat!
Trends for you
Most Popular Users
Elon Musk 
@elonmusk
240.2M followers
Barack Obama
@barackobama
119.3M followers
Donald J. Trump
@realdonaldtrump
111.6M followers
Cristiano Ronaldo
@cristiano
109.1M followers
Narendra Modi
@narendramodi
107M followers
Rihanna
@rihanna
97.3M followers
NASA
@nasa
92.1M followers
Justin Bieber
@justinbieber
90.6M followers
KATY PERRY
@katyperry
86.9M followers
Taylor Swift
@taylorswift13
80.7M followers
Lady Gaga
@ladygaga
72.3M followers
Kim Kardashian
@kimkardashian
69.4M followers
Virat Kohli
@imvkohli
68.7M followers
YouTube
@youtube
68.6M followers
Bill Gates
@billgates
63.5M followers
The Ellen Show
@theellenshow
62.5M followers
CNN
@cnn
61.9M followers
Neymar Jr
@neymarjr
61.3M followers
X
@x
60.9M followers
Selena Gomez
@selenagomez
60M followers