[feat] author

languages/en.yml

@@ -24,6 +24,7 @@ meta:
   comment_title: Join the discussion
   back_to_top: Back to top
   more: 'More %s'
+  created_author: '%s posted on'
   created: 'Posted on'
   updated: 'Updated on'
   license: License

languages/zh-CN.yml

@@ -24,6 +24,7 @@ meta:
   comment_title: 快来参与讨论吧
   back_to_top: 回到顶部
   more: '更多「%s」'
+  created_author: 本文由 %s 发布于
   created: 发布于
   updated: 更新于
   license: 许可协议

languages/zh-TW.yml

@@ -24,6 +24,7 @@ meta:
   comment_title: 參與討論
   back_to_top: 回到頁首
   more: '更多「%s」'
+  created_author: 本文由 %s 發布於
   created: 發布於
   updated: 更新於
   license: 授權條款

layout/_partial/main/navbar/author_banner.ejs

@@ -0,0 +1,31 @@
+<%
+function layoutDiv() {
+  const author = page.author
+  var el = ``
+  el += `<div class="tag-plugin banner author">`
+  if (author.banner) {
+    el += `<img class="bg" src="${author.banner}">`
+  }
+  el += `
+  <div class="content">
+    <div class="top">
+      <button class="back cap" onclick="window.history.back()">
+        <svg aria-hidden="true" viewBox="0 0 16 16" fill="currentColor">
+          <path fill-rule="evenodd" d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z"></path>
+        </svg>
+      </button>
+    </div>
+    <div class="bottom">
+      <img class="avatar" src="${author.avatar}">
+      <div class="text-area">
+        <p class="text title">${author.name}</p>
+        <div class="text subtitle">${author.description || ""}</div>
+      </div>
+    </div>
+  </div>
+  `
+  el += `</div>`
+  return el
+}
+%>
+<%- layoutDiv() %>

layout/_partial/main/navbar/breadcrumb.ejs

@@ -35,13 +35,29 @@ function layoutDiv() {
         });
     }
     el += '</div>';
-    // 发布日期
+    // 作者
+    var author = null
+    if (theme.authors) {
+      if (page.author?.length > 0 && theme.authors[page.author] != null) {
+        author = theme.authors[page.author]
+      } else {
+        author = theme.default_author
+      }
+    }
     el += '<div id="post-meta">';
+    if (author) {
+      let link = `<a href="${url_for(author.path)}">${author.name}</a>`
+      el += `<span class="author">${__("meta.created_author", link)}</span>`
+    } else {
+      el += `<span class="author">${__("meta.created")}</span>`
+    }
+    // 发布日期
     el += `
-    <span>${__("meta.created")}&nbsp;<time datetime="${date_xml(page.date)}">${date(page.date, config.date_format)}</time></span>
+    <span class="created"><time datetime="${date_xml(page.date)}">${date(page.date, config.date_format)}</time></span>
     `;
+    // 更新日期
     el += `
-    <span>${__("meta.updated")}&nbsp;<time datetime="${date_xml(page.updated)}">${date(page.updated, config.date_format)}</time></span>
+    <span class="updated">${__("symbol.comma") + __("meta.updated")}&nbsp;<time datetime="${date_xml(page.updated)}">${date(page.updated, config.date_format)}</time></span>
     `;
     el += '</div>';
     

layout/_partial/main/post_list/post_card.ejs

