Browse Source

update blog

SyuanYu 1 năm trước cách đây
mục cha
commit
3c5ff63a99
4 tập tin đã thay đổi với 213 bổ sung151 xóa
  1. 98 103
      layouts/_default/list.html
  2. 1 1
      layouts/partials/navbar.html
  3. 113 46
      static/css/style.default.css
  4. 1 1
      webSite/config.toml

+ 98 - 103
layouts/_default/list.html

@@ -1,112 +1,107 @@
 <!DOCTYPE html>
 <html lang="{{ .Site.LanguageCode }}">
 
-  {{ partial "head.html" . }}
-
-  <body>
-
-    <div id="all">
-
-        {{ partial "nav.html" . }}
-
-        {{ partial "breadcrumbs.html" . }}
-
-        <div id="content">
-            <div class="container">
-                <div class="row">
-                    <!-- *** LEFT COLUMN *** -->
-                    <div class="col-md-9" id="blog-listing-medium">
-                    
-                        {{ $paginator := .Paginate (where .Data.Pages "Type" "blog") }}
-                        {{ range $paginator.Pages }}
-                        <section class="post">
-                            <div class="row">
-                                <div class="col-md-4">
-                                  <div class="image">
-                                      <a href="{{ .Permalink }}">
-                                          {{ if .Params.banner }}
-                                          <img src="{{ .Params.banner | relURL }}" class="img-responsive" alt="">
-                                          {{ else }}
-                                          <img src="{{ "img/placeholder.png" | relURL }}" class="img-responsive" alt="">
-                                          {{ end }}
-                                      </a>
-                                  </div>
-                                </div>
-                                <div class="col-md-8">
-                                    <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
-                                    <div class="clearfix">
-                                        <p class="author-category">
-                                          {{ if isset .Params "author" }}
-                                          {{ i18n "authorBy" }} <a href="#">{{ .Params.author }}</a>
-                                          {{ end }}
-                                          {{ if isset .Params "categories" }}
-                                          {{ if gt (len .Params.categories) 0 }}
-                                          in <a href="{{ "categories/" | relURL }}{{ index .Params.categories 0 | urlize | lower }}">{{ index .Params.categories 0 }}</a>
-                                          {{ end }}
-                                          {{ end }}
-
-                                        </p>
-                                        {{ if isset .Params "date" }}
-                                        <p class="date-comments">
-                                            <a href="{{ .Permalink }}"><i class="far fa-calendar"></i> {{ .Date.Format .Site.Params.date_format }}</a>
-                                        </p>
-                                        {{ end }}
-                                    </div>
-                                    <p class="intro">{{ .Summary }}</p>
-                                    <p class="read-more"><a href="{{ .Permalink }}" class="btn btn-template-main">{{ i18n "continueReading" }}</a>
-                                    </p>
-                                </div>
-                            </div>
-                        </section>
-                        {{ end }}
-
-                        <ul class="pager">
-                            {{ if .Paginator.HasPrev }}
-                            <li class="previous"><a href="{{ .Paginator.Prev.URL | relURL }}">&larr; {{ i18n "newer" }}</a></li>
-                            {{ else }}
-                            <li class="previous disabled"><a href="#">&larr; {{ i18n "newer" }}</a></li>
-                            {{ end }}
-
-                            {{ if .Paginator.HasNext }}
-                            <li class="next"><a href="{{ .Paginator.Next.URL | relURL }}">{{ i18n "older" }} &rarr;</a></li>
-                            {{ else }}
-                            <li class="next disabled"><a href="#">{{ i18n "older" }} &rarr;</a></li>
-                            {{ end }}
-                        </ul>
-                    </div>
-                    <!-- /.col-md-9 -->
-
-                    <!-- *** LEFT COLUMN END *** -->
-
-                    <!-- *** RIGHT COLUMN ***
-       _________________________________________________________ -->
-
-                    <div class="col-md-3">
-
-                        <!-- *** MENUS AND WIDGETS *** -->
-
-                        {{ partial "sidebar.html" . }}
-
-                        <!-- *** MENUS AND FILTERS END *** -->
-
-                    </div>
-                    <!-- /.col-md-3 -->
-
-                    <!-- *** RIGHT COLUMN END *** -->
-
+{{ partial "head.html" . }}
+
+<body>
+
+  <div id="all">
+
+    {{ partial "nav.html" . }}
+
+    {{ partial "breadcrumbs.html" . }}
+
+    <div id="content">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-9" id="blog-listing-medium">
+
+            {{ $paginator := .Paginate (where .Data.Pages "Type" "blog") }}
+            {{ range $paginator.Pages }}
+            <section class="post">
+              <div class="row">
+                <div class="col-md-4">
+                  <div class="image">
+                    <a href="{{ .Permalink }}">
+                      {{ if .Params.banner }}
+                      <img src="{{ .Params.banner | relURL }}" class="img-responsive" alt="">
+                      {{ else }}
+                      <img src="{{ " img/placeholder.png" | relURL }}" class="img-responsive" alt="">
+                      {{ end }}
+                    </a>
+                  </div>
+                </div>
+                <div class="col-md-8">
+                  <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+                  <div class="clearfix">
+                    <p class="author-category">
+                      {{ if isset .Params "author" }}
+                      {{ i18n "authorBy" }} <a href="#">{{ .Params.author }}</a>
+                      {{ end }}
+                      {{ if isset .Params "categories" }}
+                      {{ if gt (len .Params.categories) 0 }}
+                      in <a href="{{ " categories/" | relURL }}{{ index .Params.categories 0 | urlize | lower }}">{{
+                        index .Params.categories 0 }}</a>
+                      {{ end }}
+                      {{ end }}
+
+                    </p>
+                    {{ if isset .Params "date" }}
+                    <p class="date-comments">
+                      <a href="{{ .Permalink }}"><i class="far fa-calendar"></i> {{ .Date.Format
+                        .Site.Params.date_format }}</a>
+                    </p>
+                    {{ end }}
+                  </div>
+                  <!-- <p class="intro">{{ .Summary }}</p> -->
+
+                  {{ $maxSummaryLength := 200 }} <!-- 設定顯示的最大字數 -->
+
+                  <!-- 判斷是否需要省略 Summary -->
+                  {{ if gt (len .Summary) $maxSummaryLength }}
+                  <!-- 若 Summary 超過顯示的最大字數則省略 -->
+                  <p class="intro">{{ substr .Summary 0 $maxSummaryLength }}...</p>
+                  {{ else }}
+                  <!-- 未超過則直接顯示 -->
+                  <p class="intro">{{ .Summary }}</p>
+                  {{ end }}
+                  <p class="read-more"><a href="{{ .Permalink }}" class="btn btn-template-main">{{ i18n
+                      "continueReading" }}</a>
+                  </p>
                 </div>
