Skip to content

Commit

Permalink
New feature - Search
Browse files Browse the repository at this point in the history
  • Loading branch information
@ttttonyhe
ttttonyhe committed Mar 9, 2019
1 parent e6cd834 commit 117aa05
Show file tree
Hide file tree
Showing 3 changed files with 173 additions and 2 deletions.
79 changes: 78 additions & 1 deletion header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,12 @@
<div class="header-div1">
<a href="<?php echo site_url() ?>" style="display: inline-block;"><img src="<?php echo get_option('king_logo') ?>"></a>
<a href="<?php echo site_url() ?>/feed" style="display: inline-block;margin-top: 12px;margin-left: 15px;"><button type="button" class="btn btn-light" style="letter-spacing: 1px;font-weight: 500;">RSS订阅</button></a>
</div>
<a style="margin-top: 12px;margin-left: 12px;"><button onclick="open_search();" type="button" class="btn btn-light" style="letter-spacing: 1px;font-weight: 500;">博客搜索</button></a>
</div>
<?php }else{ ?>
<div class="header-div1-1">
<a href="<?php echo site_url() ?>"><img src="<?php echo get_option('king_logo'); ?>"></a>
<a style="margin-top: 12px;margin-left: 12px;"><button onclick="open_search();" type="button" class="btn btn-light" style="letter-spacing: 1px;font-weight: 500;">博客搜索</button></a>
</div>
<?php } ?>
<div class="header-div2">
Expand Down Expand Up @@ -75,6 +77,17 @@
}
});

var open_search = function(){
$('#search_form').attr('class','search_form_play');
$('.search-bg-b').attr('style','display:block');
$('#search-div').attr('style','display:block');
}
var close_search = function(){
$('#search_form').attr('class','search_form_dis');
$('.search-bg-b').attr('style','display:none');
$('#search-div').attr('style','display:none');
}

</script>


Expand Down Expand Up @@ -103,6 +116,70 @@
$("#jv-loadingbar").animate({width:"100%"},100,function(){
$("#jv-loadingbar").fadeOut(1000,function(){$("#jv-loadingbar").css("width","0");});
});
</script>

<div id="search_form" class="search_form_dis">
<div class="search-bg-b"></div>
<div class="search-bg" id="search-div">
<div class="search-div1">
<h3>搜索内容<button type="button" class="btn btn-primary" style="font-weight: 600;padding: 4px 14px;font-size: .9rem;margin-top: 6px;margin-left: 10px;float: right;" onclick="close_search();">关闭</button></h3>
<p>从博客全部内容中搜索所需</p>
<input class="uk-input" type="text" placeholder="请输入搜索内容并回车Enter..." v-on:keyup.enter="search_query" v-model.trim="search_key">
</div>
<div class="search-div2">
<ul v-if="search_loading">
<template v-if="search_content.length !== 0">
<li v-for="search in search_content">
<a :href="search.link">
<h4 v-html="search.title.rendered"></h4>
<p v-html="search.post_excerpt.four"></p>
</a>
</li>
</template>
<template v-else>
<li>
<h4 style="color:#777">无匹配文章</h4>
<p>请尝试更换搜索词再试试吧...</p>
</li>
</template>
</ul>
<ul v-if="loading_ph">
<ul class="uk-animation-slide-bottom-small">
<li class="search-line" style="padding: 30px;background: #f1f2f3;border: none;"></li>
<li class="search-line" style="padding: 30px;background: #f1f2f3;border: none;"></li>
<li class="search-line" style="padding: 30px;background: #f1f2f3;border: none;"></li>
</ul>
</div>
</div>
</div>

