Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: remove wow #51

Merged
merged 5 commits into from
Oct 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,6 @@ vendor:
instantsearch: webcache|[email protected]/dist/instantsearch.production.min.js
pace: webcache|[email protected]/pace.min.js
mermaid: webcache|[email protected]/dist/mermaid.min.js
wow: webcache|[email protected]/dist/wow.min.js
firework: webcache|[email protected]/dist/index.umd.js
pjax: webcache|[email protected]/dist/index.umd.js
live2d:
Expand All @@ -328,4 +327,4 @@ vendor:
- webcache|@fortawesome/[email protected]/css/brands.min.css
- webcache|@fortawesome/[email protected]/css/v5-font-face.min.css
- webcache|@fortawesome/[email protected]/css/v4-font-face.min.css
animate: webcache|[email protected]/css/libs/animate.css
aos: webcache|@reimujs/[email protected]/dist/aos.css
19 changes: 19 additions & 0 deletions layout/_partial/after-footer.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,25 @@

<%- js('js/script.js') %>

<% if (theme.animation.enable) { %>
<%- js('js/aos.js') %>
<script>
var aosInit = () => {
AOS.init({
duration: 1000,
easing: "ease",
once: true,
offset: 50,
});
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', aosInit);
} else {
aosInit();
}
</script>
<% } %>

<%- js({src: 'js/pjax_script.js', 'data-pjax': true}) %>

