Merge pull request #14 from Astrian/v0.1

new improvements
Astrian · Sep 19, 2019 · 2b94e74 · 2b94e74
2 parents a5f1a50 + 53b662c
commit 2b94e74
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 27 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+page-*.html
+asset/page-*.js
diff --git a/asset/defaultfeaimg.jpg b/asset/defaultfeaimg.jpg
diff --git a/asset/style.css b/asset/style.css
@@ -1,5 +1,5 @@
 body {
-  font-family: 'Noto Sans CJK SC';
+  font-family: 'Avenir', 'Noto Sans CJK SC', sans-serif;
 }
 
 .head {
@@ -22,7 +22,6 @@ body {
 }
 .head nav .item a {
   color: rgba(0, 0, 50, 0.3);
-  font-weight: 100;
   letter-spacing: 5px;
 }
 .head nav .item a:hover {
@@ -57,7 +56,6 @@ body {
 .article.huge .subtitle {
   font-size: 24px;
   color: rgba(0, 0, 0, 0.4);
-  font-weight: 100;
 }
 .article.huge .main {
   background-color: white;
@@ -116,6 +114,16 @@ body {
   width: 30%;
   border: 0.5px solid rgba(0,0,0,0.1);
 }
+.article.huge .body sup a {
+  color: white;
+  background-color: rgb(25, 94, 114);
+  margin: 0px 4px 0px 2px;
+  padding: 0px 4px;
+  border-radius: 2px;
+}
+.article.huge .body sup a:hover {
+  text-decoration: none;
+}
 
 .article.normal .featureimg {
   height: 280px;
@@ -156,7 +164,6 @@ a:hover.item{
 }
 .pagenavi .item {
   color: rgba(0, 0, 50, 0.3);
-  font-weight: 100;
   letter-spacing: 5px;
 }
 .pagenavi .item a {
@@ -199,7 +206,6 @@ a:hover.item{
   font-size: 30px;
   color: rgba(0, 0, 0, 0.5);
   letter-spacing: 1px;
-  font-weight: 100;
   padding-bottom: 10px;
 }
 .footer .meta {
@@ -219,9 +225,32 @@ span.smallcaps {
   font-variant: all-small-caps;
 }
 
+#page {
+  margin: 40px 0px;
+}
+#page h1.title {
+  font-size: 35px;
+  color: #042f39;
+  font-weight: 300;
+}
+#page .content{
+  padding-top: 30px;
+  font-size: 16px;
+}
+
 /* Mobile devices-friendly styles */
 
 @media (max-width: 767.98px) {
+  .head .blogname {
+    font-size: 40px;
+  }
+  .head nav .item {
+    font-size: 18px;
+    text-transform: uppercase;
+  }
+  .head nav .item a {
+    letter-spacing: 3px;
+  }
   .article.huge .featureimg {
     height: 250px;
     margin: 0px -15px;

diff --git a/atom.xml b/atom.xml
@@ -16,11 +16,11 @@
   <entry>
     <title type="html"><![CDATA[{{ p.title }}]]></title>
     <link href="{{ siteURL }}{{ p.url }}"/>
-    <author><name><![CDATA[{{ext_username}}]]></name></author>
+    {% if ext_username.length %}<meta name="description" content="{{ext_username}}" /><author><name><![CDATA[{{ext_username}}]]></name></author>{% /if %}
     <updated>{{ p.artDate }}</updated>
     <id>{{ siteURL }}{{ p.url }}</id>
     <content type="html"><![CDATA[
-    <img src="{{p.ext_featureimg}}" />
+    <img src="{% if p.ext_featureimg.length %}{{p.ext_featureimg}}{% /if %}" />
 {{ p.content }}
 ]]></content>
   </entry>

diff --git a/category.html b/category.html
@@ -2,14 +2,14 @@
   {% for p in posts %}
     {% if currentLoop.currentIndex == 0 %}
       <div class="article huge">
-        <div class="featureimg" style="background-image: url('{{p.ext_featureimg}}')"></div>
+        <div class="featureimg" style="background-image: url('{% if p.ext_featureimg.length %}{{p.ext_featureimg}}{% else %}asset/defaultfeaimg.jpg{% /if %}')"></div>
         <div class="row content">
           <div class="col-md-2"></div>
           <div class="col-md-10 main">
             <div class="row">
               <div class="col-md-10 post">
                 <div class="headline"><a href="{{ p.url }}">{{ p.title }}</a></div>
-                <div class="subtitle">{{p.ext_subtitle}}</div>
+                {% if p.ext_subtitle.length %}<div class="subtitle">{{p.ext_subtitle}}</div>{% /if %}
                 <div class="time">$[timeformat('{{p.dateGTM}}')]</div>
                 <div class="body">
                     {{ p.desContent }}
@@ -29,10 +29,10 @@
         <div class="col-md-6">
           <a href="{{ p.url }}" class="item">
             <div class="article normal">
-              <div class="featureimg" style="background-image: url('{{p.ext_featureimg}}')"></div>
+              <div class="featureimg" style="background-image: url('{% if p.ext_featureimg.length %}{{p.ext_featureimg}}{% else %}asset/defaultfeaimg.jpg{% /if %}')"></div>
               <div class="articleinfo">
                 <div class="headline">{{ p.title }}</div>
-                <div class="subtitle">{{p.ext_subtitle}}</div>
+                {% if p.ext_subtitle.length %}<div class="subtitle">{{p.ext_subtitle}}</div>{% /if %}
               </div>
             </div>
           </a>

diff --git a/extensions/document.json b/extensions/document.json
@@ -10,5 +10,11 @@
         "variableName":"featureimg",
         "inputFieldHeight":22,
         "exampleText":"给文章配一个好看的大题图。"
-     }
+     },
+     {
+         "title":"隐藏 Like.co 赞赏按钮",
+         "variableName":"hidelikeco",
+         "inputFieldHeight":22,
+         "exampleText":"在此填写 true 可隐藏。"
+      }
  ]
diff --git a/extensions/site.json b/extensions/site.json
@@ -22,5 +22,11 @@
          "variableName": "likecoinusername",
          "inputFieldHeight": 22,
          "exampleText": "如无可不填写"
-      }
+      },
+      {
+          "title": "自定义样式",
+          "variableName": "customstyle",
+          "inputFieldHeight": 110,
+          "exampleText": "不推荐自行修改，如有需要，请在模板开发者的指导下修改该自定义样式。"
+       }
  ]
