[ Add ] Activity List widget

[ Optimize ]  Replace Activities Calendar with Activities List

Author: TechQuery

ReadMe.md

@@ -71,11 +71,13 @@ git push
 
 4. [博文资源](themes/Icarus/layout/widget/post_media.ejs)
 
-5. [博文日历](themes/Icarus/layout/widget/calendar.ejs)
+5. [活动列表](themes/Icarus/layout/widget/activity_list.ejs)
 
-6. [多点地图](themes/Icarus/layout/widget/marker_map.ejs)
+6. [活动日历](themes/Icarus/layout/widget/calendar.ejs)
 
-7. [活动简讯](themes/Icarus/layout/widget/activity.ejs)
+7. [多点地图](themes/Icarus/layout/widget/marker_map.ejs)
+
+8. [活动简讯](themes/Icarus/layout/widget/activity.ejs)
 
 ### 页面布局
 

source

@@ -97,7 +97,7 @@ sidebar:
     right:
         # Whether the right sidebar is sticky when page scrolls
         # http://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
-        sticky: false
+        sticky: true
 # Sidebar widget settings
 # http://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
 widgets:

themes/Icarus/_config.yml

@@ -1,23 +1,32 @@
-<h2 class="flex-box has-text-centered">
-  <%= page.title %>
-  <a class="btn btn-primary" href="launch">
-    发起活动
-  </a>
-</h2>
-<hr>
-<h3>日历</h3>
-<%-
-  partial('widget/calendar', {
-    posts:  site.posts,
-    type:   page.type
-  })
-%>
-<hr>
-<h3>地图</h3>
-<%-
-  partial('widget/marker_map', {
-    markers: site.posts.map(
-      ({title, permalink, address})  =>  (address && {title, URL: permalink, address})
-    ).filter( Boolean )
-  })
-%>
+<main class="card">
+  <div class="card-content content">
+    <div class="flex-box">
+      <h2 style="margin: 0">
+        <%= page.title %>
+      </h2>
+      <a class="button is-link is-rounded" href="launch">
+        发起活动
+      </a>
+    </div>
+
+    <h3>近期活动</h3>
+    <%- partial('widget/activity_list', {
+      posts: site.posts.sort('-date')
+    }) %>
+    <div style="text-align: center">
+      <a class="button is-rounded" href="<%= url_for('categories/Activity/') %>">
+        查看所有
+      </a>
+    </div>
+    <hr>
+
+    <h3>FCC 成都社区的足迹</h3>
+    <%-
+      partial('widget/marker_map', {
+        markers: site.posts.map(
+          ({title, permalink, address})  =>  (address && {title, URL: permalink, address})
+        ).filter( Boolean )
+      })
+    %>
+  </div>
+</main>

themes/Icarus/layout/activity.ejs

@@ -0,0 +1,37 @@
+<style>
+  .activity-item {
+    margin: 1rem 0;
+  }
+  .activity-item > :nth-child(n+2) {
+    padding-left: 1rem;
+  }
+  .activity-item .flex-box {
+    justify-content: space-between;
+  }
+  .activity-item .flex-box > :last-child {
+    white-space: pre;
+    text-align: center;
+  }
+</style>
+
+<% posts.filter(
+  post => has_category(post, 'Activity')
+).slice(0, 5).forEach(post => { %>
+  <a class="table-row activity-item" href="<%= post.permalink %>">
+    <div class="image is-64x64">
+        <img class="thumbnail" src="<%= get_thumbnail(post) %>" alt="<%= post.title %>">
+    </div>
+    <div>
+      <div class="flex-box">
+        <div>
+          <h4><%= post.title %></h4>
+          <%= post.description %>
+        </div>
+        <div>
+          <%= date( post.start ) %>
+          <%= time( post.start ) %>
+        </div>
+      </div>
+    </div>
+  </a>
+<% }) %>

themes/Icarus/layout/widget/activity_list.ejs

@@ -24,7 +24,7 @@ if ( authors ) { %>
   </div><%
 }
 
-if ( photos ) { %>
+if ( photos[0] ) { %>
   <div class="content">
     <h3>精彩瞬间</h3>
     <%- partial('../widget/gallery', {images: photos}) %>

themes/Icarus/layout/widget/post_media.ejs

@@ -17,3 +17,12 @@ iframe, .embed-box {
   display: inline-block;
   vertical-align: top;
 }
+
+.table-row {
+  display: table;
+  width: 100%;
+}
+.table-row > * {
+  display: table-cell;
+  vertical-align: middle;
+}