💄 Add post expired tip features.
This commit is contained in:
parent
9aaaf388f8
commit
b559782447
@ -12,7 +12,7 @@
|
||||
@include alert-styles(#{$key}, $color);
|
||||
}
|
||||
|
||||
.post-alert-title {
|
||||
.post-alert-title, .post-expired-title {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -31,6 +31,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.post-alert-content {
|
||||
.post-alert-content, .post-expired-content {
|
||||
color: var(--text-color);
|
||||
}
|
@ -86,5 +86,26 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@import 'post-alert';
|
||||
.post-expired-tip {
|
||||
|
||||
font-size: 0.825em;
|
||||
border: 1px solid #4A90E2;
|
||||
border-left: 6px solid #4A90E2;
|
||||
margin: 0 0 0.85em 0;
|
||||
padding: 0.65em 0.15em 0.65em 0.95em;
|
||||
|
||||
.post-expired-title {
|
||||
color: #4A90E2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.post-expired-times {
|
||||
font-weight: bold;
|
||||
font-size: 1.15em;
|
||||
color: #e5534b;
|
||||
margin: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@import 'post-alert';
|
||||
}
|
||||
|
@ -63,9 +63,13 @@ NexT.boot.refresh = function() {
|
||||
|
||||
if (!NexT.CONFIG.page.isPage) return;
|
||||
|
||||
NexT.utils.registerSidebarTOC();
|
||||
if (NexT.CONFIG.page.toc) NexT.utils.registerSidebarTOC();
|
||||
if (NexT.CONFIG.page.expired) NexT.utils.calPostExpiredDate();
|
||||
|
||||
NexT.utils.registerCopyCode();
|
||||
NexT.utils.registerImageViewer();
|
||||
NexT.utils.registerPostReward();
|
||||
|
||||
if(NexT.CONFIG.page.comments) {
|
||||
NexT.utils.initCommontesDispaly();
|
||||
NexT.utils.registerCommonSwitch();
|
||||
@ -73,7 +77,6 @@ NexT.boot.refresh = function() {
|
||||
} else {
|
||||
NexT.utils.hideComments();
|
||||
}
|
||||
NexT.utils.registerImageViewer();
|
||||
|
||||
//TODO
|
||||
/**
|
||||
|
@ -7,6 +7,35 @@ HTMLElement.prototype.wrap = function (wrapper) {
|
||||
};
|
||||
|
||||
NexT.utils = {
|
||||
calPostExpiredDate: function() {
|
||||
const postMetaDom = document.querySelector('.post-meta-container');
|
||||
let postTime = postMetaDom.querySelector('time[itemprop="dateCreated datePublished"]').getAttribute("datetime");
|
||||
let postLastmodTime = postMetaDom.querySelector('time[itemprop="dateModified dateLastmod"]');
|
||||
|
||||
if (postLastmodTime != null) postTime = postLastmodTime.getAttribute("datetime");
|
||||
|
||||
const expireCfg = NexT.CONFIG.page.expiredTips;
|
||||
let expiredTipPre = '';
|
||||
let expiredTipSuf = '';
|
||||
let expireTime = this.diffDate(postTime, 2);
|
||||
|
||||
if (expireTime == '0'+NexT.CONFIG.i18n.ds_days) {
|
||||
document.getElementById('post-expired-tip').style.display = 'none';
|
||||
} else {
|
||||
if (expireTime.indexOf(NexT.CONFIG.i18n.ds_years) > -1){
|
||||
let expireTip = expireCfg.warn.split('#');
|
||||
expiredTipPre = expireTip[0];
|
||||
expiredTipSuf = expireTip[1];
|
||||
} else {
|
||||
let expireTip = expireCfg.info.split('#');
|
||||
expiredTipPre = expireTip[0];
|
||||
expiredTipSuf = expireTip[1];
|
||||
}
|
||||
|
||||
let expiredTip = expiredTipPre + '<span class="post-expired-times">' + expireTime + '</span>' + expiredTipSuf;
|
||||
document.getElementById('post-expired-content').innerHTML = expiredTip;
|
||||
}
|
||||
},
|
||||
registerMenuClick: function () {
|
||||
const pMenus = document.querySelectorAll('.main-menu > li > a.menus-parent');
|
||||
pMenus.forEach(function (item) {
|
||||
|
@ -495,6 +495,34 @@ params:
|
||||
# 页面访问统计插件,支持busuanzi, waline, waline3
|
||||
# Page views counter plugin, support: busuanzi, waline, waline3
|
||||
plugin: busuanzi
|
||||
# 是否开启过期提示
|
||||
# Expired tip
|
||||
expired: false
|
||||
|
||||
# 文章内容中的提示信息设置
|
||||
# Alert settings in post content
|
||||
postAlerts:
|
||||
info:
|
||||
icon: "circle-info"
|
||||
color: "#4A90E2"
|
||||
note:
|
||||
icon: "bell"
|
||||
color: "#17A2B8"
|
||||
help:
|
||||
icon: "circle-question"
|
||||
color: "#967ADC"
|
||||
error:
|
||||
icon: "circle-xmark"
|
||||
color: "#DC3545"
|
||||
warning:
|
||||
icon: "triangle-exclamation"
|
||||
color: "#F39C12"
|
||||
success:
|
||||
icon: "circle-check"
|
||||
color: "#32CD32"
|
||||
important:
|
||||
icon: "circle-plus"
|
||||
color: "#007BFF"
|
||||
|
||||
# 文章底部的设置
|
||||
# Post footer settings
|
||||
|
@ -4,7 +4,7 @@ description: "在新版本Hugo框架中添加了对blockquote样式渲染,支
|
||||
keywords: "hugo,block,quote"
|
||||
|
||||
date: 2025-01-02T16:08:02+08:00
|
||||
lastmod: 2025-01-02T16:08:02+08:00
|
||||
lastmod: 2025-01-02T19:08:02+08:00
|
||||
|
||||
categories:
|
||||
- 示例文章
|
||||
@ -15,6 +15,7 @@ tags:
|
||||
|
||||
url: "demo/hugo-blockquote.html"
|
||||
toc: true
|
||||
expired: true
|
||||
---
|
||||
|
||||
过去 `HugoNexT` 主题都是通过自定义短语来实现块信息的标注,近期发现 `Hugo` 从[v0.134.0](https://github.com/gohugoio/hugo/releases/tag/v0.134.0)版本开始便是可以支持通过hook方式渲染Markdown文档中的Blockquote样式(需要自己实现),实现类似Github的警告风格样式。于是便在 `HugoNexT` 主题中添加7种不同风格供用户可选择使用,还可以自定义图标与颜色配置。
|
||||
|
@ -16,6 +16,7 @@ tags:
|
||||
|
||||
url: "demo/image-viewer.html"
|
||||
toc: false
|
||||
expired: true
|
||||
---
|
||||
|
||||
本主题自带图像浏览器功能,支持对文章区域内出现的图片进行浏览,点击图片可以查看大图,点击空白处可以关闭。不需要配置任何参数,只要在文章里面相应的位置添加图片信息即可 。
|
||||
|
@ -15,6 +15,7 @@ tags:
|
||||
comment:
|
||||
enable: false
|
||||
url: "demo/no-header-title.html"
|
||||
expired: true
|
||||
---
|
||||
|
||||
刘慈欣2018克拉克奖获奖感言(部分内容节选)。
|
||||
|
@ -71,6 +71,10 @@ PostMeta:
|
||||
tags: Tags
|
||||
more: "Read More"
|
||||
edit: "Edit this post"
|
||||
expired:
|
||||
title: "Note"
|
||||
info: "🕰️ Hey,This article is an aged wine of over # the information may need updating, please check the best before date before reading."
|
||||
warn: "🚀 Heads up! This article is from # ago and might not keep up with the pace of time. Bring your own time machine for reading, watch out for the time travel!"
|
||||
|
||||
PostAlert:
|
||||
info : "Info"
|
||||
|
@ -70,6 +70,10 @@ PostMeta:
|
||||
tags: Tags
|
||||
more: "Lire la suite"
|
||||
edit: "Editer ce billet"
|
||||
expired:
|
||||
title: "Astuce bienveillante"
|
||||
info: "🕰️ Hey,This article is an aged wine of over # the information may need updating, please check the best before date before reading."
|
||||
warn: "🚀 Heads up! this article is from # ago and might not keep up with the pace of time. Bring your own time machine for reading, watch out for the time travel!"
|
||||
|
||||
PostAlert:
|
||||
info : "Info"
|
||||
|
@ -71,6 +71,10 @@ PostMeta:
|
||||
tags: 标签
|
||||
more: 阅读全文
|
||||
edit: 编辑
|
||||
expired:
|
||||
title: "温馨提醒"
|
||||
info: "🕰️ 嗨,这篇文章已是#前的陈年佳酿,信息可能需要更新,阅读前请检查最佳赏味期限。"
|
||||
warn: "🚀 注意啦!这篇文章来自#以前,可能已跟不上时代的步伐。阅读时请自备时光机,小心穿越哦!"
|
||||
|
||||
PostAlert:
|
||||
info : "信息"
|
||||
|
@ -71,6 +71,10 @@ PostMeta:
|
||||
tags: 標籤
|
||||
more: 閱讀全文
|
||||
edit: 編輯
|
||||
expired:
|
||||
title: "温馨提醒"
|
||||
info: "🕰️ 嗨,这篇文章已是#前的陳年佳釀,資訊可能需要更新,閱讀前請檢查最佳賞味期限。"
|
||||
warn: "🚀 請注意啦!這篇文章来自#以前,可能已經跟不上時代的腳步了。閱讀時請自備時光機,小心穿越哦!"
|
||||
|
||||
PostAlert:
|
||||
info : "信息 "
|
||||
|
@ -2,11 +2,23 @@
|
||||
"isHome" .IsHome
|
||||
"isPage" .IsPage
|
||||
"comments" (.Scratch.Get "isComment")
|
||||
"toc" (default .Site.Params.toc.enable .Params.Toc)
|
||||
"permalink" (.Page.Permalink | absURL)
|
||||
"path" (.Page.Permalink | path.Base)
|
||||
"title" .Page.Title
|
||||
}}
|
||||
|
||||
{{/* Append post expired config */}}
|
||||
{{ $expired := default .Site.Params.PostMeta.expired .Params.Expired }}
|
||||
{{ $pageCfg = merge $pageCfg (dict "expired" $expired) }}
|
||||
{{ if $expired }}
|
||||
{{ $expiredTips := dict
|
||||
"info" (T "PostMeta.expired.info")
|
||||
"warn" (T "PostMeta.expired.warn")
|
||||
}}
|
||||
{{ $pageCfg = merge $pageCfg (dict "expiredTips" $expiredTips) }}
|
||||
{{ end }}
|
||||
|
||||
{{/* Append waline pageview & comment plugin */}}
|
||||
{{ with .Site.Params.postMeta.views }}
|
||||
{{ if and .enable (ne .plugin "busuanzi") }}
|
||||
|
@ -6,9 +6,21 @@
|
||||
{{ .Summary }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{/** Started use the read more content anchor the need Hugo framework min marjo version greater than 0.134.0 **/}}
|
||||
{{ $expired := default .Site.Params.PostMeta.expired .Params.Expired }}
|
||||
{{ if $expired }}
|
||||
<div class="post-expired-tip" id="post-expired-tip">
|
||||
<div class="post-expired-title">
|
||||
<i class="fa-solid fa-hourglass-half"></i>
|
||||
<span>{{ T "PostMeta.expired.title" }}</span>
|
||||
</div>
|
||||
<div id="post-expired-content" class="post-expired-content"></div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{/** Started use the read more content anchor the need
|
||||
Hugo framework min marjo version greater than 0.134.0 **/}}
|
||||
{{ .Summary }}
|
||||
<a id="more"><!-- It's an anchor point to locate read more content start. --></a>
|
||||
<!-- It's an anchor point to locate read more content start. -->
|
||||
<a id="more"></a>
|
||||
{{ .ContentWithoutSummary }}
|
||||
{{ end }}
|
||||
{{ end }}
|
Loading…
Reference in New Issue
Block a user