<script type="module" data-pjax>
Expand Down
10 changes: 5 additions & 5 deletions layout/_partial/archive.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
<%- partial('post', {post: post, index: true, even: i % 2 === 0}) %>
<% }) %>
<% } else { %>
<div class="archives-outer-wrap wow fadeInUp">
<div class="archives-outer-wrap" data-aos="fade-up">
<div class="tag-wrap">
<% site.tags.each((tag, i) => { %>
<div class="archives-tag-list-item">
<div class="archives-tag-list-item" data-aos="zoom-in">
<a class="archives-tag-list-link" href="/<%= tag.path %>"><%= tag.name %></a>
</div>
<% }) %>
</div>
<div class="category-wrap">
<% site.categories.each((cagetory, i) => { %>
<div class="archives-category-list-item">
<div class="archives-category-list-item" data-aos="zoom-in">
<a class="archives-category-list-link" href="/<%= cagetory.path %>"><%= cagetory.name %></a>
</div>
<% }) %>
Expand All @@ -26,7 +26,7 @@
</section>
<% } %>
<% last = year; %>
<section class="archives-wrap wow fadeInUp">
<section class="archives-wrap" data-aos="fade-up">
<div class="archive-year-wrap">
<a href="<%- url_for(config.archive_dir + '/' + year) %>" class="archive-year"><%= year %></a>
</div>
Expand All @@ -41,7 +41,7 @@
</div>
<% } %>
<% if (page.total > 1) { %>
<nav id="page-nav" class="wow fadeInUp">
<nav id="page-nav" data-aos="fade-up">
<% var prev_text = "&laquo; " + __('prev');var next_text = __('next') + " &raquo;" %>
<%- paginator({
prev_text: prev_text,
Expand Down
2 changes: 1 addition & 1 deletion layout/_partial/footer.ejs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<footer id="footer" class="wow fadeInUp">
<footer id="footer">
<div style="width: 100%; overflow: hidden">
<div class="footer-line"></div>
</div>
Expand Down
10 changes: 1 addition & 9 deletions layout/_partial/head.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -59,14 +59,6 @@
<% } %>
<%- js(vendorCdn(theme.vendor.js.pace)) %>
<% if (theme.animation.enable) { %>
<%- css(vendorCdn(theme.vendor.css.animate)) %>
<%- js(vendorCdn(theme.vendor.js.wow)) %>
<script>
new WOW({
offset: 0,
mobile: true,
live: false
}).init();
</script>
<%- css(vendorCdn(theme.vendor.css.aos)) %>
<% } %>
</head>
8 changes: 6 additions & 2 deletions layout/_partial/post.ejs
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<% if (even === true) { %>
<div class="post-wrap-left wow fadeInUp">
<div class="post-wrapper">
<div class="post-wrap-left" data-aos="fade-up">
<% if (post.link) { %>
<a class="post-link" href="<%- url_for(post.link, {relative: false}) %>" itemprop="url" target="_blank" aria-label="<%= post.title %>"></a>
<% } else { %>
Expand Down Expand Up @@ -36,8 +37,10 @@
</article>
</div>
</div>
</div>
<% } else { %>
<div class="post-wrap-right wow fadeInUp">
<div class="post-wrapper">
<div class="post-wrap-right" data-aos="fade-up">
<% if (post.link) { %>
<a class="post-link" href="<%- url_for(post.link, {relative: false}) %>" itemprop="url" target="_blank" aria-label="<%= post.title %>"></a>
<% } else { %>
Expand Down Expand Up @@ -71,4 +74,5 @@
</article>
</div>
</div>
</div>
<% } %>
14 changes: 7 additions & 7 deletions layout/_partial/post/category.ejs
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<% if (post.categories && post.categories.length) { %>
<div class="article-category wow slideInLeft">
<%- list_categories(post.categories, {
show_count: false,
class: 'article-category',
style: 'none',
separator: ''
}) %>
<div class="article-category">
<%- listCategories(post.categories, {
show_count: false,
class: 'article-category',
style: 'none',
separator: ''
}, "zoom-in") %>
</div>
<% } %>
4 changes: 2 additions & 2 deletions layout/_partial/post/date.ejs
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="<%= class_name %> wow slideInLeft">
<a href="<%- url_for(post.path) %>" class="article-date-link">
<div class="<%= class_name %>">
<a href="<%- url_for(post.path) %>" class="article-date-link" data-aos="zoom-in">
<time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"><%= date(post.date, date_format) %></time>
<time style="display: none;" id="post-update-time"><%= date(post.updated, date_format) %></time>
</a>
Expand Down
2 changes: 1 addition & 1 deletion layout/_partial/post/nav.ejs
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<% if (post.prev || post.next) { %>
<nav id="article-nav" class="wow fadeInUp">
<nav id="article-nav" data-aos="fade-up">
<% if (post.prev) { %>
<div class="article-nav-link-wrap article-nav-link-left">
<% if (post.prev.cover) { %>
Expand Down
4 changes: 2 additions & 2 deletions layout/_partial/post/tag.ejs
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<% if (post.tags && post.tags.length) { %>
<%- list_tags(post.tags, {
<%- listTags(post.tags, {
show_count: false,
class: 'article-tag'
}) %>
}, 'zoom-in') %>
<% } %>
28 changes: 15 additions & 13 deletions layout/_partial/sidebar.ejs
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
<aside id="sidebar">
<div class="sidebar-wrap wow fadeInRight <% if (is_post()) { %>wrap-sticky<% } %>">
<% if (is_post()) { %>
<div class="sidebar-toc-sidebar"><%- partial('sidebar/toc-sidebar') %></div>
<div class="sidebar-common-sidebar hidden"><%- partial('sidebar/common-sidebar') %></div>
<% } else { %>
<%- partial('sidebar/common-sidebar') %>
<% } %>
<% if (is_post()) { %>
<div class="sidebar-btn-wrapper" style="position:static">
<div class="sidebar-toc-btn current"></div>
<div class="sidebar-common-btn"></div>
</div>
<% } %>
<div class="sidebar-wrapper">
<div class="sidebar-wrap <% if (is_post()) { %>wrap-sticky<% } %>" data-aos="fade-up">
<% if (is_post()) { %>
<div class="sidebar-toc-sidebar"><%- partial('sidebar/toc-sidebar') %></div>
<div class="sidebar-common-sidebar hidden"><%- partial('sidebar/common-sidebar') %></div>
<% } else { %>
<%- partial('sidebar/common-sidebar') %>
<% } %>
<% if (is_post()) { %>
<div class="sidebar-btn-wrapper" style="position:static">
<div class="sidebar-toc-btn current"></div>
<div class="sidebar-common-btn"></div>
</div>
<% } %>
</div>
</div>

<% if (!is_post() && theme.widgets) { %>
Expand Down
10 changes: 6 additions & 4 deletions layout/_widget/archive.ejs
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<% if (site.posts.length) { %>
<div class="widget-wrap wow fadeInRight">
<h3 class="widget-title"><%= __('archive_a') %></h3>
<div class="widget">
<%- list_archives({show_count: theme.show_count, type: theme.archive_type}) %>
<div class="widget-wrapper">
<div class="widget-wrap" data-aos="fade-up">
<h3 class="widget-title"><%= __('archive_a') %></h3>
<div class="widget">
<%- list_archives({show_count: theme.show_count, type: theme.archive_type}) %>
</div>
</div>
</div>
<% } %>
10 changes: 6 additions & 4 deletions layout/_widget/category.ejs
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<% if (site.categories.length) { %>
<div class="widget-wrap wow fadeInRight">
<h3 class="widget-title"><%= __('categories') %></h3>
<div class="widget">
<%- list_categories({show_count: theme.show_count}) %>
<div class="widget-wrapper">
<div class="widget-wrap" data-aos="fade-up">
<h3 class="widget-title"><%= __('categories') %></h3>
<div class="widget">
<%- list_categories({show_count: theme.show_count}) %>
</div>
</div>
</div>
<% } %>
22 changes: 12 additions & 10 deletions layout/_widget/recent_posts.ejs
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
<% if (site.posts.length) { %>
<div class="widget-wrap wow fadeInRight">
<h3 class="widget-title"><%= __('recent_posts') %></h3>
<div class="widget">
<ul>
<% site.posts.sort('date', -1).limit(theme.recent_posts_limits).each((post) => { %>
<li>
<a href="<%- url_for(post.path) %>"><%= post.title || '(no title)' %></a>
</li>
<% }) %>
</ul>
<div class="widget-wrapper">
<div class="widget-wrap" data-aos="fade-up">
<h3 class="widget-title"><%= __('recent_posts') %></h3>
<div class="widget">
<ul>
<% site.posts.sort('date', -1).limit(theme.recent_posts_limits).each((post) => { %>
<li>
<a href="<%- url_for(post.path) %>"><%= post.title || '(no title)' %></a>
</li>
<% }) %>
</ul>
</div>
</div>
</div>
<% } %>
10 changes: 6 additions & 4 deletions layout/_widget/tag.ejs
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<% if (site.tags.length) { %>
<div class="widget-wrap wow fadeInRight">
<h3 class="widget-title"><%= __('tags') %></h3>
<div class="widget">
<%- list_tags({show_count: theme.show_count}) %>
<div class="widget-wrapper">
<div class="widget-wrap" data-aos="fade-up">
<h3 class="widget-title"><%= __('tags') %></h3>
<div class="widget">
<%- list_tags({show_count: theme.show_count}) %>
</div>
</div>
</div>
<% } %>
10 changes: 6 additions & 4 deletions layout/_widget/tagcloud.ejs
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<% if (site.tags.length) { %>
<div class="widget-wrap wow fadeInRight">
<h3 class="widget-title"><%= __('tagcloud') %></h3>
<div class="widget tagcloud">
<%- tagcloud() %>
<div class="widget-wrapper">
<div class="widget-wrap" data-aos="fade-up">
<h3 class="widget-title"><%= __('tagcloud') %></h3>
<div class="widget tagcloud">
<%- tagcloud() %>
</div>
</div>
</div>
<% } %>
4 changes: 4 additions & 0 deletions scripts/helper/listCategories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
hexo.extend.helper.register("listCategories", (...args) => {
const result = hexo.extend.helper.store.list_categories.apply(hexo, args);
return result.replace(/<a class="([^"]+)" href="([^"]+)">/g, `<a class="$1" href="$2" data-aos="${args[2]}">`);
});
4 changes: 4 additions & 0 deletions scripts/helper/listTags.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
hexo.extend.helper.register('listTags', (...args) => {
const result = hexo.extend.helper.store.list_tags.apply(hexo, args);
return result.replace(/<li class="([^"]+)">/g, `<li class="$1" data-aos="${args[2]}">`);
});
2 changes: 1 addition & 1 deletion scripts/tag/friendLink.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const loadFile = (arg) => {
};

const insertHtml = (load) => {
let content = `<div class="friend-wrap wow fadeInUp">`;
let content = `<div class="friend-wrap" data-aos="zoom-in">`;
load.forEach((item) => {
if (!item.name || !item.url) return;
content += template(item);
Expand Down
9 changes: 8 additions & 1 deletion source/css/_animation.styl
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,11 @@ vendors = official

@keyframes transform-all
100%
transform: translateX(-100px)
transform: translateX(-100px)

if hexo-config("animation.enable")
body [data-aos='fade-up']
transform: translate3d(0, 30px, 0)

body [data-aos='zoom-in']
transform: scale(0.8)
2 changes: 2 additions & 0 deletions source/css/_partial/article.styl
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ $article-meta-tag
border-radius: post-radius
transition: 0.3s
padding: 1px 10px
box-shadow: 0 0 5px 3px var(--color-meta-shadow)

footer
font-size: font-size
Expand Down Expand Up @@ -239,6 +240,7 @@ $article-meta-tag
padding: 10px 18px
margin-top: article-padding
margin-right: 10px
box-shadow: 0 0 5px 3px var(--color-meta-shadow)

.article-tag-list-link
&:before
Expand Down
1 change: 1 addition & 0 deletions source/css/_partial/footer.styl
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
border-radius: 5px
transition: .3s
padding: 5px 10px
box-shadow: 0 0 5px 3px var(--color-meta-shadow)

p
font-size: 14px;
Expand Down
11 changes: 8 additions & 3 deletions source/css/_partial/post.styl
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
height: 100%

$post-wrap
width: 100%
height: 230px
margin-bottom: 40px
position: relative
Expand All @@ -14,6 +15,12 @@ $post-wrap
display: flex
transition: .3s

[data-theme="dark"] .post-wrap-left, [data-theme="dark"] .post-wrap-right
box-shadow: 0 0 10px 3px var(--color-hover-shadow)

.post-wrapper
border-radius: post-radius
transition: .3s
@media mq-normal
&:hover
transform: scale(1.015)
Expand All @@ -22,9 +29,6 @@ $post-wrap
img
transform: scale(1.05)

[data-theme="dark"] .post-wrap-left, [data-theme="dark"] .post-wrap-right
box-shadow: 0 0 10px 3px var(--color-hover-shadow)

.post-wrap-right
flex-direction: row-reverse

Expand All @@ -39,6 +43,7 @@ $post-wrap
height: 100%
width: 100%
padding: 20px
overflow: hidden
box-sizing: border-box

.post-meta
Expand Down
Loading
Loading