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.

Sign up for GitHub

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

Jump to bottom

feat: added out-of-date content warning #68

Merged
merged 3 commits into from
May 31, 2018
Merged

feat: added out-of-date content warning #68

merged 3 commits into from
May 31, 2018

Conversation

keithmork
Copy link
Contributor

网上已经有足够多过时的技术文章，持续误导着后来的人，应该有个明显的标识提示文章更新于多久前，让读者注意。

  • 使用 timeago 显示相对时间
  • 最后更新时间超过30天（可配置），文章开头显示蓝色提示框。
  • 最后更新时间超过180天（可配置），文章开头显示黄色提示框。
  • 默认关闭，不会影响老用户。
  • 可以在全局配置文件或每篇博文里开启/关闭这功能。

实际效果见：http://keithmo.me/post/2016/07/19/first/

当前实现的缺点：

  • timeago 那边写死了中文的编码为 zh_CN，hugo的languageCode也必须这么写，不然时间默认英文。
  • 如果时间跨度比较久，timeago 只能显示整年整月，差1天满2年也是1年前。

另外我不懂法文和西班牙文，i18n里那2个文件更新的部分直接复制英文的……

olOwOlo
olOwOlo reviewed May 29, 2018
View reviewed changes
Copy link
Owner

@olOwOlo olOwOlo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

哇，谢谢 PR ！

exampleSite/config.toml Outdated
@@ -98,6 +98,15 @@ copyright = "" # default: author.name ↓ # 默认为下面配
gitmentCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitment@0.0.3/style/default.min.css" crossorigin="anonymous">'
gitalkJS = '<script src="https://cdn.jsdelivr.net/npm/gitalk@1.2.2/dist/gitalk.min.js" integrity="sha256-DcjhdbufsHMHflFjZtKNFnPKOAL2ybOxGcPOR4MtnJg=" crossorigin="anonymous"></script>'
gitalkCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1.2.2/dist/gitalk.css" integrity="sha256-rJVe5uyYRXdLM+Kkoj7JtN+9qI0bZTxkYTaNWODpg7U=" crossorigin="anonymous">'
timeagoJS = '<script src="https://cdnjs.cloudflare.com/ajax/libs/timeago.js/3.0.2/timeago.min.js" integrity="sha256-jwCP0NAdCBloaIWTWHmW4i3snUNMHUNO+jr9rYd2iOI=" crossorigin="anonymous"></script>'
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

用 jsdelivr，这个包括了 cloudflare 的节点

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

怎么和本地版本不一样 ❓

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cdn上只有3.0的版本，github上只放出最新版本，我搜搜历史记录里有没有旧版本留下

layouts/partials/post/outdated-info-warning.html Outdated
@@ -0,0 +1,28 @@
{{ if or .Params.enableOutdatedInfoWarning (and .Site.Params.outdatedInfoWarning.enable (ne .Params.enableOutdatedInfoWarning false)) }}
{{ $daysAgo := div (sub now.Unix .Lastmod.Unix) 86400 }}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

用一些 - 符号减少不必要的空行，例如 {{- ... }} 会消除之前所有的空格和空行

layouts/partials/scripts.html Outdated
{{ if .Site.Params.fancybox }}<script type="text/javascript" src="{{ "lib/fancybox/jquery.fancybox-3.1.20.min.js" | relURL }}"></script>{{ end }}
{{- end -}}

<!-- timeago.JS -->
<script>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

资源加载一起放在这一坨，需要加上判断条件，不启用的时候避免加载

layouts/partials/scripts.html Outdated
{{ if .Site.Params.fancybox }}<script type="text/javascript" src="{{ "lib/fancybox/jquery.fancybox-3.1.20.min.js" | relURL }}"></script>{{ end }}
{{- end -}}

<!-- timeago.JS -->
<script>
// NOTE: In order to display Chinese, Hugo site config "languageCode" must be "zh_CN" (case sensitive)
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

可以的话做一下转换

@keithmork
Copy link
Contributor Author

已经按要求改好

  • cdn换了，本地文件也换成和cdn一样的版本
  • 加了些-去空格（go模板好恶心……）
  • 语言编码也处理了

测试过开关这选项、开关public cdn 时的显示和资源加载，编码用zh-cn和en时的显示

效果：http://keithmo.me/post/2016/07/19/first/

@olOwOlo
Copy link
Owner

olOwOlo commented May 30, 2018

非常感谢！
关于提示框的颜色我有点困惑，是否应该和主题颜色保持一定的联系（利用 scss 的一些关于颜色的函数，saturate, darken 之类的），不过突兀一点也正好醒目就是了，你怎么看 ❓

@keithmork
Copy link
Contributor Author

我不是前端，避免大红配大绿是我审美的极限了，现在的2个颜色还是偷来的wwww
主题的几个颜色还没看过，scss也没接触过，我查下资料看看。

配色方面如果能给点建议就最好了，我不确定能刚好抄到那么多顺眼的颜色wwww

@olOwOlo
Copy link
Owner

olOwOlo commented May 31, 2018 •
edited
Loading

并不懂配色~~
相关的 color function，你看看可以改就试试，不可以就算了~~

@keithmork
Copy link
Contributor Author

谢谢，这几天准备发版要狂加班，周日如果有空再看看。

@olOwOlo
Copy link
Owner

olOwOlo commented May 31, 2018

嗯，我先合并这个了，如果你有空的话，可以之后再开一个 PR

@olOwOlo olOwOlo merged commit 9033266 into olOwOlo:master May 31, 2018
daymade pushed a commit to daymade/hugo-theme-even that referenced this pull request Sep 30, 2023
@keithmork @olOwOlo
feat(post): add out-of-date content warning (olOwOlo#68)
b394581
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@olOwOlo olOwOlo olOwOlo left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@keithmork @olOwOlo