search.liquid

搜索结果页模板，位于： templaes/search.liquid

主要是考虑在有搜索结果的情况下，如果遍历显示结果页面列表。通用的代码：

<section class="relative pt-12 md:pt-[100px]">
<div class="px-4 mx-auto max-w-screen-xl sm:px-6">
<div class="z-0 w-full">
<div class="grid items-center grid-cols-7 gap-4">
<div class="col-span-7 md:col-span-3">
<nav aria-label="" class="block col-span-7 md:col-span-3" data-turbo="false">
<ol class="flex flex-wrap p-0 mt-8 mb-4 space-x-2 bg-transparent">
<li class="">
<a href="/">{{ 'generic.back' | t }}</a>
</li>
</ol>
</nav>
<h3 class="text-2xl font-bold md:mt-10 md:mb-8">
{% if search.tag or search.keywords %}
<p class="mt-3">
{{ 'generic.search' | t }}
{% if search.tag %}
<i class="px-2 py-1 rounded" style="background-color: {{ search.tag.color }}">{{ search.tag.name }}</i>
{% endif %}
{% if search.keywords %}
<span class="text-primary"><i>{{ search.keywords }}</i></span>
{% endif %}
</p>
{% endif %}
</h3>
</div>
{% form_tag 'search', class: "col-span-7 md:col-start-5 md:col-span-3" %}
<div class="relative rounded-md shadow-sm">
<button type="submit" class="absolute inset-y-0 right-0 flex items-center pl-4 pr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
<input type="text" name="{{form.keywords_field_name}}" value="{{ search.keywords | escape_once }}" placeholder="{{ "search.placeholder" | t }}" class="block w-full h-12 pl-3 pr-10 transition duration-300 ease-in-out bg-white bg-opacity-25 border rounded focus:ring-primary focus:border-primary sm:text-md focus:bg-opacity-60">
</div>
{% endform_tag %}
</div>
<div data-more-loader-target="content">
{% if search.keywords or search.tag %}
{% paginate_tag search.pages, as: 'items', per: 15 %}
{% for page in items %}
<div class="my-4">
<a class="text-xl font-bold keyword-highlight-block" href="{{ page.url }}">
<span>{{ page.highlighted_search_title }}</span>
</a>
<p class="mt-2 text-base text-gray-700 keyword-highlight-block">
{# page.settings.content | strip_html | highlight: search.keywords }
{{ page.highlighted_search_content }}
</p>
<div class="grid grid-cols-6 gap-4">
<div class="col-span-6 mt-2 mb-0 text-sm text-justify text-gray-400 text-truncate md:col-span-3">
{% render 'breadcrumb', breadcrumb: page.breadcrumb %}
</div>
<p class="hidden col-span-6 mt-2 text-sm italic text-right text-gray-300 md:col-span-3 md:block">
来源: <a href="/0e5f/1205/3577/d08c">http://helperp.kuaidizs.cn/0e5f/1205/3577/d08c</a>
</p>
</div>
</div>
<hr class="border-dashed">
{% else %}
{% assign message = "empty.name" | t %}
{% render 'empty', message: message %}
{% endfor %}
<div class="mt-8">
{% render 'paginate', paginate: paginate %}
</div>
{% endpaginate_tag %}
{% else %}
<div class="w-full mx-auto my-8">{{ "search.please_enter_keywords" | t }}</div>
{% endif %}
</div>
</div>
</div>
</section>

其中，获得自定义搜索结果：

{% paginate_tag search.extends, as: 'extends' %}
{% for extend in extends %}
<li class="p-2"><a href="{{extend.url}}">{{extend.link_text}}</a></li>
{% endfor %}
{% endpaginate_tag %}

获取自然搜索结果：

{% paginate_tag search.pages, as: 'items' %}
{% for page in items %}
<li class="flex items-center px-2 py-2 space-x-2 rounded group hover:bg-primary/10">
<a href="{{ page.url }}" class="inline-block">
{{ page.link_text | highlight: search.keywords }}
</a>
</li>
{% else %}
{{ "generic.empty" | t }}
{% endfor %}
{% render 'paginate', paginate: paginate %}
{% endpaginate_tag %}

2024-09 更新

高亮块 CSS：

  /* Search Result Highlight */
.keyword-highlight-block b{
color: var(--primary);
}

搜索结果中标题的展示：

# 原来的写法：
{{ page.link_text | highlight: search.keywords }}新的写法：{{ page.highlighted_search_title }}

搜索结果中内容的展示：

# 原来的写法：
{{ page.settings.content | strip_html | highlight: search.keywords }}新的写法：{{ page.highlighted_search_content }}

搜索页面的变量 search 新增了两个属性：

• search.extends - 自定义结果集

• search.page_number - 当前分页的页码

因为搜索页面把自定义结果放在了 search.extends 里，所以需要单独代码把内容循环显示出来

<div class="space-y-3 text-slate-600 dark:text-slate-400">
  {% if search.page_number == 1 %}
    {% for link in search.extends %}
      <div class="space-y-4 rounded-md bg-accent-100 hover:bg-accent-200 md:p-4">
        <a class="text-lg font-bold md:text-xl text-slate-800 hover:text-secondary dark:text-slate-200 search-highlight-block" href="{{ link.url }}">{{ link.link_text }}</a>
        <p class="text-sm line-clamp-3 text-slate-400 search-highlight-block">{{ link.url }}</p>
      </div>
    {% endfor %}
  {% endif %}
  {% paginate_tag search.pages, as: 'pages', per: 10 %}
    {% for page in pages %}
      <div class="space-y-4 rounded-md bg-accent-100 hover:bg-accent-200 md:p-4">
        <a class="text-lg font-bold md:text-xl text-slate-800 hover:text-secondary dark:text-slate-200 search-highlight-block" href="{{ page.url }}">{{ page.highlighted_search_title }}</a>
        <p class="text-sm line-clamp-3 text-slate-400 search-highlight-block">{{ page.highlighted_search_content }}</p>
        <div class="flex items-center justify-between">
          <div class="breadcrumbs hidden overflow-x-auto md:block text-sm">
            {% render 'breadcrumb', breadcrumb: page.breadcrumb %}
          </div>
        </div>
      </div>
    {% else %}
      <div class="w-full mx-auto my-8">{{ "search.no_results" | t: 'No results found' }}</div>
    {% endfor %}
    {% render 'paginate', paginate: paginate %}
  {% endpaginate_tag %}
</div>