-                <!-- /.row -->
-            </div>
-            <!-- /.container -->
+              </div>
+            </section>
+            {{ end }}
+
+            <ul class="pager">
+              {{ if .Paginator.HasPrev }}
+              <li class="previous"><a href="{{ .Paginator.Prev.URL | relURL }}">&larr; {{ i18n "newer" }}</a></li>
+              {{ else }}
+              <li class="previous disabled"><a href="#">&larr; {{ i18n "newer" }}</a></li>
+              {{ end }}
+
+              {{ if .Paginator.HasNext }}
+              <li class="next"><a href="{{ .Paginator.Next.URL | relURL }}">{{ i18n "older" }} &rarr;</a></li>
+              {{ else }}
+              <li class="next disabled"><a href="#">{{ i18n "older" }} &rarr;</a></li>
+              {{ end }}
+            </ul>
+          </div>
+
+          <div class="col-md-3">
+            {{ partial "sidebar.html" . }}
+          </div>
+
         </div>
-        <!-- /#content -->
+      </div>
+    </div>
 
-        {{ partial "LP_components/Footer.html" . }}
+    {{ partial "LP_components/Footer.html" . }}
 
-    </div>
-    <!-- /#all -->
+  </div>
+
+  {{ partial "scripts.html" . }}
 
