Skip to content

Commit 117aa05

Browse files
ttttonyhettttonyhe
committed
New feature - Search
1 parent e6cd834 commit 117aa05

File tree

3 files changed

+173
-2
lines changed

3 files changed

+173
-2
lines changed

‎header.php‎

Lines changed: 78 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,12 @@
3232
<div class="header-div1">
3333
<a href="<?php echo site_url() ?>" style="display: inline-block;"><img src="<?php echo get_option('king_logo') ?>"></a>
3434
<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>
35-
</div>
35+
<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>
36+
</div>
3637
<?php }else{ ?>
3738
<div class="header-div1-1">
3839
<a href="<?php echo site_url() ?>"><img src="<?php echo get_option('king_logo'); ?>"></a>
40+
<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>
3941
</div>
4042
<?php } ?>
4143
<div class="header-div2">
@@ -75,6 +77,17 @@
7577
}
7678
});
7779

80+
var open_search = function(){
81+
$('#search_form').attr('class','search_form_play');
82+
$('.search-bg-b').attr('style','display:block');
83+
$('#search-div').attr('style','display:block');
84+
}
85+
var close_search = function(){
86+
$('#search_form').attr('class','search_form_dis');
87+
$('.search-bg-b').attr('style','display:none');
88+
$('#search-div').attr('style','display:none');
89+
}
90+
7891
</script>
7992

8093

@@ -103,6 +116,70 @@
103116
$("#jv-loadingbar").animate({width:"100%"},100,function(){
104117
$("#jv-loadingbar").fadeOut(1000,function(){$("#jv-loadingbar").css("width","0");});
105118
});
119+
</script>
120+
121+
<div id="search_form" class="search_form_dis">
122+
<div class="search-bg-b"></div>
123+
<div class="search-bg" id="search-div">
124+
<div class="search-div1">
125+
<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>
126+
<p>从博客全部内容中搜索所需</p>
127+
<input class="uk-input" type="text" placeholder="请输入搜索内容并回车Enter..." v-on:keyup.enter="search_query" v-model.trim="search_key">
128+
</div>
129+
<div class="search-div2">
130+
<ul v-if="search_loading">
131+
<template v-if="search_content.length !== 0">
132+
<li v-for="search in search_content">
133+
<a :href="search.link">
134+
<h4 v-html="search.title.rendered"></h4>
135+
<p v-html="search.post_excerpt.four"></p>
136+
</a>
137+
</li>
138+
</template>
139+
<template v-else>
140+
<li>
141+
<h4 style="color:#777">无匹配文章</h4>
142+
<p>请尝试更换搜索词再试试吧...</p>
143+
</li>
144+
</template>
145+
</ul>
146+
<ul v-if="loading_ph">
147+
<ul class="uk-animation-slide-bottom-small">
148+
<li class="search-line" style="padding: 30px;background: #f1f2f3;border: none;"></li>
149+
<li class="search-line" style="padding: 30px;background: #f1f2f3;border: none;"></li>
150+
<li class="search-line" style="padding: 30px;background: #f1f2f3;border: none;"></li>
151+
</ul>
152+
</div>
153+
</div>
154+
</div>
155+
156+
<script>
157+
var search_vue = new Vue({
158+
el: '#search-div',
159+
data(){
160+
return {
161+
search_content : null,
162+
search_key : null,
163+
search_loading : false,
164+
loading_ph : true,
165+
search_open : false
166+
}
167+
},
168+
methods : {
169+
search_query : function(){
170+
this.search_loading = false;
171+
this.loading_ph = true;
172+
173+
var s = this.search_key;
174+
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'); ?>')
175+
.then(response => {
176+
this.search_content = response.data;
177+
this.loading_ph = false;
178+
this.search_loading = true;
179+
})
180+
}
181+
}
182+
})
106183
</script>
107184
<main role="main">
108185
<div class="grid grid-centered" style="<?php if(!is_single() && !is_page()) echo 'max-width: 660px;padding: 0px 20px;margin-top: 80px;'; ?>">

‎inc/setting.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ function git_options_page() {
180180

181181
<div class="wrap" style="width: 47%;margin: 10vh auto;">
182182
<h1 style="font-weight: 600;font-size: 2.5rem;">主题设置</h1>
183-
<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>
183+
<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>
184184
<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;">
185185
<?php admin_show_category(); ?>
186186
</div>

‎style.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1539,6 +1539,7 @@ table{
15391539
.header-div1-1{
15401540
flex-basis: 50%;
15411541
text-align: left;
1542+
display: flex;
15421543
}
15431544

15441545
.header-div2{
@@ -1770,4 +1771,97 @@ table{
17701771
opacity: 1;
17711772
}
17721773
}
1774+
1775+
.search-bg-b{
1776+
position: fixed;
1777+
width: 100%;
1778+
height: calc(100vh + 80px);
1779+
z-index: 9;
1780+
margin-top: -80px;
1781+
background: rgba(51, 51, 51, 0.73);
1782+
display: none;
1783+
}
1784+
1785+
.search-bg{
1786+
position: fixed;
1787+
width: 600px;
1788+
left: calc((100% - 600px)/2);
1789+
z-index: 999;
1790+
background: #fff;
1791+
border-radius: 3px;
1792+
box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 8px;
1793+
padding: 40px;
1794+
padding-bottom: 50px;
1795+
max-height: calc(100% - 150px);
1796+
overflow-y: auto;
1797+
transition: all .2s;
1798+
display: none;
1799+
}
1800+
1801+
.search-div1 h3{
1802+
margin: 0px;
1803+
font-weight: 600;
1804+
color: #333;
1805+
}
1806+
1807+
.search-div1 p{
1808+
margin: 0px;
1809+
color: #999;
1810+
margin-bottom: 20px;
1811+
}
1812+
1813+
.search-div1 input{
1814+
width: 100%;
1815+
border-radius: 3px;
1816+
padding: 12px 15px;
1817+
height: auto;
1818+
color: #888;
1819+
border: 2px solid #eee !important;
1820+
font-weight: 500;
1821+
border-color: #eee;
1822+
}
1823+
1824+
.search-div2 ul{
1825+
list-style: none;
1826+
padding: 0px;
1827+
margin: 20px 0 0 0;
1828+
}
1829+
1830+
.search-div2 li{
1831+
padding: 15px;
1832+
margin: 10px 0;
1833+
border-radius: 3px;
1834+
border: 1px solid #eee;
1835+
}
1836+
1837+
.search-div2 a{
1838+
text-decoration: none !important;
1839+
}
1840+
1841+
.search-div2 li h4{
1842+
margin: 0px;
1843+
text-overflow: ellipsis;
1844+
white-space: nowrap;
1845+
overflow: hidden;
1846+
font-weight: 600;
1847+
}
1848+
1849+
.search-div2 li p{
1850+
text-overflow: ellipsis;
1851+
white-space: nowrap;
1852+
overflow: hidden;
1853+
margin: 0px;
1854+
font-size: .9rem;
1855+
color: #999;
1856+
}
1857+
1858+
.search_form_play{
1859+
opacity: 1;
1860+
z-index: 999;
1861+
}
1862+
1863+
.search_form_dis{
1864+
opacity: 0;
1865+
z-index: -1;
1866+
}
17731867
/* End of The Tony Vershion */

0 commit comments

Comments
 (0)