💄 Add page load animate style.

This commit is contained in:
凡梦星尘 2022-06-18 16:09:08 +08:00
parent 51f95b6bba
commit 3a46e83146
7 changed files with 84 additions and 146 deletions

1
VERSION Normal file
View File

@ -0,0 +1 @@
4.0.0

View File

@ -1,66 +1,53 @@
if (!window.NexT) window.NexT = {};
(function() {
const className = 'next-config';
const staticConfig = {};
let variableConfig = {};
const parse = text => JSON.parse(text || '{}');
const update = name => {
const targetEle = document.querySelector(`.${className}[data-name="${name}"]`);
if (!targetEle) return;
const parsedConfig = parse(targetEle.text);
if (name === 'main') {
Object.assign(staticConfig, parsedConfig);
} else {
variableConfig[name] = parsedConfig;
const siteConfig = {
"hostname" : "{{ .Site.BaseURL }}",
"root" : "/",
"images" : "{{ .Site.Params.images }}",
"scheme" : "{{ .Site.Params.scheme }}",
"darkmode" : {{ .Site.Params.darkmode }},
"version" : "{{ .Site.Data.config.version }}",
"exturl" : {{ .Site.Params.exturl }},
"sidebar" : {{ .Site.Params.sidebar | jsonify }},
"copycode" : {{ .Site.Params.codeblock.copyBtn | jsonify }},
"bookmark" : {{ .Site.Params.bookmark | jsonify }},
"comments" : {{ .Site.Params.comments | jsonify }},
"mediumzoom" : {{ .Site.Params.mediumzoom }},
"lazyload" : {{ .Site.Params.lazyload }},
"pangu" : {{ .Site.Params.pangu }},
"stickytabs" : {{ .Site.Params.tabs.sticky }},
"motion" : {{ .Site.Params.motion | jsonify }},
// TODO Find prismjs
//"prism" : "",
"i18n" : {
"placeholder" : "",
"empty" : "${query}",
"hits_time" : "'${hits}', '${time}'",
"hits" : "${hits}"
},
{{- if .Site.Params.algoliaSearch.enable }}
// TODO
"algolia" : {
"appID" : "",
"apiKey" : "",
"indexName" : "",
"hits" : ""
}
{{- end }}
{{- if .Site.Params.localSearch.enable }}
// TODO
"path" : "/search.json",
"localsearch": {{ .Site.Params.localSearch | jsonify }},
{{- end }}
"lang" : "{{ .Site.LanguageCode }}",
"permalink" : "{{ .Page.Permalink | absURL }}",
"title" : "{{ .Page.Title }}",
"isHome" : {{ .IsHome }},
"isPage" : {{ .IsPage }}
};
window.CONFIG = new Proxy(siteConfig, {});
update('main');
window.CONFIG = new Proxy({}, {
get(overrideConfig, name) {
let existing;
if (name in staticConfig) {
existing = staticConfig[name];
} else {
if (!(name in variableConfig)) update(name);
existing = variableConfig[name];
}
// For unset override and mixable existing
if (!(name in overrideConfig) && typeof existing === 'object') {
// Get ready to mix.
overrideConfig[name] = {};
}
if (name in overrideConfig) {
const override = overrideConfig[name];
// When mixable
if (typeof override === 'object' && typeof existing === 'object') {
// Mix, proxy changes to the override.
return new Proxy({ ...existing, ...override }, {
set(target, prop, value) {
target[prop] = value;
override[prop] = value;
return true;
}
});
}
return override;
}
// Only when not mixable and override hasn't been set.
return existing;
}
});
document.addEventListener('pjax:success', () => {
variableConfig = {};
});
})();
})();

View File

@ -82,7 +82,7 @@ NexT.motion.middleWares = {
postList: function() {
const sequence = [];
const { post_block, post_header, post_body, coll_header } = CONFIG.motion.transition;
const { postblock, postheader, postbody, collheader } = CONFIG.motion.transition;
function animate(animation, selector) {
if (!animation) return;
@ -95,10 +95,10 @@ NexT.motion.middleWares = {
});
}
animate(post_block, '.post-block, .pagination, .comments');
animate(coll_header, '.collection-header');
animate(post_header, '.post-header');
animate(post_body, '.post-body');
animate(postblock, '.post-block, .pagination, .post-comments');
animate(collheader, '.collection-header');
animate(postheader, '.post-header');
animate(postbody, '.post-body');
return sequence;
},

View File

