diff --git a/README.md b/README.md index 2ab160e..d9ecfb9 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,7 @@ npm i hexo-theme-butterfly - [x] Share (Sharejs/Addtoany) - [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/artalk) - [x] Multiple Comment System Support -- [x] Online Chats (Chatra/Tidio/Daovoice/Crisp) +- [x] Online Chats (Chatra/Tidio/Crisp) - [x] Web analytics - [x] Google AdSense - [x] Webmaster Verification diff --git a/README_CN.md b/README_CN.md index 16d17ac..f1d7a5c 100644 --- a/README_CN.md +++ b/README_CN.md @@ -86,7 +86,7 @@ theme: butterfly - [x] 多種分享系統（Sharejs/Addtoany） - [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/artalk） - [x] 支持雙評論部署 -- [x] 多種在線聊天（Chatra/Tidio/Daovoice/Crisp） +- [x] 多種在線聊天（Chatra/Tidio/Crisp） - [x] 多種分析系統 - [x] 谷歌廣告/手動廣告位置 - [x] 各種站長驗證 diff --git a/_config.yml b/_config.yml index 32c56de..ac99d06 100644 --- a/_config.yml +++ b/_config.yml @@ -645,7 +645,7 @@ artalk: # -------------------------------------- chat: - # Choose: chatra/tidio/daovoice/crisp + # Choose: chatra/tidio/crisp # Leave it empty if you don't need chat use: # Chat Button [recommend] @@ -662,10 +662,6 @@ chatra: tidio: public_key: -# http://dashboard.daovoice.io/app -daovoice: - app_id: - # https://crisp.chat/en/ crisp: website_id: diff --git a/layout/includes/mixins/indexPostUI.pug b/layout/includes/mixins/indexPostUI.pug index 7e80df9..4c53704 100644 --- a/layout/includes/mixins/indexPostUI.pug +++ b/layout/includes/mixins/indexPostUI.pug @@ -105,15 +105,9 @@ mixin indexPostUI() i.fa-solid.fa-spinner.fa-spin //- Display the article introduction on homepage - case theme.index_post_content.method - when false - - break - when 1 - .content!= article.description - when 2 - .content!= article.description || truncate(article.content, theme.index_post_content.length) - default - .content!= truncate(article.content, theme.index_post_content.length) + - const content = postDesc(article) + if content + .content!=content if theme.ad && theme.ad.index if (index + 1) % 3 === 0 diff --git a/layout/includes/page/shuoshuo.pug b/layout/includes/page/shuoshuo.pug index 5846792..88b55cc 100644 --- a/layout/includes/page/shuoshuo.pug +++ b/layout/includes/page/shuoshuo.pug @@ -21,6 +21,8 @@ let start = 0 const container = document.getElementById('article-container') + const showDateAndTine = date => new Date(date).toLocaleString() + const addData = data => { const cLength = data.length const end = start + 10 > cLength ? cLength : start + 10 @@ -34,7 +36,7 @@
${item.author || '!{config.author}'}
-
${btf.diffDate(item.date, true)}
+
@@ -97,7 +99,7 @@ img.no-lightbox(src=i.avatar || url_for(theme.avatar.img)) .shuoshuo-info .shuoshuo-author=i.author || config.author - .shuoshuo-date=relative_date(i.date) + time.shuoshuo-date(title=full_date(i.date))=date(i.date) .shuoshuo-content !=markdown(i.content) .shuoshuo-footer diff --git a/layout/includes/page/tags.pug b/layout/includes/page/tags.pug index b579112..b5b62cd 100644 --- a/layout/includes/page/tags.pug +++ b/layout/includes/page/tags.pug @@ -1,2 +1,2 @@ -.tag-cloud-list.is-center +.tag-cloud-list.text-center !=cloudTags({source: site.tags, orderby: page.orderby || 'random', order: page.order || 1, minfontsize: 1.2, maxfontsize: 1.5, limit: 0, unit: 'em'}) \ No newline at end of file diff --git a/layout/includes/pagination.pug b/layout/includes/pagination.pug index 7cbe946..ad2602b 100644 --- a/layout/includes/pagination.pug +++ b/layout/includes/pagination.pug @@ -7,30 +7,28 @@ } if is_post() - - let prev = theme.post_pagination === 1 ? page.prev : page.next - - let next = theme.post_pagination === 1 ? page.next : page.prev + - let paginationOrder = theme.post_pagination === 1 ? { prev: page.prev, next: page.next } : { prev: page.next, next: page.prev } + nav#pagination.pagination-post - if(prev) - - var hasPageNext = next ? 'pull-left' : 'pull-full' - a.prev-post(class=hasPageNext href=url_for(prev.path) title=prev.title) - if prev.cover_type === 'img' - img.cover(src=url_for(prev.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post') - else - .cover(style=`background: ${prev.cover || 'var(--default-bg-color)'}`) - .pagination-info - .label=_p('pagination.prev') - .prev_info=prev.title + each direction, key in paginationOrder + if direction + - const getPostDesc = direction.postDesc || postDesc(direction) + - let className = key === 'prev' ? (paginationOrder.next ? '' : 'full-width') : (paginationOrder.prev ? '' : 'full-width') + - className = getPostDesc ? className : className + ' no-desc' + + a.pagination-related(class=className href=url_for(direction.path) title=direction.title) + if direction.cover_type === 'img' + img.cover(src=url_for(direction.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt=`cover of ${key === 'prev' ? 'previous' : 'next'} post`) + else + .cover(style=`background: ${direction.cover || 'var(--default-bg-color)'}`) - if(next) - - var hasPagePrev = prev ? 'pull-right' : 'pull-full' - a.next-post(class=hasPagePrev href=url_for(next.path) title=next.title) - if next.cover_type === 'img' - img.cover(src=url_for(next.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post') - else - .cover(style=`background: ${next.cover || 'var(--default-bg-color)'}`) - .pagination-info - .label=_p('pagination.next') - .next_info=next.title + .info(class=key === 'prev' ? '' : 'text-right') + .info-1 + .info-item-1=_p(`pagination.${key}`) + .info-item-2!=direction.title + if getPostDesc + .info-2 + .info-item-1!=getPostDesc else nav#pagination .pagination diff --git a/layout/includes/sidebar.pug b/layout/includes/sidebar.pug index 7eabbf1..42131cd 100644 --- a/layout/includes/sidebar.pug +++ b/layout/includes/sidebar.pug @@ -2,9 +2,9 @@ if theme.menu #sidebar #menu-mask #sidebar-menus - .avatar-img.is-center + .avatar-img.text-center img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar") - .site-data.is-center + .site-data.text-center a(href=url_for(config.archive_dir) + '/') .headline= _p('aside.articles') .length-num= site.posts.length diff --git a/layout/includes/third-party/abcjs/abcjs.pug b/layout/includes/third-party/abcjs/abcjs.pug index 089ee2b..a75c37b 100644 --- a/layout/includes/third-party/abcjs/abcjs.pug +++ b/layout/includes/third-party/abcjs/abcjs.pug @@ -1,12 +1,12 @@ script. (() => { const abcjsInit = () => { - const abcjsFn = () => { + const abcjsFn = () => setTimeout(() => { document.querySelectorAll(".abc-music-sheet").forEach(ele => { if (ele.children.length > 0) return ABCJS.renderAbc(ele, ele.innerHTML, {responsive: 'resize'}) }) - } + }, 100) typeof ABCJS === 'object' ? abcjsFn() : btf.getScript('!{url_for(theme.asset.abcjs_basic_js)}').then(abcjsFn) diff --git a/layout/includes/third-party/chat/daovoice.pug b/layout/includes/third-party/chat/daovoice.pug deleted file mode 100644 index 41ccfeb..0000000 --- a/layout/includes/third-party/chat/daovoice.pug +++ /dev/null @@ -1,40 +0,0 @@ -//- https://guide.daocloud.io/daovoice/javascript-api-5869833.html -script. - (() => { - (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/!{theme.daovoice.app_id}.js","daovoice") - - const isChatBtn = !{theme.chat.rightside_button} - const isChatHideShow = !{theme.chat.button_hide_show} - - daovoice('init', { - app_id: '!{theme.daovoice.app_id}',},{ - launcher: { - disableLauncherIcon: isChatBtn - }, - }); - daovoice('update'); - - if (isChatBtn) { - window.chatBtnFn = () => { - const isShow = document.getElementById('daodream-messenger').classList.contains('daodream-messenger-active') - isShow ? daovoice('hide') : daovoice('show') - } - } else if (isChatHideShow) { - window.chatBtn = { - hide: () => { - daovoice('update', {},{ - launcher: { - disableLauncherIcon: true - } - }) - }, - show: () => { - daovoice('update', {}, { - launcher: { - disableLauncherIcon: false - } - }) - } - } - } - })() \ No newline at end of file diff --git a/layout/includes/third-party/chat/index.pug b/layout/includes/third-party/chat/index.pug index c534849..273d040 100644 --- a/layout/includes/third-party/chat/index.pug +++ b/layout/includes/third-party/chat/index.pug @@ -3,7 +3,5 @@ case theme.chat.use include ./chatra.pug when 'tidio' include ./tidio.pug - when 'daovoice' - include ./daovoice.pug when 'crisp' include ./crisp.pug \ No newline at end of file diff --git a/layout/includes/third-party/search/local-search.pug b/layout/includes/third-party/search/local-search.pug index af96ab0..e459a94 100644 --- a/layout/includes/third-party/search/local-search.pug +++ b/layout/includes/third-party/search/local-search.pug @@ -6,7 +6,7 @@ button.search-close-button i.fas.fa-times - #loading-database.is-center + #loading-database.text-center i.fas.fa-spinner.fa-pulse span= ' ' + _p("search.load_data") diff --git a/layout/includes/widget/card_author.pug b/layout/includes/widget/card_author.pug index c4f01d4..095f66f 100644 --- a/layout/includes/widget/card_author.pug +++ b/layout/includes/widget/card_author.pug @@ -1,5 +1,5 @@ if theme.aside.card_author.enable - .card-widget.card-info.is-center + .card-widget.card-info.text-center .avatar-img img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar") .author-info-name= config.author diff --git a/package.json b/package.json index fe1ca42..29d5e6f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-butterfly", - "version": "5.1.0-b1", + "version": "5.1.0", "description": "A Simple and Card UI Design theme for Hexo", "main": "package.json", "scripts": { diff --git a/plugins.yml b/plugins.yml index caf60e9..57930e0 100644 --- a/plugins.yml +++ b/plugins.yml @@ -9,7 +9,7 @@ activate_power_mode: algolia_search: name: algoliasearch file: dist/lite/builds/browser.umd.js - version: 5.8.1 + version: 5.9.1 aplayer_css: name: aplayer file: dist/APlayer.min.css @@ -45,7 +45,7 @@ canvas_ribbon: chartjs: name: chart.js file: dist/chart.umd.min.js - version: 4.4.4 + version: 4.4.5 clickShowText: name: butterfly-extsrc file: dist/click-show-text.min.js @@ -111,7 +111,7 @@ instantpage: instantsearch: name: instantsearch.js file: dist/instantsearch.production.min.js - version: 4.75.0 + version: 4.75.1 katex: name: katex file: dist/katex.min.css diff --git a/scripts/common/postDesc.js b/scripts/common/postDesc.js new file mode 100644 index 0000000..e20e86e --- /dev/null +++ b/scripts/common/postDesc.js @@ -0,0 +1,36 @@ +'use strict' + +const { stripHTML, truncate } = require('hexo-util') + +// Truncates the given content to a specified length, removing HTML tags and replacing newlines with spaces. +const truncateContent = (content, length) => { + return truncate(stripHTML(content), { length, separator: ' ' }).replace(/\n/g, ' ') +} + +// Generates a post description based on the provided data and theme configuration. +const postDesc = (data, hexo) => { + const { description, content, postDesc } = data + + if (postDesc) return postDesc + + const { length, method } = hexo.theme.config.index_post_content + + if (method === false) return + + let result + switch (method) { + case 1: + result = description + break + case 2: + result = description || truncateContent(content, length) + break + default: + result = truncateContent(content, length) + } + + data.postDesc = result + return result +} + +module.exports = { truncateContent, postDesc } diff --git a/scripts/events/merge_config.js b/scripts/events/merge_config.js index 2068625..fe04871 100644 --- a/scripts/events/merge_config.js +++ b/scripts/events/merge_config.js @@ -380,9 +380,6 @@ hexo.extend.filter.register('before_generate', () => { tidio: { public_key: null }, - daovoice: { - app_id: null - }, crisp: { website_id: null }, diff --git a/scripts/helpers/page.js b/scripts/helpers/page.js index 061f24d..ae24746 100644 --- a/scripts/helpers/page.js +++ b/scripts/helpers/page.js @@ -1,10 +1,13 @@ 'use strict' -const { stripHTML, prettyUrls, truncate } = require('hexo-util') +const { truncateContent, postDesc } = require('../common/postDesc') +const { prettyUrls } = require('hexo-util') const crypto = require('crypto') -hexo.extend.helper.register('truncate', (content, length) => { - return truncate(stripHTML(content), { length, separator: ' ' }).replace(/\n/g, ' ') +hexo.extend.helper.register('truncate', truncateContent) + +hexo.extend.helper.register('postDesc', data => { + return postDesc(data, hexo) }) hexo.extend.helper.register('cloudTags', function (options = {}) { diff --git a/scripts/helpers/related_post.js b/scripts/helpers/related_post.js index 46f4381..8059dbe 100644 --- a/scripts/helpers/related_post.js +++ b/scripts/helpers/related_post.js @@ -1,3 +1,4 @@ +/* eslint-disable camelcase */ /** * Butterfly * Related Posts @@ -6,12 +7,15 @@ 'use strict' +const { postDesc } = require('../common/postDesc') + hexo.extend.helper.register('related_posts', function (currentPost, allPosts) { let relatedPosts = [] const tagsData = currentPost.tags tagsData.length && tagsData.forEach(function (tag) { allPosts.forEach(function (post) { if (currentPost.path !== post.path && isTagRelated(tag.name, post.tags)) { + const getPostDesc = post.postDesc || postDesc(post, hexo) const relatedPost = { title: post.title, path: post.path, @@ -19,7 +23,8 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) { cover_type: post.cover_type, weight: 1, updated: post.updated, - created: post.date + created: post.date, + postDesc: getPostDesc } const index = findItem(relatedPosts, 'path', post.path) if (index !== -1) { @@ -50,20 +55,27 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) { result += '
' for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) { - const cover = relatedPosts[i].cover || 'var(--default-bg-color)' - const title = this.escape_html(relatedPosts[i].title) - result += `` - if (relatedPosts[i].cover_type === 'img') { - result += `cover` + let { cover, title, path, cover_type, created, updated, postDesc } = relatedPosts[i] + const { escape_html, url_for, date } = this + cover = cover || 'var(--default-bg-color)' + title = escape_html(title) + const className = postDesc ? 'pagination-related' : 'pagination-related no-desc' + result += `` + if (cover_type === 'img') { + result += `cover` } else { result += `
` } if (dateType === 'created') { - result += `
${this.date(relatedPosts[i].created, hexoConfig.date_format)}
` + result += `
${date(created, hexoConfig.date_format)}
` } else { - result += `
${this.date(relatedPosts[i].updated, hexoConfig.date_format)}
` + result += `
${date(updated, hexoConfig.date_format)}
` + } + result += `
${title}
` + + if (postDesc) { + result += `
${postDesc}
` } - result += `
${title}
` result += '
' } diff --git a/source/css/_global/function.styl b/source/css/_global/function.styl index c0ad351..771e1b3 100644 --- a/source/css/_global/function.styl +++ b/source/css/_global/function.styl @@ -44,7 +44,7 @@ addBorderRadius(x = 6, hide = false) .postImgHover &:hover .cover - opacity: .7 + opacity: .5 transform: scale(1.1) .cover diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index cb925c6..58093a7 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -179,14 +179,11 @@ if $site-name-font #aside-content .author-info-description font-family: $site-name-font -.is-center +.text-center text-align: center -.pull-left - float: left - -.pull-right - float: right +.text-right + text-align: right img &[src=''], diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index a716c01..47c7e76 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -159,8 +159,8 @@ a display: flex flex-direction: row - padding: 2px 8px margin: 2px 0 + padding: 2px 8px color: var(--font-color) transition: all .3s addBorderRadius() @@ -354,11 +354,12 @@ .headline @extend .limit-one-line color: var(--font-color) + font-size: .95em .length-num - margin-top: -.32em + margin-top: -.45em color: var(--text-highlight-color) - font-size: 1.4em + font-size: 1.2em @keyframes more-btn-move 0%, diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index a183603..95de083 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -146,10 +146,11 @@ position: fixed top: -60px z-index: 91 - background: rgba(255, 255, 255, .8) + background: rgba(255, 255, 255, .7) box-shadow: 0 5px 6px -5px alpha($grey, .6) transition: transform .2s ease-in-out, opacity .2s ease-in-out will-change: transform + backdrop-filter: blur(7px) #blog-info color: var(--font-color) @@ -430,6 +431,7 @@ background-color: lighten($theme-color, 30%) content: '' transition: all .3s ease-in-out + addBorderRadius() &:hover &:after diff --git a/source/css/_layout/pagination.styl b/source/css/_layout/pagination.styl index 925e076..14305a5 100644 --- a/source/css/_layout/pagination.styl +++ b/source/css/_layout/pagination.styl @@ -8,49 +8,28 @@ background: $theme-paginator-color color: var(--white) - .pagination-info - position: absolute - top: 50% - padding: 20px 40px - width: 100% - transform: translate(0, -50%) - - .prev_info, - .next_info - @extend .limit-one-line - color: var(--white) - font-weight: 500 - - .next-post - .pagination-info - text-align: right - - .pull-full + .full-width width: 100% !important - .prev-post .label, - .next-post .label - color: var(--light-grey) - text-transform: uppercase - font-size: 90% - - .prev-post, - .next-post - @extend .postImgHover - position: relative - display: block - overflow: hidden + .pagination-related width: 50% height: 150px +maxWidth768() width: 100% + .info-1 + .info-item-2 + -webkit-line-clamp: 1 + + .info-2 + .info-item-1 + -webkit-line-clamp: 2 + &.pagination-post overflow: hidden margin-top: 40px width: 100% - background: $dark-black addBorderRadius() .layout @@ -74,4 +53,51 @@ margin-top: 30px & > *:not(.space) - box-shadow: none \ No newline at end of file + box-shadow: none + +.pagination-related + position: relative + display: inline-block + overflow: hidden + background: $dark-black + vertical-align: bottom + @extend .postImgHover + + &.next-post + .info + text-align: right + + .info + .info-1, + .info-2 + @extend .verticalCenter + padding: 20px 40px + color: var(--white) + transition: transform .3s, opacity .3s + + .info-1 + .info-item-1 + color: var(--light-grey) + text-transform: uppercase + font-size: 90% + + .info-item-2 + @extend .limit-more-line + color: var(--white) + font-weight: 500 + + .info-2 + opacity: 0 + transform: translate(0, 0) + + .info-item-1 + @extend .limit-more-line + + &:not(.no-desc):hover + .info-1 + opacity: 0 + transform: translate(0, -100%) + + .info-2 + opacity: 1 + transform: translate(0, -50%) \ No newline at end of file diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index 589ad2f..5c499fb 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -19,9 +19,9 @@ beautify() &:before position: absolute top: calc(50% - 7px) + left: 0 color: $title-prefix-icon-color content: $title-prefix-icon - left: 0 line-height: 1 transition: all .2s ease-out @extend .fontawesomeIcon @@ -65,7 +65,7 @@ beautify() ul > li list-style-type: circle - + hr @extend .custom-hr @@ -119,16 +119,16 @@ beautify() width: fit-content a:not(.headerlink) - position relative - z-index 10 + position: relative + z-index: 10 a.headerlink position: absolute top: 0 right: 0 - left 0 bottom: 0 - width 100% + left: 0 + width: 100% height: 100% ol, diff --git a/source/css/_layout/relatedposts.styl b/source/css/_layout/relatedposts.styl index 744ca14..38bacb2 100644 --- a/source/css/_layout/relatedposts.styl +++ b/source/css/_layout/relatedposts.styl @@ -8,15 +8,9 @@ & > .relatedPosts-list & > a - position: relative - display: inline-block - overflow: hidden margin: 3px width: calc(33.333% - 6px) height: 200px - background: $dark-black - vertical-align: bottom - @extend .postImgHover addBorderRadius() +maxWidth768() @@ -27,15 +21,11 @@ +maxWidth600() width: calc(100% - 4px) - .content - padding: 0 20px - @extend .verticalCenter + .info + .info-1 + .info-item-2 + -webkit-line-clamp: 2 - .date - color: var(--light-grey) - font-size: 90% - - .title - @extend .limit-more-line - color: var(--white) - -webkit-line-clamp: 2 + .info-2 + .info-item-1 + -webkit-line-clamp: 3 \ No newline at end of file diff --git a/source/css/_page/shuoshuo.styl b/source/css/_page/shuoshuo.styl index b7f8609..8939f6e 100644 --- a/source/css/_page/shuoshuo.styl +++ b/source/css/_page/shuoshuo.styl @@ -10,6 +10,7 @@ .shuoshuo-item-header display: flex align-items: center + cursor: default .shuoshuo-avatar overflow: hidden diff --git a/source/css/_search/algolia.styl b/source/css/_search/algolia.styl index 1f7f525..ae7553f 100644 --- a/source/css/_search/algolia.styl +++ b/source/css/_search/algolia.styl @@ -75,11 +75,11 @@ overflow-y: overlay margin: 0 -20px padding: 0 22px - max-height: calc(80vh - 240px) + max-height: calc(80vh - 220px) +maxWidth768() max-height: none - height: calc(var(--search-height) - 265px) + height: calc(var(--search-height) - 235px) #algolia-info div diff --git a/source/css/_search/index.styl b/source/css/_search/index.styl index 79986d5..c889eb6 100644 --- a/source/css/_search/index.styl +++ b/source/css/_search/index.styl @@ -19,9 +19,6 @@ height: 100% border-radius: 0 - hr - margin: 20px auto - .search-nav margin: 0 0 14px color: $search-color @@ -40,7 +37,7 @@ color: $search-color hr - margin: 20px auto + margin: 15px auto @extend .custom-hr #search-mask diff --git a/source/css/_search/local-search.styl b/source/css/_search/local-search.styl index c3ac4ff..98139b3 100644 --- a/source/css/_search/local-search.styl +++ b/source/css/_search/local-search.styl @@ -19,30 +19,16 @@ display: none .local-search-hit-item - position: relative - padding-left: 24px - line-height: 1.7 + margin-left: 24px + padding-left: 3px + line-height: 1.8 - &:hover - &:before - border-color: var(--pseudo-hover) - - &:before - $w = .5em - position: absolute - top: .45em - left: 0 - width: w = $w - height: h = w - border: 3px solid $search-color - border-radius: w - background: transparent - content: '' - line-height: h - transition: all .2s ease-in-out + &::marker + color: $search-color + font-weight: bold + font-style: italic a - display: block color: var(--search-a-color) &:hover @@ -53,17 +39,19 @@ .search-result margin: 0 0 8px + word-break: break-all + font-size: .9em .search-result-list overflow-y: overlay margin: 0 -20px padding: 0 22px - max-height: calc(80vh - 200px) + max-height: calc(80vh - 180px) +maxWidth768() - max-height: calc(var(--search-height) - 220px) !important + max-height: calc(var(--search-height) - 190px) !important .search-keyword background: transparent color: $search-keyword-highlight - font-weight: bold \ No newline at end of file + font-weight: 600 \ No newline at end of file diff --git a/source/js/main.js b/source/js/main.js index 6cd6637..91159aa 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -206,7 +206,7 @@ document.addEventListener('DOMContentLoaded', () => { const altValue = item.title || item.alt if (!altValue) return const ele = document.createElement('div') - ele.className = 'img-alt is-center' + ele.className = 'img-alt text-center' ele.textContent = altValue item.insertAdjacentElement('afterend', ele) }) diff --git a/source/js/search/local-search.js b/source/js/search/local-search.js index 0b21774..1d3f268 100644 --- a/source/js/search/local-search.js +++ b/source/js/search/local-search.js @@ -150,16 +150,16 @@ class LocalSearch { url.searchParams.append('highlight', keywords.join(' ')) if (slicesOfTitle.length !== 0) { - resultItem += `
${this.highlightKeyword(title, slicesOfTitle[0])}` + resultItem += `
  • ${this.highlightKeyword(title, slicesOfTitle[0])}` } else { - resultItem += `
    ${title}` + resultItem += `
  • ${title}` } slicesOfContent.forEach(slice => { resultItem += `

    ${this.highlightKeyword(content, slice)}...

    ` }) - resultItem += '
    • ' + resultItem += '' resultItems.push({ item: resultItem, id: resultItems.length, @@ -281,7 +281,7 @@ window.addEventListener('load', () => { const stats = languages.hits_stats.replace(/\$\{hits}/, resultItems.length) - container.innerHTML = `
    ${resultItems.map(result => result.item).join('')}
    ` + container.innerHTML = `
      ${resultItems.map(result => result.item).join('')}
    ` statsItem.innerHTML = `
    ${stats}
    ` window.pjax && window.pjax.refresh(container) }