main
lensfrex 1 year ago
parent 7f043f001e
commit 20d2df3858
Signed by: lensfrex
GPG Key ID: 947ADABD8533C476
  1. 2
      layout/includes/_partials/post_list/post_list.pug
  2. 3
      layout/includes/layout.pug
  3. 28
      layout/page.pug
  4. 28
      layout/post.pug
  5. 4
      scripts/fancybox.js
  6. 15
      source/css/_partials/post_list/post_item.styl
  7. 2
      source/css/_partials/post_page/markdown_content.styl
  8. 15
      source/css/_partials/post_page/post_page.styl
  9. 51
      source/css/_partials/waline_custom.styl
  10. 10
      source/js/util.js

@ -2,7 +2,7 @@ include post_item.pug
.post-list .post-list
- const posts = page.posts - const posts = page.posts
- const MAX_SUMMARY_LENGTH = 64 - const MAX_SUMMARY_LENGTH = 45
- posts.each(function(post) { - posts.each(function(post) {
- const post_date = date(post.date, 'MM/DD/YYYY') - const post_date = date(post.date, 'MM/DD/YYYY')
- const post_time = date(post.time === undefined ? post.date : post.time, 'HH:mm:ss') - const post_time = date(post.time === undefined ? post.date : post.time, 'HH:mm:ss')

@ -21,6 +21,9 @@ html(lang=config.language)
link(rel='stylesheet', href=url) link(rel='stylesheet', href=url)
if is_post() || is_page() if is_post() || is_page()
link(rel="stylesheet", href="/css/highlight.css") link(rel="stylesheet", href="/css/highlight.css")
link(rel="stylesheet", href="https://unpkg.com/@waline/client@v2/dist/waline.css")
script.
body body
#container.container #container.container
header#header.header header#header.header

@ -2,16 +2,20 @@ extends includes/layout.pug
include includes/_partials/information_card.pug include includes/_partials/information_card.pug
block content block content
.markdown-container .markdown-container
include includes/_partials/left_declaration.pug include includes/_partials/left_declaration.pug
.article-container .article-container
.article-header .article-header
- const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '') - const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '')
a(
data-fancybox
href=has_cover ? page.cover : undefined
data-caption="Single image"
)
img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg") img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg")
.v-line
.article-info .article-info
span.article-title= page.title span.article-title= page.title
- const publishTime = moment(page.date).format("YYYY-MM-DD HH:mm:SS"); - const publishTime = moment(page.date).format("YYYY-MM-DD HH:mm:SS");
@ -22,10 +26,12 @@ block content
.h-line .h-line
.info-box .info-box
span.time-info. span.time-info.
发表于 #{publishTime},更新于 #{updateTime} 发表于 [#{publishTime}],更新于 [#{updateTime}]
br br
span.stat-info. span.stat-info.
总字数 #{word_count}, 阅读时长 约#{read_cost}分钟, 阅读量 100 总字数 [#{word_count}], 阅读时长 [约#{read_cost}分钟], 阅读量 [
#[span.stat-info.waline-pageview-count(data-src=url_for(page.path)) 未知]
]
br br
span.big publish by span.big publish by
span.author #{author} span.author #{author}
@ -33,3 +39,17 @@ block content
hr hr
.main-content .main-content
!= page.content != page.content
hr
h2 想说点什么?
#waline-container
script(type="module").
import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';
init({
el: '#waline-container',
serverURL: 'https://comment-api.ciduid.top',
pageview: true,
path: document.location.pathname,
});

@ -2,16 +2,20 @@ extends includes/layout.pug
include includes/_partials/information_card.pug include includes/_partials/information_card.pug
block content block content
.markdown-container .markdown-container
include includes/_partials/left_declaration.pug include includes/_partials/left_declaration.pug
.article-container .article-container
.article-header .article-header
- const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '') - const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '')
a(
data-fancybox
href=has_cover ? page.cover : undefined
data-caption="Single image"
)
img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg") img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg")
.v-line
.article-info .article-info
span.article-title= page.title span.article-title= page.title
- const publishTime = moment(page.date).format("YYYY-MM-DD HH:mm:SS"); - const publishTime = moment(page.date).format("YYYY-MM-DD HH:mm:SS");
@ -22,10 +26,12 @@ block content
.h-line .h-line
.info-box .info-box
span.time-info. span.time-info.
发表于 #{publishTime},更新于 #{updateTime} 发表于 [#{publishTime}],更新于 [#{updateTime}]
br br
span.stat-info. span.stat-info.
总字数 #{word_count}, 阅读时长 约#{read_cost}分钟, 阅读量 100 总字数 [#{word_count}], 阅读时长 [约#{read_cost}分钟], 阅读量 [
#[span.stat-info.waline-pageview-count(data-src=url_for(page.path)) 未知]
]
br br
span.big publish by span.big publish by
span.author #{author} span.author #{author}
@ -33,3 +39,17 @@ block content
hr hr
.main-content .main-content
!= page.content != page.content
hr
h2 想说点什么?
#waline-container
script(type="module").
import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';
init({
el: '#waline-container',
serverURL: 'https://comment-api.ciduid.top',
pageview: true,
path: document.location.pathname,
});