@ -287,7 +287,7 @@ NexT.utils = {
if (window.innerWidth < 992 || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return;
// Expand sidebar on post detail page by default, when post has a toc.
const hasTOC = document.querySelector('.post-toc');
let display = CONFIG.page.sidebar;
let display = CONFIG.sidebar;
if (typeof display !== 'boolean') {
// There's no definition sidebar in the page front-matter.
display = CONFIG.sidebar.display === 'always' || (CONFIG.sidebar.display === 'post' && hasTOC);

4
data/config.yaml Normal file
View File

@ -0,0 +1,4 @@
# Hugo NexT theme's custom config
#
version: 4.0.0

View File

@ -996,8 +996,8 @@ params:
# Use Animate.css to animate everything.
# For more information: https://animate.style
motion:
enable: false
async: false
enable: true
async: true
transition:
# All available transition variants: https://theme-next.js.org/animate/
postBlock: fadeIn
@ -1010,7 +1010,7 @@ params:
# Progress bar in the top during page loading.
# For more information: https://github.com/CodeByZach/pace
pace:
enable: false
enable: true
# All available colors:
# black | blue | green | orange | pink | purple | red | silver | white | yellow
color: blue

View File

@ -15,83 +15,29 @@
{{- $pluginJS = replace $pluginJS "${name}" $npm }}
{{- $pluginJS = replace $pluginJS "${version}" $js.version }}
{{- $pluginJS = replace $pluginJS "${file}" $file }}
<script type="text/javascript" src="{{ $pluginJS }}"></script>
<script type="text/javascript" src="{{ $pluginJS }}" defer></script>
{{- end }}
<script class="next-config" data-name="main" type="application/json">
{
"hostname": "theme-next.js.org",
"root": "/",
"images": "/images",
"scheme": "Gemini",
"darkmode": true,
"version": "8.12.1",
"exturl": true,
"sidebar":
{
"position": "left",
"display": "post",
"padding": 18,
"offset": 12
},
"copycode":
{
"enable": true,
"style": "default"
},
"bookmark":
{
"enable": false,
"color": "#222",
"save": "auto"
},
"mediumzoom": true,
"lazyload": false,
"pangu": false,
"comments":
{
"style": "tabs",
"active": null,
"storage": true,
"lazyload": true,
"nav": null
},
"stickytabs": false,
"motion":
{
"enable": false,
"async": false,
"transition":
{
"post_block": "fadeIn",
"post_header": "fadeInDown",
"post_body": "fadeInDown",
"coll_header": "fadeInLeft",
"sidebar": "fadeInUp"
}
},
"prism": false,
"i18n":
{
"placeholder": "Searching...",
"empty": "We didn't find any results for the search: ${query}",
"hits_time": "${hits} results found in ${time} ms",
"hits": "${hits} results found"
},
"path": "/search.json",
"localsearch":
{
"enable": true,
"trigger": "auto",
"top_n_per_article": 1,
"unescape": false,
"preload": false
}
}
</script>
{{ $config := resources.Get "js/config.js" }}
{{ $boot := resources.Get "js/next-boot.js" }}
{{ $utils := resources.Get "js/utils.js" }}
{{ $alljs := (slice $config $boot $utils) | resources.Concat "js/all.js"}}
<script defer src="{{ $alljs.RelPermalink }}"></script>
{{- $config := resources.Get "js/config.js" | resources.ExecuteAsTemplate "config.js" . }}
{{- $motion := resources.Get "js/motion.js" }}
{{- $boot := resources.Get "js/next-boot.js" }}
{{- $utils := resources.Get "js/utils.js" }}
{{- $nextjs := (slice $config $utils $boot ) }}
{{- if .Site.Params.motion.enable }}
{{ $motionjs := resources.Get "js/motion.js" }}
{{ $nextjs = $nextjs | append $motionjs }}
{{- end }}
{{- if or (eq .Site.Params.shceme "Muse") (eq .Site.Params.shceme "Mist") }}
{{ $musejs := resources.Get "js/schemes/muse.js" }}
{{ $nextjs = $nextjs | append $musejs }}
{{- end }}
{{- if .Site.Params.bookmark.enable }}
{{- $bookmarkjs := resources.Get "js/bookmark.js" }}
{{- $nextjs = $nextjs | append $bookmarkjs }}
{{- end }}
{{- if .Site.Params.pjax }}
{{- $pjaxjs := resources.Get "js/pjax.js" }}
{{- $nextjs = $nextjs | append $pjaxjs }}
{{- end }}
{{- $nextjs = $nextjs | resources.Concat "js/hugo-next.js"}}
<script type="text/javascript" src="{{ $nextjs.RelPermalink }}" defer></script>