feat: add local search
This commit is contained in:
XPoet
parent
d00fda79a5
commit
9f9f618ec1
32
_config.yml
32
_config.yml
|
|
@ -1,7 +1,7 @@
|
|||
# Theme Info
|
||||
theme_name: ILS-X
|
||||
theme_name: ILS
|
||||
|
||||
theme_version: 1.0.0
|
||||
theme_version: 0.1.1
|
||||
|
||||
menu:
|
||||
Home: /
|
||||
|
|
@ -14,6 +14,12 @@ favicon: images/favicon.png
|
|||
|
||||
avatar: images/avatar.png
|
||||
|
||||
# Site page layout setting.
|
||||
page:
|
||||
left_side_width: 30
|
||||
right_side_width: 70
|
||||
media_max_width: 960
|
||||
|
||||
# Social Links.
|
||||
# Usage: `Key: permalink || icon`
|
||||
# Key is the link label showing to end users.
|
||||
|
|
@ -40,9 +46,9 @@ highlight_theme: normal
|
|||
# You can get your appid and appkey from https://leancloud.cn
|
||||
# more info please open https://github.com/xCss/Valine
|
||||
valine:
|
||||
enable: false
|
||||
appid: # your leancloud application appid
|
||||
appkey: # your leancloud application appkey
|
||||
enable: true
|
||||
appid: ih2nzG3ilVNdLgJK4kBXTjOq-gzGzoHsz # your leancloud application appid
|
||||
appkey: gdf6tXXLBTLg9qpjS2y6Tbw7 # your leancloud application appkey
|
||||
notify: false # mail notifier, https://github.com/xCss/Valine/wiki
|
||||
verify: false # Verification code
|
||||
placeholder: 评论一下再走吧~
|
||||
|
|
@ -51,18 +57,24 @@ valine:
|
|||
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
|
||||
busuanzi_count:
|
||||
# count values only if the other configs are false
|
||||
enable: false
|
||||
enable: true
|
||||
# custom uv span for the whole site
|
||||
site_uv: false
|
||||
site_uv: true
|
||||
site_uv_header:
|
||||
site_uv_footer:
|
||||
# custom pv span for the whole site
|
||||
site_pv: false
|
||||
site_pv: true
|
||||
site_pv_header:
|
||||
site_pv_footer:
|
||||
# custom pv span for one page only
|
||||
page_pv: false
|
||||
page_pv: true
|
||||
page_pv_header:
|
||||
page_pv_footer:
|
||||
|
||||
# Local Search
|
||||
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
|
||||
local_search:
|
||||
enable: false
|
||||
enable: true
|
||||
# If auto, trigger search by changing input.
|
||||
# If manual, trigger search by pressing enter key or search button.
|
||||
trigger: auto
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
# Theme Info
|
||||
theme_name: ILS-X
|
||||
|
||||
theme_version: 1.0.0
|
||||
|
||||
menu:
|
||||
Home: /
|
||||
Archives: /archives
|
||||
About: /about
|
||||
|
||||
rss: /atom.xml
|
||||
|
||||
favicon: images/favicon.png
|
||||
|
||||
avatar: images/avatar.png
|
||||
|
||||
# Social Links.
|
||||
# Usage: `Key: permalink || icon`
|
||||
# Key is the link label showing to end users.
|
||||
# Value before `||` delimeter is the target permalink.
|
||||
# Value after `||` delimeter is the name of FontAwesome icon.
|
||||
social:
|
||||
#GitHub: https://github.com/yourname || github
|
||||
#E-Mail: mailto:yourmail || envelope
|
||||
#Google: https://plus.google.com/yourname || google
|
||||
#Twitter: https://twitter.com/yourname || twitter
|
||||
#Weibo: https://www.facebook.com/yourname || weibo
|
||||
#FB Page: https://www.facebook.com/yourname || facebook
|
||||
#VK Group: https://vk.com/yourname || vk
|
||||
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
|
||||
#Instagram: https://instagram.com/yourname || instagram
|
||||
|
||||
# Code Highlight theme
|
||||
# Available value:
|
||||
# normal | night | night eighties | night blue | night bright
|
||||
# https://github.com/chriskempson/tomorrow-theme
|
||||
highlight_theme: normal
|
||||
|
||||
# Valine.
|
||||
# You can get your appid and appkey from https://leancloud.cn
|
||||
# more info please open https://github.com/xCss/Valine
|
||||
valine:
|
||||
enable: false
|
||||
appid: # your leancloud application appid
|
||||
appkey: # your leancloud application appkey
|
||||
notify: false # mail notifier, https://github.com/xCss/Valine/wiki
|
||||
verify: false # Verification code
|
||||
placeholder: 评论一下再走吧~
|
||||
|
||||
# Show PV/UV of the website/page with busuanzi.
|
||||
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
|
||||
busuanzi_count:
|
||||
# count values only if the other configs are false
|
||||
enable: false
|
||||
# custom uv span for the whole site
|
||||
site_uv: false
|
||||
# custom pv span for the whole site
|
||||
site_pv: false
|
||||
# custom pv span for one page only
|
||||
page_pv: false
|
||||
|
||||
# Local Search
|
||||
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
|
||||
local_search:
|
||||
enable: false
|
||||
# If auto, trigger search by changing input.
|
||||
# If manual, trigger search by pressing enter key or search button.
|
||||
trigger: auto
|
||||
# Show top n results per article, show all results by setting to -1
|
||||
top_n_per_article: 1
|
||||
# Unescape html strings to the readable one.
|
||||
unescape: false
|
||||
# Preload the search data when the page loads.
|
||||
preload: false
|
||||
|
||||
|
||||
# Assets
|
||||
css: css
|
||||
js: js
|
||||
images: images
|
||||
|
|
@ -16,12 +16,6 @@
|
|||
</a>
|
||||
</li>
|
||||
<% } %>
|
||||
<% if (theme.local_search.enable) { %>
|
||||
<li>
|
||||
<button class="search-btn btn popup-trigger"><i class="fa fa-search"></i></button>
|
||||
</li>
|
||||
<%- next_js('local-search.js') %>
|
||||
<% } %>
|
||||
</ul>
|
||||
|
||||
<div class="menu-bar">
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
>
|
||||
</div>
|
||||
<span class="popup-btn-close">
|
||||
<i class="fa fa-times-circle"></i>
|
||||
<i class="fa fa-times"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div id="search-result">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
<div class="tools-container">
|
||||
<ul class="tools-list">
|
||||
<li class="search-btn">
|
||||
<i class="fa fa-search"></i>
|
||||
</li>
|
||||
<li class="mode-toggle-btn">
|
||||
<% if (theme.local_search.enable) { %>
|
||||
<li class="search popup-trigger">
|
||||
<i class="fa fa-search"></i>
|
||||
</li>
|
||||
<%- next_js('local-search.js') %>
|
||||
<% } %>
|
||||
<li class="mode-toggle">
|
||||
<i class="fa fa-moon-o"></i>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div class="page-top">
|
||||
<%- partial('_partial/header') %>
|
||||
</div>
|
||||
|
||||
<div class="page-middle">
|
||||
<main class="main-content">
|
||||
<% if (is_home()) { %>
|
||||
|
|
@ -31,4 +32,7 @@
|
|||
<div class="page-bottom">
|
||||
<%- partial('_partial/footer') %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% if (theme.local_search.enable) { %>
|
||||
<%- partial('_partial/local-search') %>
|
||||
<% } %>
|
||||
|
|
@ -259,7 +259,7 @@
|
|||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 760px) {
|
||||
@media screen and (max-width: $media-max-width) {
|
||||
.menu-list {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,29 +2,28 @@
|
|||
|
||||
$icon-size = 18px;
|
||||
|
||||
$keyword-red = #ff2a2a;
|
||||
|
||||
.search-pop-overlay {
|
||||
background: rgba(0, 0, 0, .3);
|
||||
display: none;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: $z-index-5;
|
||||
}
|
||||
|
||||
|
||||
.search-popup {
|
||||
background: #f5f5f5;
|
||||
border-radius: 5px;
|
||||
background: var(--background-color);
|
||||
border-radius: 2px;
|
||||
height: 80%;
|
||||
left: calc(50% - 350px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
width: 700px;
|
||||
z-index: 1001;
|
||||
width: 70%;
|
||||
z-index: $z-index-6;
|
||||
|
||||
.search-icon, .popup-btn-close {
|
||||
color: var(--normal-text-color);
|
||||
|
|
@ -36,14 +35,14 @@ $keyword-red = #ff2a2a;
|
|||
cursor: pointer;
|
||||
|
||||
&:hover .fa {
|
||||
color: #222;
|
||||
color: var(--first-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.search-header {
|
||||
background: #eee;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
background: var(--border-color);
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -64,20 +63,21 @@ input.search-input {
|
|||
|
||||
|
||||
.search-popup {
|
||||
|
||||
.search-input-container {
|
||||
flex-grow: 1;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
ul.search-result-list {
|
||||
margin: 5px;
|
||||
padding: 0;
|
||||
margin: 10px 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p.search-result {
|
||||
border-bottom: 1px dashed #ccc;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
a.search-result-title {
|
||||
|
|
@ -85,8 +85,8 @@ input.search-input {
|
|||
}
|
||||
|
||||
.search-keyword {
|
||||
border-bottom: 1px dashed $keyword-red;
|
||||
color: $keyword-red;
|
||||
border-bottom: 1px dashed var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -98,7 +98,14 @@ input.search-input {
|
|||
}
|
||||
|
||||
#no-result {
|
||||
color: #ccc;
|
||||
color: var(--third-text-color);
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $media-max-width) {
|
||||
.search-popup {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -7,13 +7,13 @@
|
|||
cursor: pointer;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border-color);
|
||||
border: 1px solid var(--third-text-color);
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -25,10 +25,6 @@
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ button {
|
|||
border: 0;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -5,9 +5,10 @@
|
|||
// ===============================
|
||||
// layout
|
||||
// ===============================
|
||||
$header-height = 100px; // 头部默认高度
|
||||
$header-shrink-height = 60px; // 头部收缩高度
|
||||
$main-content-width = 70%; // 中间内容区域宽度
|
||||
$header-height = 100px; // 头部默认高度
|
||||
$header-shrink-height = 60px; // 头部收缩高度
|
||||
$main-content-width = 70%; // 中间内容区域宽度
|
||||
$media-max-width = 760px; // 媒体查询最大宽度
|
||||
|
||||
// ===============================
|
||||
// z-index
|
||||
|
|
@ -29,7 +30,7 @@ $first-text-color = #2c3e50; // 第一文本颜色
|
|||
$second-text-color = #525e6b; // 第二文本颜色
|
||||
$third-text-color = #9ca3ad; // 第三文本颜色
|
||||
$normal-text-color = #616161; // 通用文本颜色（默认字体颜色）
|
||||
$border-color = #ccc; // 边框颜色
|
||||
$border-color = #eee; // 边框颜色
|
||||
|
||||
// dark mode color
|
||||
$dark-background-color = #333; // 背景颜色
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const menuBar = document.querySelector('.menu-bar');
|
|||
const windowMask = document.querySelector('.window-mask');
|
||||
const headerHeight = header.getBoundingClientRect().height;
|
||||
|
||||
window.addEventListener('scroll', function (e) {
|
||||
window.addEventListener('scroll', function (_e) {
|
||||
|
||||
const scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
|
||||
|
||||
|
|
@ -20,15 +20,10 @@ window.addEventListener('scroll', function (e) {
|
|||
}
|
||||
});
|
||||
|
||||
menuBar.addEventListener('click', function (e) {
|
||||
menuBar.addEventListener('click', function (_e) {
|
||||
header.classList.toggle('header-drawer-show');
|
||||
});
|
||||
|
||||
windowMask.addEventListener('click', function (e) {
|
||||
windowMask.addEventListener('click', function (_e) {
|
||||
header.classList.toggle('header-drawer-show');
|
||||
});
|
||||
|
||||
|
||||
const searchBtn = document.querySelector('.search-btn');
|
||||
searchBtn.addEventListener('click', function (e) {
|
||||
});
|
||||
});
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
* 日间/夜间 模式切换
|
||||
*/
|
||||
const modeToggleBtn = document.querySelector('.mode-toggle-btn');
|
||||
const modeToggleBtn = document.querySelector('.mode-toggle');
|
||||
const iconDom = modeToggleBtn.querySelector('i');
|
||||
const modeConfig = JSON.parse(localStorage.getItem('ils_x'));
|
||||
if (modeConfig) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue