mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-04-10 21:17:07 +08:00
fix bugs
This commit is contained in:
hwy0127@gmail.com
45
README.md
45
README.md
@@ -4,12 +4,18 @@
|
||||
|
||||
一款基于[hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody)修改的主题
|
||||
|
||||
处于dev阶段，一些功能需要时间去适配（例如夜间模式）
|
||||
|
||||
## 安装
|
||||
在你的博客目录里
|
||||
|
||||
在你的博客根目录里
|
||||
|
||||
```
|
||||
git clone https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
|
||||
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
|
||||
```
|
||||
|
||||
如果想要安裝比較新的dev分支，可以
|
||||
|
||||
```
|
||||
git clone -b div https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
|
||||
```
|
||||
|
||||
## 应用主题
|
||||
@@ -22,39 +28,10 @@ theme: Butterfly
|
||||
>如果你没有pug以及stylus的渲染器，请下载安装： npm install hexo-renderer-jade hexo-renderer-stylus --save or yarn add hexo-renderer-jade hexo-renderer-stylus
|
||||
|
||||
## 文档
|
||||
可查看[这里](https://molunerfinn.com/hexo-theme-melody-doc/zh-Hans/#%E7%89%B9%E6%80%A7)
|
||||
|
||||
一些不同的东西后续补上教程
|
||||
可查看[这里](https://jerryc.me/posts/21cfbf15)
|
||||
|
||||
|
||||
## Front-matter
|
||||
|
||||
page页
|
||||
```
|
||||
---
|
||||
title: {{ title }}
|
||||
date: {{ date }}
|
||||
comments:
|
||||
reward:
|
||||
description:
|
||||
top_img:
|
||||
cover: (封面)
|
||||
---
|
||||
```
|
||||
|
||||
post页
|
||||
```
|
||||
---
|
||||
title: {{ title }}
|
||||
date: {{ date }}
|
||||
tags:
|
||||
categories:
|
||||
keywords:
|
||||
description:
|
||||
top_img:
|
||||
cover:
|
||||
---
|
||||
```
|
||||
|
||||
## 截图
|
||||
|
||||
|
||||
60
_config.yml
60
_config.yml
@@ -25,7 +25,6 @@ menu:
|
||||
|
||||
|
||||
# Favicon
|
||||
# use my-favicon.ico to avoid duplicate favicon of melody theme
|
||||
# ---------------
|
||||
favicon: /img/favicon.ico
|
||||
|
||||
@@ -72,7 +71,7 @@ algolia_search:
|
||||
|
||||
|
||||
# Local search
|
||||
# Please see doc for more details: https://molunerfinn.com/hexo-theme-melody-doc/#/third-party-support?id=local-search
|
||||
# Please see doc for more details: https://jerryc.me/posts/21cfbf15/#本地搜索
|
||||
# ---------------
|
||||
local_search:
|
||||
enable: false
|
||||
@@ -81,7 +80,7 @@ local_search:
|
||||
hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
|
||||
|
||||
# MathJax
|
||||
# Please see doc for more details: https://molunerfinn.com/hexo-theme-melody-doc/#/third-party-support?id=mathjax
|
||||
# Please see doc for more details: https://jerryc.me/posts/21cfbf15/#MathJax
|
||||
# ---------------
|
||||
mathjax:
|
||||
enable: false
|
||||
@@ -105,7 +104,6 @@ katex:
|
||||
google_analytics:
|
||||
|
||||
|
||||
|
||||
# stylesheets loaded in the <head>
|
||||
# ---------------
|
||||
stylesheets:
|
||||
@@ -116,8 +114,6 @@ stylesheets:
|
||||
scripts:
|
||||
- /js/utils.js
|
||||
- /js/main.js
|
||||
- /js/baidupush.js
|
||||
|
||||
|
||||
# cdn for third-party library
|
||||
# ---------------
|
||||
@@ -160,11 +156,11 @@ lodding_bg:
|
||||
|
||||
|
||||
post_meta:
|
||||
date_type: both # or updated 文章日期是创建日或者更新日
|
||||
date_type: both # or created or updated 文章日期是创建日或者更新日或都显示
|
||||
categories: true # or false 是否显示分类
|
||||
tags: true # or false 是否显示标签
|
||||
|
||||
# Please see doc for more details: https://molunerfinn.com/hexo-theme-melody-doc/#/additional-package-support?id=word-counting
|
||||
# Please see doc for more details: https://jerryc.me/posts/21cfbf15/#字数统计
|
||||
wordcount:
|
||||
enable: false
|
||||
|
||||
@@ -181,16 +177,11 @@ post_copyright:
|
||||
license: CC BY-NC-SA 4.0
|
||||
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
|
||||
|
||||
# Please see doc for more details: https://molunerfinn.com/hexo-theme-melody-doc/#/theme-config?id=auto-excerpt
|
||||
auto_excerpt:
|
||||
enable: true
|
||||
length: 150
|
||||
|
||||
|
||||
# adv:
|
||||
# enable: false
|
||||
# info:
|
||||
|
||||
# Share System
|
||||
# ---------------
|
||||
addThis:
|
||||
@@ -201,15 +192,23 @@ sharejs:
|
||||
enable: true
|
||||
sites: facebook,twitter,wechat,weibo,qq
|
||||
|
||||
# https://www.addtoany.com/
|
||||
addtoany:
|
||||
enable: false
|
||||
item:
|
||||
- facebook
|
||||
- twitter
|
||||
- wechat
|
||||
- sina_weibo
|
||||
- facebook_messenger
|
||||
- email
|
||||
- copy_link
|
||||
|
||||
# Comments System
|
||||
# ---------------
|
||||
disqus:
|
||||
enable: false
|
||||
shortname:
|
||||
count: true
|
||||
|
||||
# laibili:
|
||||
# enable: false
|
||||
@@ -242,7 +241,7 @@ valine:
|
||||
verify: false # valine verify code (true/false)
|
||||
pageSize: 10 # comment list page size
|
||||
avatar: monsterid # gravatar style https://valine.js.org/#/avatar
|
||||
lang: en # i18n: zh-cn/en
|
||||
lang: en # i18n: zh-cn/en/tw
|
||||
placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
|
||||
guest_info: nick,mail,link #valine comment header inf
|
||||
|
||||
@@ -257,7 +256,8 @@ footer_copyright:
|
||||
|
||||
ICP:
|
||||
enable: false
|
||||
# text:
|
||||
url:
|
||||
text:
|
||||
|
||||
# busuanzi count for PV / UV in site
|
||||
busuanzi:
|
||||
@@ -267,10 +267,6 @@ busuanzi:
|
||||
|
||||
|
||||
|
||||
# Follow Me Button
|
||||
follow:
|
||||
enable: true
|
||||
|
||||
|
||||
# Google Webmaster tools verification setting
|
||||
# See: https://www.google.com/webmasters/
|
||||
@@ -302,20 +298,6 @@ Flink:
|
||||
comment: 如果需要交換友鏈,請留言
|
||||
|
||||
|
||||
## friendlink
|
||||
|
||||
flinks:
|
||||
[
|
||||
{'name': 'JerryC',
|
||||
'link': 'https://jerryc.me/',
|
||||
'avatar': 'https://jerryc.me/img/avatar.png',
|
||||
'descr': '今日事,今日畢'},
|
||||
{'name': 'molunerfinn',
|
||||
'link':'https://molunerfinn.com',
|
||||
'avatar': 'https://blog-1251750343.cos.ap-beijing.myqcloud.com/blog/avatar.jpeg',
|
||||
'descr': 'For MElody'}
|
||||
]
|
||||
|
||||
|
||||
runtimeshow:
|
||||
enable: true
|
||||
@@ -346,7 +328,7 @@ reward:
|
||||
|
||||
related_post:
|
||||
enable: true
|
||||
|
||||
limit: 6 # 顯示推薦文章數目
|
||||
|
||||
# canvas_ribbon
|
||||
# See: https://github.com/hustcc/ribbon.js
|
||||
@@ -413,3 +395,11 @@ translate:
|
||||
#當文字是繁體時，按鈕顯示的文字
|
||||
msgToSimplifiedChinese: "简"
|
||||
|
||||
|
||||
# 鼠標點擊效果
|
||||
fireworks:
|
||||
enable: false
|
||||
|
||||
#百度推送
|
||||
baidu_push:
|
||||
enable: false
|
||||
@@ -50,6 +50,7 @@ pagination:
|
||||
next: Next Post
|
||||
|
||||
comment: Comment
|
||||
relatedPosts_headline: Recommend
|
||||
|
||||
aside:
|
||||
articles: Articles
|
||||
@@ -82,3 +83,5 @@ rightside:
|
||||
font_minus_title: Decrease font size
|
||||
translate_title: Traditional Chinese and Simplified Chinese Conversion
|
||||
night_mode_title: Dark Mode
|
||||
|
||||
runtime_unit: days
|
||||
|
||||
@@ -50,6 +50,7 @@ pagination:
|
||||
next: Next Post
|
||||
|
||||
comment: Comment
|
||||
relatedPosts_headline: Recommend
|
||||
|
||||
aside:
|
||||
articles: Articles
|
||||
@@ -81,3 +82,5 @@ rightside:
|
||||
font_minus_title: Decrease font size
|
||||
translate_title: Traditional Chinese and Simplified Chinese Conversion
|
||||
night_mode_title: Dark Mode
|
||||
|
||||
runtime_unit: days
|
||||
|
||||
@@ -51,6 +51,7 @@ pagination:
|
||||
next: 下一篇
|
||||
|
||||
comment: 评论
|
||||
relatedPosts_headline: 相关推荐
|
||||
|
||||
aside:
|
||||
articles: 文章
|
||||
@@ -82,3 +83,5 @@ rightside:
|
||||
font_minus_title: 缩小字体
|
||||
translate_title: 简繁转换
|
||||
night_mode_title: 夜间模式
|
||||
|
||||
runtime_unit: 天
|
||||
@@ -56,6 +56,7 @@ pagination:
|
||||
next: 下一篇
|
||||
|
||||
comment: 評論
|
||||
relatedPosts_headline: 相關推薦
|
||||
|
||||
aside:
|
||||
articles: 文章
|
||||
@@ -87,3 +88,5 @@ rightside:
|
||||
font_minus_title: 縮小字體
|
||||
translate_title: 簡繁轉換
|
||||
night_mode_title: 夜間模式
|
||||
|
||||
runtime_unit: 天
|
||||
157
layout/flink.pug
157
layout/flink.pug
@@ -1,152 +1,17 @@
|
||||
style.
|
||||
.md-links {
|
||||
min-height: calc(100% - 120px - 5pc - 6em);
|
||||
text-align: center;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.md-links-item {
|
||||
height: 90px;
|
||||
line-height: 17px;
|
||||
margin: 20px 7px;
|
||||
padding: 0px 0px;
|
||||
transition: box-shadow 0.25s;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-property: color;
|
||||
transition-property: color;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.md-links a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
.md-links li {
|
||||
width: calc(100%/3 - 14px);
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
.md-links-item img {
|
||||
float: left;
|
||||
border-radius: 35px;
|
||||
margin: 11px 10px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border: 0px solid #eaeefb;
|
||||
}
|
||||
.md-links-item:hover img{
|
||||
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
|
||||
-moz-transform: rotate(540deg);
|
||||
-o-transform: rotate(540deg);
|
||||
-webkit-transform: rotate(540deg);
|
||||
transform: rotate(540deg);
|
||||
}
|
||||
.md-links-des{
|
||||
padding: 16px 10px;
|
||||
font-size:13px;
|
||||
overflow: hidden;
|
||||
height:50px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.md-links-item:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #2098D1 !important;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
-webkit-transition-property: transform;
|
||||
transition-property: transform;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.md-links-item:hover, .md-links-item:focus, .md-links-item:active {
|
||||
color: white;
|
||||
}
|
||||
.md-links-item:hover:before, .md-links-item:focus:before, .md-links-item:active:before {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
.md-links-item a:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.md-links-title {
|
||||
padding-top: 16px;
|
||||
padding-right: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
height:40px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#scheme-Paradox .mdl-mini-footer{
|
||||
clear: left;
|
||||
}
|
||||
#bottom{
|
||||
position: relative;
|
||||
}
|
||||
.post-cards {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 75px;
|
||||
min-height: 100px;
|
||||
padding: 15px;
|
||||
/*background: #fff;*/
|
||||
border-radius: 15px;
|
||||
}
|
||||
.comment-word{
|
||||
font-weight:bold;
|
||||
font-size:1.7em;
|
||||
}
|
||||
@media screen and (max-width:1100px){
|
||||
.post-cards {
|
||||
position: relative;
|
||||
margin: -20px -16px 0;
|
||||
border-radius: 18px;
|
||||
padding: 16px;
|
||||
}
|
||||
.md-links li {
|
||||
width: calc(100%/2 - 14px);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:600px) {
|
||||
.md-links li {
|
||||
width: calc(100%/1 - 14px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flink
|
||||
p(class="comment-word")= theme.Flink.headline
|
||||
|
||||
div(class="post-cards")
|
||||
ul(class="md-links")
|
||||
- var data = theme.flinks
|
||||
- var i = 0
|
||||
each item in data
|
||||
li(class="md-links-item")
|
||||
each i in site.data.link
|
||||
p.comment-word= i.class_name
|
||||
.post-cards
|
||||
ul.md-links
|
||||
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 alt=item.name onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px")
|
||||
div(class="md-links-title")=item.name
|
||||
div(class="md-links-title")= item.name
|
||||
<br/>
|
||||
div(class="md-links-des")=item.descr
|
||||
|
||||
|
||||
<hr>
|
||||
hr
|
||||
div
|
||||
p(style="font-size:15px;font-weight:bold")= theme.Flink.info_headline
|
||||
ul
|
||||
@@ -155,9 +20,9 @@ style.
|
||||
li= theme.Flink.avatar
|
||||
li= theme.Flink.info
|
||||
|
||||
<hr>
|
||||
div(class="comment_int")
|
||||
p(class="comment-word")= theme.Flink.comment
|
||||
hr
|
||||
.comment_int
|
||||
p.comment-word= theme.Flink.comment
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -9,6 +9,9 @@ if (theme.katex && theme.katex.enable)
|
||||
if (theme.local_search && theme.local_search.enable)
|
||||
script(async src=url_for('/js/search/local-search.js'))
|
||||
|
||||
if theme.fireworks && theme.fireworks.enable
|
||||
script(src='https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js')
|
||||
script(src=url_for('/js/third-party/fireworks.js'))
|
||||
|
||||
if theme.nightshift.enable
|
||||
script(src=url_for('js/nightshift.js'))
|
||||
@@ -19,6 +22,9 @@ if (theme.canvas_ribbon && theme.canvas_ribbon.enable)
|
||||
if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable)
|
||||
include ./third-party/canvas-ribbon-piao.pug
|
||||
|
||||
if theme.baidu_push && theme.baidu_push.enable
|
||||
script(src=url_for('js/baidupush.js'))
|
||||
|
||||
if theme.activate_power_mode.enable
|
||||
script(src=url_for('js/activate-power-mode.js'))
|
||||
script.
|
||||
@@ -79,6 +85,7 @@ if is_home()
|
||||
}
|
||||
})
|
||||
|
||||
if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
|
||||
script(async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js")
|
||||
|
||||
script(async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js")
|
||||
script(src="https://cdn.jsdelivr.net/npm/instant.page@1.2.2/instantpage.min.js" type="module")
|
||||
|
||||
@@ -65,5 +65,5 @@ if theme.valine && theme.valine.enable
|
||||
guest_info:guest_info,
|
||||
pageSize:'#{theme.valine.pageSize}',
|
||||
lang:'#{theme.valine.lang}',
|
||||
visitor: true
|
||||
recordIP: true
|
||||
});
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var translate = 'undefined';
|
||||
if (theme.translate && theme.translate.enable){
|
||||
var defaultEncoding;
|
||||
translate = JSON.stringify({
|
||||
@@ -58,7 +58,9 @@ script.
|
||||
title: '!{_p("bookmark.title")}',
|
||||
message_prev: '!{_p("bookmark.message_prev")}',
|
||||
message_next: '!{_p("bookmark.message_next")}'
|
||||
}
|
||||
},
|
||||
runtime_unit: '!{_p("runtime_unit")}'
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -104,9 +104,10 @@ if theme.qihu_site_verification
|
||||
meta(name="360-site-verification" content=theme.qihu_site_verification)
|
||||
|
||||
|
||||
if (is_archive())
|
||||
- var preload_img = theme.archive_img ||theme.top_img || config.top_img
|
||||
- var preload_archive_img = theme.archive_img ||theme.top_img || config.top_img
|
||||
- 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" )
|
||||
else if (!is_post())
|
||||
- var preload_img = page.top_img||theme.top_img || config.top_img
|
||||
else if (!is_post() && preload_img)
|
||||
link(rel="preload" href=preload_img as="image" )
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
- if (is_category()) pageTitle = _p('page.category') + ': ' + page.category
|
||||
- if (is_month()) pageTitle += ': ' + page.month + '/' + page.year
|
||||
- if (is_year()) pageTitle += ': ' + page.year
|
||||
- var pageTitle_saved //- 暂时存储pageTitle
|
||||
- var pageTitle_no_include_blog_name //- 存储pageTitle， 不带 " | "，meta用
|
||||
//- home时显示config.title (JerryC)，其他显示 pageTitle。meta用
|
||||
- var pageTitle_saved //- 暫時存儲pageTitle
|
||||
- var pageTitle_no_include_blog_name //- 存儲pageTitle， 不帶 " | "，meta用
|
||||
//- home時顯示config.title (JerryC)，其他顯示 pageTitle。meta用
|
||||
- is_home() ? pageTitle_no_include_blog_name = config.title : pageTitle_no_include_blog_name = pageTitle
|
||||
//- 暂时存储pageTitle
|
||||
//- 暫時存儲pageTitle
|
||||
- pageTitle ? pageTitle_saved = pageTitle + ' | ' + config.title : pageTitle_saved = config.title
|
||||
//- home时pageTitle显示 JerryC - subtitle，其他显示 pageTitle | JerryC
|
||||
//- home時pageTitle顯示 JerryC - subtitle，其他顯示 pageTitle | JerryC
|
||||
- is_home() ? pageTitle = config.title + ' - ' + config.subtitle : pageTitle = pageTitle_saved
|
||||
|
||||
- var pageDescription = page.description || page.title || config.description || ''
|
||||
@@ -42,6 +42,8 @@ html(lang=config.language)
|
||||
include ./head.pug
|
||||
include ./config.pug
|
||||
body
|
||||
if theme.fireworks && theme.fireworks.enable
|
||||
canvas.fireworks
|
||||
if (is_post() && page.toc != false && theme.toc.enable)
|
||||
i.fa.fa-arrow-right#toggle-sidebar(aria-hidden="true")
|
||||
include ./sidebar.pug
|
||||
|
||||
@@ -4,11 +4,10 @@ else
|
||||
- var top_img = page.top_img||theme.top_img || config.top_img
|
||||
|
||||
- var bg_img = top_img && top_img !== true ? `background-image: url(${top_img})` : ''
|
||||
- var flag = top_img === true ? 'no-bg' : ''
|
||||
|
||||
|
||||
if is_home()
|
||||
nav#nav.full_page(style=bg_img class=flag)
|
||||
nav#nav.full_page(style=bg_img)
|
||||
include ./header.pug
|
||||
#site-info
|
||||
#site-title
|
||||
@@ -26,7 +25,7 @@ if is_home()
|
||||
i.fa.fa-angle-down.scroll-down-effects
|
||||
|
||||
else
|
||||
nav#nav.bg_local(style=bg_img class=flag)
|
||||
nav#nav.bg_local(style=bg_img)
|
||||
include ./header.pug
|
||||
#page_site-info
|
||||
#site-title
|
||||
|
||||
@@ -54,6 +54,6 @@ each article , index in page.posts.data
|
||||
.more_setting
|
||||
a.more.more--border.more--primary.more--animated(href=url_for(link) + '#more' style="margin-top: 14px")= _p('read_more')
|
||||
else
|
||||
.content!= post_description
|
||||
.content!= article.description
|
||||
|
||||
|
||||
|
||||
6
layout/includes/related-posts.pug
Normal file
6
layout/includes/related-posts.pug
Normal file
@@ -0,0 +1,6 @@
|
||||
.relatedPosts
|
||||
.relatedPosts_headline
|
||||
i.fa.fa-thumbs-up(aria-hidden="true")
|
||||
span=' ' + _p('relatedPosts_headline')
|
||||
.relatedPosts_list!= related_posts(page,site.posts)
|
||||
.clear_both
|
||||
@@ -10,7 +10,7 @@
|
||||
#local-stats
|
||||
#hr.local-search-stats__hr
|
||||
case config.language
|
||||
when "zh-Hans"
|
||||
when "zh-CN"
|
||||
span=_p("local_search.by")
|
||||
| #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
|
||||
| #[span=_p("local_search.powered")]
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
.addthis_inline_share_toolbox.pull-right
|
||||
.addthis_inline_share_toolbox
|
||||
script(src=`//s7.addthis.com/js/300/addthis_widget.js#pubid=${theme.addThis.pubid}` async)
|
||||
@@ -1,12 +1,8 @@
|
||||
.addtoany
|
||||
.a2a_kit.a2a_kit_size_32.a2a_default_style
|
||||
a.a2a_button_facebook
|
||||
a.a2a_button_twitter
|
||||
a.a2a_button_wechat
|
||||
a.a2a_button_sina_weibo
|
||||
a.a2a_button_facebook_messenger
|
||||
a.a2a_button_email
|
||||
a.a2a_button_copy_link
|
||||
each name in theme.addtoany.item
|
||||
a(class="a2a_button_" + name)
|
||||
|
||||
a.a2a_dd(href="https://www.addtoany.com/share")
|
||||
script(async src="https://static.addtoany.com/menu/page.js")
|
||||
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
extends includes/layout.pug
|
||||
|
||||
block top_img
|
||||
- var top_img = page.top_img || page.cover || theme.post_meta.top_img || theme.post_img || config.top_img
|
||||
if (top_img && page.top_img !== false)
|
||||
- var top_img = page.top_img || page.cover || theme.post_meta.top_img || theme.post_img || theme.top_img || config.top_img
|
||||
- var bg_img = top_img !== true ? `background-image: url(${top_img})` : ''
|
||||
- var flag = top_img === true ? 'no-bg' : ''
|
||||
div#top-container(style=bg_img class=flag)
|
||||
div#top-container(style=bg_img)
|
||||
include ./includes/header.pug
|
||||
#post-info
|
||||
#post-title
|
||||
@@ -32,18 +30,6 @@ block top_img
|
||||
a(href=url_for(item.path)).post-meta__categories #[=item.name]
|
||||
if (index < page.categories.data.length - 1)
|
||||
i.fa.fa-angle-right(aria-hidden="true")
|
||||
//- if (theme.disqus.enable && theme.disqus.count)
|
||||
//- if (theme.post_meta.date_type || theme.post_meta.categories && page.categories.data.length > 0)
|
||||
//- span.post-meta__separator |
|
||||
//- i.fa.fa-comment-o.post-meta__icon(aria-hidden="true")
|
||||
//- a(href=url_for(page.path) + '#disqus_thread')
|
||||
//- span.disqus-comment-count(data-disqus-identifier=page.path)
|
||||
//- if theme.valine && theme.valine.enable
|
||||
//- if (theme.post_meta.date_type || theme.post_meta.categories && page.categories.data.length > 0)
|
||||
//- span.post-meta__separator |
|
||||
//- i.fa.fa-comment-o.post-meta__icon(aria-hidden="true")
|
||||
//- a(href=url_for(page.path) + '#vcomment')
|
||||
//- pan.valine-comment-count(data-xid=url_for(page.path))
|
||||
if (theme.wordcount && theme.wordcount.enable)
|
||||
.post-meta-wordcount
|
||||
span= _p('post.wordcount') + ': '
|
||||
@@ -55,57 +41,9 @@ block top_img
|
||||
span= _p('post.page_pv') + ': '
|
||||
span#busuanzi_value_page_pv
|
||||
|
||||
else
|
||||
div#top-container.plain
|
||||
include ./includes/header.pug
|
||||
|
||||
block content
|
||||
article#post(class="")
|
||||
if (!top_img)
|
||||
#post-title.plain= page.title || _p('no_title')
|
||||
#post-meta
|
||||
if (theme.post_meta.date_type)
|
||||
if (theme.post_meta.date_type === 'both')
|
||||
time.post-meta__date
|
||||
i.fa.fa-calendar(aria-hidden="true")
|
||||
=' '+_p('post.created')+' '+date(page.date, config.date_format)
|
||||
span.post-meta__separator |
|
||||
i.fa.fa-history(aria-hidden="true")
|
||||
=' '+_p('post.updated')+' '+date(page.updated, config.date_format)
|
||||
else
|
||||
- var date_type = theme.post_meta.date_type === 'updated' ? 'updated' : 'date'
|
||||
time.post-meta__date #[i.fa.fa-calendar(aria-hidden="true")] #[=date(page[date_type], config.date_format)]
|
||||
|
||||
if (theme.post_meta.categories && page.categories.data.length > 0)
|
||||
if (theme.post_meta.date_type)
|
||||
span.post-meta__separator.mobile_hidden |
|
||||
span.mobile_hidden
|
||||
each item, index in page.categories.data
|
||||
i.fa.fa-inbox.post-meta__icon(aria-hidden="true")
|
||||
a(href=url_for(item.path)).post-meta__categories #[=item.name]
|
||||
if (index < page.categories.data.length - 1)
|
||||
i.fa.fa-angle-right(aria-hidden="true")
|
||||
//- if (theme.disqus.enable && theme.disqus.count)
|
||||
//- if (theme.post_meta.date_type || theme.post_meta.categories && page.categories.data.length > 0)
|
||||
//- span.post-meta__separator |
|
||||
//- i.fa.fa-comment-o(aria-hidden="true")
|
||||
//- a(href=url_for(page.path) + '#disqus_thread')
|
||||
//- span.disqus-comment-count(data-disqus-identifier=page.path)
|
||||
//- if theme.valine && theme.valine.enable
|
||||
//- if (theme.post_meta.date_type || theme.post_meta.categories && page.categories.data.length > 0)
|
||||
//- span.post-meta__separator |
|
||||
//- i.fa.fa-comment-o(aria-hidden="true")
|
||||
//- a(href=url_for(page.path) + '#vcomment')
|
||||
//- span.valine-comment-count(data-xid=url_for(page.path))
|
||||
if (theme.wordcount && theme.wordcount.enable)
|
||||
span.post-meta__separator |
|
||||
span.post-meta-wordcount
|
||||
span= _p('post.wordcount') + ': '
|
||||
span.word-count= wordcount(page.content)
|
||||
span.post-meta__separator |
|
||||
span= _p('post.min2read', min2read(page.content, {cn: 350, en: 160}))
|
||||
|
||||
|
||||
#post-content.article-container!= page.content
|
||||
if (theme.post_copyright && theme.post_copyright.enable)
|
||||
.post-copyright
|
||||
@@ -133,8 +71,6 @@ block content
|
||||
include includes/pagination.pug
|
||||
|
||||
if theme.related_post && theme.related_post.enable
|
||||
div.relatedPosts!= related_posts(page,site.posts)
|
||||
if (theme.adv && theme.adv.enable)
|
||||
.post-adv!= theme.adv.info
|
||||
include includes/related-posts.pug
|
||||
if page.comments !== false
|
||||
include includes/comments/index.pug
|
||||
@@ -21,19 +21,17 @@ hexo.extend.helper.register('related_posts', function(currentPost, allPosts){
|
||||
});
|
||||
});
|
||||
if (relatedPosts.length == 0) {return ''};
|
||||
var result = '<div class="relatedPosts_headling"><i class="fa fa-thumbs-up" aria-hidden="true"></i><span> 相關文章</span></div><div class="relatedPosts_list">';
|
||||
var result = "";
|
||||
var limit_num = hexo.theme.config.related_post.limit || 6
|
||||
relatedPosts = relatedPosts.sort(compare('weight'));
|
||||
for (var i = 0; i < Math.min(relatedPosts.length, 6); i++) {
|
||||
for (var i = 0; i < Math.min(relatedPosts.length, limit_num); i++) {
|
||||
|
||||
var cover = relatedPosts[i].cover || hexo.theme.config.default_cover || data.melody.default_cover
|
||||
result += '<div class="relatedPosts_item"><a href="/' + relatedPosts[i].path + '">';
|
||||
var cover = relatedPosts[i].cover|| hexo.theme.config.default_cover|| data.butterfly.default_cover
|
||||
result += '<div class="relatedPosts_item"><a href="/' + relatedPosts[i].path + '" title="' + relatedPosts[i].title +'">';
|
||||
result += '<img class="relatedPosts_cover lozad" data-src="' + cover + '">';
|
||||
result += '<div class="relatedPosts_title">' + relatedPosts[i].title + '</div>';
|
||||
result += '</a></div>'
|
||||
};
|
||||
result += '</div>';
|
||||
result += '<div class="clear_both"></div>';
|
||||
// console.log(relatedPosts);
|
||||
}; // console.log(relatedPosts);
|
||||
return result;
|
||||
});
|
||||
hexo.extend.helper.register('echo', function(path){
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
/**
|
||||
* Note: configs in _data/melody.yml will replace configs in hexo.theme.config.
|
||||
* Note: configs in _data/butterfly.yml will replace configs in hexo.theme.config.
|
||||
*/
|
||||
|
||||
hexo.on('generateBefore', function () {
|
||||
const rootConfig = hexo.config
|
||||
if (hexo.locals.get) {
|
||||
const data = hexo.locals.get('data')
|
||||
data && data.melody && (hexo.theme.config = data.melody)
|
||||
data && data.butterfly && (hexo.theme.config = data.butterfly)
|
||||
}
|
||||
hexo.theme.config.rootConfig = rootConfig
|
||||
})
|
||||
@@ -153,11 +153,11 @@ table
|
||||
font-size: 0.65rem
|
||||
|
||||
button
|
||||
font-size: .7rem;
|
||||
padding: .3rem 1rem;
|
||||
background-color: #49b1f5;
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
font-size: .7rem
|
||||
padding: .3rem 1rem
|
||||
background-color: $light-blue
|
||||
color: #fff
|
||||
border-color: #fff
|
||||
|
||||
textarea
|
||||
font-size: 0.7rem
|
||||
@@ -223,7 +223,7 @@ table
|
||||
#readmode,#font_plus,#font_minus
|
||||
width: 30px
|
||||
height: 30px
|
||||
background-color: #49b1f5
|
||||
background-color: $light-blue
|
||||
color: #e3e8ee
|
||||
text-align: center
|
||||
line-height: 29px
|
||||
@@ -239,7 +239,7 @@ table
|
||||
.translate_chn_to_cht
|
||||
width: 30px
|
||||
height: 30px
|
||||
background-color: #49b1f5
|
||||
background-color: $light-blue
|
||||
color: #e3e8ee
|
||||
text-align: center
|
||||
line-height: 29px
|
||||
@@ -252,7 +252,7 @@ table
|
||||
.nightshift
|
||||
width: 30px
|
||||
height: 30px
|
||||
background-color: #49b1f5
|
||||
background-color: $light-blue
|
||||
color: #e3e8ee
|
||||
text-align: center
|
||||
font-size: 17px
|
||||
@@ -347,3 +347,8 @@ table
|
||||
|
||||
.is_visible
|
||||
display: block !important
|
||||
|
||||
.fireworks
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
@@ -2,7 +2,7 @@
|
||||
@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" "gradle" "groovy" "ejs" "swig"
|
||||
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()
|
||||
@@ -39,7 +39,7 @@ blockquote
|
||||
padding: 0.1rem 0.8rem
|
||||
border-left: 0.2rem solid $blockquote-padding-color
|
||||
color: $blockquote-color
|
||||
background-color: $blockquote-background-color
|
||||
background-color: lighten($blockquote-padding-color,33)
|
||||
|
||||
.article-container
|
||||
pre,
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
margin-top: .2rem
|
||||
padding: 0 1rem
|
||||
height: 1.6rem
|
||||
background: #49b1f5
|
||||
background: $light-blue
|
||||
color: #fff
|
||||
text-decoration: none
|
||||
line-height: 1.6rem
|
||||
@@ -96,7 +96,7 @@
|
||||
z-index: 1
|
||||
|
||||
.toggle_change--primary,.bookmark--primary
|
||||
color: $cyan
|
||||
color: $ruby
|
||||
|
||||
.toggle_change--animated,.bookmark--animated
|
||||
transition-property: color
|
||||
@@ -109,7 +109,7 @@
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
background: $cyan
|
||||
background: $ruby
|
||||
transform: scaleX(0)
|
||||
transform-origin: 0 50%
|
||||
transition-property: transform
|
||||
|
||||
133
source/css/_layout/flink.styl
Normal file
133
source/css/_layout/flink.styl
Normal file
@@ -0,0 +1,133 @@
|
||||
.flink
|
||||
.md-links
|
||||
min-height: calc(100% - 120px - 5pc - 6em)
|
||||
text-align: center
|
||||
overflow: auto
|
||||
padding: 0
|
||||
margin: 0 auto
|
||||
|
||||
a
|
||||
color: #333
|
||||
text-decoration: none
|
||||
|
||||
li
|
||||
width: calc(100%/3 - 14px)
|
||||
float: left
|
||||
list-style: none
|
||||
|
||||
.md-links-item
|
||||
height: 90px
|
||||
line-height: 17px
|
||||
margin: 20px 7px
|
||||
padding: 0px 0px
|
||||
transition: box-shadow 0.25s
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
border-radius: 8px
|
||||
-webkit-transform: perspective(1px) translateZ(0)
|
||||
transform: perspective(1px) translateZ(0)
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
|
||||
position: relative
|
||||
-webkit-transition-property: color
|
||||
transition-property: color
|
||||
-webkit-transition-duration: 0.3s
|
||||
transition-duration: 0.3s
|
||||
|
||||
img
|
||||
float: left
|
||||
border-radius: 35px
|
||||
margin: 11px 10px
|
||||
width: 70px
|
||||
height: 70px
|
||||
border: 0px solid #eaeefb
|
||||
|
||||
&:hover
|
||||
img
|
||||
filter: unqoute("progid:DXImageTransform.Microsoft.BasicImage(rotation=3)")
|
||||
-moz-transform: rotate(540deg)
|
||||
-o-transform: rotate(540deg)
|
||||
-webkit-transform: rotate(540deg)
|
||||
transform: rotate(540deg)
|
||||
|
||||
&:before
|
||||
content: ""
|
||||
position: absolute
|
||||
z-index: -1
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
background: $light-blue !important
|
||||
-webkit-transform: scale(0)
|
||||
transform: scale(0)
|
||||
-webkit-transition-property: transform
|
||||
transition-property: transform
|
||||
-webkit-transition-duration: 0.3s
|
||||
transition-duration: 0.3s
|
||||
-webkit-transition-timing-function: ease-out
|
||||
transition-timing-function: ease-out
|
||||
|
||||
.md-links-item:hover,
|
||||
.md-links-item:focus,
|
||||
.md-links-item:active
|
||||
color: white
|
||||
|
||||
.md-links-item:hover:before,
|
||||
.md-links-item:focus:before,
|
||||
.md-links-item:active:before
|
||||
-webkit-transform: scale(1)
|
||||
transform: scale(1)
|
||||
|
||||
.md-links-item a:hover
|
||||
cursor: pointer
|
||||
|
||||
.md-links-title
|
||||
padding-top: 16px
|
||||
padding-right: 10px
|
||||
font-size: 20px
|
||||
font-weight: bold
|
||||
height:40px
|
||||
overflow: hidden
|
||||
white-space: nowrap
|
||||
text-overflow: ellipsis
|
||||
|
||||
.post-cards
|
||||
margin-top: 5px
|
||||
min-height: 100px
|
||||
padding: 15px
|
||||
border-radius: 15px
|
||||
|
||||
.comment-word
|
||||
font-weight:bold
|
||||
font-size:1.7em
|
||||
|
||||
.md-links-des
|
||||
padding: 16px 10px
|
||||
font-size:13px
|
||||
overflow: hidden
|
||||
height:50px
|
||||
white-space: nowrap
|
||||
text-overflow: ellipsis
|
||||
|
||||
@media screen and (max-width:1100px)
|
||||
.flink
|
||||
.post-cards
|
||||
position: relative
|
||||
margin: -20px -16px 0
|
||||
border-radius: 18px
|
||||
padding: 16px
|
||||
|
||||
.md-links
|
||||
li
|
||||
width: calc(100%/2 - 14px)
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width:600px)
|
||||
.flink
|
||||
.md-links
|
||||
li
|
||||
width: calc(100%/1 - 14px)
|
||||
|
||||
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
footer
|
||||
$bg-svg += ""
|
||||
margin-top: 1rem
|
||||
background: $light-blue
|
||||
// background-image: url($bg-svg)
|
||||
background-attachment: local
|
||||
|
||||
&.footer-bg
|
||||
|
||||
@@ -14,11 +14,6 @@
|
||||
background-attachment: local
|
||||
|
||||
|
||||
&.no-bg
|
||||
$bg-svg += ""
|
||||
background-image: url($bg-svg) !important
|
||||
background-size: initial
|
||||
|
||||
#site-social-icons
|
||||
margin: 0 auto
|
||||
width: 15rem
|
||||
|
||||
@@ -65,6 +65,7 @@ if hexo-config("nightshift") && hexo-config("nightshift.enable")
|
||||
blockquote
|
||||
border-left: 0.2rem solid #7A5353
|
||||
color: #99a9bf
|
||||
background-color: #2f3d49
|
||||
|
||||
hr
|
||||
background: 0
|
||||
|
||||
@@ -1,16 +1,6 @@
|
||||
#post-title
|
||||
font-size: 1.4rem
|
||||
|
||||
&.plain
|
||||
margin-bottom: 0.3rem
|
||||
border-bottom: 1px solid $light-grey
|
||||
cursor: pointer
|
||||
transition: all 0.2s ease-in-out
|
||||
|
||||
&:hover
|
||||
border-bottom: 1px solid $light-blue
|
||||
color: $light-blue
|
||||
|
||||
#post
|
||||
overflow: hidden
|
||||
|
||||
@@ -47,16 +37,6 @@
|
||||
background-color: #394245;
|
||||
background-image: linear-gradient(234deg, #394245 0%, #000 100%);
|
||||
|
||||
&.no-bg
|
||||
$bg-svg += ""
|
||||
background-color: $light-blue
|
||||
background-image: url($bg-svg) !important
|
||||
background-size: auto
|
||||
|
||||
&.plain
|
||||
margin-bottom: 1rem
|
||||
height: 56px
|
||||
|
||||
a
|
||||
color: $light-grey
|
||||
text-decoration: none
|
||||
@@ -229,8 +209,6 @@ img
|
||||
a
|
||||
word-break: break-word
|
||||
|
||||
.post-adv
|
||||
margin: 1rem 0
|
||||
|
||||
@media screen and (max-width: $sm)
|
||||
.layout
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
margin: 0 auto
|
||||
text-align: center
|
||||
|
||||
.relatedPosts_headling
|
||||
.relatedPosts_headline
|
||||
font-size: 20px
|
||||
font-weight: 700
|
||||
margin-bottom: 5px
|
||||
|
||||
@@ -11,11 +11,11 @@
|
||||
cursor: pointer
|
||||
color: #fff
|
||||
line-height: 36px
|
||||
background: #49b1f5
|
||||
background: $light-blue
|
||||
width: 80px
|
||||
|
||||
&:hover
|
||||
background: #00c4b6
|
||||
background: darken($light-blue,30)
|
||||
|
||||
.reward-main
|
||||
display: block
|
||||
|
||||
@@ -82,6 +82,7 @@ a.article-meta__categories
|
||||
text-transform: uppercase
|
||||
overflow: hidden
|
||||
z-index: 1
|
||||
background-color: $light-blue
|
||||
|
||||
&:focus {
|
||||
outline: none
|
||||
@@ -89,17 +90,13 @@ a.article-meta__categories
|
||||
}
|
||||
|
||||
.more--primary {
|
||||
color: lightslategray
|
||||
color: $white
|
||||
}
|
||||
|
||||
.more--animated {
|
||||
transition-property: color
|
||||
transition-duration: 0.5s
|
||||
|
||||
&.more--border.more--primary {
|
||||
border: 1px solid lightslategray
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: ""
|
||||
position: absolute
|
||||
@@ -107,7 +104,7 @@ a.article-meta__categories
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
background: lightslategray
|
||||
background: $ruby
|
||||
transform: scaleX(0)
|
||||
transform-origin: 0 50%
|
||||
transition-property: transform
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -3,21 +3,13 @@ var start_date = document.getElementById("runtionshow").getAttribute("start_date
|
||||
|
||||
function show_date_time() {
|
||||
window.setTimeout("show_date_time()", 1000);
|
||||
BirthDay=new Date(start_date);//這個日期是可以修改的
|
||||
BirthDay=new Date(start_date);
|
||||
today=new Date();
|
||||
timeold=(today.getTime()-BirthDay.getTime());//其實僅僅改了這裏
|
||||
// sectimeold=timeold/1000
|
||||
// secondsold=Math.floor(sectimeold);
|
||||
timeold=(today.getTime()-BirthDay.getTime());
|
||||
msPerDay=24*60*60*1000
|
||||
e_daysold=timeold/msPerDay
|
||||
daysold=Math.floor(e_daysold);
|
||||
// e_hrsold=(e_daysold-daysold)*24;
|
||||
// hrsold=Math.floor(e_hrsold);
|
||||
// e_minsold=(e_hrsold-hrsold)*60;
|
||||
// minsold=Math.floor((e_hrsold-hrsold)*60);
|
||||
// seconds=Math.floor((e_minsold-minsold)*60);
|
||||
// span_dt_dt.innerHTML = "已運行 " + daysold + " 天 " + hrsold + " 時 " + minsold + " 分 " + seconds + " 秒";
|
||||
webinfo_runtime_count.innerHTML= daysold + " 天"
|
||||
webinfo_runtime_count.innerHTML= daysold + " " + GLOBAL_CONFIG.runtime_unit
|
||||
}
|
||||
|
||||
show_date_time()
|
||||
|
||||
129
source/js/third-party/fireworks.js
vendored
Normal file
129
source/js/third-party/fireworks.js
vendored
Normal file
@@ -0,0 +1,129 @@
|
||||
var canvasEl = document.querySelector('.fireworks')
|
||||
if (canvasEl) {
|
||||
var ctx = canvasEl.getContext('2d')
|
||||
var numberOfParticules = 30
|
||||
var pointerX = 0
|
||||
var pointerY = 0
|
||||
// var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown'
|
||||
// Fixed the mobile scroll
|
||||
var tap = 'mousedown'
|
||||
var colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']
|
||||
|
||||
var setCanvasSize = debounce(function () {
|
||||
canvasEl.width = window.innerWidth
|
||||
canvasEl.height = window.innerHeight
|
||||
canvasEl.style.width = window.innerWidth + 'px'
|
||||
canvasEl.style.height = window.innerHeight + 'px'
|
||||
canvasEl.getContext('2d').scale(1, 1)
|
||||
}, 500)
|
||||
|
||||
var render = anime({
|
||||
duration: Infinity,
|
||||
update: function () {
|
||||
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener(tap, function (e) {
|
||||
if (e.target.id !== 'sidebar' && e.target.id !== 'toggle-sidebar' && e.target.nodeName !== 'A' && e.target.nodeName !== 'IMG') {
|
||||
render.play()
|
||||
updateCoords(e)
|
||||
animateParticules(pointerX, pointerY)
|
||||
}
|
||||
}, false)
|
||||
|
||||
setCanvasSize()
|
||||
window.addEventListener('resize', setCanvasSize, false)
|
||||
}
|
||||
|
||||
function updateCoords (e) {
|
||||
pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left
|
||||
pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
|
||||
}
|
||||
|
||||
function setParticuleDirection (p) {
|
||||
var angle = anime.random(0, 360) * Math.PI / 180
|
||||
var value = anime.random(50, 180)
|
||||
var radius = [-1, 1][anime.random(0, 1)] * value
|
||||
return {
|
||||
x: p.x + radius * Math.cos(angle),
|
||||
y: p.y + radius * Math.sin(angle)
|
||||
}
|
||||
}
|
||||
|
||||
function createParticule (x, y) {
|
||||
var p = {}
|
||||
p.x = x
|
||||
p.y = y
|
||||
p.color = colors[anime.random(0, colors.length - 1)]
|
||||
p.radius = anime.random(16, 32)
|
||||
p.endPos = setParticuleDirection(p)
|
||||
p.draw = function () {
|
||||
ctx.beginPath()
|
||||
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = p.color
|
||||
ctx.fill()
|
||||
}
|
||||
return p
|
||||
}
|
||||
|
||||
function createCircle (x, y) {
|
||||
var p = {}
|
||||
p.x = x
|
||||
p.y = y
|
||||
p.color = '#F00'
|
||||
p.radius = 0.1
|
||||
p.alpha = 0.5
|
||||
p.lineWidth = 6
|
||||
p.draw = function () {
|
||||
ctx.globalAlpha = p.alpha
|
||||
ctx.beginPath()
|
||||
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
|
||||
ctx.lineWidth = p.lineWidth
|
||||
ctx.strokeStyle = p.color
|
||||
ctx.stroke()
|
||||
ctx.globalAlpha = 1
|
||||
}
|
||||
return p
|
||||
}
|
||||
|
||||
function renderParticule (anim) {
|
||||
for (var i = 0; i < anim.animatables.length; i++) {
|
||||
anim.animatables[i].target.draw()
|
||||
}
|
||||
}
|
||||
|
||||
function animateParticules (x, y) {
|
||||
var circle = createCircle(x, y)
|
||||
var particules = []
|
||||
for (var i = 0; i < numberOfParticules; i++) {
|
||||
particules.push(createParticule(x, y))
|
||||
}
|
||||
anime.timeline().add({
|
||||
targets: particules,
|
||||
x: function (p) {
|
||||
return p.endPos.x
|
||||
},
|
||||
y: function (p) {
|
||||
return p.endPos.y
|
||||
},
|
||||
radius: 0.1,
|
||||
duration: anime.random(1200, 1800),
|
||||
easing: 'easeOutExpo',
|
||||
update: renderParticule
|
||||
})
|
||||
.add({
|
||||
targets: circle,
|
||||
radius: anime.random(80, 160),
|
||||
lineWidth: 0,
|
||||
alpha: {
|
||||
value: 0,
|
||||
easing: 'linear',
|
||||
duration: anime.random(600, 800)
|
||||
},
|
||||
duration: anime.random(1200, 1800),
|
||||
easing: 'easeOutExpo',
|
||||
update: renderParticule,
|
||||
offset: 0
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user