Hugo has shortcode feature in order to implement own code block like web card things which many blog service implements.
this is an example for my local environment
$ touch themes/terminal/layouts/shortcodes/linkcard.html
then, change the file like below.
{{ $url := .Get 0 }}
{{ $title := .Get 1 }}
{{ $u := urls.Parse $url }}
<div class="card">
<a href="{{ $url }}" target="_blank" rel="noopener noreferrer">
<div class="flex items-center card-content">
<img src="https://www.google.com/s2/favicons?sz=32&domain_url={{ $u.Scheme }}://{{ $u.Host }}" class="fav-icon mr-3" alt="{{ $url }} favicon image" width="32" height="32">
<h3>{{ $title }}</h3>
</div>
</a>
</div>
<style>
.card {
background-color: #78e2a0;
color: rgb(31, 34, 42);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
margin: 16px 0;
}
.card:hover {
transform: translateY(-4px);
}
.card a {
text-decoration: none;
color: inherit;
display: block;
padding: 12px 16px;
}
.card-content {
display: flex;
align-items: center;
}
.card-content h3 {
margin: 0;
margin-left: 30px;
font-size: 1.25em;
}
.fav-icon {
flex-shrink: 0;
}
</style>
Use it on hugo markdown file like below.
{{< linkcard "https://bsky.app/profile/callas1900.bsky.social" "bsky">}}
have fun!
Top comments (0)