From 5934ff1157591826d6838f2cfc1ccddd70ce867c Mon Sep 17 00:00:00 2001
From: eshengsky <eshengsky@163.com>
Date: Wed, 14 Jun 2017 23:45:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E7=AB=A0=E9=A1=B5=E9=9D=A2=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=AD=97=E4=BD=93=E7=BC=A9=E6=94=BE=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/javascripts/article.js | 45 +++++++++++++++++++++++++++++
 public/stylesheets/site.css   | 53 +++++++++++++++++++++++++++++++++++
 views/blog/article.html       |  4 +++
 3 files changed, 102 insertions(+)

diff --git a/public/javascripts/article.js b/public/javascripts/article.js
index b18b999..d4a7e59 100644
--- a/public/javascripts/article.js
+++ b/public/javascripts/article.js
@@ -55,6 +55,51 @@
         });
     });
 
+    var fontSelectors = [
+        '.post-title h1',
+        '.post-content blockquote',
+        '.post-content blockquote h2',
+        '.post-content h2',
+        '.post-content h3',
+        '.post-content pre'
+    ];
+
+    //缩小字体
+    $(".btn-font-minus").on("click", function () {
+        if ($(this).hasClass('disabled')) {
+            return;
+        }
+        var bodyFontSize = parseInt($('body').css('fontSize')) - 2;
+        $('body').css('fontSize', bodyFontSize + 'px');
+        fontSelectors.forEach(function (selector) {
+            $(selector).css('fontSize', (parseInt($(selector).css('fontSize')) - 2) + 'px');
+        });
+        if (bodyFontSize <= 12) {
+            $(this).addClass('disabled');
+        }
+        if ($(".btn-font-plus").hasClass('disabled')) {
+            $(".btn-font-plus").removeClass('disabled');
+        }
+    });
+
+    //增大字体
+    $(".btn-font-plus").on("click", function () {
+        if ($(this).hasClass('disabled')) {
+            return;
+        }
+        var bodyFontSize = parseInt($('body').css('fontSize')) + 2;
+        $('body').css('fontSize', bodyFontSize + 'px');
+        fontSelectors.forEach(function (selector) {
+            $(selector).css('fontSize', (parseInt($(selector).css('fontSize')) + 2) + 'px');
+        });
+        if (bodyFontSize >= 36) {
+            $(this).addClass('disabled');
+        }
+        if ($(".btn-font-minus").hasClass('disabled')) {
+            $(".btn-font-minus").removeClass('disabled');
+        }
+    });
+
     //改变窗口大小后，重置目录，以修正各标题的定位
     $(window).on("resize", function () {
         $.fn.scrollNav("resetPos");
diff --git a/public/stylesheets/site.css b/public/stylesheets/site.css
index cb9d858..76ab3c5 100644
--- a/public/stylesheets/site.css
+++ b/public/stylesheets/site.css
@@ -1285,6 +1285,7 @@ img.wechat-img {
     margin-top: 110px;
     margin-left: 197px;
     padding: 2px 6px;
+    font-size: 14px;
 }
 
 .close-menu:hover {
@@ -1292,6 +1293,7 @@ img.wechat-img {
 }
 
 .btn-menu {
+    height: 40px;
     position: fixed;
     margin-top: -41px;
     border-color: #e7eaec;
@@ -1304,6 +1306,57 @@ img.wechat-img {
     border-color: #ccc;
 }
 
+.font-controller {
+    position: fixed;
+    width: 40px;
+    margin-left: -70px;
+    margin-top: -41px;
+    background: #fff;
+    transition: none;
+}
+
+.font-controller .btn-font {
+    float: left;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    border: 1px solid #e7eaec;
+    user-select: none;
+    font-size: 14px !important;
+}
+
+.font-controller .btn-font:hover {
+    cursor: pointer;
+    border-color: #ccc;
+}
+
+.font-controller .btn-font:active {
+    background-image: none;
+    outline: 0;
+    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+}
+
+.font-controller .btn-font.disabled {
+    border-color: #ccc;
+    filter: alpha(opacity=35);
+    opacity: .35;
+}
+
+.font-controller .btn-font.disabled:hover {
+    cursor: not-allowed;
+}
+
+.font-controller .btn-font.disabled:active {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.font-controller .btn-font-minus {
+    border-bottom-color: transparent;
+}
+
 .post-content h2 {
     background: #fbfbfb none repeat scroll 0 0;
     border-left: 4px solid #39c;
diff --git a/views/blog/article.html b/views/blog/article.html
index a97fb64..3831b25 100644
--- a/views/blog/article.html
+++ b/views/blog/article.html
@@ -8,6 +8,10 @@
                 <button title='@__("blog.article.table_of_content")' class="btn btn-white btn-menu">
                     <i class="fa fa-align-justify"></i>
                 </button>
+                <div class="font-controller hidden-sm hidden-xs">
+                    <div title="缩小字体" class="btn-font btn-font-minus">A-</div>
+                    <div title="增大字体" class="btn-font btn-font-plus">A+</div>
+                </div>
                 <div class="hidden-sm hidden-xs">
                     <div class="text-muted pull-left">
                         <span title='@__("blog.article.category")'>