feat: add image-title(#56)

Author: Siricee

ChangeLogs.md

@@ -1,4 +1,7 @@
 Changelogs
+## 2020.2.2
+
+\[enhancement\] add image-title. 
 
 ## 2019.10.18
 
@@ -26,7 +29,7 @@ Changelogs
 
 \[optimization\] change paragraph spacing 0.5em to 1em.Now it's more clear.
 
-## v1.4 - 2019.8.3
+## 2019.8.3
 
 \[enhancement\] add pullquote style support.
 
@@ -38,25 +41,25 @@ Changelogs
 
 fix variable time_format doesn't work in page. 
 
-## v1.3 - 2019.7.9
+## 2019.7.9
 
 \[enhancement\] change native hexo-toc function to tocbot component.
 
 github: [tscanlin/tocbot: Build a table of contents from headings in an HTML document.](https://github.com/tscanlin/tocbot)
 
 
-## v1.2 - 2019.7.6
+## 2019.7.6
 
 \[enhancement\] add MathJax support,now you can type math formula in LaTeX.
 
 [MathJax | Beautiful math in all browsers.](https://www.mathjax.org/)
 
 
-## v1.1 - 2019.7.5
+## 2019.7.5
 
 \[optimization\] add component fragment_cache in layout to decline requests in render process.
 
-## v1.0 - 2019.6.11
+## 2019.6.11
 
 Release the first version.
 

README-CN.md

@@ -220,6 +220,25 @@ mathjax:
     ```
 LaTeX语法这里不做解释，本主题中，单dollar符号包围的为行内公式，例：`$f(x)=ax+b$`，双dollar符号包围的为块公式，例`$$f(x)=ax+b$$`更多写法请参考LaTeX和[Demo site中的公式测试页面](https://siricee.github.io/hexo-theme-Chic/2019/07/05/MathJax_test/)。
 
+### 图片标题
+
+在Hexo中，你有两种方式引入图片：
+
+  - GFM 语法直接引入（不显示图片标题）
+    ```
+    ![pic](picUrl)
+    ```
+  - Hexo 内置标签系统-图片标签（显示图片标题）
+    ```
+    {% img [class names] /path/to/image [width] [height] '"alt text" "title text"' %}
+    ```
+所以如果你仅仅想方便快捷引入图片，那你应该使用 GFM 语法，这种方式也是兼容性最好的方案。
+
+但如果你需要显示**图片标题**，你就应该使用第二种方案，**图片标签方式**。
+- `"alt text"`用来显示当图片加载失败时垫底的提示文字。
+- `"title text"`将会被显示到图片下方作为图片标题。
+
+你可以在 [Demo site](https://siricee.github.io/hexo-theme-Chic/2019/06/05/markdown_test/#Image) 中查看图片标题的效果和示例语法。
 
 ## Customize 自定义
 - 代码高亮风格 在`hexo-theme-Chic\themes\Chic\source\css\style.styl`中更改highlight为`_highlight`文件夹中的stylus文件即可更换代码高亮风格。

README.md

@@ -29,6 +29,7 @@
 - [Configuration](#configuration)
   - [Add 'Tag','Category' Page](#add-tagcategory-page)
   - [MathJax (Render LaTeX Formula)](#mathjax-render-latex-formula)
+  - [Image-title](#image-title)
 - [Customize](#customize)
 - [FAQ](#faq)
 - [Gallary](#gallary)
@@ -229,8 +230,25 @@ mathjax:
     ```
 LaTeX grammers will not be illustrated in this doc. In Chic theme, Single '$' rounded statement is regarded as inline formula like `$f(x)=ax+b$` ; Double '$' rounded statement is regarded as block formula like `$$f(x)=ax+b$$`.More information please read LaTeX doc and [Formula test page in Demo Site](https://siricee.github.io/hexo-theme-Chic/2019/07/05/MathJax_test/).
 
+### Image-title
 
+You have 2 method to import image in your post:
+ 
+ - image import with GFM (Without image-title)
+   ```
+   ![pic](picUrl)
+   ```
+ - hexo built-in image tag (With image-title)
+   ```
+   {% img [class names] /path/to/image [width] [height] '"alt text" "title text"' %}
+   ```
+So if you want to import as fast as possible, you can use GFM，and this way will also get best adaptability. 
+
+**If you want to display image-title, you should use hexo built-in image tag.**
+- `"alt text"` is used when image not load or something wrong in that image 404.
+- `"title text"` **will be displayed below the image.**
 
+You can preview image-title and sample code in [Demo site](https://siricee.github.io/hexo-theme-Chic/2019/06/05/markdown_test/#Image)
 
 ## Customize
 

scripts/.gitkeep

@@ -0,0 +1,11 @@
+/**
+ * transfer tag to imagg-box block.
+ * {% img [class names] /path/to/image [width] [height] '"alt text" "title text"' %}
+ * This is used to display image title.
+ */
+hexo.extend.tag.register('img', ([src, alt = '', title = '', imgClass = '']) => {
+    return `<div class="image-box">
+                <img src="${src}" alt="${alt}" title="${title}" class="${imgClass}">
+                <p class="image-box-title">${title || alt}</p>
+            </div>`;
+});

scripts/imageTag.js

@@ -121,6 +121,18 @@
 
   img[data-action="zoom"]
     cursor zoom-in
+  // this element is rendered by hexo.extend.tag.register()
+  // location: scripts/image.js
+  .image-box
+    .image-box-title
+      text-align center
+      font-size .7em
+      margin-top .5em
+      margin-bottom 1em
+      color $light-font-secondary-color
+      .dark-theme &
+        color $dark-font-secondary-color
+  // end element
 
   blockquote
     font-size 1rem