<script>
var search_vue = new Vue({
el: '#search-div',
data(){
return {
search_content : null,
search_key : null,
search_loading : false,
loading_ph : true,
search_open : false
}
},
methods : {
search_query : function(){
this.search_loading = false;
this.loading_ph = true;

var s = this.search_key;
axios.get('<?php echo site_url() ?>/wp-json/wp/v2/posts?search='+ s +'<?php if(get_option('king_index_exclude')) echo '&categories_exclude='.get_option('king_index_exclude'); ?>')
.then(response => {
this.search_content = response.data;
this.loading_ph = false;
this.search_loading = true;
})
}
}
})
</script>
<main role="main">
<div class="grid grid-centered" style="<?php if(!is_single() && !is_page()) echo 'max-width: 660px;padding: 0px 20px;margin-top: 80px;'; ?>">
Expand Down
2 changes: 1 addition & 1 deletion inc/setting.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ function git_options_page() {

<div class="wrap" style="width: 47%;margin: 10vh auto;">
<h1 style="font-weight: 600;font-size: 2.5rem;">主题设置</h1>
<p style="margin: 4px 0;color: #777;letter-spacing: .4px;">本主题基于免费主题 King 修改, 使用 Vue.js 重构<br/>请务必开启 WordPress REST API 功能并设置 非默认 固定链接<br/>本主题已开源,尊重作者版权:<a target="_blank" href="https://github.com/HelipengTony/ouorz" style="color: #555;text-decoration: none;margin-left: 5px;">https://github.com/HelipengTony/ouorz_theme</a><br/>积极收集反馈与建议, 任何问题请发 ISSUE 以便统一调整</p>
<p style="margin: 4px 0;color: #777;letter-spacing: .4px;">请务必开启 WordPress REST API 功能并设置 非默认 固定链接<br/>原体基于 King 主题，本主题已开源以尊重作者版权:<a target="_blank" href="https://github.com/HelipengTony/ouorz" style="color: #555;text-decoration: none;margin-left: 5px;">https://github.com/HelipengTony/ouorz_theme</a><br/>积极收集反馈与建议, 任何问题请发 ISSUE 以便统一调整</p>
<div style="background: #f7f8f9;padding: 5px 20px;box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 2px !important;border-radius: 4px;margin: 20px 0;">
<?php admin_show_category(); ?>
</div>
Expand Down
94 changes: 94 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1539,6 +1539,7 @@ table{
.header-div1-1{
flex-basis: 50%;
text-align: left;
display: flex;
}

.header-div2{
Expand Down Expand Up @@ -1770,4 +1771,97 @@ table{
opacity: 1;
}
}

.search-bg-b{
position: fixed;
width: 100%;
height: calc(100vh + 80px);
z-index: 9;
margin-top: -80px;
background: rgba(51, 51, 51, 0.73);
display: none;
}

.search-bg{
position: fixed;
width: 600px;
left: calc((100% - 600px)/2);
z-index: 999;
background: #fff;
border-radius: 3px;
box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 8px;
padding: 40px;
padding-bottom: 50px;
max-height: calc(100% - 150px);
overflow-y: auto;
transition: all .2s;
display: none;
}

.search-div1 h3{
margin: 0px;
font-weight: 600;
color: #333;
}

.search-div1 p{
margin: 0px;
color: #999;
margin-bottom: 20px;
}

.search-div1 input{
width: 100%;
border-radius: 3px;
padding: 12px 15px;
height: auto;
color: #888;
border: 2px solid #eee !important;
font-weight: 500;
border-color: #eee;
}

.search-div2 ul{
list-style: none;
padding: 0px;
margin: 20px 0 0 0;
}

.search-div2 li{
padding: 15px;
margin: 10px 0;
border-radius: 3px;
border: 1px solid #eee;
}

.search-div2 a{
text-decoration: none !important;
}

.search-div2 li h4{
margin: 0px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-weight: 600;
}

.search-div2 li p{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin: 0px;
font-size: .9rem;
color: #999;
}

.search_form_play{
opacity: 1;
z-index: 999;
}

.search_form_dis{
opacity: 0;
z-index: -1;
}
/* End of The Tony Vershion */

0 comments on commit 117aa05

Please sign in to comment.