J5_09搜索

weeya11个月前JTBC教程214

    需要在可以被搜索的模块目录中手动添加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_11增加手机站

1、Public/common/diplomat/index.php文件    return Jtbc::take('index.index');替换成&...

J5_03首页模板

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

J5增加PDF附件下载功能

1、模块管理增加att字段,选择29附件管理器2、模板代码<table class="table table-striped m-0"><tbody><...

J5模块首页-列表分类-文章页面自定义TDK

J5模块首页-列表分类-文章页面自定义TDK方法1、模块添加字段,后台开发维护》模块管理》右边的设置,在模块设置界面,点击右上角添加新字段按钮添加3个字段,用来存储自定义的TDK数据seotitle,...

J5_07核心团队合作伙伴

核心团队team/荣誉资质honor,有列表页,有内容页{@}<a href="./?type=detail&amp;id={$id}" class="id...

J5_10多语言

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

发表评论    

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