From e67890a683253cdb5621bdf90d9520bc17f10ec9 Mon Sep 17 00:00:00 2001 From: XPoet Date: Fri, 20 Mar 2020 10:58:14 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8A=BD=E7=A6=BB=E5=87=BA=20article-meta-info?= =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=20CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layout/common/article-meta-info.ejs | 34 ++++++++++++++ layout/common/article-post.ejs | 24 ++-------- layout/common/home-post.ejs | 38 +--------------- source/css/common/article-meta-info.styl | 26 +++++++++++ source/css/common/home-post.styl | 58 ++---------------------- source/css/style.styl | 1 + 6 files changed, 70 insertions(+), 111 deletions(-) create mode 100644 layout/common/article-meta-info.ejs create mode 100644 source/css/common/article-meta-info.styl diff --git a/layout/common/article-meta-info.ejs b/layout/common/article-meta-info.ejs new file mode 100644 index 0000000..c205b67 --- /dev/null +++ b/layout/common/article-meta-info.ejs @@ -0,0 +1,34 @@ +
+ + + <%= date(articleData.date, 'YYYY-MM-DD HH:MM:SS') %> + + + + <% if (articleData.categories.length) { %> + + +
    + <% articleData.categories.forEach((category, i) => { %> +
  • + <%= i === 0 ? '' : '| ' %><%= category.name %> +
    • + <% }); %> +
+ + <% } %> + + + <% if (articleData.tags.length) { %> + + +
    + <% articleData.tags.forEach((tag, i) => { %> +
  • + <%= i === 0 ? '' : '| ' %><%= tag.name %> +
    • + <% }); %> +
+ + <% } %> +
\ No newline at end of file diff --git a/layout/common/article-post.ejs b/layout/common/article-post.ejs index 23ae432..4e05b69 100644 --- a/layout/common/article-post.ejs +++ b/layout/common/article-post.ejs @@ -1,34 +1,18 @@ <% if (is_post()) { %> +

<%= page.title %>

+
-
-
- - - <%- date(page.date, 'YYYY-MM-DD') %> - - - - <% page.categories.forEach(category => { %> - <%= category.name %> - <% }) %> - - - <% page.tags.forEach(tag => { %> - - <% }) %> - -
-
+ <%- partial('article-meta-info', {articleData: page, index: true}) %>
+
<%- page.content %>
-
<% if (page.prev) { %>
diff --git a/layout/common/home-post.ejs b/layout/common/home-post.ejs index 7dc67f6..d77a059 100644 --- a/layout/common/home-post.ejs +++ b/layout/common/home-post.ejs @@ -15,42 +15,8 @@ <%- truncate(strip_html(post.content), {length: 80}) %>
- -
- - - <%= date(post.date, 'YYYY-MM-DD HH:MM:SS') %> - - - - <% if (post.categories.length) { %> - - -
    - <% post.categories.forEach((category, i) => { %> -
  • - <%= i === 0 ? '' : '| ' %> -
    • - <% }); %> -
- - <% } %> - - - <% if (post.tags.length) { %> - - -
    - <% post.tags.forEach((tag, i) => { %> -
  • - <%= i === 0 ? '' : '| ' %> -
    • - <% }); %> -
- - <% } %> +
+ <%- partial('article-meta-info', {articleData: post, index: true}) %>
<% }) %> diff --git a/source/css/common/article-meta-info.styl b/source/css/common/article-meta-info.styl new file mode 100644 index 0000000..44332dd --- /dev/null +++ b/source/css/common/article-meta-info.styl @@ -0,0 +1,26 @@ +.article-meta-info { + color: #bbbbbb; + font-size: 12px; + + .article-meta-item { + margin-right: 10px; + } + + .article-tags, .article-categories { + display: inline; + + ul, li { + display: inline; + } + + a { + text-decoration: none; + color: rgba(0, 0, 0, 0.44); + font-weight: 400; + + &:hover { + text-decoration: none; + } + } + } +} \ No newline at end of file diff --git a/source/css/common/home-post.styl b/source/css/common/home-post.styl index 0dd7659..48308b8 100644 --- a/source/css/common/home-post.styl +++ b/source/css/common/home-post.styl @@ -5,6 +5,8 @@ .article-post-item { margin-bottom 30px + padding-bottom 20px + border-bottom: 1px solid #f2f2f2; .article-post-title { h1 { @@ -50,63 +52,9 @@ .article-post-content { padding 15px 0 - - a { - text-decoration: none; - letter-spacing: 1px; - color: #4786D6; - } - - a:hover { - color: #2F69B3; - } - - h3 { - color: #5F5F5F; - font-size: 22px; - font-weight: 600; - } - - h4 { - color: #5F5F5F; - font-size: 16px; - } + line-height 26px } - - .article-meta { - padding-bottom: 20px; - border-bottom: 1px solid #f2f2f2; - color: #bbbbbb; - font-size: 12px; - position relative - - .article-item { - margin-right: 15px; - } - - .article-tags, .article-categories { - display: inline; - - ul, li { - display: inline; - } - - li { - - } - - a { - text-decoration: none; - color: rgba(0, 0, 0, 0.44); - font-weight: 400; - - &:hover { - text-decoration: none; - } - } - } - } } } } diff --git a/source/css/style.styl b/source/css/style.styl index cb264ee..eead4ff 100644 --- a/source/css/style.styl +++ b/source/css/style.styl @@ -9,6 +9,7 @@ @import "common/home-post.styl" @import "common/archive-post.styl" @import "common/article-post.styl" +@import "common/article-meta-info.styl" @import "common/category-post.styl" @import "common/tag-post.styl" @import "common/site-info.styl"