diff --git a/footer.html b/footer.html
@@ -1,10 +1,10 @@
     <div class="container">
       <hr>
       <div class="footer" id="footer">
-        <div class="slogan">{{ siteDes }}</div>
+        <div class="slogan">{% if siteDes.length %}{{ siteDes }}{% else %}Let's tessellate.{% /if %}</div>
         <div class="meta">
-          <p>{{ext_footer}}</p>
-          <p>「{{siteName}}」使用 <a href="https://github.com/Astrian/reflect-white-mweb-theme">Reflect White</a> 视觉主题。</p>
+          {% if ext_footer %}<p>{{ext_footer}}</p>{% /if %}
+          <p>「{{siteName}}」使用 <a href="https://zh.mweb.im/" target="_blank">MWeb</a> 和 <a href="https://github.com/Astrian/reflect-white-mweb-theme" target="_blank">Reflect White</a> 搭建。</p>
         </div>
       </div>
       <script>
@@ -23,4 +23,5 @@
 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+{% if ext_customstyle %}<style>{{ ext_customstyle }}</style>{% /if %}
 </html>
diff --git a/header.html b/header.html
@@ -17,10 +17,16 @@
       <meta name="twitter:creator" content="@Astrian_Zheng" />
       <meta property="og:url" content="{{siteURL}}{{ post.url }}" />
       <meta property="og:title" content="{{post.title}}" />
-      <meta property="og:description" content="{{post.ext_subtitle}}" />
-      <meta property="og:image" content="{{post.ext_featureimg}}" />
-      <meta name="twitter:image" content="{{post.ext_featureimg}}">
-      <meta name="description" content="{{post.ext_subtitle}}" />
+      {% if p.ext_subtitle.length %}
+        <meta property="og:description" content="{{post.ext_subtitle}}" />
+        <meta name="description" content="{{post.ext_subtitle}}" />
+      {% else %}
+        <meta property="og:description" content="{{post.title}}" />
+      {% /if %}
+      {% if post.ext_featureimg.length %}
+        <meta property="og:image" content="{{post.ext_featureimg}}" />
+        <meta name="twitter:image" content="{{post.ext_featureimg}}">
+        {% /if %}
       <meta property="og:site_name" content="{{ siteName }}" />
     {% /if %}
     {% if ext_favicon.length %}

diff --git a/page.html b/page.html
@@ -0,0 +1,14 @@
+<div class="container" id="page">
+
+  <div class="row">
+    <div class="col-md-9 offset-md-3">
+      <h1 class="title" itemprop="name">{{post.title}}</h1>
+    </div>
+  </div>
+  <div class="row content">
+    <div class="col-md-8 offset-md-4">
+      {{ post.content }}
+    </div>
+  </div>
+
+</div>
diff --git a/post.html b/post.html
@@ -1,7 +1,7 @@
-<div class="container">
+<div class="container" id="post">
   <div class="article huge">
-    <div class="featureimg" style="background-image: url('{{post.ext_featureimg}}')"></div>
-    <img src="{{post.ext_featureimg}}" style="display: none;" class="featureimgforexternal">
+    <div class="featureimg" style="background-image: url('{% if post.ext_featureimg.length %}{{post.ext_featureimg}}{% else %}asset/defaultfeaimg.jpg{% /if %}')"></div>
+    <img src="{% if post.ext_featureimg.length %}{{post.ext_featureimg}}{% /if %}" style="display: none;" class="featureimgforexternal">
     <div class="timeGTM" style="display:none;">{{post.dateGTM}}</div>
     <div class="row content">
       <div class="col-md-2"></div>
@@ -10,14 +10,14 @@
           <div class="col-md-10">
             <div class="post">
               <div class="headline"><a href="{{ post.url }}">{{ post.title }}</a></div>
-              <div class="subtitle">{{post.ext_subtitle}}</div>
-              <div class="time" id="post">$[timeformat('{{post.dateGTM}}')]</div>
+              {% if post.ext_subtitle.length %}<div class="subtitle">{{post.ext_subtitle}}</div>{% /if %}
+              <div class="time">$[timeformat('{{post.dateGTM}}')]</div>
               <div class="body">
                   {{ post.content }}
               </div>
             </div>
             {% if ext_likecoinusername.length %}
-              <div class="likecoin" id="likecoinarea">
+              <div class="likecoin" id="likecoinarea" v-if="hidelikecoin !== 'true'">
                 <div class="explain">
                   感谢你看到这里！如果你喜欢这篇文章，请在下方为我鼓掌（Like）<br>这样做不仅可以让我获得实质性收入，更可在 liker.land 网站收到我的最新文章更新
                 </div>
@@ -40,7 +40,9 @@ <h1>评论</h1>
 <script>
     let post = new Vue({
      el: '#post',
-     data: {},
+     data: {
+       hidelikecoin: {% if post.ext_hidelikeco.length %}'{{ post.ext_hidelikeco }}'{% else %}''{% /if %}
+     },
      methods: {
        timeformat(raw) {
          return moment(raw).format("YYYY 年 MM 月 DD 日");