ReadMe.zh.md

D0n9X1n · Jun 14, 2017 · 95a2043 · 95a2043
1 parent e32321c
commit 95a2043
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 83 deletions.
diff --git a/ReadMe.md b/ReadMe.md
@@ -13,7 +13,7 @@
 See [https://mhexo.github.io/example-site/2016/10/26/HexoBlogEncrpyt/](https://mhexo.github.io/example-site/2016/10/26/HexoBlogEncrpyt/), **all passwords are *mikemessi***.
 
 # Install
-+ Add '"hexo-blog-encrypt": "1.1.\*"' to your hexo *package.json*.
++ Add '"hexo-blog-encrypt": "2.0.\*"' to your hexo *package.json*.
 + Then use *npm install*.
 + This plugin will install automatic.
 
@@ -116,18 +116,12 @@ encrypt:
     default_abstract: the content has been encrypted, enter the password to read.</br>
     default_message: Please enter the password to read.
     default_template:
-                    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
-                    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
                     <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
-                    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
                     <div id="security">
-                        <div>
-                            <div class="input-group">
-                                <input type="text" class="form-control" aria-label="enter the password" id="pass"/>
-                                <div class="input-group-btn">
-                                    <button type="button" class="btn btn-default" onclick="decryptAES()">解密</button>
-                                </div>
-                            </div>
+                        <div class="input-container">
+                            <input type="password" class="form-control" id="pass" placeholder=" {{message}} " />
+                            <label for="pass"> {{message}} </label>
+                            <div class="bottom-line"></div>
                         </div>
                     </div>
                     <div id="encrypt-blog" style="display:none">
@@ -152,19 +146,12 @@ password: Mike
 abstract: Welcome to my blog, enter password to read.
 message: Welcome to my blog, enter password to read.
 template:
-        <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
-        <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
         <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
-        <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
         <div id="security">
-            <span>密码是 "mikemessi"</span>
-            <div>
-                <div class="input-group">
-                    <input type="text" class="form-control" aria-label="enter the password" id="pass"/>
-                    <div class="input-group-btn">
-                        <button type="button" class="btn btn-default" onclick="decryptAES()">解密</button>
-                    </div>
-                </div>
+            <div class="input-container">
+                <input type="password" class="form-control" id="pass" placeholder=" {{message}} " />
+                <label for="pass"> {{message}} </label>
+                <div class="bottom-line"></div>
             </div>
         </div>
         <div id="encrypt-blog" style="display:none">

diff --git a/ReadMe.zh.md b/ReadMe.zh.md
@@ -127,18 +127,12 @@ encrypt:
     default_abstract: the content has been encrypted, enter the password to read.</br>
     default_message: Please enter the password to read.
     default_template:
-                    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
-                    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
                     <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
-                    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
                     <div id="security">
-                        <div>
-                            <div class="input-group">
-                                <input type="text" class="form-control" aria-label="enter the password" id="pass"/>
-                                <div class="input-group-btn">
-                                    <button type="button" class="btn btn-default" onclick="decryptAES()">解密</button>
-                                </div>
-                            </div>
+                        <div class="input-container">
+                            <input type="password" class="form-control" id="pass" placeholder=" {{message}} " />
+                            <label for="pass"> {{message}} </label>
+                            <div class="bottom-line"></div>
                         </div>
                     </div>
                     <div id="encrypt-blog" style="display:none">
@@ -167,19 +161,12 @@ password: Mike
 abstract: Welcome to my blog, enter password to read.
 message: Welcome to my blog, enter password to read.
 template:
-        <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
-        <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
         <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
-        <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
         <div id="security">
-            <span>密码是 "mikemessi"</span>
-            <div>
-                <div class="input-group">
-                    <input type="text" class="form-control" aria-label="enter the password" id="pass"/>
-                    <div class="input-group-btn">
-                        <button type="button" class="btn btn-default" onclick="decryptAES()">解密</button>
-                    </div>
-                </div>
+            <div class="input-container">
+                <input type="password" class="form-control" id="pass" placeholder=" {{message}} " />
+                <label for="pass"> {{message}} </label>
+                <div class="bottom-line"></div>
             </div>
         </div>
         <div id="encrypt-blog" style="display:none">

diff --git a/example.html b/example.html
@@ -0,0 +1,11 @@
+<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
+<div id="security">
+    <div class="input-container">
+        <input type="password" class="form-control" id="pass" placeholder=" {{message}} " />
+        <label for="pass"> {{message}} </label>
+        <div class="bottom-line"></div>
+    </div>
+</div>
+<div id="encrypt-blog" style="display:none">
+    {{content}}
+</div>
diff --git a/index.js b/index.js
@@ -29,7 +29,7 @@ hexo.extend.filter.register("after_post_render", function (data) {
         return data;
     }
     if (!('default_template' in hexo.config.encrypt && hexo.config.encrypt.default_template)) { // no such template
-        hexo.config.encrypt.default_template = '<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div id="security"> <div> <div class="input-group"> <input type="text" class="form-control" aria-label="Enter the password." id="pass"/> <div class="input-group-btn"> <button type="button" class="btn btn-default" onclick="decryptAES()">Decrypt</button> </div> </div> </div> </div> <div id="encrypt-blog" style="display:none"> {{content}} </div>';
+        hexo.config.encrypt.default_template = '<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <div id="security"> <div> <div class="input-container"> <input type="password" class="form-control" id="pass" placeholder=" {{message}} "/> <label for="pass"> {{message}} </label> <div class="bottom-line"></div> </div> </div> </div> <div id="encrypt-blog" style="display:none"> {{content}} </div>';
     }
     if (!('default_abstract' in hexo.config.encrypt && hexo.config.encrypt.default_abstract)) { // no read more info
         hexo.config.encrypt.default_abstract = 'The article has been encrypted, please enter your password to view.<br>';
@@ -60,49 +60,18 @@ hexo.extend.filter.register("after_post_render", function (data) {
         data.content = CryptoJS.enc.Utf8.parse(data.content);
         data.content = CryptoJS.enc.Base64.stringify(data.content);
         data.content = CryptoJS.AES.encrypt(data.content, String(data.password)).toString();
-        data.content = data.template.replace('{{content}}', data.content);
-        data.content = '<h3 id="encrypt-message">' + data.message + '</h3>' + data.content;
+        console.log(data.content);
+        data.template = data.template.replace('{{content}}', data.content);
+        data.template = data.template.replace('{{message}}', data.message);
+        data.template = data.template.replace('{{message}}', data.message);
+
+        data.content = data.template;
         data.content = '<script src="' + hexo.config.root + 'mcommon.js"></script>' + data.content;
         data.content = '<script src="' + hexo.config.root + 'crypto-js.js"></script>' + data.content;
+        data.content = '<link href="' + hexo.config.root + 'style.css" rel="stylesheet" type="text/css">' + data.content;
 
         data.more = data.abstract;
         data.excerpt = data.more;
-    } else {
-        // no blogs config
-        if (!'blogs' in hexo.config.encrypt || !hexo.config.encrypt.blogs) {
-            return data;
-        }
-        for (var i = 0, len = hexo.config.encrypt.blogs.length; i < len; i++) {
-            if ('blogs' in hexo.config.encrypt && data.title.trim() == hexo.config.encrypt.blogs[i].title.trim()) {
-                console.log('encrypt the blog :' + data.title.trim());
-
-                // store the origin data
-                data.origin = data.content;
-                data.encrypt = true;
-
-                if (!hexo.config.encrypt.blogs[i].abstract) {
-                    hexo.config.encrypt.blogs[i].abstract = hexo.config.encrypt.default_abstract;
-                }
-                if (!hexo.config.encrypt.blogs[i].template) {
-                    hexo.config.encrypt.blogs[i].template = hexo.config.encrypt.default_template;
-                }
-                if (!hexo.config.encrypt.blogs[i].message) {
-                    hexo.config.encrypt.blogs[i].message = hexo.config.encrypt.default_message;
-                }
-
-                data.content = escape(data.content);
-                data.content = CryptoJS.enc.Utf8.parse(data.content);
-                data.content = CryptoJS.enc.Base64.stringify(data.content);
-                data.content = CryptoJS.AES.encrypt(data.content, hexo.config.encrypt.blogs[i].password).toString();
-                data.content = hexo.config.encrypt.blogs[i].template.replace('{{content}}', data.content);
-                data.content = '<h3 id="encrypt-message">' + hexo.config.encrypt.blogs[i].message + '</h3>' + data.content;
-                data.content = '<script src="' + hexo.config.root + 'mcommon.js"></script>' + data.content;
-                data.content = '<script src="' + hexo.config.root + 'crypto-js.js"></script>' + data.content;
-
-                data.more = hexo.config.encrypt.blogs[i].abstract;
-                data.excerpt = data.more;
-            }
-        }
     }
     return data;
 });
@@ -117,5 +86,10 @@ hexo.on('exit', function() {
     fs.readFile(corejs).then(function(content) {
         fs.copyFile(corejs, pathFn.join(hexo.public_dir, 'crypto-js.js'));
     });
+
+    var cssFile = pathFn.join(pathFn.join(pathFn.join(pathFn.join(hexo.base_dir, 'node_modules'), 'hexo-blog-encrypt'), 'lib'), 'style.css');
+    fs.readFile(cssFile).then(function(content) {
+        fs.copyFile(cssFile, pathFn.join(hexo.public_dir, 'style.css'));
+    });
 });
 
diff --git a/lib/mcommon.js b/lib/mcommon.js
@@ -11,7 +11,6 @@ function decryptAES() {
         } else {
             document.getElementById("encrypt-blog").style.display    = "inline";
             document.getElementById("encrypt-blog").innerHTML        = content;
-            document.getElementById("encrypt-message").style.display = "none";
 
             document.getElementById("security").style.display        = "none";
 

diff --git a/lib/style.css b/lib/style.css
@@ -0,0 +1,69 @@
+.input-container {
+    width: 500px;
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: reverse;
+    -ms-flex-flow: column-reverse;
+    flex-flow: column-reverse;
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    align-items: flex-start;
+    margin: 100px auto;
+}
+.input-container input {
+    -webkit-box-ordinal-group: 11;
+    order: 10;
+    -ms-flex-order: 10;
+    outline: none;
+    border: none;
+    width: 100%;
+    padding: 15px 0;
+    font-size: 20px;
+    border-bottom: 1px solid #d5d5d5;
+    text-indent: 10px;
+}
+.input-container input::-moz-placeholder {
+    opacity: 0;
+}
+.input-container input::-webkit-input-placeholder {
+    opacity: 0;
+}
+.input-container input:-ms-input-placeholder {
+    opacity: 0;
+}
+.input-container input, .input-container label {
+    transition: all 0.3s;
+}
+.input-container label {
+    -webkit-box-ordinal-group: 101;
+    -ms-flex-order: 100;
+    font-size: 18px;
+    order: 100;
+    color: #3f4f5b;
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: translate(10px, 40px);
+transform: translate(0px, 40px); }
+.input-container .bottom-line {
+    order: 2;
+    width: 0;
+    height: 2px;
+    background: #658db5;
+    transition: all 0.3s;
+}
+.input-container input:focus {
+    border-bottom-color: #fff;
+}
+.input-container input:focus ~ div,
+.input-container input:not(:placeholder-shown) ~ div {
+    width: 100%;
+}
+.input-container input:focus + label,
+.input-container input:not(:placeholder-shown) + label {
+    color: #52616c;
+    -webkit-transform: translate(10px) scale(0.9);
+    transform: translate(10px) scale(0.9);
+}