iotcat
/
hexo-theme-volantis
mirror of https://github.com/IoTcat/hexo-theme-volantis.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

search

Browse Source
master
xaoxuu 4 years ago
parent 21d3f07d58
commit bfaacb00bb
5 changed files with 319 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      _config.yml
  2. 2
      source/css/_base/index.styl
  3. 28
      source/css/_layout/pagination.styl
  4. 283
      source/css/_layout/search.styl
  5. 17
      source/js/search.js

2
_config.yml
Unescape View File

@ -8,7 +8,7 @@ info:
# style: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@1.7.4/css/style.css
js:
app: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@1.7.4/js/app.js
search: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@1.7.4/js/search.js
# search: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@1.7.4/js/search.js
valine: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@1.7.4/js/valine.js

2
source/css/_base/index.styl
Unescape View File

@ -37,7 +37,7 @@ body
*::-webkit-scrollbar-thumb
background: $color-link
border-radius: 4px
border-radius: 2px
trans()
&:hover
width: 20px

28
source/css/_layout/pagination.styl
Unescape View File

@ -0,0 +1,28 @@
// #page-nav
// position: relative
// width: 100%
// padding: 20px 0px
//
// .page-number,
// .space
// display: none
// .next,
// .prev
// font-size: 0.8125em
// font-weight: normal
// color: $color-meta
// border-radius: 2px
// .next
// float: right
// padding: 0 7px 2px 10px
// .prev
// float: left
// padding: 0 10px 2px 7px
// // &:hover
// // color: @black
// span
// line-height: 20px
// vertical-align: middle
// &.icon
// position: relative
// top: 1px

283
source/css/_layout/search.styl
Unescape View File