@ -0,0 +1,4 @@
// hexo.extend.filter.register('after_post_render', data => {
// data.content = data.content.replaceAll(/<img (.*?)>/ig, `<img data-fancybox $1>`)
// return data
// })

@ -1,15 +1,16 @@
.post-item .post-item
& > *
user-select: none
display: flex display: flex
flex-direction: row flex-direction: row
gap: 16px justify-content: center
gap: 20px
height: fit-content height: fit-content
transition: all 0.2s linear 0s transition: all 0.2s linear 0s
padding: 20px 20px padding: 20px 20px
margin: 6px 4px margin: 6px 4px
min-height: 144px; min-height: 144px;
& > *
user-select: none
&:hover &:hover
background-color: $light background-color: $light
filter: drop-shadow(0px 0px 2px rgb(74, 71, 62)); filter: drop-shadow(0px 0px 2px rgb(74, 71, 62));
@ -29,7 +30,7 @@
.post-info .post-info
display: flex display: flex
flex-direction: column flex-direction: column
width:100% width: 70%
.post-title-box .post-title-box
display: flex display: flex
@ -75,14 +76,14 @@
display: flex display: flex
flex-direction: row flex-direction: row
justify-content: space-between justify-content: space-between
padding: 6px 6px 0 32px padding: 6px 6px 0 8px
.post-summary .post-summary
max-width: 61.8% max-width: 61.8%
line-height: 2em line-height: 2em
overflow: hidden overflow: hidden
display: -webkit-box display: -webkit-box
-webkit-line-clamp: 4 -webkit-line-clamp: 3
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
.post-summary, .post-time .post-summary, .post-time
color: $dark color: $dark
font-size: 16px font-size: 18px

@ -2,7 +2,7 @@
word-wrap: break-word word-wrap: break-word
overflow-wrap: break-word overflow-wrap: break-word
color: #4a473e color: #4a473e
margin-bottom: 3em
h1 h1
margin-top: 0.4em margin-top: 0.4em
font-size: 2.25em font-size: 2.25em

@ -24,20 +24,21 @@
display: flex display: flex
flex-direction: row flex-direction: row
margin: 1em 0 1em margin: 1em 0 1em
gap: 2em gap: 3em
align-items: flex-start
$post-width = 384px $post-width = 384px
$post-heigth = 216px $post-heigth = 216px
img.post-cover img.post-cover
width: $post-width width: $post-width
height $post-heigth
min-width: $post-width min-width: $post-width
min-height $post-heigth
max-width: $post-width max-width: $post-width
max-height $post-heigth
object-fit: cover object-fit: cover
transition: all 0.2s linear 0s transition: all 0.2s linear 0s
/* filter: drop-shadow(1px 1px 2px #4a473e); */
border-color: #4a473e91;
border-style: solid;
border-width: 2px;
.article-info .article-info
display: flex display: flex
flex-direction: column flex-direction: column
@ -45,6 +46,7 @@
width: 100% width: 100%
.h-line .h-line
margin-left: -2% margin-left: -2%
width: 104%
.article-title .article-title
font-size: 2.5em font-size: 2.5em
font-weight: bold font-weight: bold
@ -69,3 +71,6 @@
position: sticky position: sticky
top: 16px top: 16px
align-self: flex-start align-self: flex-start
.wl-panel
border-radius: 0

@ -0,0 +1,51 @@
#waline-container
--waline-font-size: 1rem
--waline-white: #fff
--waline-light-grey: #999
--waline-dark-grey: #666
--waline-theme-color: #4a473e
--waline-active-color: #757161
--waline-color: #4a473e
--waline-bgcolor: #b1ab8f
--waline-bgcolor-light: #f3f0e3
--waline-bgcolor-hover: #f0f0f0
--waline-border-color: #4a473e
--waline-disable-bgcolor: #f8f8f8
--waline-disable-color: #000
--waline-code-bgcolor: #282c34
--waline-bq-color: #f0f0f0
--waline-avatar-size: 3.25rem
--waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13)
--waline-badge-color: #3498db
--waline-badge-font-size: 0.75em
--waline-info-bgcolor: #b4af9a
--waline-info-color: #25241f
--waline-info-font-size: 0.625em
--waline-border: 1px solid var(--waline-border-color)
--waline-avatar-radius: 50%
--waline-box-shadow: none
#waline-container
// margin-top: 1em
.wl-panel
border-radius: 0
padding: 8px
background-color: unset
border-width: 2px
.wl-header
border-top-left-radius: 0
border-top-right-radius: 0
padding-bottom: 0.8em
label
font-size: 0.85em
font-weight: bold
.wl-editor, .wl-input
border: solid
border-width: 2px
border-radius: 0
font-size: 0.85em
font-family: 'Consolas', sans-serif
.wl-input
font-weight: bold
.wl-btn
border-radius: 0

@ -0,0 +1,10 @@
const utils = {
wrap: (selector, eleType, options) => {
const creatEle = document.createElement(eleType)
for (const [key, value] of Object.entries(options)) {
creatEle.setAttribute(key, value)
}
selector.parentNode.insertBefore(creatEle, selector)
creatEle.appendChild(selector)
},
}
Loading…
Cancel
Save