mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-04-10 21:17:07 +08:00
feat: 新增標籤外掛 timeline closed #644
fix: 自建頁面圖片沒有 blur 效果 improvement: 優化 404 頁面 UI improvement: lazyload 默認佔位圖改為透明圖片 improvement: 優化 lazyload blur 出現特效 improvement: 優化 css
This commit is contained in:
Jerry
@@ -118,6 +118,4 @@ Snackbar:
|
||||
|
||||
loading: Loading...
|
||||
|
||||
error404:
|
||||
error_title: Page not found
|
||||
back_button: Go back home
|
||||
error404: Page not found
|
||||
|
||||
@@ -118,6 +118,4 @@ Snackbar:
|
||||
|
||||
loading: Loading...
|
||||
|
||||
error404:
|
||||
error_title: Page not found
|
||||
back_button: Go back home
|
||||
error404: Page not found
|
||||
|
||||
@@ -119,6 +119,4 @@ Snackbar:
|
||||
|
||||
loading: 加载中...
|
||||
|
||||
error404:
|
||||
error_title: 页面没有找到
|
||||
back_button: 回到主页
|
||||
error404: 页面没有找到
|
||||
|
||||
@@ -119,6 +119,4 @@ Snackbar:
|
||||
|
||||
loading: 載入中...
|
||||
|
||||
error404:
|
||||
error_title: 頁面沒有找到
|
||||
back_button: 回到主頁
|
||||
error404: 頁面沒有找到
|
||||
|
||||
@@ -1,17 +1,12 @@
|
||||
- var top_img = theme.error_404.background || theme.default_top_img
|
||||
- var bg_img = `background-image: url('${url_for(top_img)}')`
|
||||
- var top_img_404 = theme.error_404.background || theme.default_top_img
|
||||
|
||||
#body-wrap.error404
|
||||
div(style='display: none')
|
||||
include ./header/index.pug
|
||||
include ./header/index.pug
|
||||
|
||||
#error-wrap
|
||||
.error-content
|
||||
.error-img(style=bg_img)
|
||||
.error-img
|
||||
img(src=url_for(top_img_404) alt='Page not found')
|
||||
.error-info
|
||||
h1.error_title= '404'
|
||||
.error_subtitle= theme.error_404.subtitle
|
||||
a.button--animated(href=config.root)
|
||||
i.fas.fa-rocket
|
||||
= _p('error404.back_button')
|
||||
|
||||
.error_subtitle= theme.error_404.subtitle || _p('error404')
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
- else if (is_category()) pageTitle = _p('page.category') + ': ' + page.category
|
||||
- else if (is_month()) pageTitle += ': ' + page.month + '/' + page.year
|
||||
- else if (is_year()) pageTitle += ': ' + page.year
|
||||
- else if (is_current('/404.html', [strict])) pageTitle = _p('error404.error_title')
|
||||
- else if (is_current('/404.html', [strict])) pageTitle = _p('error404')
|
||||
- else pageTitle = page.title || config.title || ''
|
||||
|
||||
- var isSubtitle = config.subtitle ? ' - ' + config.subtitle : ''
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "hexo-theme-butterfly",
|
||||
"version": "4.0.0-b6",
|
||||
"version": "4.0.0-b7",
|
||||
"description": "A Simple and Card UI Design theme for Hexo",
|
||||
"main": "package.json",
|
||||
"scripts": {
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
const urlFor = require('hexo-util').url_for.bind(hexo)
|
||||
|
||||
function lazyload (htmlContent) {
|
||||
const bg = hexo.theme.config.lazyload.placeholder ? urlFor(hexo.theme.config.lazyload.placeholder) : 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs='
|
||||
const bg = hexo.theme.config.lazyload.placeholder ? urlFor(hexo.theme.config.lazyload.placeholder) : 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
||||
return htmlContent.replace(/(<img.*? src=)/ig, `$1 "${bg}" data-lazy-src=`)
|
||||
}
|
||||
|
||||
|
||||
40
scripts/tag/timeline.js
Normal file
40
scripts/tag/timeline.js
Normal file
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* timeline
|
||||
* by Jerry
|
||||
*/
|
||||
|
||||
'use strict'
|
||||
|
||||
function timeLineFn (args, content) {
|
||||
const tlBlock = /<!--\s*timeline (.*?)\s*-->\n([\w\W\s\S]*?)<!--\s*endtimeline\s*-->/g
|
||||
|
||||
let result = ''
|
||||
if (args.length) {
|
||||
args = hexo.render.renderSync({ text: args.join(' '), engine: 'markdown' })
|
||||
result += `<div class='timeline-item headline'><div class='timeline-item-title'><div class='item-circle'>${args}</div></div></div>`
|
||||
}
|
||||
|
||||
const matches = []
|
||||
let match
|
||||
|
||||
while ((match = tlBlock.exec(content)) !== null) {
|
||||
matches.push(match[1])
|
||||
matches.push(match[2])
|
||||
}
|
||||
|
||||
console.log(matches)
|
||||
|
||||
for (let i = 0; i < matches.length; i += 2) {
|
||||
const tlChildTitle = hexo.render.renderSync({ text: matches[i], engine: 'markdown' })
|
||||
const tlChildContent = hexo.render.renderSync({ text: matches[i + 1], engine: 'markdown' })
|
||||
|
||||
const tlTitleHtml = `<div class='timeline-item-title'><div class='item-circle'>${tlChildTitle}</div></div>`
|
||||
const tlContentHtml = `<div class='timeline-item-content'>${tlChildContent}</div>`
|
||||
|
||||
result += `<div class='timeline-item'>${tlTitleHtml + tlContentHtml}</div>`
|
||||
}
|
||||
|
||||
return `<div class="timeline">${result}</div>`
|
||||
}
|
||||
|
||||
hexo.extend.tag.register('timeline', timeLineFn, { ends: true })
|
||||
@@ -27,6 +27,29 @@
|
||||
&:hover
|
||||
box-shadow: var(--card-hover-box-shadow)
|
||||
|
||||
.imgHover
|
||||
width: 100%
|
||||
height: 100%
|
||||
transition: filter 375ms ease-in .2s, transform .6s
|
||||
object-fit: cover
|
||||
|
||||
&:hover
|
||||
transform: scale(1.1)
|
||||
|
||||
.postImgHover
|
||||
&:hover
|
||||
img
|
||||
opacity: .8
|
||||
transform: scale(1.1)
|
||||
|
||||
img
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: 100%
|
||||
opacity: .4
|
||||
transition: all .6s, filter 375ms ease-in .2s
|
||||
object-fit: cover
|
||||
|
||||
maxWidth600()
|
||||
@media screen and (max-width: 600px)
|
||||
{block}
|
||||
|
||||
@@ -29,6 +29,9 @@
|
||||
--toc-link-color: $toc-link-color
|
||||
--card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05)
|
||||
--card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09)
|
||||
--timeline-bg: $timeline-content-bg
|
||||
--timeline-border-color: $timeline-border-color
|
||||
--pseudo-hover: $pseudo-hover
|
||||
|
||||
body
|
||||
position: relative
|
||||
@@ -203,7 +206,7 @@ img
|
||||
if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
|
||||
img
|
||||
&[data-lazy-src]:not(.loaded)
|
||||
filter: blur(10px) brightness(1)
|
||||
filter: blur(8px) brightness(1)
|
||||
|
||||
&[data-lazy-src].error
|
||||
filter: none
|
||||
|
||||
@@ -130,13 +130,7 @@
|
||||
height: w
|
||||
|
||||
& > img
|
||||
width: 100%
|
||||
height: 100%
|
||||
transition: all .6s
|
||||
object-fit: cover
|
||||
|
||||
&:hover
|
||||
transform: scale(1.1)
|
||||
@extend .imgHover
|
||||
|
||||
.content
|
||||
flex: 1
|
||||
@@ -253,6 +247,7 @@
|
||||
width: $toc-mobile-width
|
||||
opacity: 0
|
||||
transform-origin: right bottom
|
||||
transition: none
|
||||
|
||||
.toc-percentage
|
||||
float: right
|
||||
@@ -323,7 +318,7 @@
|
||||
|
||||
img
|
||||
height: 100%
|
||||
transition: all .5s
|
||||
transition: filter 375ms ease-in 0.2s, transform .3s
|
||||
object-fit: cover
|
||||
|
||||
&:hover
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
#footer
|
||||
position: relative
|
||||
background: $light-blue
|
||||
background-attachment: local
|
||||
background-attachment: scroll
|
||||
background-position: bottom
|
||||
background-size: cover
|
||||
|
||||
|
||||
@@ -8,15 +8,6 @@
|
||||
background: $theme-paginator-color
|
||||
color: var(--white)
|
||||
|
||||
img.prev-cover,
|
||||
img.next-cover
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: 100%
|
||||
opacity: .4
|
||||
transition: all .6s
|
||||
object-fit: cover
|
||||
|
||||
.pagination-info
|
||||
position: absolute
|
||||
top: 50%
|
||||
@@ -45,6 +36,7 @@
|
||||
|
||||
.prev-post,
|
||||
.next-post
|
||||
@extend .postImgHover
|
||||
width: 50%
|
||||
|
||||
+maxWidth768()
|
||||
@@ -56,12 +48,6 @@
|
||||
overflow: hidden
|
||||
height: 150px
|
||||
|
||||
&:hover
|
||||
img.prev-cover,
|
||||
img.next-cover
|
||||
opacity: .8
|
||||
transform: scale(1.1)
|
||||
|
||||
&.pagination-post
|
||||
overflow: hidden
|
||||
margin-top: 40px
|
||||
|
||||
@@ -108,7 +108,7 @@ beautify()
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $pseudo-hover
|
||||
border-color: var(--pseudo-hover)
|
||||
|
||||
&:before
|
||||
$w = .42em
|
||||
@@ -152,6 +152,7 @@ no-beautify()
|
||||
display: block
|
||||
margin: 0 auto 20px
|
||||
max-width: 100%
|
||||
transition: filter 375ms ease-in 0.2s
|
||||
|
||||
p
|
||||
margin: 0 0 16px
|
||||
|
||||
@@ -16,11 +16,7 @@
|
||||
height: 200px
|
||||
background: $dark-black
|
||||
vertical-align: bottom
|
||||
|
||||
&:hover
|
||||
.cover
|
||||
opacity: .8
|
||||
transform: scale(1.1)
|
||||
@extend .postImgHover
|
||||
|
||||
+maxWidth768()
|
||||
margin: 2px
|
||||
@@ -30,13 +26,6 @@
|
||||
+maxWidth600()
|
||||
width: calc(100% - 4px)
|
||||
|
||||
.cover
|
||||
width: 100%
|
||||
height: 100%
|
||||
opacity: .4
|
||||
transition: all .6s
|
||||
object-fit: cover
|
||||
|
||||
.content
|
||||
position: absolute
|
||||
top: 50%
|
||||
|
||||
@@ -35,6 +35,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
|
||||
--hlnumber-color: alpha(#FFFFFF, .4)
|
||||
--hlscrollbar-bg: lighten(#121212, 5)
|
||||
--hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
|
||||
--timeline-bg: lighten(#121212, 5)
|
||||
|
||||
#web_bg:before,
|
||||
#footer:before,
|
||||
|
||||
@@ -11,6 +11,9 @@ if hexo-config('readmode')
|
||||
--exit-btn-bg: #C0C0C0
|
||||
--exit-btn-color: #fff
|
||||
--exit-btn-hover: darken(#C0C0C0, 20)
|
||||
--timeline-bg: none
|
||||
--timeline-border-color: none
|
||||
--pseudo-hover: none
|
||||
|
||||
[data-theme='dark']
|
||||
.read-mode
|
||||
|
||||
@@ -6,75 +6,64 @@ if hexo-config('error_404.enable')
|
||||
right: 0
|
||||
left: 0
|
||||
margin: 0 auto
|
||||
padding: 0 20px
|
||||
padding: 60px 20px 0
|
||||
max-width: 1000px
|
||||
transform: translate(0, -50%)
|
||||
|
||||
.error-content
|
||||
@extend .cardHover
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: center
|
||||
align-items: center
|
||||
overflow: hidden
|
||||
margin: 0 20px
|
||||
height: 360px
|
||||
|
||||
+maxWidth768()
|
||||
flex-direction: column
|
||||
margin: 0
|
||||
height: 500px
|
||||
|
||||
.error-img
|
||||
flex: 1
|
||||
display: inline-block
|
||||
overflow: hidden
|
||||
width: 50%
|
||||
height: 100%
|
||||
border-top-left-radius: 8px
|
||||
border-bottom-left-radius: 8px
|
||||
background-color: $theme-color
|
||||
background-position: center
|
||||
background-size: cover
|
||||
|
||||
+maxWidth768()
|
||||
flex: 1
|
||||
width: 100%
|
||||
border-top-right-radius: 8px
|
||||
border-bottom-left-radius: 0
|
||||
height: 45%
|
||||
|
||||
img
|
||||
@extend .imgHover
|
||||
background-color: $theme-color
|
||||
|
||||
.error-info
|
||||
flex: 1
|
||||
padding: 10px
|
||||
display: inline-flex
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
align-content: center
|
||||
width: 50%
|
||||
height: 100%
|
||||
vertical-align: top
|
||||
text-align: center
|
||||
font-size: 14px
|
||||
|
||||
if $site-name-font
|
||||
font-family: $site-name-font
|
||||
|
||||
+maxWidth768()
|
||||
flex: 1.1
|
||||
width: 100%
|
||||
height: 55%
|
||||
|
||||
.error_title
|
||||
margin-top: -80px
|
||||
margin-top: -.6em
|
||||
font-size: 9em
|
||||
|
||||
+maxWidth768()
|
||||
margin-top: -60px
|
||||
font-size: 8em
|
||||
|
||||
.error_subtitle
|
||||
@extend .limit-more-line
|
||||
margin-top: -70px
|
||||
margin-top: -3em
|
||||
word-break: break-word
|
||||
font-size: 1.6em
|
||||
-webkit-line-clamp: 2
|
||||
|
||||
a
|
||||
display: inline-block
|
||||
margin-top: 10px
|
||||
padding: 6px 30px
|
||||
background: var(--btn-bg)
|
||||
color: var(--btn-color)
|
||||
|
||||
i
|
||||
padding-right: 6px
|
||||
|
||||
& + #rightside
|
||||
display: none
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $pseudo-hover
|
||||
border-color: var(--pseudo-hover)
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
@@ -47,7 +47,7 @@
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $pseudo-hover
|
||||
border-color: var(--pseudo-hover)
|
||||
|
||||
&:before
|
||||
$w = 6px
|
||||
@@ -75,7 +75,7 @@
|
||||
border-color: $light-blue
|
||||
|
||||
&:before
|
||||
border-color: $pseudo-hover
|
||||
border-color: var(--pseudo-hover)
|
||||
|
||||
&-time
|
||||
color: $theme-meta-color
|
||||
@@ -102,13 +102,7 @@
|
||||
height: 80px
|
||||
|
||||
img
|
||||
width: 100%
|
||||
height: 100%
|
||||
transition: all .6s
|
||||
object-fit: cover
|
||||
|
||||
&:hover
|
||||
transform: scale(1.1)
|
||||
@extend .imgHover
|
||||
|
||||
&-info
|
||||
flex: 1
|
||||
|
||||
@@ -59,4 +59,4 @@
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $pseudo-hover
|
||||
border-color: var(--pseudo-hover)
|
||||
|
||||
@@ -58,7 +58,8 @@
|
||||
img
|
||||
width: 100%
|
||||
height: 100%
|
||||
transition: all .3s
|
||||
object-fit: cover
|
||||
transition: filter 375ms ease-in 0.2s, transform .3s
|
||||
|
||||
.img-alt
|
||||
display: none
|
||||
|
||||
@@ -32,10 +32,7 @@
|
||||
height: 230px
|
||||
|
||||
img.post_bg
|
||||
width: 100%
|
||||
height: 100%
|
||||
transition: all .6s
|
||||
object-fit: cover
|
||||
@extend .imgHover
|
||||
|
||||
&.right
|
||||
order: 1
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $pseudo-hover
|
||||
border-color: var(--pseudo-hover)
|
||||
|
||||
&:before
|
||||
$w = .5em
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $pseudo-hover
|
||||
border-color: var(--pseudo-hover)
|
||||
|
||||
&:before
|
||||
$w = .5em
|
||||
|
||||
@@ -32,7 +32,7 @@ figure.gallery-group
|
||||
height: 250px
|
||||
backface-visibility: hidden
|
||||
opacity: .8
|
||||
transition: opacity .35s, transform .35s
|
||||
transition: all .3s, filter 375ms ease-in 0.2s !important
|
||||
transform: translate3d(-10px, 0, 0)
|
||||
object-fit: cover
|
||||
|
||||
|
||||
58
source/css/_tags/timeline.styl
Normal file
58
source/css/_tags/timeline.styl
Normal file
@@ -0,0 +1,58 @@
|
||||
#article-container
|
||||
.timeline
|
||||
margin: 0 0 20px
|
||||
padding: 14px 20px 5px
|
||||
border-left: 2px solid var(--timeline-border-color)
|
||||
|
||||
.timeline-item
|
||||
margin: 0 0 15px
|
||||
|
||||
&:hover
|
||||
.item-circle
|
||||
&:before
|
||||
border: 3px solid var(--pseudo-hover)
|
||||
|
||||
&.headline
|
||||
.timeline-item-title
|
||||
.item-circle
|
||||
> p
|
||||
font-weight: 600
|
||||
font-size: 1.2em
|
||||
|
||||
&:before
|
||||
left: -28px
|
||||
border: 4px solid var(--pseudo-hover)
|
||||
|
||||
.timeline-item-title
|
||||
position: relative
|
||||
|
||||
.item-circle
|
||||
&:before
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: -27px
|
||||
width: 6px
|
||||
height: 6px
|
||||
border: 3px solid var(--timeline-border-color)
|
||||
border-radius: 50%
|
||||
background: var(--card-bg)
|
||||
content: ''
|
||||
transition: all .3s
|
||||
transform: translate(0, -50%)
|
||||
|
||||
> p
|
||||
margin: 0 0 8px
|
||||
font-weight: 500
|
||||
|
||||
.timeline-item-content
|
||||
position: relative
|
||||
padding: 12px 10px
|
||||
border-radius: 8px
|
||||
background: var(--timeline-bg)
|
||||
font-size: .93em
|
||||
|
||||
& > :last-child
|
||||
margin-bottom: 0
|
||||
|
||||
& + .timeline
|
||||
margin-top: -20px
|
||||
@@ -174,4 +174,8 @@ $tab-botton-color = $font-color
|
||||
$tab-button-hover-bg = darken($tab-border-color, 8)
|
||||
$tab-active-border-color = $theme-color
|
||||
$tab-button-active-bg = $card-bg
|
||||
$tab-to-top-color = #99a9bf
|
||||
$tab-to-top-color = #99a9bf
|
||||
|
||||
// timeline
|
||||
$timeline-content-bg = #f6f6f6
|
||||
$timeline-border-color = $theme-color
|
||||
|
||||
Reference in New Issue
Block a user