给搜索关键词添加高亮

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>

提交反馈