@ -0,0 +1,283 @@
#u-search
$border-radius = 4px
display: none
position: fixed
top: 0
left: 0
width: 100%
height: 100%
padding: 60px 20px
z-index: 999999
@media screen and (max-width: $modal-threshold)
padding: 0px
.modal
position: fixed
height: 80%
width: 100%
max-width: 640px
left: 50%
top: 0
margin: 64px 0px 0px -320px
background: white
z-index: 3
border-radius: $border-radius
overflow: hidden
@media screen and (max-width: $modal-threshold)
box-shadow: none
max-width: none
top: 0
left: 0
margin: 0
height: 100%
border-radius: 0
.modal-ajax-content
opacity: 0
visibility: hidden
trans()
&.loaded
opacity: 1
visibility: visible
.modal-header
position: relative
width: 100%
height: $navbar-height
z-index: 3
border-top-left-radius: $border-radius
border-top-right-radius: $border-radius
font-size: $font-size
box-shadow: $box-shadow-card
background: alpha(white, .8)
backdrop-filter: blur(10px)
@media screen and (max-width: $modal-threshold)
border-radius: 0
padding: 0px
trans()
.btn-close
display: block
position: absolute
width: 50px + 5px
height: $navbar-height
top: 0
right: 0
color: $color-link
cursor: pointer
text-align: center
line-height: $navbar-height
vertical-align: middle
trans()
z-index: 2
&:hover
transform: rotate(90deg)
.modal-loading
position: absolute
bottom: 0
left: 0
width: 100%
height: 2px
background: transparent
z-index: 1
.modal-loading-bar
display: block
position: relative
width: 0%
height: 100%
background: $color-link
trans()
#u-search-modal-form
position: relative
width: 100%
height: 100%
z-index: 2
#u-search-modal-input
margin: $gap 50px
padding: 0 $gap
width: "calc(100% - 100px - %s)" % $gap
@media screen and (max-width: $modal-threshold)
padding: 0
line-height: 2rem
border-radius: $border-radius
vertical-align: middle
border: none
appearance: none
box-shadow: none
background: transparent
trans()
&:focus
border-top-left-radius: $border-radius
border-top-right-radius: $border-radius
#u-search-modal-btn-submit
position: absolute
top: 0
left: 0
padding-left: 5px
padding-top: 2px
background: transparent
border: none
width: 50px
height: $navbar-height
vertical-align: middle
color: $color-link
z-index: 2
.modal-footer
position: absolute
bottom: 0
left: 0
width: 100%
height: 50px
padding: 0px 15px
background: #fff
border-top: 1px solid lighten(black,60%)
.logo
position: absolute
top: 0
left: 0
width: 100%
height: 100%
text-align: center
z-index: 0
a
display: inline-block
&.google img
height: 24px
margin-top: 13px
&.baidu img
height: 22px
margin-top: 14px
img
position: relative
display: inline-block
width: auto
height: 18px
margin-top: 16px
.modal-error
position: relative
float: left
vertical-align: middle
line-height: 50px
font-size: 13px
z-index: 1
.modal-metadata
position: relative
float: left
vertical-align: middle
line-height: 50px
font-size: 13px
z-index: 1
.nav
position: relative
display: block
float: right
vertical-align: middle
font-size: 13px
font-weight: 500
line-height: 50px
color: red
cursor: pointer
z-index: 1
&:hover
color: black
&.btn-next
margin-left: 10px
.icon
font-size: 12px
.modal-body
position: absolute
// padding: 64px 50px 80px 50px
padding: $gap
width: 100%
height: "calc(100% - %s)" % $navbar-height
top: $navbar-height
left: 0
overflow-y: scroll
-webkit-overflow-scrolling: touch
background: $color-card
border-radius: $border-radius
@media screen and (max-width: $modal-threshold)
padding: 60px 20px 80px 20px
.modal-results
list-style: none
// li
// border-bottom: 1px solid #e6e8ea
// &:last-child
// border-bottom: none
.result
position: relative
display: block
padding: $gap
text-decoration: none
border-radius: $border-radius
b[mark]
color: darken($color-md-blue, 10)
text-decoration: underline
&:hover
background: bgcolor($color-link)
// .digest, .icon
// color: $color-link-hover
// .title
// color: $color-link-hover
.title
display: inline-block
max-width: 100%
color: lighten($color-text, 10)
font-weight: bold
padding: 1px
margin-bottom: 2px
white-space: normal
overflow: hidden
text-overflow: ellipsis
font-size: $font-size-h4
.digest
display: block
white-space: inherit
overflow: hidden
word-break: break-all
text-overflow: ellipsis
font-size: $font-size-code
color: lighten($color-text, 30)
.icon
position: absolute
top: 50%
right: 0
margin-top: -4px
font-size: 11px
color: gray
.modal-overlay
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background: rgba(0,0,0,0.7)
z-index: 1

17
source/js/search.js
Unescape View File

@ -132,15 +132,10 @@ var SearchService = "";
self.buildResult = function(url, title, digest, index) {
var html = "";
html = "<li>";
html += "<a class='result' href='" +url+ "'>";
if(index === undefined)
html += "<span class='title'>" +title+ "</span>";
else
html += "<span class='title'>" +index + ". " + title+ "</span>";
if(digest !== "")
html += "<span class='digest'>" +digest+ "</span>";
html += "<span class='fas fa-chevron-thin-right'></span>";
html += "</a>";
html += "<a class='result' href='" +url+ "'>";
html += "<span class='title'>" +title+ "</span>";
if (digest !== "") html += "<span class='digest'>" +digest+ "</span>";
html += "</a>";
html += "</li>";
return html;
};
@ -695,7 +690,7 @@ var HexoSearch;
var match_content = post_content.substring(start, end);
keywords.forEach(function(keyword) {
var regS = new RegExp(keyword, "gi");
match_content = match_content.replace(regS, "<b style='color: #c00'>"+keyword+"</b>");
match_content = match_content.replace(regS, "<b mark>"+keyword+"</b>");
});
post.digest = match_content + "......";
}
@ -718,7 +713,7 @@ var HexoSearch;
html = "";
var i = 1;
$.each(data, function(index, post) {
if (self.contentSearch(post, queryText))
if (self.contentSearch(post, queryText))
html += self.buildResult(post.permalink, post.title, post.digest, i++);
});
return html;

Write Preview
Loading…
Cancel
Save