-    {{ partial "scripts.html" . }}
+</body>
 
-  </body>
-</html>
+</html>

+ 1 - 1
layouts/partials/navbar.html

@@ -38,7 +38,7 @@
           </ul>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="/tags/vtuber/">部落格</a>
+          <a class="nav-link" href="/blog/">部落格</a>
         </li>
         <!-- <li class="nav-item">
           <a class="nav-link" href="/collaboration/info/">合作夥伴</a>

+ 113 - 46
static/css/style.default.css

@@ -288,7 +288,7 @@ ul.list-style-none {
   text-decoration: none;
   text-transform: uppercase;
   font-weight: 700;
-  letter-spacing: 0.10em;
+  letter-spacing: 0.1em;
 }
 @media (max-width: 767px) {
   #top .login {
@@ -586,9 +586,9 @@ fieldset[disabled] .btn-template-main.active {
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active {
-  background: #EA5413;
+  background: #ea5413;
   color: #ffffff;
-  border-color: #EA5413;
+  border-color: #ea5413;
 }
 .btn-template-transparent-primary {
   color: #ffffff;
@@ -730,7 +730,7 @@ fieldset[disabled] .btn-template-primary.active {
   background-color: #ffffff;
 }
 #intro {
-  background: url('../img/home.jpg') no-repeat center top;
+  background: url("../img/home.jpg") no-repeat center top;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
@@ -790,7 +790,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 30px;
   margin-bottom: 0;
   position: relative;
-  background: url('../img/photogrid.jpg') center center repeat;
+  background: url("../img/photogrid.jpg") center center repeat;
   background-size: cover;
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
@@ -885,7 +885,7 @@ fieldset[disabled] .btn-template-primary.active {
 .panel.sidebar-menu .panel-heading h4,
 .panel.sidebar-menu .panel-heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #EA5413;
+  border-bottom: solid 5px #ea5413;
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -973,7 +973,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 5px;
   border: solid 1px #eeeeee;
   border-radius: 0;
-  color: #EA5413;
+  color: #ea5413;
   margin: 5px 5px 5px 0;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -982,15 +982,15 @@ fieldset[disabled] .btn-template-primary.active {
   text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
-  color: #EA5413;
-  border-color: #EA5413;
+  color: #ea5413;
+  border-color: #ea5413;
 }
 .panel.sidebar-menu ul.tag-cloud li.active a {
-  color: #FFFFFF;
-  background-color: #EA5413;
+  color: #ffffff;
+  background-color: #ea5413;
 }
 .panel.sidebar-menu ul.tag-cloud li.active a:hover {
-  color: #FFFFFF;
+  color: #ffffff;
 }
 .panel.sidebar-menu ul.popular,
 .panel.sidebar-menu ul.recent {
@@ -1053,7 +1053,7 @@ fieldset[disabled] .btn-template-primary.active {
   font-size: 12px;
 }
 .panel.sidebar-menu.with-icons ul.nav li a:after {
-  font-family: 'FontAwesome';
+  font-family: "FontAwesome";
   content: "\f105";
   position: relative;
   top: 0;
@@ -1083,7 +1083,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .ribbon .theribbon:before,
 .ribbon .theribbon:after {
-  content: ' ';
+  content: " ";
   position: absolute;
   width: 0;
   height: 0;
@@ -1148,7 +1148,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .home-carousel {
   position: relative;
-  background: url('../img/photogrid.jpg') center center repeat;
+  background: url("../img/photogrid.jpg") center center repeat;
   background-size: cover;
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
@@ -1217,7 +1217,7 @@ fieldset[disabled] .btn-template-primary.active {
   font-weight: 700;
   padding: 0;
   text-transform: uppercase;
-  letter-spacing: 0.10em;
+  letter-spacing: 0.1em;
 }
 @media (max-width: 991px) {
   .home-carousel ul,
@@ -1239,7 +1239,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .customers .item img {
   display: inline-block;
-  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
+  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
   /* Firefox 10+, Firefox on Android */
   filter: gray;
   /* IE6-9 */
@@ -1731,7 +1731,7 @@ fieldset[disabled] .btn-template-primary.active {
   border: none;
 }
 #heading-breadcrumbs {
-  background: url('https://i.imgur.com/N7tVTSh.png');
+  background: url("https://i.imgur.com/N7tVTSh.png");
   padding: 0 0;
   background-size: cover;
   background-repeat: no-repeat;
@@ -1748,23 +1748,23 @@ fieldset[disabled] .btn-template-primary.active {
 #heading-breadcrumbs .breadcrumbs_title::after {
   position: absolute;
   width: 6rem;
-  height: .5rem;
+  height: 0.5rem;
   top: 145%;
   left: 47.5%;
   content: "";
-  background-color: #EA5413;
+  background-color: #ea5413;
 }
 
 #heading-breadcrumbs .blog_social {
   display: flex;
   align-items: center;
 }
-#heading-breadcrumbs .blog_social a{
+#heading-breadcrumbs .blog_social a {
   margin-right: 1rem;
 }
 
 #heading-breadcrumbs .container:nth-of-type(1) {
-  padding: 30px 0;
+  padding: 60px 0;
 }
 
 #heading-breadcrumbs .container:nth-of-type(2) {
@@ -1779,7 +1779,7 @@ fieldset[disabled] .btn-template-primary.active {
 
 #heading-breadcrumbs .col::before {
   position: absolute;
-  content: '';
+  content: "";
   width: 100%;
   height: 100%;
   border-left: 1px solid black;
@@ -1790,7 +1790,7 @@ fieldset[disabled] .btn-template-primary.active {
 
 #heading-breadcrumbs .col:last-of-type::after {
   position: absolute;
-  content: '';
+  content: "";
   width: 100%;
   height: 100%;
   border-right: 1px solid black;
@@ -1799,9 +1799,9 @@ fieldset[disabled] .btn-template-primary.active {
   z-index: -1;
 }
 
-@media (min-width: 1200px){
-  #heading-breadcrumbs .container:nth-of-type(2)  {
-      max-width: 60%;
+@media (min-width: 1200px) {
+  #heading-breadcrumbs .container:nth-of-type(2) {
+    max-width: 60%;
   }
 }
 
@@ -1834,7 +1834,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 60px 0;
 }
 .bar.background-pentagon {
-  background: url('../img/texture-bw.png') center center repeat;
+  background: url("../img/texture-bw.png") center center repeat;
   border-top: solid 1px #999999;
   border-bottom: solid 1px #999999;
 }
@@ -1848,12 +1848,12 @@ fieldset[disabled] .btn-template-primary.active {
   background: #fff;
 }
 .bar.background-image-fixed-1 {
-  background: url('../img/fixed-background-1.jpg') center top no-repeat;
+  background: url("../img/fixed-background-1.jpg") center top no-repeat;
   background-attachment: fixed;
   background-size: cover;
 }
 .bar.background-image-fixed-2 {
-  background: url('../img/fixed-background-2.jpg') center top no-repeat;
+  background: url("../img/fixed-background-2.jpg") center top no-repeat;
   background-attachment: fixed;
   background-size: cover;
 }
@@ -2206,12 +2206,44 @@ fieldset[disabled] .btn-template-primary.active {
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
+  height: 160px;
+  width: 100%;
+  object-fit: cover;
+  position: relative;
+}
+@media (max-width: 991px) {
+  #blog-listing-medium .post .image img {
+    height: 45vw;
+  }
 }
 @media (max-width: 767px) {
   #blog-listing-medium .post .image img.img-responsive {
     min-width: 100%;
   }
 }
+#blog-listing-medium .post .image::after {
+  position: absolute;
+  content: " ";
+  right: 4rem;
+  bottom: 4rem;
+  width: 90%;
+  height: 91%;
+  z-index: -1;
+}
+#blog-listing-medium .post .image img {
+  border: 5px solid white;
+}
+#blog-listing-medium .post:nth-of-type(3n + 1) .image::after {
+  background-color: thistle;
+}
+
+#blog-listing-medium .post:nth-of-type(3n + 2) .image::after {
+  background-color: #f3f3f9;
+}
+
+#blog-listing-medium .post:nth-of-type(3n) .image::after {
+  background-color: #eba764;
+}
 #blog-listing-medium .post .video {
   margin-bottom: 10px;
 }
