mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2025-09-15 12:58:48 +08:00
1. new look of the mobile menu
2. fix bugs
This commit is contained in:
hwy0127@gmail.com
parent
6b07467dc6
commit
6656cb8c6f
@ -12,7 +12,7 @@
|
||||
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
|
||||
```
|
||||
|
||||
如果想要安装比较新的dev分支，可以
|
||||
如果想要安裝比較新的dev分支，可以
|
||||
|
||||
```
|
||||
git clone -b div https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
|
||||
|
||||
@ -362,6 +362,14 @@ font:
|
||||
font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB,"Microsoft JhengHei", "MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
|
||||
code-font: consolas, Menlo, "PingFang SC", "Microsoft JhengHei","Microsoft YaHei", monospace, Helvetica Neue For Number
|
||||
|
||||
|
||||
#水平分隔綫
|
||||
hr:
|
||||
enable: false
|
||||
#fontawesome上圖標的Unicode
|
||||
icon: '\f21c'
|
||||
icon-top: -20px
|
||||
|
||||
# 主頁subtitle
|
||||
subtitle:
|
||||
enable: true
|
||||
|
||||
@ -465,7 +465,10 @@ translate:
|
||||
```yaml
|
||||
runtimeshow:
|
||||
enable: true
|
||||
start_date: 6/7/2018 00:00:00 ##网页开通时间
|
||||
start_date: 6/7/2018 00:00:00
|
||||
##网页开通时间
|
||||
#格式: 月/日/年 时间
|
||||
#也可以写成 年/月/日 时间
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -465,7 +465,10 @@ translate:
|
||||
```yaml
|
||||
runtimeshow:
|
||||
enable: true
|
||||
start_date: 6/7/2018 00:00:00 ##網頁開通時間
|
||||
start_date: 6/7/2018 00:00:00
|
||||
##網頁開通時間
|
||||
#格式: 月/日/年 時間
|
||||
#也可以寫成 年/月/日 時間
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -57,7 +57,7 @@ if is_home()
|
||||
e[i].style.height = n + "px";
|
||||
$("#site-info").each(function () {
|
||||
var x = $(this).height();
|
||||
$(this).css("top", (n-x)/2)
|
||||
$(this).css({"padding-top": (n-x)/2 , "padding-bottom":(n-x)/2 })
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -1,132 +1,21 @@
|
||||
if theme.aside.card_author
|
||||
.card_widget.card-author
|
||||
.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}'`)
|
||||
p.author-info__name.text-center= config.author
|
||||
p.author-info__description.text-center= config.description
|
||||
|
||||
.post_data.data_config
|
||||
if site.posts.length
|
||||
.data-item.text-center
|
||||
.data_link
|
||||
a(href=url_for(config.archive_dir) + '/')
|
||||
p.headline= _p('aside.articles')
|
||||
p.length_num= site.posts.length
|
||||
|
||||
if site.tags.length
|
||||
.data-item.text-center
|
||||
.data_link
|
||||
a(href=url_for(config.tag_dir) + '/' )
|
||||
p.headline= _p('aside.tags')
|
||||
p.length_num= site.tags.length
|
||||
|
||||
if site.categories.length
|
||||
.data-item.text-center
|
||||
.data_link
|
||||
a(href=url_for(config.category_dir) + '/')
|
||||
p.headline= _p('aside.categories')
|
||||
p.length_num= site.categories.length
|
||||
|
||||
.post_data.text-center
|
||||
a#bookmark-it.data-item.bookmark.bookmarke--primary.bookmark--animated(href="javascript:;" title= _p('aside.card_bookmark') )= _p('aside.card_bookmark') || 'Follow Me'
|
||||
|
||||
|
||||
|
||||
if(theme.social)
|
||||
.post_data.data_config
|
||||
#aside-social-icons
|
||||
each url, icon in theme.social
|
||||
a.social-icon.data-item(href=url target="_blank")
|
||||
i(class=icon)
|
||||
include widget/card_author.pug
|
||||
|
||||
if theme.aside.card_announcement
|
||||
.card_widget.card-announcement
|
||||
.card-content
|
||||
.item_headline
|
||||
i.fa.fa-bullhorn.card-announcement-animation(aria-hidden="true")
|
||||
span= _p('aside.card_announcement')
|
||||
.announcement_content= theme.announcement.content
|
||||
include widget/card_announcement.pug
|
||||
|
||||
if theme.aside.card_recent_post
|
||||
.card_widget.card-recent-post
|
||||
.card-content
|
||||
.item_headline
|
||||
i.fa.fa-history(aria-hidden="true")
|
||||
span= _p('aside.card_recent_post')
|
||||
.aside_recent_item
|
||||
- site.posts.sort('date', -1).limit(5).each(function(article){
|
||||
.aside_recent_post
|
||||
- var link = article.link || article.path
|
||||
a(href=url_for(link))
|
||||
- var post_cover = article.cover
|
||||
- var default_post_cover = theme.default_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'))
|
||||
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'))
|
||||
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)
|
||||
- var date_type = theme.post_meta.date_type == 'updated' ? 'updated' : 'date'
|
||||
time.aside_post_meta.post-meta__date #[=date(article[date_type], config.date_format)]
|
||||
|
||||
- })
|
||||
|
||||
include widget/card_recent_post.pug
|
||||
|
||||
if theme.aside.card_categories
|
||||
.card_widget.card-categories
|
||||
.card-content
|
||||
.item_headline
|
||||
i.fa.fa-folder-open(aria-hidden="true")
|
||||
span= _p('aside.card_categories')
|
||||
ul.aside_category_item
|
||||
- site.categories.sort('name').each(function(category){
|
||||
li.aside_category_list
|
||||
a.aside_category_list_link(href='/' + `${category.path}`)
|
||||
span.aside_category_list_name= category.name
|
||||
span.aside_category_list_length= category.length
|
||||
- })
|
||||
include widget/card_categories.pug
|
||||
|
||||
if theme.aside.card_tags
|
||||
.card_widget.card-tags
|
||||
.card-content
|
||||
.item_headline
|
||||
i.fa.fa-tags(aria-hidden="true")
|
||||
span= _p('aside.card_tags')
|
||||
.card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#000'})
|
||||
include widget/card_tags.pug
|
||||
|
||||
if theme.aside.card_archives
|
||||
.card_widget.card-archives
|
||||
.card-content
|
||||
.item_headline
|
||||
i.fa.fa-archive(aria-hidden="true")
|
||||
span= _p('aside.card_archives')
|
||||
div.archives_item!= list_archives({type:'monthly',format: 'YYYY年MM月'})
|
||||
include widget/card_archives.pug
|
||||
|
||||
if theme.aside.card_webinfo
|
||||
.card_widget.card-webinfo
|
||||
.card-content
|
||||
.item_headline
|
||||
i.fa.fa-line-chart(aria-hidden="true")
|
||||
span= _p('aside.card_webinfo.headline')
|
||||
.webinfo
|
||||
.webinfo_item
|
||||
.webinfo_article_name= _p('aside.card_webinfo.article_name') + " :"
|
||||
.webinfo_article_count= site.posts.length
|
||||
if theme.runtimeshow.enable
|
||||
.webinfo_item
|
||||
.webinfo_runtime_name= _p('aside.card_webinfo.runtime_name') + " :"
|
||||
#webinfo_runtime_count.webinfo_runtime_count
|
||||
script#runtionshow(src=url_for('js/runtimeshow.js') start_date=theme.runtimeshow.start_date)
|
||||
|
||||
if theme.busuanzi.site_uv
|
||||
.webinfo_item
|
||||
.webinfo_site_uv_name= _p('aside.card_webinfo.site_uv_name') + " :"
|
||||
.webinfo_site_uv_count#busuanzi_value_site_uv
|
||||
if theme.busuanzi.site_pv
|
||||
.webinfo_item
|
||||
.webinfo_site_name= _p('aside.card_webinfo.site_pv_name') + " :"
|
||||
.webinfo_site_pv_count#busuanzi_value_site_pv
|
||||
|
||||
include widget/card_webinfo.pug
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
if theme.valine && theme.valine.enable
|
||||
#vcomment.vcomment
|
||||
script(src='https://cdn1.lncld.net/static/js/3.0.4/av-min.js')
|
||||
script(src='https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js')
|
||||
script(src='https://cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js')
|
||||
script(src='https://cdn.jsdelivr.net/npm/valine@v1.3.6/dist/Valine.min.js')
|
||||
script.
|
||||
var notify = '#{ theme.valine.notify }' == true ? true : false;
|
||||
var verify = '#{ theme.valine.verify }' == true ? true : false;
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
- var without_index = url.replace('index.html', '')
|
||||
- var without_html = without_index.replace('.html', '')
|
||||
- var photo_check = page.cover || theme.avatar
|
||||
- var photo_link = url_check (photo_check) ? photo_check : config.url + photo_check
|
||||
|
||||
meta(http-equiv="x-dns-prefetch-control" content="on")
|
||||
if theme.canonical
|
||||
@ -9,7 +11,7 @@ if theme.twitter_meta
|
||||
meta(name="twitter:card" content="summary_large_image")
|
||||
meta(name="twitter:title" content=pageTitle_no_include_blog_name)
|
||||
meta(name="twitter:description" content=pageDescription)
|
||||
meta(name="twitter:image" content= page.cover|| theme.avatar)
|
||||
meta(name="twitter:image" content=photo_link)
|
||||
|
||||
if theme.Open_Graph_meta
|
||||
if is_post()
|
||||
@ -21,7 +23,7 @@ if theme.Open_Graph_meta
|
||||
meta(property="og:url" content=without_html)
|
||||
meta(property="og:site_name" content=config.title)
|
||||
meta(property="og:description" content=pageDescription)
|
||||
meta(property="og:image" content= page.cover|| theme.avatar)
|
||||
meta(property="og:image" content=photo_link)
|
||||
|
||||
if theme.disable_baidu_transformation
|
||||
meta(http-equiv="Cache-Control" content="no-transform")
|
||||
@ -108,6 +110,6 @@ if theme.qihu_site_verification
|
||||
- var preload_img = page.top_img || theme.top_img || config.top_img
|
||||
|
||||
if (is_archive() && preload_archive_img)
|
||||
link(rel="preload" href=preload_img as="image" )
|
||||
link(rel="preload" href=url_for(preload_img) as="image" )
|
||||
else if (!is_post() && preload_img)
|
||||
link(rel="preload" href=preload_img as="image" )
|
||||
link(rel="preload" href=url_for(preload_img) as="image" )
|
||||
|
||||
@ -8,12 +8,17 @@
|
||||
.menu-icon-third
|
||||
|
||||
span.pull-right.menus
|
||||
each value, label in theme.menu
|
||||
a.site-page(href=value.split('||')[0])
|
||||
i.fa-fw(class=value.split('||')[1])
|
||||
span=' '+label
|
||||
script.
|
||||
document.body.addEventListener('touchstart', function(){ });
|
||||
.mobile_author_icon
|
||||
img.lozad(data-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
|
||||
each value, label in theme.menu
|
||||
a.site-page(href=value.split('||')[0])
|
||||
i.fa-fw(class=value.split('||')[1])
|
||||
span=' '+label
|
||||
script.
|
||||
document.body.addEventListener('touchstart', function(){ });
|
||||
span.pull-right
|
||||
if (theme.algolia_search.enable || theme.local_search && theme.local_search.enable)
|
||||
a.site-page.social-icon.search
|
||||
|
||||
6
layout/includes/widget/card_announcement.pug
Normal file
6
layout/includes/widget/card_announcement.pug
Normal file
@ -0,0 +1,6 @@
|
||||
.card_widget.card-announcement
|
||||
.card-content
|
||||
.item_headline
|
||||
i.fa.fa-bullhorn.card-announcement-animation(aria-hidden="true")
|
||||
span= _p('aside.card_announcement')
|
||||
.announcement_content= theme.announcement.content
|
||||
6
layout/includes/widget/card_archives.pug
Normal file
6
layout/includes/widget/card_archives.pug
Normal file
@ -0,0 +1,6 @@
|
||||
.card_widget.card-archives
|
||||
.card-content
|
||||
.item_headline
|
||||
i.fa.fa-archive(aria-hidden="true")
|
||||
span= _p('aside.card_archives')
|
||||
div.archives_item!= list_archives({type:'monthly',format: 'YYYY年MM月'})
|
||||
41
layout/includes/widget/card_author.pug
Normal file
41
layout/includes/widget/card_author.pug
Normal file
@ -0,0 +1,41 @@
|
||||
.card_widget.card-author
|
||||
.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}'`)
|
||||
p.author-info__name.text-center= config.author
|
||||
p.author-info__description.text-center= config.description
|
||||
|
||||
.post_data.data_config
|
||||
if site.posts.length
|
||||
.data-item.text-center
|
||||
.data_link
|
||||
a(href=url_for(config.archive_dir) + '/')
|
||||
p.headline= _p('aside.articles')
|
||||
p.length_num= site.posts.length
|
||||
|
||||
if site.tags.length
|
||||
.data-item.text-center
|
||||
.data_link
|
||||
a(href=url_for(config.tag_dir) + '/' )
|
||||
p.headline= _p('aside.tags')
|
||||
p.length_num= site.tags.length
|
||||
|
||||
if site.categories.length
|
||||
.data-item.text-center
|
||||
.data_link
|
||||
a(href=url_for(config.category_dir) + '/')
|
||||
p.headline= _p('aside.categories')
|
||||
p.length_num= site.categories.length
|
||||
|
||||
.post_data.text-center
|
||||
a#bookmark-it.data-item.bookmark.bookmarke--primary.bookmark--animated(href="javascript:;" title= _p('aside.card_bookmark') )= _p('aside.card_bookmark') || 'Follow Me'
|
||||
|
||||
|
||||
|
||||
if(theme.social)
|
||||
.post_data.data_config
|
||||
#aside-social-icons
|
||||
each url, icon in theme.social
|
||||
a.social-icon.data-item(href=url target="_blank")
|
||||
i(class=icon)
|
||||
22
layout/includes/widget/card_categories.pug
Normal file
22
layout/includes/widget/card_categories.pug
Normal file
@ -0,0 +1,22 @@
|
||||
.card_widget.card-categories
|
||||
.card-content
|
||||
.item_headline
|
||||
i.fa.fa-folder-open(aria-hidden="true")
|
||||
span= _p('aside.card_categories')
|
||||
ul.aside_category_item
|
||||
mixin displayCategories(parent = undefined)
|
||||
- site.categories.find({ parent }).sort("name").each(function(category) {
|
||||
- var childCount = site.categories.find({ parent: category._id }).count();
|
||||
li.aside_category_list
|
||||
a.aside_category_list_link(href=url_for(category.path))
|
||||
span.aside_category_list_name= category.name
|
||||
span.aside_category_list_length= category.length
|
||||
|
||||
if childCount > 0
|
||||
ul.aside_category_item.child
|
||||
+displayCategories(category._id)
|
||||
- })
|
||||
|
||||
+displayCategories()
|
||||
|
||||
|
||||
24
layout/includes/widget/card_recent_post.pug
Normal file
24
layout/includes/widget/card_recent_post.pug
Normal file
@ -0,0 +1,24 @@
|
||||
.card_widget.card-recent-post
|
||||
.card-content
|
||||
.item_headline
|
||||
i.fa.fa-history(aria-hidden="true")
|
||||
span= _p('aside.card_recent_post')
|
||||
.aside_recent_item
|
||||
- site.posts.sort('date', -1).limit(5).each(function(article){
|
||||
.aside_recent_post
|
||||
- var link = article.link || article.path
|
||||
a(href=url_for(link))
|
||||
- var post_cover = article.cover
|
||||
- var default_post_cover = theme.default_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'))
|
||||
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'))
|
||||
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)
|
||||
- var date_type = theme.post_meta.date_type == 'updated' ? 'updated' : 'date'
|
||||
time.aside_post_meta.post-meta__date #[=date(article[date_type], config.date_format)]
|
||||
|
||||
- })
|
||||
6
layout/includes/widget/card_tags.pug
Normal file
6
layout/includes/widget/card_tags.pug
Normal file
@ -0,0 +1,6 @@
|
||||
.card_widget.card-tags
|
||||
.card-content
|
||||
.item_headline
|
||||
i.fa.fa-tags(aria-hidden="true")
|
||||
span= _p('aside.card_tags')
|
||||
.card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#000'})
|
||||
24
layout/includes/widget/card_webinfo.pug
Normal file
24
layout/includes/widget/card_webinfo.pug
Normal file
@ -0,0 +1,24 @@
|
||||
.card_widget.card-webinfo
|
||||
.card-content
|
||||
.item_headline
|
||||
i.fa.fa-line-chart(aria-hidden="true")
|
||||
span= _p('aside.card_webinfo.headline')
|
||||
.webinfo
|
||||
.webinfo_item
|
||||
.webinfo_article_name= _p('aside.card_webinfo.article_name') + " :"
|
||||
.webinfo_article_count= site.posts.length
|
||||
if theme.runtimeshow.enable
|
||||
.webinfo_item
|
||||
.webinfo_runtime_name= _p('aside.card_webinfo.runtime_name') + " :"
|
||||
#webinfo_runtime_count.webinfo_runtime_count
|
||||
script#runtionshow(src=url_for('js/runtimeshow.js') start_date=theme.runtimeshow.start_date)
|
||||
|
||||
if theme.busuanzi.site_uv
|
||||
.webinfo_item
|
||||
.webinfo_site_uv_name= _p('aside.card_webinfo.site_uv_name') + " :"
|
||||
.webinfo_site_uv_count#busuanzi_value_site_uv
|
||||
if theme.busuanzi.site_pv
|
||||
.webinfo_item
|
||||
.webinfo_site_name= _p('aside.card_webinfo.site_pv_name') + " :"
|
||||
.webinfo_site_pv_count#busuanzi_value_site_pv
|
||||
|
||||
8
scripts/url_check.js
Normal file
8
scripts/url_check.js
Normal file
@ -0,0 +1,8 @@
|
||||
hexo.extend.helper.register('url_check', function (p) {
|
||||
|
||||
let src = p ;
|
||||
let reg = /^https?/ig;
|
||||
return reg.test(src)
|
||||
|
||||
|
||||
})
|
||||
@ -85,11 +85,11 @@ hr
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
top: -10px
|
||||
top: $hr-icon-top
|
||||
left: 5%
|
||||
z-index: 1
|
||||
color: $light-blue
|
||||
content: "\f0c4"
|
||||
content: $hr-icon
|
||||
font: normal normal normal 14px / 1 FontAwesome
|
||||
font-size: 20px
|
||||
transition: all 1s ease-in-out
|
||||
@ -349,6 +349,6 @@ table
|
||||
display: block !important
|
||||
|
||||
.fireworks
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
position: fixed
|
||||
z-index: -1
|
||||
pointer-events: none
|
||||
@ -223,6 +223,13 @@
|
||||
list-style: none
|
||||
margin-bottom: -3px
|
||||
margin-block-start: 0.2rem
|
||||
|
||||
.aside_category_item.child
|
||||
margin-bottom: -3px
|
||||
margin-block-start: 0rem
|
||||
|
||||
.aside_category_list
|
||||
margin-left: -50px
|
||||
|
||||
.aside_category_list,.archive-list-item
|
||||
margin-left: -40px
|
||||
@ -234,6 +241,18 @@
|
||||
a
|
||||
text-decoration: none
|
||||
color: #4c4948
|
||||
|
||||
.aside_category_list_name,.archive-list-link
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
flex: auto
|
||||
|
||||
.aside_category_list_link,.archive-list-item
|
||||
display: flex
|
||||
|
||||
|
||||
|
||||
|
||||
.aside_category_list_length,.archive-list-count
|
||||
float: right
|
||||
@ -267,14 +286,11 @@
|
||||
|
||||
|
||||
@keyframes announ_animation{
|
||||
|
||||
0%,to{
|
||||
color: #4c4948
|
||||
|
||||
}
|
||||
50%{
|
||||
color: #FF0000
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -31,9 +31,11 @@
|
||||
color: $white
|
||||
|
||||
#site-info
|
||||
position: absolute
|
||||
// position: absolute
|
||||
width: 100%
|
||||
top: 43%
|
||||
// top: 43%
|
||||
padding-top: 43%
|
||||
padding-bottom: 43%
|
||||
|
||||
#site-title,
|
||||
#site-sub-title
|
||||
@ -102,7 +104,36 @@
|
||||
.menu-icon-third
|
||||
-webkit-transform: rotate(-45deg) translate(4px, -4px)
|
||||
transform: rotate(-45deg) translate(4px, -4px)
|
||||
|
||||
.menus
|
||||
.mobile_author_icon
|
||||
display: none
|
||||
padding: 3rem 1.5rem 0
|
||||
text-align: center
|
||||
|
||||
img
|
||||
height: 120px
|
||||
width: 120px
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
border-radius: 70px
|
||||
-webkit-transition: all .3s
|
||||
-moz-transition: all .3s
|
||||
-o-transition: all .3s
|
||||
-ms-transition: all .3s
|
||||
transition: all .3s
|
||||
|
||||
hr
|
||||
margin: 1rem auto
|
||||
display: none
|
||||
|
||||
&.menu_open
|
||||
display: block
|
||||
animation: menu_open .3s
|
||||
|
||||
&.menu_close
|
||||
animation: menu_close .3s
|
||||
display: block
|
||||
|
||||
|
||||
|
||||
@ -122,6 +153,7 @@
|
||||
text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3)
|
||||
font-size: 0.7rem
|
||||
cursor: pointer
|
||||
margin-left: 1rem
|
||||
|
||||
&::after
|
||||
position: absolute
|
||||
@ -191,29 +223,46 @@
|
||||
display: block
|
||||
|
||||
.menus
|
||||
position: absolute
|
||||
top: 3rem
|
||||
right: 0.8rem
|
||||
display: none
|
||||
width: 8rem
|
||||
background: alpha($white, 0.9)
|
||||
position: fixed
|
||||
top: 0
|
||||
right: 0
|
||||
width: 100%
|
||||
height 101vh
|
||||
background: $white
|
||||
cursor: pointer
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.27)
|
||||
z-index: -1
|
||||
overflow: auto
|
||||
display: none
|
||||
|
||||
a
|
||||
display: block !important
|
||||
display: inline-block !important
|
||||
opacity: 1 !important
|
||||
margin-left: 0
|
||||
padding-top: 0.3rem
|
||||
padding-bottom: 0.3rem
|
||||
padding-left: 0.6rem
|
||||
// margin-left: 0
|
||||
// padding-top: 0.3rem
|
||||
// padding-bottom: 0.3rem
|
||||
// padding-left: 0.6rem
|
||||
margin: 0
|
||||
padding: .5rem 1rem
|
||||
color: $font-black
|
||||
text-shadow: none
|
||||
font-size: 0.8rem
|
||||
z-index: 0
|
||||
|
||||
|
||||
&:hover
|
||||
color: $light-blue
|
||||
|
||||
.mobile_author_icon
|
||||
display: block
|
||||
|
||||
.menus_item
|
||||
padding: 0 .5rem
|
||||
margin-bottom: 4rem
|
||||
text-align: center
|
||||
|
||||
hr
|
||||
display: block
|
||||
|
||||
.search
|
||||
right: 0.5rem
|
||||
@ -225,7 +274,3 @@
|
||||
.search
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
|
||||
|
||||
#page-header .site-page
|
||||
margin-left: 1rem
|
||||
|
||||
@ -199,6 +199,9 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
|
||||
|
||||
&::-webkit-scrollbar-thumb
|
||||
background: lighten(#2d3035,5)
|
||||
|
||||
.more
|
||||
background-color: #616a6b
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
.night-mode
|
||||
@ -206,15 +209,14 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
|
||||
background-color: rgb(45, 48, 53)
|
||||
|
||||
#page-header
|
||||
.menus
|
||||
a
|
||||
color: #99a9bf
|
||||
background: #2d3035
|
||||
&.fixed
|
||||
.menu-icon-first,
|
||||
.menu-icon-second,
|
||||
.menu-icon-third
|
||||
background-color: #99a9bf;
|
||||
.menus
|
||||
background: #2d3035
|
||||
a
|
||||
color: #99a9bf !important
|
||||
.menu-icon-first,
|
||||
.menu-icon-second,
|
||||
.menu-icon-third
|
||||
background-color: #99a9bf !important
|
||||
|
||||
|
||||
@media screen and (min-width: 768px)
|
||||
|
||||
@ -277,6 +277,8 @@ footer
|
||||
position: absolute
|
||||
color: #fff
|
||||
|
||||
.is_hidden
|
||||
overflow: hidden
|
||||
@keyframes pulse{
|
||||
|
||||
0%,to{
|
||||
@ -350,3 +352,24 @@ footer
|
||||
80%{transform:scale(.98)}
|
||||
100%{transform:scale(1)}}
|
||||
|
||||
|
||||
|
||||
@keyframes menu_open{
|
||||
0% {
|
||||
transform: scale(0)
|
||||
}
|
||||
100% {
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menu_close{
|
||||
0% {
|
||||
transform: scale(1)
|
||||
display: block
|
||||
}
|
||||
100% {
|
||||
transform: scale(0)
|
||||
display: none
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,9 @@ $theme-hr-color = #A4D8FA
|
||||
$theme-read-mode-bg-color = #FAF9DE
|
||||
$font-family= Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
|
||||
$code-font = consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number
|
||||
|
||||
//hr icon
|
||||
$hr-icon = '\f0c4'
|
||||
$hr-icon-top = -10px
|
||||
|
||||
if hexo-config("theme_color") && hexo-config("theme_color.enable")
|
||||
$theme-color = convert(hexo-config("theme_color.main")) || #49B1F5
|
||||
@ -25,6 +27,11 @@ if hexo-config("font") && hexo-config("font.enable")
|
||||
$font-family = convert(hexo-config("font.font-family")) || 'Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif'
|
||||
$code-font = convert(hexo-config("font.code-font")) || 'consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number'
|
||||
|
||||
if hexo-config("hr") && hexo-config("hr.enable")
|
||||
$hr-icon = hexo-config("hr.icon") || '\f0c4'
|
||||
$hr-icon-top = convert(hexo-config("hr.icon-top")) || -10px
|
||||
|
||||
|
||||
// Global Variables
|
||||
$font-size = 14px
|
||||
$font-color = #1F2D3D
|
||||
@ -90,3 +97,5 @@ $img-border-padding = 4px
|
||||
// sidebar
|
||||
$sidebar-width = 300px
|
||||
$sidebar-background = #f6f8fa
|
||||
|
||||
|
||||
|
||||
@ -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 () {
|
||||
{
|
||||
@ -309,30 +309,72 @@ $(function () {
|
||||
//---------------------------------------------------------------------------------------------------------
|
||||
/** head点击*/
|
||||
$('.toggle-menu').on('click', function () {
|
||||
if (!$('.menus').is(':visible')) {
|
||||
|
||||
if ($(".toggle-menu").hasClass("open")) {
|
||||
$(".toggle-menu").removeClass("open").addClass("close");
|
||||
$('.menus').slideDown(300)
|
||||
$("#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");
|
||||
} else {
|
||||
$(".toggle-menu").removeClass("close").addClass("open");
|
||||
$('.menus').slideUp(200)
|
||||
}
|
||||
})
|
||||
|
||||
$(document).on('click touchstart', function (e) {
|
||||
var flag = $('.menus')[0].contains(e.target) || $('.toggle-menu')[0].contains(e.target)
|
||||
if (!flag && $('.toggle-menu').is(':visible')) {
|
||||
$(".toggle-menu").removeClass("close").addClass("open");
|
||||
$('.menus').slideUp(200)
|
||||
$("#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").addClass('menu_close');
|
||||
setTimeout(function () {
|
||||
$('.menus').removeClass("menu_close")
|
||||
|
||||
}, 300)
|
||||
}
|
||||
})
|
||||
|
||||
const fixScroll = (scrollEl) => {
|
||||
let startY
|
||||
scrollEl.addEventListener('touchstart', function (event) {
|
||||
// 如果多於1根手指點擊屏幕,則不處理
|
||||
if (event.targetTouches.length > 1) {
|
||||
return
|
||||
}
|
||||
// 儲存手指的初始位置
|
||||
startY = event.targetTouches[0].clientY
|
||||
}, false)
|
||||
scrollEl.addEventListener('touchmove', function (event) {
|
||||
if (event.targetTouches.length > 1) {
|
||||
return
|
||||
}
|
||||
// 判斷手指滑動方向, y大於0時向下滑動, 小於0時向上滑動
|
||||
const y = event.targetTouches[0].clientY - startY
|
||||
// 如果到頂時繼續向下拉
|
||||
if (scrollEl.scrollTop <= 0 && y > 0) {
|
||||
// 重置滾動距離為最小值
|
||||
scrollEl.scrollTop = 0
|
||||
// 阻止滾動
|
||||
event.preventDefault()
|
||||
}
|
||||
// 如果到底時繼續上滑
|
||||
const maxScrollTop = scrollEl.scrollHeight - scrollEl.clientHeight
|
||||
if (maxScrollTop - scrollEl.scrollTop <= 0 && y < 0) {
|
||||
scrollEl.scrollTop = maxScrollTop
|
||||
event.preventDefault()
|
||||
}
|
||||
}, {
|
||||
passive: false
|
||||
})
|
||||
}
|
||||
const scrollEl = document.querySelector(".menus");
|
||||
fixScroll(scrollEl)
|
||||
|
||||
|
||||
$(window).on('resize', function (e) {
|
||||
if (!$('.toggle-menu').is(':visible')) {
|
||||
if (!$('.menus').is(':visible')) {
|
||||
$(".toggle-menu").removeClass("open").addClass("close");
|
||||
$('.menus').slideDown(300)
|
||||
}
|
||||
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");
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -351,52 +393,55 @@ $(function () {
|
||||
findHeadPosition(currentTop)
|
||||
}
|
||||
var isUp = scrollDirection(currentTop)
|
||||
if (currentTop > 56) {
|
||||
if (isUp) {
|
||||
$('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log()
|
||||
|
||||
if($(".toggle-menu").hasClass("open")){
|
||||
if (currentTop > 56) {
|
||||
|
||||
if (isUp) {
|
||||
$('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log()
|
||||
} else {
|
||||
$('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible')
|
||||
}
|
||||
$('#page-header').addClass('fixed')
|
||||
if ($('#go-up').css('opacity') === '0') {
|
||||
|
||||
$('#go-up').animate({}, function () {
|
||||
$('#go-up').css({
|
||||
'opacity': '1',
|
||||
'transform': 'translateX(-30px) rotateZ(360deg)'
|
||||
})
|
||||
})
|
||||
}
|
||||
if ($('#rightside').css('opacity') === '0') {
|
||||
|
||||
$('#rightside').animate({}, function () {
|
||||
$('#rightside').css({
|
||||
'opacity': '1',
|
||||
'transform': 'translateX(-38px)'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
$('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible')
|
||||
}
|
||||
$('#page-header').addClass('fixed')
|
||||
if ($('#go-up').css('opacity') === '0') {
|
||||
if (currentTop === 0) {
|
||||
$('#page-header').removeClass('fixed').removeClass('visible')
|
||||
}
|
||||
|
||||
$('#go-up').animate({}, function () {
|
||||
$('#go-up').css({
|
||||
'opacity': '1',
|
||||
'transform': 'translateX(-30px) rotateZ(360deg)'
|
||||
'opacity': '0',
|
||||
'transform': 'translateX(0) rotateZ(180deg) '
|
||||
})
|
||||
})
|
||||
}
|
||||
if ($('#rightside').css('opacity') === '0') {
|
||||
|
||||
$('#rightside').animate({}, function () {
|
||||
$('#rightside').css({
|
||||
'opacity': '1',
|
||||
'transform': 'translateX(-38px)'
|
||||
'opacity': '0',
|
||||
'transform': 'translateX(0)'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
if (currentTop === 0) {
|
||||
$('#page-header').removeClass('fixed').removeClass('visible')
|
||||
}
|
||||
|
||||
$('#go-up').animate({}, function () {
|
||||
$('#go-up').css({
|
||||
'opacity': '0',
|
||||
'transform': 'translateX(0) rotateZ(180deg) '
|
||||
})
|
||||
})
|
||||
|
||||
$('#rightside').animate({}, function () {
|
||||
$('#rightside').css({
|
||||
'opacity': '0',
|
||||
'transform': 'translateX(0)'
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}, 50, 100))
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user