Skip to content

Commit

Permalink
feat: 增加 aside 最新評論部件
Browse files Browse the repository at this point in the history
style: 部分css調整和html優化
improvements: 刪除pwa中的theme-color配置,默認生成meta theme-color  close #340
improvements: 優化最後更新時間顯示(1小時內顯示 剛剛,1小時到24小時 顯示 xx小時前,1天到365天 顯示 xx天前,365天后直接顯示日期)
  • Loading branch information
jerryc127 committed Aug 28, 2020
1 parent ee6f62f commit fe97d2e
Show file tree
Hide file tree
Showing 23 changed files with 420 additions and 86 deletions.
20 changes: 19 additions & 1 deletion _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -644,6 +644,25 @@ runtimeshow:
enable: false
publish_date:

# Aside widget - Newest Comments
newest_comments:
enable: false
limit: 6
avatar: true
leancloud:
enable: false
appId: # leancloud application app id
appKey: # leancloud application app key
serverURL: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
default_avatar: mp # mp/identicon/monsterid/wavatar/retro/robohash/blank
github_issues:
enable: false
repo:
disqus:
enable: false
forum:
api_key:

# Bottom right button (右下角按鈕)
# --------------------------------------

Expand Down Expand Up @@ -763,7 +782,6 @@ lazyload:
# pwa:
# enable: false
# manifest: /image/pwa/manifest.json
# theme_color: "#fff"
# apple_touch_icon: /image/pwa/apple-touch-icon.png
# favicon_32_32: /image/pwa/32.png
# favicon_16_16: /image/pwa/16.png
Expand Down
12 changes: 10 additions & 2 deletions languages/default.yml
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,20 @@ aside:
unit: days
last_push_date:
name: Last Push
zero_day: Today
suffix: days ago
site_wordcount: Total Count
site_uv_name: UV
site_pv_name: PV
more_button: More
card_newest_comments:
heading: Newest Comments
loading_text: loading...
zero_day: Today
day: days ago

date_suffix:
one_hour: Just
hours: hours ago
day: days ago

donate: Donate
share: Share
Expand Down
12 changes: 10 additions & 2 deletions languages/en.yml
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,20 @@ aside:
unit: days
last_push_date:
name: Last Push
zero_day: Today
suffix: days ago
site_wordcount: Total Count
site_uv_name: UV
site_pv_name: PV
more_button: More
card_newest_comments:
heading: Newest Comments
loading_text: loading...
zero_day: Today
day: days ago

date_suffix:
one_hour: Just
hours: hours ago
day: days ago

donate: Donate
share: Share
Expand Down
12 changes: 10 additions & 2 deletions languages/zh-CN.yml
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,20 @@ aside:
unit:
last_push_date:
name: 最后更新时间
zero_day: 今天
suffix: 天前
site_wordcount: 本站总字数
site_uv_name: 本站访客数
site_pv_name: 本站总访问量
more_button: 查看更多
card_newest_comments:
heading: 最新评论
loading_text: 正在加载中...
zero_day: 今天
day: 天前

date_suffix:
one_hour: 刚刚
hours: 小時前
day: 天前

donate: 打赏
share: 分享
Expand Down
12 changes: 10 additions & 2 deletions languages/zh-TW.yml
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,20 @@ aside:
unit:
last_push_date:
name: 最後更新時間
zero_day: 今天
suffix: 天前
site_wordcount: 本站總字數
site_uv_name: 本站訪客數
site_pv_name: 本站總訪問量
more_button: 檢視更多
card_newest_comments:
heading: 最新評論
loading_text: 正在加載中...
zero_day: 今天
day: 天前

date_suffix:
one_hour: 剛剛
hours: 小時前
day: 天前

donate: 打賞
share: 分享
Expand Down
10 changes: 8 additions & 2 deletions layout/includes/additional-js.pug
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,16 @@ div
if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
script(async src=url_for(theme.CDN.busuanzi))

!=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})

!=partial('includes/third-party/prismjs', {}, {cache:theme.fragment_cache})

