给搜索关键词添加高亮
Baklib
发布于:2024-12-09
效果预览
在 main.css 中定义样式:
/* Search Result Highlight */
.search-highlight-block b {
color: hsl(var(--theme-color-primary));
}
在 search.liquid中添加样式:
<div class="flex-grow w-0">
<h3 class="truncate group-hover:text-primary text-2xl font-semibold">
<a href="{{ page.url }}" class="inline-block search-highlight-block">
{{ page.highlighted_search_title }}
</a>
</h3>
<p class="text-gray-400 line-clamp-3 search-highlight-block">
{{ page.highlighted_search_content }}
</p>
</div>