diff --git a/_config.yml b/_config.yml index 7d13217..f3253fa 100644 --- a/_config.yml +++ b/_config.yml @@ -126,8 +126,6 @@ cdn: jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js js-cookies: https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js - lozy: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js - # Post info settings # --------------- @@ -376,10 +374,11 @@ hr: subtitle: enable: true sub1: 今日事,今日畢 - sub2: Never put off till tomorrow what you can do today + sub2: Never put off till tomorrow what you can do today #如果有符號 ' ，記得前面加上 \ #側邊欄顯示設置 aside: + position: right # left or right card_author: true card_announcement: true card_recent_post: true @@ -417,4 +416,23 @@ baidu_push: #https://instant.page/ #prefetch預加載 instantpage: - enable: true \ No newline at end of file + enable: true + +note: + # Note tag style values: + # - simple bs-callout old alert style. Default. + # - modern bs-callout new (v2-v3) alert style. + # - flat flat callout style with background, like on Mozilla or StackOverflow. + # - disabled disable all CSS styles import of note tag. + style: simple + icons: true + border_radius: 3 + # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6). + # Offset also applied to label tag variables. This option can work with disabled note tag. + light_bg_offset: 0 + + +#圖片懶加載 +lazyload: + enable: true + script: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js \ No newline at end of file diff --git a/layout/flink.pug b/layout/flink.pug index 4b39f62..de257c7 100644 --- a/layout/flink.pug +++ b/layout/flink.pug @@ -6,7 +6,10 @@ each item in i.link_list li.md-links-item a(href=item.link title=item.name target="_blank") - img.lozad(data-src=item.avatar onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px") + if theme.lazyload.enable + img.lozad(data-src=item.avatar onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px") + else + img(src=item.avatar onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px") div(class="md-links-title")= item.name
div(class="md-links-des")=item.descr diff --git a/layout/includes/additional-js.pug b/layout/includes/additional-js.pug index a9020e2..00153b0 100644 --- a/layout/includes/additional-js.pug +++ b/layout/includes/additional-js.pug @@ -90,3 +90,9 @@ if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv if theme.instantpage.enable script(src="https://cdn.jsdelivr.net/npm/instant.page@1.2.2/instantpage.min.js" type="module") + +if theme.lazyload.enable + script(src=url_for(theme.lazyload.script)) + script. + const observer = lozad(); // lazy loads elements with default selector as '.lozad' + observer.observe(); diff --git a/layout/includes/comments/disqus.pug b/layout/includes/comments/disqus.pug index a1bd151..1e0c01c 100644 --- a/layout/includes/comments/disqus.pug +++ b/layout/includes/comments/disqus.pug @@ -1,4 +1,4 @@ -if theme.disqus.enable +if theme.disqus && theme.disqus.enable #disqus_thread script. var unused = null; diff --git a/layout/includes/comments/index.pug b/layout/includes/comments/index.pug index 6a8bedd..bdb057d 100644 --- a/layout/includes/comments/index.pug +++ b/layout/includes/comments/index.pug @@ -1,35 +1,35 @@ -if theme.disqus.enable +if theme.disqus && theme.disqus.enable hr #post-comment .comment_headling i.fa.fa-comments.fa-fw(aria-hidden="true") - span= _p('comment') + span= ' ' + _p('comment') include ./disqus.pug else if theme.laibili && theme.laibili.enable hr #post-comment .comment_headling i.fa.fa-comments.fa-fw(aria-hidden="true") - span= _p('comment') + span= ' ' + _p('comment') include ./laibili.pug else if theme.gitment && theme.gitment.enable hr #post-comment .comment_headling i.fa.fa-comments.fa-fw(aria-hidden="true") - span= _p('comment') + span= ' ' + _p('comment') include ./gitment.pug else if theme.gitalk && theme.gitalk.enable hr #post-comment .comment_headling i.fa.fa-comments.fa-fw(aria-hidden="true") - span= _p('comment') + span= ' ' + _p('comment') include ./gitalk.pug else if theme.valine && theme.valine.enable hr #post-comment .comment_headling i.fa.fa-comments.fa-fw(aria-hidden="true") - span= _p('comment') + span= ' ' + _p('comment') include ./valine.pug \ No newline at end of file diff --git a/layout/includes/header.pug b/layout/includes/header.pug index de2d802..bc88f99 100644 --- a/layout/includes/header.pug +++ b/layout/includes/header.pug @@ -9,7 +9,7 @@ span.pull-right.menus .mobile_author_icon - img.lozad(data-src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`) + img.lozad(src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`) .mobile_author-info__description= config.description hr .menus_item diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug index 765e99d..3d3ded0 100644 --- a/layout/includes/layout.pug +++ b/layout/includes/layout.pug @@ -66,14 +66,12 @@ html(lang=config.language) div!= body else block content - //- - var top_img = page.top_img || theme.post_meta.top_img || theme.top_img || config.top_img || true - //- - var bg_img = top_img !== true ? `background-image: url(${top_img})` : '' - //- - var footer_bg_class= bg_img ? 'footer-bg' : '' - //- footer(style=bg_img class=footer_bg_class) footer include ./footer.pug i.fa.fa-arrow-up#go-up(aria-hidden="true") include ./rightside.pug + if (is_post()) + include ./post-bottom.pug each item in theme.cdn.js if item !== undefined script(src=url_for(item)) diff --git a/layout/includes/pagination.pug b/layout/includes/pagination.pug index bfd5628..a0ba097 100644 --- a/layout/includes/pagination.pug +++ b/layout/includes/pagination.pug @@ -16,7 +16,11 @@ else .prev-post.pull-left - var pagination_cover = page.prev.cover || random_cover() a(href=url_for(page.prev.path)) - img.prev_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` ) + if theme.lazyload.enable + img.prev_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` ) + else + img.prev_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` ) + .label=_p('pagination.prev') .prev_info span=page.prev.title @@ -24,19 +28,23 @@ else .prev-post.pull-full - var pagination_cover = page.prev.cover || random_cover() a(href=url_for(page.prev.path)) - img.prev_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) + if theme.lazyload.enable + img.prev_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) + else + img.prev_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) .label=_p('pagination.prev') .prev_info span=page.prev.title - - if(page.next) if(page.prev) .next-post.pull-right - var pagination_cover = page.next.cover || random_cover() a(href=url_for(page.next.path)) - img.next_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) + if theme.lazyload.enable + img.next_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) + else + img.next_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) .label=_p('pagination.next') .next_info span=page.next.title @@ -44,7 +52,10 @@ else .next-post.pull-full - var pagination_cover = page.next.cover || random_cover() a(href=url_for(page.next.path)) - img.next_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) + if theme.lazyload.enable + img.next_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) + else + img.next_cover(src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) .label=_p('pagination.next') .next_info span=page.next.title diff --git a/layout/includes/post-bottom.pug b/layout/includes/post-bottom.pug new file mode 100644 index 0000000..6d8427b --- /dev/null +++ b/layout/includes/post-bottom.pug @@ -0,0 +1,8 @@ +#post_bottom + #post_bottom_items + a#to_comment(href="#post-comment") + i.scroll_to_comment.fa.fa-comments + i#mobile_toc.fa.fa-list + #toc_mobile + .toc_mobile_headline= _p('sidebar.catalog') + !=toc(page.content,{"class":"toc_mobile_items"}) diff --git a/layout/includes/recent-posts.pug b/layout/includes/recent-posts.pug index e13e3cd..77d66fb 100644 --- a/layout/includes/recent-posts.pug +++ b/layout/includes/recent-posts.pug @@ -7,19 +7,30 @@ each article , index in page.posts.data - var post_cover = article.cover - var default_post_cover = random_cover() if (post_cover) - img.post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) + if theme.lazyload.enable + img.post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) + else + img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) else - img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) + if theme.lazyload.enable + img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) + else + img.post_bg(src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) else .post_cover.is_right a(href=url_for(link) title=article.title || _p('no_title')) - var post_cover = article.cover - var default_post_cover = random_cover() if (post_cover) - img.post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) + if theme.lazyload.enable + img.post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) + else + img.post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) else - img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) - + if theme.lazyload.enable + img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) + else + img.post_bg(src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`) .recent-post-info a.article-title(href=url_for(link) title= article.title || _p('no_title'))= article.title || _p('no_title') if (article.top) diff --git a/layout/includes/reward.pug b/layout/includes/reward.pug index 57d26ba..f8c7b7e 100644 --- a/layout/includes/reward.pug +++ b/layout/includes/reward.pug @@ -6,60 +6,6 @@ ul.reward-all each item in theme.reward.QR_code li.reward-item - img.lozad.post-qr-code__img(data-src=(item.itemlist||item).img) + img.lozad.post-qr-code__img(src=(item.itemlist||item).img) .post-qr-code__desc=(item.itemlist||item).text - - -//- donate-share样式1 -//- .post-reward-share -//- .post-reward -//- a.reward-buttom -//- i.fa.fa-qrcode -//- = ' ' + _p('donate') -//- .reward-main -//- ul.reward-all -//- each item in theme.QR_code -//- li.reward-item -//- img.lozad.post-qr-code__img(data-src=(item.itemlist||item).img) -//- .post-qr-code__desc=(item.itemlist||item).text - -//- .post-share -//- include share/index.pug -//- a.share-buttom -//- i.fa.fa-share-alt -//- = ' ' + _p('share') - -//- donate-share样式1 -//- #social -//- .social-main -//- span.social-donate -//- a#social-donate -//- i.fa.fa-qrcode -//- = _p('donate') - - -//- .circle -//- .circle-empty -//- span -//- span.circle_item -//- a(style="cursor:pointer") - -//- .social-sharebutton -//- span.share-s -//- a(href="javascript:void(0)" id="share-s" title=_p('share')) -//- i.fa.fa-share-alt -//- = _p('share') -//- include share/index.pug - - -//- if (theme.QR_code) -//- if (theme.QR_code.length > 0) -//- .post-qr-code -//- each item in theme.QR_code -//- .post-qr-code-item -//- img.lozad.post-qr-code__img(data-src=(item.itemlist||item).img) -//- .post-qr-code__desc=(item.itemlist||item).text - - - diff --git a/layout/includes/widget/card_author.pug b/layout/includes/widget/card_author.pug index 9f93e71..b31fff2 100644 --- a/layout/includes/widget/card_author.pug +++ b/layout/includes/widget/card_author.pug @@ -2,7 +2,7 @@ .card-content .post_data .data-item.text-center - img.lozad(data-src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`) + img.lozad(src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`) p.author-info__name.text-center= config.author p.author-info__description.text-center= config.description diff --git a/layout/includes/widget/card_recent_post.pug b/layout/includes/widget/card_recent_post.pug index f07e9f0..671187c 100644 --- a/layout/includes/widget/card_recent_post.pug +++ b/layout/includes/widget/card_recent_post.pug @@ -12,9 +12,15 @@ - var default_post_cover = random_cover() .aside_post_cover if (post_cover) - img.aside_post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title')) + if theme.lazyload.enable + img.aside_post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title')) + else + img.aside_post_bg(src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title')) else - img.aside_post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title')) + if theme.lazyload.enable + img.aside_post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title')) + else + img.aside_post_bg(src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title')) div#aside_title .aside_post_title(href=url_for(link) title=article.title || _p('no_title'))= article.title || _p('no_title') if (theme.post_meta.date_type) diff --git a/scripts/note.js b/scripts/note.js new file mode 100644 index 0000000..61acd3b --- /dev/null +++ b/scripts/note.js @@ -0,0 +1,15 @@ +/** + * note.js + * transplant from hexo-theme-next + */ + +'use strict'; + +function postNote(args, content) { + return `
+ ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')} +
`; +} + +hexo.extend.tag.register('note', postNote, {ends: true}); +hexo.extend.tag.register('subnote', postNote, {ends: true}); \ No newline at end of file diff --git a/scripts/post-lazyload.js b/scripts/post-lazyload.js new file mode 100644 index 0000000..d738fe7 --- /dev/null +++ b/scripts/post-lazyload.js @@ -0,0 +1,20 @@ +'use strict'; +let cheerio; +hexo.extend.filter.register('after_post_render', data => { + var theme = hexo.theme.config; + if (!theme.lazyload.enable) return; + + if (!cheerio) cheerio = require('cheerio'); + + const $ = cheerio.load(data.content, {decodeEntities: false}); + const images = $('img'); + if (!images.length) return; + + images.each((i, o) => { + let src = $(o).attr('src'); + $(o).attr('data-src', src).removeAttr('src'); + $(o).addClass('lozad'); + }); + + data.content = $.html(); +}, 0); \ No newline at end of file diff --git a/scripts/related_post.js b/scripts/related_post.js index 2861861..1d7f514 100644 --- a/scripts/related_post.js +++ b/scripts/related_post.js @@ -34,10 +34,12 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) { } relatedPosts = relatedPosts.sort(compare('weight')); + var lazy_src = hexo.theme.config.lazyload.enable ? lazy_src = 'data-src' : lazy_src = 'src' + var lazy_class = hexo.theme.config.lazyload.enable ? lazy_class = 'lozad' : lazy_class = '' if (relatedPosts.length > 0) { result += '
' - result += '
' + headline_lang + '
' + result += '
' + ' ' + headline_lang + '
' result += '
' for (var i = 0; i < Math.min(relatedPosts.length, limit_num); i++) { @@ -45,7 +47,7 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) { var cover = relatedPosts[i].cover || random_cover() result += '
'; - result += ''; + result += ''; result += '
' + relatedPosts[i].title + '
'; result += '
' }; diff --git a/source/css/_global/index.styl b/source/css/_global/index.styl index b28ae2a..d390dca 100644 --- a/source/css/_global/index.styl +++ b/source/css/_global/index.styl @@ -62,7 +62,6 @@ h6 position: fixed right: $go-up-right bottom: $go-up-bottom - z-index: 100 font-size: $sidebar-icon-size opacity: 0 cursor: pointer @@ -212,9 +211,8 @@ table #rightside right: -38px - z-index: 100 position: fixed - bottom: 50px + bottom: 30px padding-bottom: 32px opacity: 0 transition: all .2s diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl index 53ace8b..b77b297 100644 --- a/source/css/_highlight/highlight.styl +++ b/source/css/_highlight/highlight.styl @@ -2,19 +2,19 @@ @require "theme" @require "diff" -languages = "js" "javascript" "python" "ruby" "xml" "html" "css" "perl" "sql" "coffeescript" "java" "scala" "kotlin" "c" "c\+\+" "go" "less" "sass" "scss" "stylus" "styl" "typescript" "ts" "bash" "yml" "yaml" "gradle" "groovy" "ejs" "swig" "markdown" +// languages = "js" "javascript" "python" "ruby" "xml" "html" "css" "perl" "sql" "coffeescript" "java" "scala" "kotlin" "c" "c\+\+" "go" "less" "sass" "scss" "stylus" "styl" "typescript" "ts" "bash" "yml" "yaml" "gradle" "groovy" "ejs" "swig" "markdown" wordWrap = !hexo-config("rootConfig.highlight.line_number") && hexo-config("code_word_wrap") -loopForLanguages() - for lang in languages - .article-container - figure.highlight - &{"." + lang} - table - &:before - content: lang +// loopForLanguages() +// for lang in languages +// .article-container +// figure.highlight +// &{"." + lang} +// table +// &:before +// content: lang -loopForLanguages() +// loopForLanguages() // Placeholder: $code-block $code-block @@ -110,7 +110,7 @@ blockquote padding: 0 0.7rem width: 5rem color: $highlight-foreground - content: "Code" + content: attr(data-content) font-weight: bold font-size: 0.8rem line-height: 1.4rem diff --git a/source/css/_layout/aside.styl b/source/css/_layout/aside.styl index 9baaa47..a213a73 100644 --- a/source/css/_layout/aside.styl +++ b/source/css/_layout/aside.styl @@ -12,7 +12,6 @@ transition: all .3s background: #fff margin-top: 20px - margin-left: 15px overflow: hidden &:hover @@ -303,6 +302,14 @@ width: 100% !important .card_widget - margin-left: 0 !important + margin-left: 0 + margin-right: 0 +@media screen and (min-width: 900px) + #aside_content + .card_widget + if hexo-config("aside.position") == "right" + margin-left: 15px + else + margin-right: 15px diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl index 4db97cb..1ef97fe 100644 --- a/source/css/_layout/head.styl +++ b/source/css/_layout/head.styl @@ -134,9 +134,6 @@ display: block - - - a color: $light-grey text-decoration: none diff --git a/source/css/_layout/nightshift.styl b/source/css/_layout/nightshift.styl index d3209b3..9ccdb5e 100644 --- a/source/css/_layout/nightshift.styl +++ b/source/css/_layout/nightshift.styl @@ -108,7 +108,6 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") background: rgb(27, 38, 59) .post-cards,.md-links-item - // background: #2d3035 a color: #99a9bf @@ -202,7 +201,20 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable") .more background-color: #616a6b - + + #post_bottom + background: #2d3035 + box-shadow: 0 -5px 6px -5px rgba(133,133,133,0) + + i + color: #99a9bf !important + + #toc_mobile + background: #2d3035 + + a + color: #99a9bf !important + @media screen and (max-width: 768px) .night-mode color: #99a9bf diff --git a/source/css/_layout/note.styl b/source/css/_layout/note.styl new file mode 100644 index 0000000..25a6d8d --- /dev/null +++ b/source/css/_layout/note.styl @@ -0,0 +1,256 @@ +.note + $note-icons = hexo-config('note.icons') + $note-style = hexo-config('note.style') + margin: 10px 0 + padding: 15px + position: relative + + if ($note-style == 'simple') + border: 1px solid $light-grey + border-left-width: 5px + + + if ($note-style == 'modern') + background-color: $whitesmoke + border: 1px solid transparent + + + if ($note-style == 'flat') + background-color: lighten($light-grey, 65%) + border: initial + border-left: 5px solid $light-grey + + + if (hexo-config('note.border_radius') is a 'unit') + border-radius: unit(hexo-config('note.border_radius'), px) + + + h2, h3, h4, h5, h6 + if ($note-icons) + margin-top: 3px + else + margin-top: 0 + + + border-bottom: initial + margin-bottom: 0 + padding-top: 0 !important + + + p, ul, ol, table, pre, blockquote, img + &:first-child + margin-top: 0 + + &:last-child + margin-bottom: 0 + + + if ($note-icons) + &:not(.no-icon) + padding-left: 45px + + &::before + font-family: 'FontAwesome' + font-size: larger + left: 15px + position: absolute + top: 13px + + &.default + if ($note-style == 'flat') + background-color: $note-default-bg + + + if ($note-style == 'modern') + background-color: $note-modern-default-bg + border-color: $note-modern-default-border + color: $note-modern-default-text + + a, span.exturl + &:not(.btn) + border-bottom: 1px solid $note-modern-default-text + color: $note-modern-default-text + + &:hover + border-bottom: 1px solid $note-modern-default-hover + color: $note-modern-default-hover + + if ($note-style != 'modern') + border-left-color: $note-default-border + + h2, h3, h4, h5, h6 + color: $note-default-text + + if ($note-icons) + &:not(.no-icon) + &::before + content: $note-default-icon + + if ($note-style != 'modern') + color: $note-default-text + + &.primary + if ($note-style == 'flat') + background-color: $note-primary-bg + + + if ($note-style == 'modern') + background-color: $note-modern-primary-bg + border-color: $note-modern-primary-border + color: $note-modern-primary-text + + a, span.exturl + &:not(.btn) + border-bottom: 1px solid $note-modern-primary-text + color: $note-modern-primary-text + + &:hover + border-bottom: 1px solid $note-modern-primary-hover + color: $note-modern-primary-hover + + if ($note-style != 'modern') + border-left-color: $note-primary-border + + h2, h3, h4, h5, h6 + color: $note-primary-text + + if ($note-icons) + &:not(.no-icon) + &::before + content: $note-primary-icon + + if ($note-style != 'modern') + color: $note-primary-text + + &.info + if ($note-style == 'flat') + background-color: $note-info-bg + + + if ($note-style == 'modern') + background-color: $note-modern-info-bg + border-color: $note-modern-info-border + color: $note-modern-info-text + + a, span.exturl + &:not(.btn) + border-bottom: 1px solid $note-modern-info-text + color: $note-modern-info-text + + &:hover + border-bottom: 1px solid $note-modern-info-hover + color: $note-modern-info-hover + + if ($note-style != 'modern') + border-left-color: $note-info-border + + h2, h3, h4, h5, h6 + color: $note-info-text + + if ($note-icons) + &:not(.no-icon) + &::before + content: $note-info-icon + + if ($note-style != 'modern') + color: $note-info-text + + &.success + if ($note-style == 'flat') + background-color: $note-success-bg + + + if ($note-style == 'modern') + background-color: $note-modern-success-bg + border-color: $note-modern-success-border + color: $note-modern-success-text + + a, span.exturl + &:not(.btn) + border-bottom: 1px solid $note-modern-success-text + color: $note-modern-success-text + + &:hover + border-bottom: 1px solid $note-modern-success-hover + color: $note-modern-success-hover + + if ($note-style != 'modern') + border-left-color: $note-success-border + + h2, h3, h4, h5, h6 + color: $note-success-text + + if ($note-icons) + &:not(.no-icon) + &::before + content: $note-success-icon + + if ($note-style != 'modern') + color: $note-success-text + + &.warning + if ($note-style == 'flat') + background-color: $note-warning-bg + + + if ($note-style == 'modern') + background-color: $note-modern-warning-bg + border-color: $note-modern-warning-border + color: $note-modern-warning-text + + a, span.exturl + &:not(.btn) + border-bottom: 1px solid $note-modern-warning-text + color: $note-modern-warning-text + + &:hover + border-bottom: 1px solid $note-modern-warning-hover + color: $note-modern-warning-hover + + if ($note-style != 'modern') + border-left-color: $note-warning-border + + h2, h3, h4, h5, h6 + color: $note-warning-text + + if ($note-icons) + &:not(.no-icon) + &::before + content: $note-warning-icon + + if ($note-style != 'modern') + color: $note-warning-text + + &.danger + if ($note-style == 'flat') + background-color: $note-danger-bg + + + if ($note-style == 'modern') + background-color: $note-modern-danger-bg + border-color: $note-modern-danger-border + color: $note-modern-danger-text + + a, span.exturl + &:not(.btn) + border-bottom: 1px solid $note-modern-danger-text + color: $note-modern-danger-text + + &:hover + border-bottom: 1px solid $note-modern-danger-hover + color: $note-modern-danger-hover + + + if ($note-style != 'modern') + border-left-color: $note-danger-border + + h2, h3, h4, h5, h6 + color: $note-danger-text + + if ($note-icons) + &:not(.no-icon) + &::before + content: $note-danger-icon + + if ($note-style != 'modern') + color: $note-danger-text diff --git a/source/css/_layout/pagination.styl b/source/css/_layout/pagination.styl index 44881f0..06b14fc 100644 --- a/source/css/_layout/pagination.styl +++ b/source/css/_layout/pagination.styl @@ -25,7 +25,6 @@ img.prev_cover, img.next_cover position: absolute padding: 0 - z-index: 50 top: 0 left: 0 width: 100% diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl index fa2e259..1835e81 100644 --- a/source/css/_layout/post.styl +++ b/source/css/_layout/post.styl @@ -249,7 +249,7 @@ img -@media screen and (max-width: 900px) +@media screen and (max-width: 1024px) .layout margin: 0 15px width: auto diff --git a/source/css/_layout/post_bottom.styl b/source/css/_layout/post_bottom.styl new file mode 100644 index 0000000..b0ae7d4 --- /dev/null +++ b/source/css/_layout/post_bottom.styl @@ -0,0 +1,57 @@ +#post_bottom + position: fixed + bottom: -50px + background: alpha($white, 0.8) + width: 100% + border: none + box-shadow: 0 -5px 6px -5px alpha($grey, 0.6) + display: none + transition: all .2s + cursor: pointer + + &.toc_mobile_show + bottom: 0 + + #to_comment,#mobile_toc + width: 50% + text-align: center + font-size: 18px + padding: 7px 0 + display: inline-block + color: $light-black + + a + text-decoration: none + color: $light-black + + #toc_mobile + box-shadow: 0 0 4px alpha($grey, 0.6) + background: $white + width: 50% + height: 70% + position: fixed + bottom: 65px + right: 10px + overflow: scroll + padding: 15px 10px + font-size: 15px + border-radius: 10px + display: none + + ol,li + list-style: none + padding: 0 0 0 5px + margin: 0 + + a + &:hover + color: $light-blue + + .toc_mobile_headline + text-align: center + font-size: 18px + font-weight: bold + +@media screen and (max-width:768px) + #post_bottom + display: block diff --git a/source/css/_layout/z-other.styl b/source/css/_layout/z-other.styl index d48d300..93b211a 100644 --- a/source/css/_layout/z-other.styl +++ b/source/css/_layout/z-other.styl @@ -1,12 +1,10 @@ #recent-posts + width: 75% + .recent-post-item padding: 0 box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06) border-radius: 8px - -webkit-transition: all 0.3s - -moz-transition: all 0.3s - -o-transition: all 0.3s - -ms-transition: all 0.3s transition: all 0.3s background: #fff margin-top: 20px @@ -34,9 +32,6 @@ height: 280px overflow: hidden - - - img.post_bg border: 0 transition: all .6s @@ -130,8 +125,6 @@ a.article-meta__categories align-items: flex-start padding: 0 15px -#recent-posts - width: 75% #page,.category-content,.flink padding: 40px 44px 44px @@ -155,12 +148,18 @@ a.article-meta__categories #site-title font-family: PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif -@media screen and (max-width: 900px) - #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category - width: 100% !important +@media screen and (min-width: 900px) + if hexo-config("aside.position") == "left" + #recent-posts + order: 2 - // .recent-post-info - // padding: 40px 30px 20px + #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category + order: 2 + + +@media screen and (max-width: 900px) + #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category + width: 100% !important @media screen and (max-width:768px) @@ -209,15 +208,7 @@ a.article-meta__categories #aside_content display: none !important - // .card_widget - // box-shadow: none - // border-radius: 0 - // border-top: 1px dashed #a4d8fa - // &:hover - // box-shadow: none - - .category-lists padding: 0 @@ -282,14 +273,9 @@ footer @keyframes pulse{ 0%,to{ - // -ms-filter:"alpha(opacity=40)" - // filter:alpha(opacity=40) opacity:.4 top:0} 50%{ - // -ms-filter:none - // -webkit-filter:none - // filter:none opacity:1 top:-16px} } diff --git a/source/css/var.styl b/source/css/var.styl index 3b33688..ebfbea1 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -80,6 +80,7 @@ $light-grey = #EEEEEE $grey = $theme-meta-color $pale-yellow = $theme-read-mode-bg-color $white = #FFFFFF +$whitesmoke = #f5f5f5; $dark-white = #F9F9F9 $font-black = #4C4948 $selection = $theme-text-selection-color @@ -104,4 +105,73 @@ $img-border-padding = 4px $sidebar-width = 300px $sidebar-background = #f6f8fa +// Note colors +// -------------------------------------------------- +hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'),"%")) : ($lbg = 0); + +// Default +$note-default-border = #777; +$note-default-bg = lighten(spin($note-default-border, 0), 94% + $lbg); +$note-default-text = $note-default-border; +$note-default-icon = "\f0a9"; + +$note-modern-default-border = #e1e1e1; +$note-modern-default-bg = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4)); +$note-modern-default-text = #666; +$note-modern-default-hover = darken(spin($note-modern-default-text, -10), 32%); + +// Primary +$note-primary-border = #6f42c1; +$note-primary-bg = lighten(spin($note-primary-border, 10), 92% + $lbg); +$note-primary-text = $note-primary-border; +$note-primary-icon = "\f055"; + +$note-modern-primary-border = #e1c2ff; +$note-modern-primary-bg = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4)); +$note-modern-primary-text = #6f42c1; +$note-modern-primary-hover = darken(spin($note-modern-primary-text, -10), 22%); + +// Info +$note-info-border = #428bca; +$note-info-bg = lighten(spin($note-info-border, -10), 91% + $lbg); +$note-info-text = $note-info-border; +$note-info-icon = "\f05a"; + +$note-modern-info-border = #b3e5ef; +$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4)); +$note-modern-info-text = #31708f; +$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%); + +// Success +$note-success-border = #5cb85c; +$note-success-bg = lighten(spin($note-success-border, 10), 90% + $lbg); +$note-success-text = $note-success-border; +$note-success-icon = "\f058"; + +$note-modern-success-border = #d0e6be; +$note-modern-success-bg = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4)); +$note-modern-success-text = #3c763d; +$note-modern-success-hover = darken(spin($note-modern-success-text, -10), 27%); + +// Warning +$note-warning-border = #f0ad4e; +$note-warning-bg = lighten(spin($note-warning-border, 10), 88% + $lbg); +$note-warning-text = $note-warning-border; +$note-warning-icon = "\f06a"; + +$note-modern-warning-border = #fae4cd; +$note-modern-warning-bg = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4)); +$note-modern-warning-text = #8a6d3b; +$note-modern-warning-hover = darken(spin($note-modern-warning-text, -10), 18%); + +// Danger +$note-danger-border = #d9534f; +$note-danger-bg = lighten(spin($note-danger-border, -10), 92% + $lbg); +$note-danger-text = $note-danger-border; +$note-danger-icon = "\f056"; + +$note-modern-danger-border = #ebcdd2; +$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4)); +$note-modern-danger-text = #a94442; +$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%); diff --git a/source/js/main.js b/source/js/main.js index 55a5206..bdf5e97 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -1,5 +1,5 @@ $(function () { - if ($('#sidebar').hasClass('auto_open') ) { + if ($('#sidebar').hasClass('auto_open')) { if ($(".sidebar-toc__content").children().length > 0) { $(".layout_post").animate({}, function () { { @@ -81,7 +81,7 @@ $(function () { //----------------------------------------------------------------------------------------------------- // 首页fullpage添加 // 添加class - if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {} else { + if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) { } else { $('.full_page').css('background-attachment', 'fixed') } @@ -215,15 +215,18 @@ $(function () { if (imgList.length === 0) { imgList = $("#post-content img").not('.no-fancybox'); } - + for (var i = 0; i < imgList.length; i++) { + var lazyload_src = imgList[i].src ? imgList[i].src : imgList.eq(i).attr("data-src") + var $a = $( '' ) + var alt = imgList[i].alt var $wrap = $(imgList[i]).wrap($a) if (alt) { @@ -261,27 +264,13 @@ $(function () { }); - //-------------------------------------------------------------------------------------------------------- - //lazy懶加載 - //把img的src删除，添加data-src,用于lozad.js - var $img = $("#post img"); - $img.addClass("lozad"); - $img.each(function () { - var src_link = $(this).attr("src"); - $(this).attr("data-src", src_link); - $(this).removeAttr("src"); - }) - - const observer = lozad(); // lazy loads elements with default selector as '.lozad' - observer.observe(); - //--------------------------------------------------------------------------------------------------------- /** head点击*/ $('.toggle-menu').on('click', function () { if ($(".toggle-menu").hasClass("open")) { $(".toggle-menu").removeClass("open").addClass("close"); - $("#page-header #site-name,#page-header .search").css({'color':'#3b3a3a','text-shadow': 'none'}) + $("#page-header #site-name,#page-header .search").css({ 'color': '#3b3a3a', 'text-shadow': 'none' }) $(".toggle-menu *").css({ 'background-color': '#3b3a3a', 'text-shadow': 'none' }); $('body').addClass("is_hidden"); $('.menus').addClass("menu_open"); @@ -342,14 +331,16 @@ $(function () { $(window).on('resize', function (e) { if (!$('.toggle-menu').is(':visible')) { if ($(".toggle-menu").hasClass("close")) { - $(".toggle-menu").removeClass("close").addClass("open"); - $("#page-header #site-name,#page-header .search").css({ 'color': '', 'text-shadow': '' }); - $(".toggle-menu *").css({ 'background-color': '', 'text-shadow': '' }); - $('body').removeClass("is_hidden"); - $('.menus').removeClass("menu_open"); - } + $(".toggle-menu").removeClass("close").addClass("open"); + $("#page-header #site-name,#page-header .search").css({ 'color': '', 'text-shadow': '' }); + $(".toggle-menu *").css({ 'background-color': '', 'text-shadow': '' }); + $('body').removeClass("is_hidden"); + $('.menus').removeClass("menu_open"); + } } - }) + } ) + + //--------------------------------------------------------------------------------------------------------- /** scroll 滚动 toc*/ @@ -367,13 +358,19 @@ $(function () { } var isUp = scrollDirection(currentTop) - if($(".toggle-menu").hasClass("open")){ + if ($(".toggle-menu").hasClass("open")) { if (currentTop > 56) { if (isUp) { $('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log() + $('#post_bottom').removeClass('toc_mobile_show') + $('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log() + } else { $('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible') + $('#post_bottom').addClass('toc_mobile_show') + $('#toc_mobile').hasClass('is_visible') ? $('#toc_mobile').removeClass('is_visible') : console.log() + } $('#page-header').addClass('fixed') if ($('#go-up').css('opacity') === '0') { @@ -399,6 +396,8 @@ $(function () { } else { if (currentTop === 0) { $('#page-header').removeClass('fixed').removeClass('visible') + $('#post_bottom').removeClass('toc_mobile_show') + } $('#go-up').animate({}, function () { @@ -414,8 +413,19 @@ $(function () { 'transform': 'translateX(0)' }) }) + } } + + if ( $(window).width() <= 768 && $('#post_bottom').hasClass('toc_mobile_show') ){ + $('#rightside,#go-up').css('bottom', '80px') + $('#rightside,#go-up').css('bottom', '70px') + + } else { + $('#rightside,#go-up').css('bottom', '30px') + $('#rightside,#go-up').css('bottom', '20px') + } + }, 50, 100)) // go up smooth scroll @@ -424,9 +434,9 @@ $(function () { }) // head scroll - $('#post-content').find('h1,h2,h3,h4,h5,h6').on('click', function (e) { - scrollToHead('#' + $(this).attr('id')) - }) + // $('#post-content').find('h1,h2,h3,h4,h5,h6').on('click', function (e) { + // scrollToHead('#' + $(this).attr('id')) + // }) // head scroll $('.toc-link').on('click', function (e) { @@ -520,15 +530,14 @@ $(function () { .find('.toc-child').hide() } - if ($('.toc-link').hasClass('active')){ + if ($('.toc-link').hasClass('active')) { var active_position = $(".active").offset().top; var sidebar_scrolltop = $("#sidebar").scrollTop(); - if (active_position > (top + $(window).height() - 50)) { + if (active_position > (top + $(window).height() - 50)) { $("#sidebar").scrollTop(sidebar_scrolltop + 100); - } else if (active_position < top + 50) - { + } else if (active_position < top + 50) { $("#sidebar").scrollTop(sidebar_scrolltop - 100); - } + } } } @@ -568,4 +577,27 @@ $(function () { var font_size_record = parseFloat($('body').css('font-size')) $('body').css('font-size', font_size_record - 1) }); + + + $('#mobile_toc').on('click', function () { + $("#toc_mobile").toggleClass('is_visible') + }) + + //代碼框語言識別 + $('figure').each(function () { + var lang_name_index; + var lang_name; + lang_name_index = lang_name = $(this).attr('class').split(' ')[1]; + if (lang_name_index == 'js') + lang_name = 'javascript' + if (lang_name_index == 'md') + lang_name = 'markdown' + if (lang_name_index == 'plain') + lang_name = 'code' + if (lang_name_index == 'py') + lang_name = 'python' + + $('figure.' + lang_name_index + ' table').attr('data-content', lang_name); + }) + }); \ No newline at end of file