J5_09搜索

weeya4个月前JTBC教程86

    需要在可以被搜索的模块目录中手动添加common/search.jtbc引导文件来激活搜索功能
    需要手动构建关键字输入框并通过get的方式提交到/search/?keyword=关键字
    默认情况下搜索title字段,如有不同需求需要自行手动修改源码实现

<form role="search" action="/search/" method="get">
div class="simple-search input-group">
<input class="form-control text-1" id="headerSearch" name="keyword" type="search" value="" placeholder="Search...">
<button class="btn" type="submit" aria-label="Search">
<i class="fas fa-search header-nav-top-icon"></i>
</button>
</div>
</form>
注意name="keyword"要加进去的

search.jtbc文件代码
<?xml version="1.0" encoding="utf-8"?>
<xml mode="jtbc" author="jetiben">
  <configure>
    <node>item</node>
    <field>name,zh-cn</field>
    <base>item_list</base>
  </configure>
  <item_list>
    <item>
      <name><![CDATA[mode]]></name>
      <zh-cn><![CDATA[1]]></zh-cn>
    </item>
  </item_list>
</xml>
~~~~~~~~~~~~~~~~~~~~~~~~~~
按钮案例参考
            <form role="search" action="/search/" method="get">
                <input type="search" name="keyword" class="c-keywords keyword_v1 lf" maxlength="20" placeholder="请输入关键词" />
                <button id="searchSubmit" class="search-button" title="搜索" aria-label="搜索"></button>
            </form>

搜索按钮css样式
.search_box_v1 .search-button {
  display: inline-block;
  width: 30px;
  height: 24px;
  padding: 0;
  border: 0;
  position: absolute;
  z-index: 10;
  right: 0;
  top: 20px;
  background: url(../images/spirit.png) no-repeat -31px 0;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~
搜索列表前端模板代码
<ul class="simple-post-list m-0">
{@}
<li>
<div class="post-info">
<i class="fas fa-angle-right"></i><a href="{$linkurl}">{$title}</a>
</div>
</li>
{@}
</ul>

搜索列表css样式
/* Simple Post List */
ul.simple-post-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.simple-post-list li {
    border-bottom: 1px dotted #E2E2E2;
    padding: 15px 0;
}

ul.simple-post-list li::after {
    clear: both;
    content: "";
    display: block;
}

ul.simple-post-list li:last-child {
    border-bottom: 0;
}

ul.simple-post-list li a{color:#5d5e60}
ul.simple-post-list li a:hover{color:#0ec5a1}

ul.simple-post-list .post-image {
    float: left;
    margin-right: 12px;
}

ul.simple-post-list .post-meta {
    color: var(--grey-900);
    font-size: 0.8em;
}

ul.simple-post-list .post-info {
    line-height: 20px;
}

@media (max-width: 575px) {
    ul.comments li {
        border-left: 8px solid rgba(0, 0, 0, 0.06);
        clear: both;
        padding: 0 0 0 10px;
    }

    ul.comments li .img-thumbnail {
        display: none;
    }

    ul.comments .comment-arrow {
        display: none;
    }
}
/* Simple Post List end */

相关文章

J5_03首页模板

1、头尾模板调用代码{$=$take('global.communal.header')}{$=$take('global.communal.footer')}2、调用...

J5网站首页增加SEO标题

网站增加首页标题1、/Public/common/language/communal.jtbc文件增加节点    <item>  &nbs...

J5_02公共模板

头部尾部    <TITLE>{$=$htmlEncode(implode(' - ', array_reverse($meta_title)...

J5列表中获取当前分类的父分类ID

以新闻模块为例子。打开/news/common/diplomat/index.php找到public function list(Request $req, Response $res)函数修改以下内...

J5_10多语言

多语言/Public/console/common/language/sel_lang.jtbc增加节点不同语言不同模板Public/common/diplomat/index.php修改return...

J5详情页获取当前分类父分类ID

1、修改程序 /public/zhiwu/common/template/index.jtbc文件public function detail(Request $req, Response $res)...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。