if theme.aside.enable && theme.newest_comments.enable
if theme.pjax.enable
!=partial('includes/third-party/newest-comments/index', {}, {cache:theme.fragment_cache})
else if (!is_post() && page.aside !== false)
!=partial('includes/third-party/newest-comments/index', {}, {cache:theme.fragment_cache})

!=fragment_cache('injectBottom', function(){return injectHtml(theme.inject.bottom)})

!=partial('includes/third-party/effect', {}, {cache:theme.fragment_cache})

!=partial('includes/third-party/chat/index', {}, {cache:theme.fragment_cache})
Expand Down
7 changes: 5 additions & 2 deletions layout/includes/head.pug
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
- else pageKeywords = Array.isArray(config.keywords) ? (config.keywords).join(','): ([]).join(',') || config.keywords
- var pageAuthor = config.email ? config.author + ',' + config.email : config.author
- var pageCopyright = config.copyright || config.author
- var themeColor = theme.display_mode === 'dark' ? '#0d0d0d' : '#ffffff'

meta(charset='UTF-8')
meta(http-equiv="X-UA-Compatible" content="IE=edge")
Expand All @@ -28,13 +29,15 @@ if pageKeywords
meta(name="author" content=pageAuthor)
meta(name="copyright" content=pageCopyright)
meta(name ="format-detection" content="telephone=no")
!=favicon_tag(theme.favicon || config.favicon)
link(rel="canonical" href=urlNoIndex())
meta(name="theme-color" content=themeColor)

if theme.disable_baidu_transformation
meta(http-equiv="Cache-Control" content="no-transform")
meta(http-equiv="Cache-Control" content="no-siteapp")

!=favicon_tag(theme.favicon || config.favicon)
link(rel="canonical" href=urlNoIndex())

//- 預解析
!=partial('includes/head/preconnect', {}, {cache:theme.fragment_cache})