@@ -68,8 +68,20 @@ function div_default() {
 
   // meta
   el += '<div class="meta cap">';
-  // time
   el += '<span class="cap" id="post-meta">';
+  // author
+  var author = null
+  if (theme.authors) {
+    if (page.author?.length > 0 && theme.authors[page.author] != null) {
+      author = theme.authors[page.author]
+    } else {
+      author = theme.default_author
+    }
+  }
+  if (author) {
+    el += author.name + '&nbsp;'
+  }
+  // time
   el += __("meta.created") + '&nbsp;' + '<time datetime="' + date_xml(post.date) + '">' + date(post.date, config.date_format) + '</time>';
   el += '</span>';
   // cat

layout/archive.ejs

@@ -3,41 +3,58 @@ page.robots = 'noindex,follow';
 if (page.menu_id == undefined) {
   page.menu_id = 'post';
 }
+if (page.author) {
+  page.header = 'auto';
+}
+function layoutArchiveList() {
+  var el = ''
+  if (page.author) {
+    page.title = page.author.name
+    el += partial('_partial/main/navbar/author_banner')
+  } else {
+    page.title = __('btn.archives')
+    el += partial('_partial/main/navbar/list_post')
+  }
+  el += `<div class="post-list archives">`
+  var years = []
+  site.posts.sort('date', -1).each(function(post) {
+  	post.year = date(post.date, 'YYYY')
+  	  if (post.year && (years.includes(post.year) == false) && (post.title || post.date)) {
+  		  years.push(post.year)
+    }
+  })
+  for (let year of years) {
+    el += `<article class="${scrollreveal()}" id="archive">`
+  	el += `<div class='archive-header h4'>${year}</div>`
+    site.posts.sort('date', -1).filter(function (post) {
+      post.year = date(post.date, 'YYYY')
+      return post.year == year
+    }).each(function(post) {
+      el += `<div class="archive-list">`
+      el +=`<a class='post fs14' href="${url_for(post.link || post.path)}">`
+      el += `<time>${date(post.date, 'MM-DD')}</time>`
+      el += `<span>`
+      if (post.title) {
+        el += post.title
+      } else if (post.date) {
+        el += date(post.date, config.date_format)
+      }
+      el += `</span>`
+      el += `</a>`
+      el += `</div>`
+    })
+  	el += `</article>`
+  }
+  el += `</div>`
+  return el
+}
+function layoutDiv() {
+  if (page.posts && (is_category() || is_tag())) {
+    return partial('index')
+  } else {
+    return layoutArchiveList()
+  }
+}
 %>
-<% if (page.posts && (is_category() || is_tag())) { %>
+ 
-  <%- partial('index') %>
+<%- layoutDiv() %>
-<% } else { %>
-  <% page.title = __('btn.archives'); %>
-  <%- partial('_partial/main/navbar/list_post') %>
-  <div class='post-list'>
-  	<% var years = []; %>
-  	<% site.posts.sort('date', -1).each(function(post) { %>
-  		<% post.year = date(post.date, 'YYYY'); %>
-  		<% if (post.year && (years.includes(post.year) == false) && (post.title || post.date)) { %>
-  			<% years.push(post.year); %>
-  		<% } %>
-  	<% }); %>
-  	<% years.forEach((year, i) => { %>
-  		<article class='<%- scrollreveal() %>' id='archive'>
-  			<div class='archive-header h4'><%= year %></div>
-  			<% site.posts.sort('date', -1).filter(function (post) { %>
-  				<% post.year = date(post.date, 'YYYY'); %>
-  		    <% return post.year == year; %>
-  		  <% }).each(function(post) { %>
-  				<div class='archive-list'>
-            <a class='post fs14' href="<%= url_for(post.link || post.path) %>">
-    					<time><%= date(post.date, 'MM-DD') %></time>
-    					<span>
-                <% if (post.title) { %>
-      						<%- post.title %>
-      					<% } else if (post.date) { %>
-      						<%= date(post.date, config.date_format) %>
-      					<% } %>
-              </span>
-    				</a>
-          </div>
-  			<% }); %>
-  		</article>
-  	<% }); %>
-  </div>
-<% } %>

scripts/events/index.js

@@ -6,6 +6,7 @@ hexo.on('generateBefore', () => {
   // Merge config.
   require('./lib/config')(hexo);
   require('./lib/links')(hexo);
+  require('./lib/authors')(hexo);
   require('./lib/doc_tree')(hexo);
   require('./lib/utils')(hexo);
 });

scripts/events/lib/authors.js

@@ -0,0 +1,21 @@
+/**
+ * authors.js v2 | https://github.com/xaoxuu/hexo-theme-stellar/
+ */
+
+'use strict';
+
+module.exports = ctx => {
+  var authors = ctx.locals.get('data').authors || {}
+  let basePath = ctx.config.author_dir || 'author'
+  // url
+  for (let key of Object.keys(authors)) {
+    let author = authors[key]
+    author.path = `${basePath}/${key}/index.html`
+  }
+  // default author
+  const keys = Object.keys(authors)
+  if (keys.length > 0) {
+    ctx.theme.config.default_author = authors[keys[0]]
+  }
+  ctx.theme.config.authors = authors
+}

scripts/events/lib/links.js

@@ -1,5 +1,5 @@
 /**
- * doc_tree.js v2 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * links.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
  */
 
 'use strict';

scripts/generators/author.js

@@ -0,0 +1,22 @@
+/**
+ * author v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ */
+
+hexo.extend.generator.register('author', function (locals) {
+  const { authors } = hexo.theme.config
+  var pages = []
+  for (let key of Object.keys(authors)) {
+    const author = authors[key]
+    if (author.hidden) {
+      continue
+    }
+    pages.push({
+      path: author.path,
+      layout: ['archive'],
+      data: {
+        'author': author
+      }
+    })
+  }
+  return pages
+});

source/css/_layout/list.styl

@@ -170,4 +170,8 @@
   p:last-child
     margin-bottom: 0
   .cap+.cap
-    margin-left: 4px
+    margin-left: 4px
+
+.post-list.archives
+  @media screen and (max-width: $device-mobile)
+    margin: 1rem 0

source/css/_layout/main.styl

@@ -12,3 +12,7 @@
     margin: 2rem 1rem 1rem
     .logo-wrap
       margin: 0
+
+.l_main.list
+  @media screen and (max-width: $device-mobile-max)
+    padding-top: 0

source/css/_layout/pages/archives.styl

@@ -24,14 +24,18 @@
     align-items: baseline
     margin: 0.25rem 0
     color: var(--text-p1)
-    &:hover
+    trans2 color border
-      color: $color-hover
+    border-bottom: 1px dashed var(--text-meta)
     time
       font-family: $ff-code
       margin-right: 1em
       font-weight: 700
       flex-shrink: 0
-      opacity .5
+      color: var(--text-p4)
+    &:hover
+      border-bottom: 1px solid $color-theme
+      time
+        color: $color-theme
   &:hover
     .archive-header
       color: var(--text-p1)

source/css/_layout/partial/bread-nav.styl

@@ -19,13 +19,11 @@
       color: $color-hover
   div#post-meta
     margin-top: 2px
-    span+span
+    span.updated
-      margin-left: 8px
       visibility: hidden
   &:hover
-    div#post-meta
+    div#post-meta span.updated
-      span+span
+      visibility: visible
-        visibility: visible
 
 .bread-nav .ghrepo
   font-size: $fs-13

source/css/_layout/tag-plugins/banner.styl

@@ -6,7 +6,6 @@
   flex-direction: column
   justify-content: flex-end
   align-items: flex-start
-  color: white
   height: 240px
   @media screen and (max-width: $device-mobile-max)
     height: 200px
@@ -78,14 +77,11 @@
     border-radius: 50%
     width: 48px
     height: 48px
-    border: 2px solid white
   .bottom
     display: flex
     padding: 1rem
     width: 100%
     box-sizing: border-box
-    background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2))
-    text-shadow: 0 0 1px rgba(0,0,0,0.12)
     .title
       font-size: 1.5rem
       font-weight: 600
@@ -99,9 +95,27 @@
       font-size: 1.2rem
     .subtitle
       font-size: $fs-14
+  .content:only-child
+    color: var(--text-p1)
+  .bg+.content 
+    color: white
+    .avatar
+      border: 2px solid white
+    .bottom
+      background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2))
+      text-shadow: 0 0 1px rgba(0,0,0,0.12)
 
 .tag-plugin.banner
   trans1(transform, 2s)
   &:hover
     img.bg
-     transform: scale(1.01)
+     transform: scale(1.01)
+
+.l_main.list .tag-plugin.banner
+  background: var(--block-hover)
+  .content .top
+    margin-top: 1.5rem
+  margin: 0 1rem
+  @media screen and (max-width: $device-mobile)
+    margin: 0
+    border-radius: 0