跳转到主要内容

关于Drupal搜索框的定制样式

前端框架的搜索框的html代码是非常简洁的,像uikit的search框是这样的:

<form class="uk-search uk-search-default">
    <span class="uk-search-icon-flip" uk-search-icon></span>
    <input class="uk-search-input" type="search" placeholder="Search...">
</form>

而drupal8的搜索框叫search-block-form,它的html结构如下:

<form action="/search/node" method="get" id="search-block-form" accept-charset="UTF-8" class="search-form search-block-form">
  <div class="js-form-item form-item js-form-type-search form-type-search js-form-item-keys form-item-keys form-no-label">
      <label for="edit-keys" class="visually-hidden">搜索</label>
      <input title="请输入您想搜索的关键词。" data-drupal-selector="edit-keys" type="search" id="edit-keys" name="keys" value="" size="15" maxlength="128" class="form-search">
  </div>
  <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions">
    <input class="search-form__submit button js-form-submit form-submit" data-drupal-selector="edit-submit" type="submit" id="edit-submit" value="搜索">
  </div>

</form>

而且drupal form api是相当复杂的,每个form element都有个wrapper,要改动form的html结构需要修改多个模板。

然而,drupal的search form并不是真正的form,它的method是“get”的,所以我们不需要涉及到drupal的form模板。我们只要在form的action里指定search/node,或search/user,就能实现drupal搜索框的功能。

最终的代码可以是这样的:

<form class="uk-search uk-search-default" action="/search/node">
    <span class="uk-search-icon-flip" uk-search-icon></span>
    <input class="uk-search-input" type="search" placeholder="Search...">
</form>

只要form的action是对的,其它部分可任意修改。更高级的效果可以参考本站首页右上角的搜索框。


添加新评论

此字段内容将保密,不会被其他人看见。

纯文本

  • 不允许使用HTML标签。
  • 自动断行和分段。