Expand Down
12 changes: 7 additions & 5 deletions layout/includes/head/config.pug
Original file line number Diff line number Diff line change
Expand Up @@ -95,11 +95,13 @@
})
}
let last_push_date = 'undefined';
let date_suffix = 'undefined';
if (theme.aside.card_webinfo.last_push_date) {
last_push_date = JSON.stringify({
zeroDay: _p("aside.card_webinfo.last_push_date.zero_day"),
suffix: _p("aside.card_webinfo.last_push_date.suffix")
date_suffix = JSON.stringify({
one_hour: _p("date_suffix.one_hour"),
hours: _p("date_suffix.hours"),
day: _p('date_suffix.day')
})
}
Expand All @@ -122,7 +124,7 @@ script.
message_next: '!{_p("Snackbar.bookmark.message_next")}'
},
runtime: '!{theme.runtimeshow.enable ? _p("aside.card_webinfo.runtime.unit") : ""}',
last_push_date: !{last_push_date},
date_suffix: !{date_suffix},
copyright: !{copyright},
ClickShowText: !{ClickShowText},
medium_zoom: !{theme.medium_zoom},
Expand Down
4 changes: 2 additions & 2 deletions layout/includes/head/darkmode.pug
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ if theme.darkmode.enable
var activateDarkMode = function () {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#000')
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
var activateLightMode = function () {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#fff')
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}

Expand Down
2 changes: 0 additions & 2 deletions layout/includes/head/pwa.pug
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
link(rel="manifest" href=url_for(theme.pwa.manifest))
if(theme.pwa.theme_color)
meta(name="theme-color" content=theme.pwa.theme_color)
if(theme.pwa.theme_color)
meta(name="msapplication-TileColor" content=theme.pwa.theme_color)
if(theme.pwa.apple_touch_icon)
Expand Down
3 changes: 2 additions & 1 deletion layout/includes/layout.pug
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ html(lang=config.language data-theme=theme.display_mode)
div!= body
else
block content
include widget/index.pug
if theme.aside.enable && page.aside !== false
!=partial('includes/widget/index', {}, {cache:theme.fragment_cache})
else
main#content-inner.layout_post
if body
Expand Down
71 changes: 71 additions & 0 deletions layout/includes/third-party/newest-comments/disqus-comment.pug
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
script.
window.addEventListener('load', () => {
const changeContent = (content) => {
if (content === '') return content

content = content.replace(/<[^>]+>/g,"") // remove html tag
content = content.replace(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|webp)/g, '') // remove image link
content = content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, '') // remove url

if (content.length > 150) {
content = content.substring(0,150) + '...'
}
return content
}

const getDisqusComment = () => {
let disqusArray = []
$.getJSON('https://disqus.com/api/3.0/forums/listPosts.json?forum=!{theme.newest_comments.disqus.forum}&related=thread&limit=!{theme.newest_comments.limit}&api_key=!{theme.newest_comments.disqus.api_key}', function(data){
$.each(data.response, (i, item) => {
disqusArray.push({
'avatar': item.author.avatar.cache,
'content': changeContent(item.message),
'nick': item.author.name,
'url': item.url,
'date': item.createdAt
})
})
// set expiry to 10 min
saveToLocal.set('disqus-newest-comments', JSON.stringify(disqusArray), 10/(60*24))
generateHtml(disqusArray)
})
}

const generateHtml = array => {
let result = ''

for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'

if (!{theme.newest_comments.avatar}) {
result += `<a href='${array[i].url}' class="thumbnail"><img src='${array[i].avatar}'></a>`
}

result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<div class='name'><span>${array[i].nick}</span><time> / ${diffDate(array[i].date, true)}</time></div>
</div></div>`
}

let $dom = document.querySelector('.card-newest-comments .aside-list')
$dom.innerHTML= result
window.pjax && window.pjax.refresh($dom)
}

const newestCommentInit = () => {
if (document.querySelector('.card-newest-comments .aside-list')) {
const data = saveToLocal.get('disqus-newest-comments')
if (data) {
generateHtml(JSON.parse(data))
} else {
getDisqusComment()
}
}
}

newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})



71 changes: 71 additions & 0 deletions layout/includes/third-party/newest-comments/github-issues.pug
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
script.
window.addEventListener('load', () => {
const changeContent = (content) => {
if (content === '') return content

content = content.replace(/<[^>]+>/g,"") // remove html tag
content = content.replace(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|webp)/g, '') // remove image link
content = content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, '') // remove url

if (content.length > 150) {
content = content.substring(0,150) + '...'
}
return content
}

const getGithubIssues = () => {
let githubArray = []
$.getJSON('https://api.github.com/repos/!{theme.newest_comments.github_issues.repo}/issues/comments?sort=updated&direction=desc&per_page=!{theme.newest_comments.limit}&page=1', (data) => {
$.each(data, (index, item) => {
githubArray.push({
'avatar': item.user.avatar_url,
'content': changeContent(item.body),
'nick': item.user.login,
'url': item.html_url,
'date': item.updated_at
})
})
saveToLocal.set('github-newest-comments', JSON.stringify(githubArray), 10/(60*24))
generateHtml(githubArray)
})
}

const generateHtml = array => {
let result = ''

for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'

if (!{theme.newest_comments.avatar}) {
result += `<a href='${array[i].url}' class="thumbnail"><img src='${array[i].avatar}'></a>`
}

result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<div class='name'><span>${array[i].nick}</span><time> / ${diffDate(array[i].date, true)}</time></div>
</div></div>`
}

let $dom = document.querySelector('.card-newest-comments .aside-list')
$dom.innerHTML= result
window.pjax && window.pjax.refresh($dom)
}

const newestCommentInit = () => {
if (document.querySelector('.card-newest-comments .aside-list')) {
const data = saveToLocal.get('github-newest-comments')
if (data) {
generateHtml(JSON.parse(data))
} else {
getGithubIssues()
}
}
}

newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})




6 changes: 6 additions & 0 deletions layout/includes/third-party/newest-comments/index.pug
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
if theme.newest_comments.leancloud.enable
include ./leancloud.pug
else if theme.newest_comments.github_issues.enable
include ./github-issues.pug
else if theme.newest_comments.disqus.enable
include ./disqus-comment.pug

0 comments on commit fe97d2e

Please sign in to comment.