@@ -2584,9 +2616,9 @@ fieldset[disabled] .btn-template-primary.active {
   margin: 0 0 20px;
 }
 #footer {
-  background: #F0F0F0;
+  background: #f0f0f0;
   padding: 50px 0;
-  color: #24282F;
+  color: #24282f;
 }
 #footer h1,
 #footer h2,
@@ -2829,7 +2861,7 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
   color: #ffffff;
-  background-color: #FFEBE2;
+  background-color: #ffebe2;
 }
 .nav-stacked > li {
   float: none;
@@ -3072,8 +3104,12 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 10px 15px;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+  -webkit-box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 1px 0 rgba(255, 255, 255, 0.1);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 1px 0 rgba(255, 255, 255, 0.1);
   margin-top: 14px;
   margin-bottom: 14px;
 }
@@ -3173,7 +3209,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
-  background-color: #EA5413;
+  background-color: #ea5413;
 }
 .navbar-default .navbar-toggle .icon-bar {
   background-color: #888888;
@@ -3236,7 +3272,7 @@ body {
   color: #555555;
 }
 a {
-  color: #EA5413;
+  color: #ea5413;
   text-decoration: none;
 }
 .panel.sidebar-menu .panel-body a {
@@ -3328,8 +3364,12 @@ label {
 .form-control:focus {
   border-color: #38a7bb;
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(56, 167, 187, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(56, 167, 187, 0.6);
+  -webkit-box-shadow:
+    inset 0 1px 1px rgba(0, 0, 0, 0.075),
+    0 0 8px rgba(56, 167, 187, 0.6);
+  box-shadow:
+    inset 0 1px 1px rgba(0, 0, 0, 0.075),
+    0 0 8px rgba(56, 167, 187, 0.6);
 }
 .form-group {
   margin-bottom: 20px;
@@ -3349,15 +3389,15 @@ label {
 .pager li > a,
 .pager li > span {
   background-color: #ffffff;
-  border: 1px solid #EA5413;
+  border: 1px solid #ea5413;
   border-radius: 0;
-  color: #EA5413;
+  color: #ea5413;
 }
 .pager li > a:hover,
 .pager li > a:focus {
   text-decoration: none;
   color: #fff;
-  background-color: #EA5413;
+  background-color: #ea5413;
 }
 .pager .disabled > a,
 .pager .disabled > a:hover,
@@ -3514,7 +3554,7 @@ blockquote .small {
 blockquote footer:before,
 blockquote small:before,
 blockquote .small:before {
-  content: '\2014 \00A0';
+  content: "\2014 \00A0";
 }
 .blockquote-reverse,
 blockquote.pull-right {
@@ -3605,9 +3645,36 @@ a.list-group-item.active > .badge,
   background-color: #38a7bb;
 }
 .progress-striped .progress-bar-primary {
-  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -webkit-linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-image: -o-linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
 }
 /*!
  * Yamm!3 - Yet another megamenu for Bootstrap 3

+ 1 - 1
webSite/config.toml

@@ -123,7 +123,7 @@ page = ["HTML"]
 [[menu.main]]
     identifier="blog"
     name = "部落格"
-    url  = "/tags/vtuber/"
+    url  = "/blog/"
     weight = 4
 
 [[menu.main]]