自定义Hugo短代码：带图片的链接卡片
效果：
- 创建一个自定义Hugo短代码：
首先，在你的Hugo博客项目中创建一个自定义的Hugo短代码。在你的项目根目录下，执行以下命令来创建一个新的短代码文件：
hugo new shortcode/linkcard.html然后，编辑新创建的linkcard.html文件，并将以下内容粘贴到该文件中：
<div style="
display: flex;
justify-content: center;
margin: 1em auto;
max-width: 390px;
align-items: center;
">
<a target="_blank" rel="noopener" href="{{ .Get "link" }}" class="LinkCard">
<style type="text/css">
/* 样式定义 */
.LinkCard {
text-decoration: none;
border: none !important;
color: inherit !important;
display: flex;
padding: 10px;
background-color: #f6f6f6; /* 浅灰色背景 */
border-radius: 4px; /* 圆角 */
max-width: 100%; /* 限制宽度 */
text-align: left;
align-items: center; /* 确保子项垂直居中 */
}
.LinkCard-svg {
margin-right: 10px; /* 控制SVG图标与文本的间距 */
}
.LinkCard-image {
max-width: 50px; /* 限制图片宽度 */
height: auto;
margin-left: 10px; /* 控制图片与文本的间距 */
border-radius: 6px; /* 图片圆角 */
}
.LinkCard-text {
display: flex;
flex-direction: column;
flex-grow: 1;
padding-right: 10px; /* 控制文本和图片之间的间距 */
}
.LinkCard-title {
font-size: 16px;
font-weight: 500;
line-height: 1.25;
color: #1a1a1a;
text-decoration: none; /* 初始状态下不显示下划线 */
transition: text-decoration 0.2s ease; /* 添加过渡效果 */
}
.LinkCard-link {
font-size: 14px;
line-height: 20px;
color: #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none; /* 初始状态下不显示下划线 */
transition: text-decoration 0.2s ease; /* 添加过渡效果 */
}
/* 添加鼠标悬停时的效果 */
.LinkCard:hover .LinkCard-title,
.LinkCard:hover .LinkCard-link {
color: white; /* 鼠标悬停时文字颜色变为白色 */
text-decoration: none; /* 鼠标悬停时不显示下划线 */
cursor: pointer !important; /* 鼠标悬停时将光标设置为小手 */
}
/* 其他样式定义，根据需要自行添加 */
</style>
<!-- SVG图标 -->
<svg class="LinkCard-svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.77 17.23c-.905-.904-.94-2.333-.08-3.193l3.059-3.06-1.192-1.19-3.059 3.058c-1.489 1.489-1.427 3.954.138 5.519s4.03 1.627 5.519.138l3.059-3.059-1.192-1.192-3.059 3.06c-.86.86-2.289.824-3.193-.08zm3.016-8.673l1.192 1.192 3.059-3.06c.86-.86 2.289-.824 3.193.08.905.905.94 2.334.08 3.194l-3.059 3.06 1.192 1.19 3.059-3.058c1.489-1.489 1.427-3.954-.138-5.519s-4.03-1.627-5.519-.138L9.786 8.557zm-1.023 6.68c.33.33.863.343 1.177.029l5.34-5.34c.314-.314.3-.846-.03-1.176-.33-.33-.862-.344-1.176-.03l-5.34 5.34c-.314.314-.3.846.03 1.177z" fill-rule="evenodd"></path>
</svg>
<div class="LinkCard-text">
<span class="LinkCard-title">{{ .Get "title" }}</span>
<span class="LinkCard-link">{{ .Get "link" }}</span>
</div>
<img class="LinkCard-image" alt="logo" src="{{ .Get "imageURL" }}">
</a>
</div>
这个短代码会接受三个参数：link表示链接地址，title表示标题，imageURL表示图片URL。你可以根据需要进行样式和结构的自定义。在上述代码中，我们添加了max-width属性来控制卡片的最大宽度和图片的最大宽度，并通过margin-right来控制图片与文本之间的间距。
- 在文章中使用自定义短代码：
在你的Hugo文章中，你可以使用以下方式插入自定义短代码，并传递相应的参数：
{{< linkcard link="https://learnprompting.org/zh-Hans/docs/intro" title="Learn prompting" imageURL="https://pic.yunshusong.cn/upic/20230923224934.png" >}}请确保将link、title和imageURL参数替换为你实际想要显示的链接、标题和图片URL。
- 构建和查看网站：
在完成以上步骤后，你可以重新构建你的Hugo网站并查看文章，自定义链接卡片应该会在文章中显示为你所定义的样式和图片大小限制。
通过以上步骤，你可以在Hugo博客中插入链接卡片并对图片显示进行约束。你可以根据自己的需求进一步自定义样式和显示限制。