use npm script instead of compass

showonne · Oct 16, 2016 · 010c10c · 010c10c
1 parent 5088179
commit 010c10c
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 54 deletions.
diff --git a/_config.yml b/_config.yml
@@ -2,6 +2,7 @@
 menu:
   Home: /
   Archives: /archives
+  Categories: /categories
   Tags: /tags
   About: /about
 

diff --git a/layout/_partial/_article/detail.ejs b/layout/_partial/_article/detail.ejs
@@ -0,0 +1,22 @@
+<article>
+    <h1 class='post-title'>
+        <span><%= post.title %></span>
+    </h1>
+    <section class='post-content'>
+        <% if(post.photos){ %>
+            <% for(var i = 0, len = post.photos.length; i < len; i++){ %>
+                <img class="gallery" src="<%=post.photos[i] %>">
+            <% } %>
+        <% } %>
+        <%- post.content %>
+    </section>
+    <% if(post.comments){ %>
+        <section id="comments">
+        <% if (config.duoshuo_shortname){ %>
+                <%- partial('_partial/_plugins/duoshuo') %>
+            <% }else if(config.disqus_shortname){ %>
+                <%- partial('_partial/_plugins/disqus') %>
+            <% } %>
+        </section>
+    <% } %>
+</article>
diff --git a/layout/_partial/_article/index.ejs b/layout/_partial/_article/index.ejs
@@ -0,0 +1,25 @@
+<article>
+    <% if(!post.link){ %><h4 class="post-title"><i class="iconfont">&#xe609;</i><a href="<%- url_for(post.path) %>"><%= /^\s*$/.test(post.title) ? ' ' : post.title %></a></h4><% }else{ %>
+        <h4 class="post-title"><i class="iconfont">&#xe609;</i><a href="<%- post.link %>" target="blank"><%= post.link.split('://')[1].replace(/\/\S*/, '') %></a></h4>
+    <% } %>
+    <h6 class="date"><i class="iconfont">&#xf0069;</i><%= post.date.format('YYYY-MM-DD') %></h6>
+    <%- list_tags(post.tags, {
+        show_count: false,
+        class: 'article-tag'
+    }) %>
+    <section class="md post-content">
+        <% if(post.photos){ %>
+            <% for(var i = 0, len = post.photos.length; i < len; i++){ %>
+                <img class="gallery" src="<%=post.photos[i] %>">
+            <% } %>
+        <% } %>
+        <% if(!/^\s*$/.test(post.excerpt)){ %>
+            <%- post.excerpt %>
+        <% }else{ %>
+            <%- post.content %>
+        <% } %>
+    </section>
+    <% if(!/^\s*$/.test(post.excerpt)){ %>
+        <a href="<%- url_for(post.path) %>" class="more"><%= theme.excerpt_link %></a>
+    <% } %>
+</article>
diff --git a/layout/_partial/disqus.ejs → layout/_partial/_plugins/disqus.ejs b/layout/_partial/disqus.ejs → layout/_partial/_plugins/disqus.ejs
diff --git a/layout/_partial/duoshuo.ejs → layout/_partial/_plugins/duoshuo.ejs b/layout/_partial/duoshuo.ejs → layout/_partial/_plugins/duoshuo.ejs
diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
@@ -1,42 +1,9 @@
 <% if(index){ %>
-    <article>
-        <% if(!post.link){ %><h4 class="post-title"><i class="iconfont">&#xe609;</i><a href="<%- url_for(post.path) %>"><%= /^\s*$/.test(post.title) ? ' ' : post.title %></a></h4><% }else{ %>
-            <h4 class="post-title"><i class="iconfont">&#xe609;</i><a href="<%- post.link %>" target="blank"><%= post.link.split('://')[1].replace(/\/\S*/, '') %></a></h4>
-        <% } %>
-        <h6 class="date"><i class="iconfont">&#xf0069;</i><%= post.date.format('YYYY-MM-DD') %></h6>
-        <%- list_tags(post.tags, {
-            show_count: false,
-            class: 'article-tag'
-        }) %>
-        <section class="md post-content">
-            <% if(!/^\s*$/.test(post.excerpt)){ %>
-                <%- post.excerpt %>
-            <% }else{ %>
-                <%- post.content %>
-            <% } %>
-        </section>
-        <% if(!/^\s*$/.test(post.excerpt)){ %>
-            <a href="<%- url_for(post.path) %>" class="more"><%= theme.excerpt_link %></a>
-        <% } %>
-    </article>
-<% }else if(post.type !== 'tags'){ %>
-    <article>
-        <h1 class='post-title'>
-            <span><%= post.title %></span>
-        </h1>
-        <section class='post-content'>
-            <%- post.content %>
-        </section>
-        <% if(post.comments){ %>
-            <section id="comments">
-            <% if (config.duoshuo_shortname){ %>
-                    <%- partial('_partial/duoshuo') %>
-                <% }else if(config.disqus_shortname){ %>
-                    <%- partial('_partial/disqus') %>
-                <% } %>
-            </section>
-        <% } %>
-    </article>
-<% }else{ %>
+    <%- partial('_partial/_article/index', {post: post}) %>
+<% } else if(post.type === 'tags'){ %>
     <%- list_tags() %>
-<% } %>
+<% } else if(post.type === 'categories'){ %>
+    <%- list_categories() %>
+<% } else { %>
+    <%- partial('_partial/_article/detail', {post: post}) %>
+<% } %>
diff --git a/package.json b/package.json
@@ -4,7 +4,8 @@
   "description": "hexo theme",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "node-sass source/sass/style.scss source/css/style.css --output-style compressed",
+    "dev": "node-sass source/sass/style.scss source/css/style.css --watch"
   },
   "keywords": [
     "hexo",

diff --git a/source/config.rb b/source/config.rb
diff --git a/source/css/style.css b/source/css/style.css
diff --git a/source/sass/_variable.scss b/source/sass/_variable.scss
@@ -27,4 +27,6 @@ $link-hover: #41a0cc;
 $code-bg: #eaeef3;
 $code-color: #0048ab;
 
-$archive-item-hover: #204264;
+$archive-item-hover: #204264;
+
+$tag-item-hover: #204264;
diff --git a/source/sass/style.scss b/source/sass/style.scss
@@ -409,12 +409,15 @@ header{
     display: flex;
     flex-flow: column nowrap;
     align-items: center;
+    h1{
+        font-size: 1.8em;
+    }
     .tag_item{
         .title{
-            color: #555555;
+            color: inherit;
             text-decoration: none;
             &:hover{
-                color: #ff7423
+                color: $tag-item-hover;
             }
         }
         width: 80%;
@@ -426,6 +429,36 @@ header{
     }
 }
 
+.category-list{
+    list-style: none;
+    display: flex;
+    flex-flow: row wrap;
+    margin-top: 100px;
+    justify-content: flex-start;
+    padding: 0 40px;
+    .category-list-item{
+        margin: 20px 20px;
+        .category-list-link{
+            text-decoration: none;
+            background: $tag-list-link;
+            padding: 10px 20px;
+            color: #fff;
+            transition: background ease .2s;
+            &:hover{
+                background: $tag-list-link-hover;
+            }
+        }
+        .category-list-child{
+            padding: 5px 0;
+        }
+        .category-list-count{
+            background: $tag-list-count;
+            color: #fff;
+            padding: 10px 10px;
+        }
+    }
+}
+
 .pagination{
     margin-top: 30px;
     font-size: 1.2em;
@@ -468,3 +501,12 @@ footer{
         }
     }
 }
+
+.gallery{
+    max-width: 100%;
+}
+
+.line{
+    margin-right: 10px;
+}
+