V3.1.0 (#160)

* change to use theme, and add a default theme * update theme default.html * add themes * add theme * update ReadMe * remove duplicate tag
D0n9X1n · Dec 24, 2020 · ba3d8a3 · ba3d8a3
1 parent d6b965e
commit ba3d8a3
Show file tree

Hide file tree

Showing 15 changed files with 977 additions and 139 deletions.
diff --git a/ReadMe.md b/ReadMe.md
@@ -28,6 +28,8 @@
 
 - Promise is widely used to make sure our main procedures are asynchronous, so that there is little chance for the process to be blocked, and the experience will be more fluent.
 
+- Template theme supported, you can use [`default`, `blink`, `flip`, `shrink`, `surge`, `up`, `wave`, `xray`] to set up your template theme, and [CHECK ONLINE](https://mhexo.github.io/tags/ThemeTests/).
+
 - Outdated browsers may not work well. In such case, please upgrade your browser.
 
 ## Online demo
@@ -49,7 +51,7 @@
 ---
 title: Hello World
 date: 2016-03-30 21:18:02
-password: mikemessi
+password: hello
 ---
 
 ```
@@ -92,7 +94,6 @@ encrypt: # hexo-blog-encrypt
   tags:
   - {name: encryptAsDiary, password: passwordA}
   - {name: encryptAsTips, password: passwordB}
-  template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
   wrong_pass_message: Oh, this is an invalid password. Check and try again, please.
   wrong_hash_message: Oh, these decrypted content cannot be verified, but you can still have a look.
 
@@ -146,7 +147,7 @@ Demo: [Callback Example](https://mhexo.github.io/2019/12/21/CallbackTest/).
 
 ### Encrypt TOC
 
-If you has a post with TOC, you should change the code of template. Take the default theme 'landscape' as an example:
+If you has a post with TOC, you should change the code of your template. Take the default theme 'landscape' as an example:
 
 + You should find the `article.ejs` file located at `hexo/themes/landscape/layout/_partial/article.ejs`.
 + Find the code like <% post.content %>, which is usually at line 30.
@@ -177,6 +178,54 @@ encrypt: # hexo-blog-encrypt
 
 This would disable the logging like `INFO  hexo-blog-encrypt: encrypting "{Blog Name}" based on Tag: "EncryptedTag".`.
 
+### Encrypt Theme
+Previously, we use `template` to let users modify their own themes. Turn out that it's not a simple way. So, we are introducing this feature here.
+
+You can simply use `theme` in `_config.yml` or in header like:
+
+#### In post's front matter
+
+```markdown
+---
+title: Theme test
+date: 2019-12-21 11:54:07
+tags:
+    - A Tag should be encrypted
+theme: xray
+password: "hello"
+---
+```
+
+#### In `_config.yml`
+
+This would be a default one.
+
+```yaml
+# Security
+encrypt: # hexo-blog-encrypt
+  abstract: Here's something encrypted, password is required to continue reading.
+  message: Hey, password is required here.
+  tags:
+  - {name: encryptAsDiary, password: passwordA}
+  - {name: encryptAsTips, password: passwordB}
+  theme: xray
+  wrong_pass_message: Oh, this is an invalid password. Check and try again, please.
+  wrong_hash_message: Oh, these decrypted content cannot be verified, but you can still have a look.
+
+```
+
+Check them online, and PICK one:
+
++ [default](https://mhexo.github.io/2020/12/23/Theme-Test-Default/)
++ [blink](https://mhexo.github.io/2020/12/23/Theme-Test-Blink/)
++ [shrink](https://mhexo.github.io/2020/12/23/Theme-Test-Shrink/)
++ [flip](https://mhexo.github.io/2020/12/23/Theme-Test-Flip/)
++ [up](https://mhexo.github.io/2020/12/23/Theme-Test-Up/)
++ [surge](https://mhexo.github.io/2020/12/23/Theme-Test-Surge/)
++ [wave](https://mhexo.github.io/2020/12/23/Theme-Test-Wave/)
++ [xray](https://mhexo.github.io/2020/12/23/Theme-Test-Xray/)
+
+
 ## License
 
 See [LICENSE](./LICENSE) file.

diff --git a/ReadMe.zh.md b/ReadMe.zh.md
@@ -34,6 +34,8 @@
 
 - 我们广泛地使用 Promise 来进行异步操作, 以此确保线程不被杜塞.
 
+- 加密页面多主题支持, 现在已经支持的主题有 [`default`, `xray`], 更多的主题正在开发中.
+
 - 过时的浏览器将不能正常显示, 因此, 请升级您的浏览器.
 
 ## 在线演示
@@ -55,7 +57,7 @@
 ---
 title: Hello World
 date: 2016-03-30 21:18:02
-password: mikemessi
+password: hello
 ---
 
 ```
@@ -99,13 +101,12 @@ encrypt: # hexo-blog-encrypt
   tags:
   - {name: tagName, password: 密码A}
   - {name: tagName, password: 密码B}
-  template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
   wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
   wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
 
 ```
 
-#### 对博文禁用 Tag 加密 
+#### 对博文禁用 Tag 加密
 
 只需要将博文头部的 `password` 设置为 `""` 即可取消 Tag 加密.
 
@@ -184,6 +185,62 @@ encrypt: # hexo-blog-encrypt
 
 这样就会禁止如 `INFO  hexo-blog-encrypt: encrypting "{Blog Name}" based on Tag: "EncryptedTag".` 的日志.
 
+### 加密主题
+
+之前, 我们尝试使用 `template` 关键字来让用户能修改自己的主题. 后来发现真不是一个好主意. 所以我们现在引入了主题: `theme` 关键字.
+
+你可以简单的使用 `theme` 在 `_config.yml` 里或者文章头, 如下:
+
+### 文章信息头
+
+```markdown
+
+---
+title: Hello World
+tags:
+- 作为日记加密
+date: 2016-03-30 21:12:21
+password: mikemessi
+abstract: 有东西被加密了, 请输入密码查看.
+message: 您好, 这里需要密码.
+theme: xray
+wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
+wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
+---
+
+```
+
+### 在 `_config.yml`
+
+#### 示例
+
+```yaml
+
+# Security
+encrypt: # hexo-blog-encrypt
+  abstract: 有东西被加密了, 请输入密码查看.
+  message: 您好, 这里需要密码.
+  tags:
+  - {name: tagName, password: 密码A}
+  - {name: tagName, password: 密码B}
+  theme: xray
+  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
+  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
+
+```
+
+你可以在线挑选你喜欢的主题,并应用到你的博客中:
+
++ [default](https://mhexo.github.io/2020/12/23/Theme-Test-Default/)
++ [blink](https://mhexo.github.io/2020/12/23/Theme-Test-Blink/)
++ [shrink](https://mhexo.github.io/2020/12/23/Theme-Test-Shrink/)
++ [flip](https://mhexo.github.io/2020/12/23/Theme-Test-Flip/)
++ [up](https://mhexo.github.io/2020/12/23/Theme-Test-Up/)
++ [surge](https://mhexo.github.io/2020/12/23/Theme-Test-Surge/)
++ [wave](https://mhexo.github.io/2020/12/23/Theme-Test-Wave/)
++ [xray](https://mhexo.github.io/2020/12/23/Theme-Test-Xray/)
+
+
 ## 许可
 
 看看 [LICENSE](./LICENSE).

diff --git a/index.js b/index.js
@@ -10,9 +10,10 @@ const log = require('hexo-log')({ 'debug': false, 'slient': false });
 const defaultConfig = {
   'abstract': 'Here\'s something encrypted, password is required to continue reading.',
   'message': 'Hey, password is required here.',
-  'template': fs.readFileSync(path.resolve(__dirname, './lib/template.html')).toString(),
+  'theme': 'default',
   'wrong_pass_message': 'Oh, this is an invalid password. Check and try again, please.',
   'wrong_hash_message': 'OOPS, these decrypted content may changed, but you can still have a look.',
+  'silent': false,
 };
 
 const keySalt = textToArray('hexo-blog-encrypt的作者们都是大帅比!');
@@ -24,6 +25,7 @@ const knownPrefix = "<hbe-prefix></hbe-prefix>";
 
 // disable log
 var silent = false;
+var theme = 'default';
 
 hexo.extend.filter.register('after_post_render', (data) => {
   const tagEncryptPairs = [];
@@ -40,8 +42,6 @@ hexo.extend.filter.register('after_post_render', (data) => {
     hexo.config.encrypt = [];
   }
 
-  silent = hexo.config.encrypt.silent;
-
   if(('encrypt' in hexo.config) && ('tags' in hexo.config.encrypt)){
     hexo.config.encrypt.tags.forEach((tagObj) => {
       tagEncryptPairs[tagObj.name] = tagObj.password;
@@ -68,6 +68,15 @@ hexo.extend.filter.register('after_post_render', (data) => {
 
   // Let's rock n roll
   const config = Object.assign(defaultConfig, hexo.config.encrypt, data);
+  silent = config.silent;
+  theme = config.theme;
+
+  // read theme from file
+  if (config.template != "") {
+    dlog('warn', 'Looks like you use a deprecated property "template" to set up template, consider to use "theme"? See https://github.com/D0n9X1n/hexo-blog-encrypt#encrypt-theme');
+  }
+
+  let template = fs.readFileSync(path.resolve(__dirname, `./lib/hbe.${config.theme}.html`)).toString();
 
   if (tagUsed === false) {
     dlog('info', `hexo-blog-encrypt: encrypting "${data.title.trim()}" based on the password configured in Front-matter.`);
@@ -89,25 +98,25 @@ hexo.extend.filter.register('after_post_render', (data) => {
   encryptedData += cipher.final('hex');
   const hmacDigest = hmac.digest('hex');
 
-  data.content = config.template.replace(/{{hbeEncryptedData}}/g, encryptedData)
+  data.content = template.replace(/{{hbeEncryptedData}}/g, encryptedData)
     .replace(/{{hbeHmacDigest}}/g, hmacDigest)
     .replace(/{{hbeWrongPassMessage}}/g, config.wrong_pass_message)
     .replace(/{{hbeWrongHashMessage}}/g, config.wrong_hash_message)
     .replace(/{{hbeMessage}}/g, config.message);
-  data.content += `<script src="${hexo.config.root}lib/blog-encrypt.js"></script><link href="${hexo.config.root}css/blog-encrypt.css" rel="stylesheet" type="text/css">`;
+  data.content += `<script src="${hexo.config.root}lib/hbe.js"></script><link href="${hexo.config.root}css/hbe.style.css" rel="stylesheet" type="text/css">`;
   data.excerpt = data.more = config.abstract;
 
   return data;
 }, 1000);
 
 hexo.extend.generator.register('hexo-blog-encrypt', () => [
   {
-    'data': () => fs.createReadStream(path.resolve(__dirname, './lib/blog-encrypt.css')),
-    'path': 'css/blog-encrypt.css',
+    'data': () => fs.createReadStream(path.resolve(__dirname, `./lib/hbe.style.css`)),
+    'path': `css/hbe.style.css`,
   },
   {
-    'data': () => fs.createReadStream(path.resolve(__dirname, './lib/blog-encrypt.js')),
-    'path': 'lib/blog-encrypt.js',
+    'data': () => fs.createReadStream(path.resolve(__dirname, './lib/hbe.js')),
+    'path': 'lib/hbe.js',
   },
 ]);
 

diff --git a/lib/blog-encrypt.css b/lib/blog-encrypt.css
diff --git a/lib/hbe.blink.html b/lib/hbe.blink.html
@@ -0,0 +1,11 @@
+<div class="hbe hbe-container" id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}">
+  <script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script>
+  <div class="hbe hbe-content">
+    <div class="hbe hbe-input hbe-input-blink">
+      <input class="hbe hbe-input-field hbe-input-field-blink" type="password" id="hbePass">
+      <label class="hbe hbe-input-label hbe-input-label-blink" for="hbePass">
+        <span class="hbe hbe-input-label-content hbe-input-label-content-blink" data-content="{{hbeMessage}}">{{hbeMessage}}</span>
+      </label>
+    </div>
+  </div>
+</div>