💄 Add page load animate style.
This commit is contained in:
凡梦星尘
parent
51f95b6bba
commit
3a46e83146
@ -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 }}
|
||||
};
|
||||
|
||||
update('main');
|
||||
window.CONFIG = new Proxy(siteConfig, {});
|
||||
|
||||
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 = {};
|
||||
});
|
||||
})();
|
||||
@ -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;
|
||||
},
|
||||
|
||||
@ -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
4
data/config.yaml
Normal file
@ -0,0 +1,4 @@
|
||||
# Hugo NexT theme's custom config
|
||||
#
|
||||
|
||||
version: 4.0.0
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user