├── .gitignore ├── LICENSE ├── README.md └── logo.svg /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 啊哈呵嗨 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

logo

2 | 3 | # Awesome-hexo-plugins [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) 4 | 5 | > 👓 推荐常用的 Hexo 插件 6 | > 7 | > 如果你有好的插件推荐，欢迎 pull requests 或 提出 Issues。 8 | 9 | - [文章](#文章) 10 | - [`hexo-auto-category` 根据文件目录自动生成文章分类](#hexo-auto-category-根据文件目录自动生成文章分类) 11 | - [`hexo-renderer-markdown-it` 使用 markdown-it 作渲染器](#hexo-renderer-markdown-it-使用-markdown-it-作渲染器) 12 | - [`hexo-related-popular-posts` 生成相关热门文章列表](#hexo-related-popular-posts-生成相关热门文章列表) 13 | - [`hexo-description` 根据标记位置自动生成文章简介](#hexo-description-根据标记位置自动生成文章简介) 14 | - [SEO](#seo) 15 | - [`hexo-baidu-url-submit` 向百度主动提交链接](#hexo-baidu-url-submit-向百度主动提交链接) 16 | - [`hexo-autonofollow` 外链自动 nofollow](#hexo-autonofollow-外链自动-nofollow) 17 | - [`hexo-seo-link-visualizer` 分析链接并可视化站点结构](#hexo-seo-link-visualizer-分析链接并可视化站点结构) 18 | - [`hexo-baidu-url-push` 百度站长平台自动推送工具](#hexo-baidu-url-push-百度站长平台自动推送工具) 19 | - [生成器](#生成器) 20 | - [`hexo-generator-topindex` 置顶文章](#hexo-generator-topindex-置顶文章) 21 | - [`hexo-generator-feed` 生成博客 RSS](#hexo-generator-feed-生成博客-rss) 22 | - [`hexo-generator-sitemap` 生成 sitemap.xml](#hexo-generator-sitemap-生成-sitemapxml) 23 | - [`hexo-generator-baidu-sitemap` 生成 baidusitemap.xml](#hexo-generator-baidu-sitemap-生成-baidusitemapxml) 24 | - [工具](#工具) 25 | - [`hexo-abbrlink` 生成文章唯一ID](#hexo-abbrlink-生成文章唯一id) 26 | - [`hexo-nanoid` 用 nanoid 生成文章唯一ID](#hexo-nanoid-用-nanoid-生成文章唯一id) 27 | - [`hexo-translate-title` 将汉字标题转成英文标题](#hexo-translate-title-将汉字标题转成英文标题) 28 | - [`hexo-all-minifier` 压缩所有静态文件](#hexo-all-minifier-压缩所有静态文件) 29 | - [`hexo-pwa` 支持PWA](#hexo-pwa-支持pwa) 30 | - [`hexo-lazyload-image` 图片懒加载](#hexo-lazyload-image-图片懒加载) 31 | - [标签拓展](#标签拓展) 32 | - [`hexo-codepen-v2` 插入 Codepen 代码片段](#hexo-codepen-v2-插入-codepen-代码片段) 33 | - [`hexo-tag-kbd` 支持 kbd 标签](#hexo-tag-kbd--支持-kbd-标签) 34 | - [`hexo-tag-color-block` 颜色标签](#hexo-tag-color-block-颜色标签) 35 | - [`hexo-tag-hint`](#hexo-tag-hint) 36 | - [`hexo-tag-bilibili` 插入bilibili视频](#hexo-tag-bilibili-插入bilibili视频) 37 | - [`hexo-ruby-character` Ruby character tag](#hexo-ruby-character--ruby-character-tag) 38 | - [`hexo-github-card` GitHub 用户资料卡片](#hexo-github-card-github-用户资料卡片) 39 | - [`hexo-caniuse` Can I Use CSS Features?](#hexo-caniuse-can-i-use-css-features) 40 | - [`hexo-github` 追踪 GitHub 仓库 commit](#hexo-github-追踪-github-仓库-commit) 41 | - [部署](#部署) 42 | - [`hexo-deployer-git` 部署到 Git](#hexo-deployer-git-部署到-git) 43 | - [美化](#美化) 44 | - [`hexo-helper-live2d` 萌萌哒二次元看板娘](#hexo-helper-live2d-萌萌哒二次元看板娘) 45 | 46 | ## 文章 47 | 48 | ### `hexo-auto-category` 根据文件目录自动生成文章分类 49 | 50 | 最常用的文件管理策略，就是利用文件系统目录结构(树形结构 directory-tree)。 51 | 同样，为了便于管理大量的日志文件，采用目录结构是一种简便可行的方案。`hexo-auto-category` 根据日志文件(Markdown)所在文件目录自动分类，即自动生成`markdown`的front-matter中的`categories`变量。 52 | 53 | ```bash 54 | $ npm install hexo-auto-category --save 55 | ``` 56 | 57 | **示例** 58 | 59 | 对于博客 `source/_post/web/framework/hexo.md`，该插件会自动生成以下`categories` 60 | 61 | ```yaml 62 | categories: 63 | - web 64 | - framework 65 | ``` 66 | 67 | **配置** 68 | 69 | 在站点根目录下的`_config.yml`添加： 70 | 71 | ```yaml 72 | auto_category: 73 | enable: true 74 | depth: 1 #生成到第几级目录分类 75 | ``` 76 | 77 | ### `hexo-renderer-markdown-it` 使用 markdown-it 作渲染器 78 | 79 | ```bash 80 | $ npm install hexo-renderer-markdown-it --save 81 | ``` 82 | 83 | ### `hexo-related-popular-posts` 生成相关热门文章列表 84 | 85 | ![Screenshot](https://github.com/tea3/hexo-related-popular-posts/raw/master/src/img/hexo-rpp.png) 86 | 87 | 该插件会根据文章指定的 tags 生成一系列的相关文章列表，所以发布文章请务必在 Front Matter 中指定 tags。 88 | 89 | ```bash 90 | $ npm install hexo-related-popular-posts --save 91 | ``` 92 | 93 | **安装该插件后需要DIY你的主题** 94 | 95 | First, add the following `popular_posts( {} , post )` helper tag in template file for article. For example , if you use [hexo-theme-landscape](https://github.com/hexojs/hexo-theme-landscape) , add a tag [here](https://github.com/hexojs/hexo-theme-landscape/blob/master/layout/_partial/article.ejs#L25). 96 | 97 | ``` 98 | <%- 99 | popular_posts( {} , post ) 100 | %> 101 | ``` 102 | 103 | 更多详细文档请移步 [tea3/hexo-related-popular-posts](https://github.com/tea3/hexo-related-popular-posts) 查阅。 104 | 105 | ### `hexo-description` 根据标记位置自动生成文章简介 106 | 107 | If post has no description set, will auto use excerpt as `description`. 108 | 109 | ```bash 110 | npm install hexo-description --save 111 | ``` 112 | 113 | 之后在文章中标记 `` 标签即可。 114 | 115 | **流程** 116 | 117 | 1. Origin post 118 | 119 | ```markdown 120 | --- 121 | title: Example post 122 | --- 123 | ## excerpt 124 | - list1 125 | - list2 126 | 127 | content 128 | ``` 129 | 130 | 1. Origin excerpt 131 | 132 | ```markdown 133 | ## excerpt 134 | - list1 135 | - list2 136 | ``` 137 | 138 | 1. Rendered excerpt 139 | 140 | ```html 141 |

excerpt

142 |
  • list1
    • 143 |
  • list2
    • 144 | ``` 145 | 146 | 1. Finally we set pure excerpt text to description 147 | 148 | ``` 149 | excerptlist1list2 150 | ``` 151 | 152 |
    153 | 154 | ## SEO 155 | 156 | ### `hexo-baidu-url-submit` 向百度主动提交链接 157 | 158 | 主动推送Hexo博客新链接至百度搜索引擎，解决百度爬虫被禁止访问的问题，提升网站收录质量和速度。 159 | 160 | ![百度ä¸"动提交](https://camo.githubusercontent.com/1c4ec399b761d3c6c30be5f57c50909a4e6854eb/687474703a2f2f6875692d77616e672e696e666f2f323031362f31302f32332f4865786f2545362538462539322545342542422542362545342542392538422545372539392542452545352542412541362545342542382542422545352538412541382545362538462539302545342542412541342545392539332542452545362538452541352f62616964755f75726c735f7375626d69742e706e67) 161 | 162 | ```bash 163 | npm install hexo-baidu-url-submit --save 164 | ``` 165 | 166 | 把以下内容配置到`_config.yml`文件中: 167 | 168 | ```yaml 169 | baidu_url_submit: 170 | count: 1 ## 提交最新的一个链接 171 | host: www.nuist.today ## 在百度站长平台中注册的域名 172 | token: your_token ## 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里! 173 | path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里 174 | ``` 175 | 176 | 其次，记得查看_config.ym文件中url的值， 必须包含是百度站长平台注册的域名（一般有www）， 比如: 177 | 178 | ```yaml 179 | # URL 180 | url: https://www.nuist.today 181 | root: / 182 | permalink: p/:title/ 183 | ``` 184 | 185 | 最后，加入新的deployer: 186 | 187 | ```yaml 188 | deploy: 189 | - type: baidu_url_submitter # 百度 190 | ``` 191 | 192 | 执行`hexo deploy`的时候，新的连接就会被推送了。 193 | 194 | **支持熊掌号** 195 | 196 | ```yaml 197 | baidu_url_submit: 198 | count: 1000 ## 提交最新的一个链接 199 | host: alili.tech ## 在百度站长平台中注册的域名 200 | token: xxxxx ## 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里! 201 | path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里 202 | xz_appid: 'xxxxxx' ## 你的熊掌号 appid 203 | xz_token: 'xxxxxx' ## 你的熊掌号 token 204 | xz_count: 10 ## 从所有的提交的数据当中选取最新的10条,该数量跟你的熊掌号而定 205 | ``` 206 | 207 | 加入新的 deployer 即可 208 | 209 | ```yaml 210 | deploy: 211 | - type: baidu_xz_url_submitter # 百度熊掌号 212 | ``` 213 | 214 | 215 | 216 | ### `hexo-autonofollow` 外链自动 nofollow 217 | 218 | ```bash 219 | $ npm install hexo-autonofollow --save 220 | ``` 221 | 222 | 注：`hexo-nofollow` 插件实在是让我头大，使用后会导致页面中多出许多莫名其妙的 ``，扰乱了博客页面排版。 223 | 224 | ![](http://gylidian-blog.test.upcdn.net/20190215232211.png) 225 | 226 | 我又一步步重新搭了一遍博客排查错误，最终发现 package.json 中删除 `"hexo-nofollow": "^1.0.5",` 即可完美解决问题。 227 | 228 | ### `hexo-seo-link-visualizer` 分析链接并可视化站点结构 229 | 230 | ![Screenshot](https://raw.githubusercontent.com/tea3/hexo-seo-link-visualizer/master/img/cover.png) 231 | 232 | ```bash 233 | $ npm install hexo-seo-link-visualizer --save 234 | ``` 235 | 236 | **Usage** 237 | 238 | First of all , you should to add npm script. Please insert as follow code at `package.json`. 239 | 240 | ```json 241 | "scripts": { 242 | "show-article-map": "node node_modules/hexo-seo-link-visualizer/app/show-article-map.js" 243 | }, 244 | ``` 245 | 246 | Next , Please run server and excute npm script. (`$ hexo clean` be sure to run.) 247 | 248 | ```bash 249 | $ hexo clean 250 | $ hexo server 251 | $ npm run show-article-map 252 | ``` 253 | 254 | Last , Please run server of link visualizer. Since the default URL is `localhost:1234`, open this URL. 255 | 256 | **Options** 257 | 258 | You can change plugin settings with as follow option. Please edit `_config.yml`. 259 | 260 | ```yaml 261 | # hexo-seo-link-visualizer's option 262 | seoLinkVisualizer: 263 | enable: true 264 | cache: cache/seo-link-visualizer.json 265 | port: 1234 266 | previewHost: localhost:4000/ 267 | categoryDepthLimits: 1 268 | allowedSourcePath: 269 | - _posts/ 270 | # - _drafts 271 | ignoreLink: 272 | int: 273 | ext: 274 | - amazon 275 | - amz 276 | - flickr 277 | toc: 278 | ``` 279 | 280 | ### `hexo-baidu-url-push` 百度站长平台自动推送工具 281 | 282 | > ⚠ 该插件使用后会出现以下BUG： 283 | > 284 | > ReferenceError: path is not defined 285 | 286 | 一个hexo插件，使用百度JS链路自动推送方法，提交链接到百度 287 | 288 | > 自动推送是百度站长平台为提高站点新增网页发现速度推出的工具，安装自动推送JS代码的网页，在页面被访问时，页面URL将立即被推送给百度。 289 | 290 | ```javascript 291 | npm install hexo-baidu-url-push --save 292 | ``` 293 | 294 | 其实就是向页面追加了以下代码 295 | 296 | ```html 297 | 311 | ``` 312 | 313 |
    314 | 315 | ## 生成器 316 | 317 | ### `hexo-generator-topindex` 置顶文章 318 | 319 | ```bash 320 | $ npm install hexo-generator-topindex --save 321 | ``` 322 | 323 | **配置** 324 | 325 | ```yaml 326 | topindex_generator: 327 | per_page: 10 #Posts displayed per page. (0 = disable pagination) 328 | order_by: -date #Posts order. (Order by date descending by default) 329 | ``` 330 | 331 | **使用方法** 332 | 333 | 这样，就可以在文章的 Front Matter 中指定 `top: 数字` 实现文章置顶效果了。 334 | 335 | ### `hexo-generator-feed` 生成博客 RSS 336 | 337 | ```bash 338 | $ npm install hexo-generator-feed --save 339 | ``` 340 | 341 | You can configure this plugin in `_config.yml`. 342 | 343 | ```yaml 344 | feed: 345 | type: atom 346 | path: atom.xml 347 | limit: 20 348 | hub: 349 | content: 350 | content_limit: 140 351 | content_limit_delim: " " 352 | order_by: -date 353 | icon: icon.png 354 | ``` 355 | 356 | **使用方法** 357 | 358 | In the [front-matter](https://hexo.io/docs/front-matter.html) of your post, you can optionally add a `description`, `intro` or `excerpt` setting to write a summary for the post. Otherwise the summary will default to the excerpt or the first 140 characters of the post. 359 | 360 | ### `hexo-generator-sitemap` 生成 sitemap.xml 361 | 362 | ```bash 363 | $ npm install hexo-generator-sitemap --save 364 | ``` 365 | 366 | ### `hexo-generator-baidu-sitemap` 生成 baidusitemap.xml 367 | 368 | ```bash 369 | $ npm install hexo-generator-baidu-sitemap --save 370 | ``` 371 | 372 |
    373 | 374 | ## 工具 375 | 376 | ### `hexo-abbrlink` 生成文章唯一ID 377 | 378 | ```bash 379 | $ npm install hexo-autonofollow --save 380 | ``` 381 | 382 | ### `hexo-nanoid` 用 nanoid 生成文章唯一ID 383 | 384 | ```bash 385 | $ npm install hexo-nanoid --save 386 | ``` 387 | 388 | ### `hexo-translate-title` 将汉字标题转成英文标题 389 | 390 | **安装** 391 | 392 | ``` 393 | npm install hexo-translate-title --save 394 | ``` 395 | 396 | **使用 ** 397 | 398 | 1.配置hexo根项目下的`_config.yml` 399 | 400 | ```yaml 401 | translate_title: 402 | translate_way: google # google,youdao,baidu_with_appid,baidu_no_appid 403 | youdao_api_key: '' # Your youdao_api_key 404 | youdao_keyfrom: xxxx-blog # Your youdao_keyfrom 405 | is_need_proxy: false # true | false 406 | proxy_url: http://localhost:50018 # Your proxy_url 407 | baidu_appid: '' # Your baidu_appid 408 | baidu_appkey: '' # Your baidu_appkey 409 | ``` 410 | 411 | **注意** 412 | 413 | > - 判断是否需要配置google本地代理，因为我在本地是开启时才能访问google翻译的，如果没有被墙，请将`_config.yml` 下的`is_need_proxy: true`改为false。如果设置为true,请设置本地代理地址 414 | > - 目前google翻译，youdao翻译均可直接使用，百度翻译**使用APPID版本，无APPID版本均已完成**，APPID版本需要在[百度翻译开放平台](http://api.fanyi.baidu.com/) 415 | > - 如果担心百度翻译开发平台的APP_ID和APP_KEY有泄漏风险，建议在百度翻译开发平台-》管理控制台的服务器地址一栏，填写好服务器IP即可 416 | 417 | 2.修改hexo根目录下的`_config.yml` 418 | 419 | 修改 420 | 421 | > permalink: :year/:month:day/:translate_title.html 422 | 423 | 将`:title`修改为`:translate_title`即可，前面的路径也可按照自己的要求变更，例如 permalink: blog/:translate_title.html 424 | 425 | ### `hexo-all-minifier` 压缩所有静态文件 426 | 427 | 支持压缩 HTML、CSS、JS、图片，支持打包js，平均耗时20s，功能强大简单易用。 428 | 429 | ```bash 430 | $ npm install hexo-all-minifier --save 431 | ``` 432 | 433 | Just put this line in the config file of your hexo-site to enable this plugin. 434 | 435 | ```yaml 436 | all_minifier: true 437 | ``` 438 | 439 | If you need futher control of this plugin, please refer the options below. 440 | 441 | ```yaml 442 | js_concator: 443 | enable: false #Enable the Js concator. Defaults to `false`. 444 | bundle_path: '/js/bundle.js' #The output path of the bundle script. It will be set as absolute path to the root dir. 445 | front: false #Put the bundle script in the front of all scripts in body tag. Default to false, which means the bundle script will be placed in the back of other scripts. 446 | silent: false #Disable logging optimize informations. Defaults to `false`. 447 | 448 | html_minifier: 449 | enable: true #Enable the HTML minifier. Defaults to `true`. 450 | ignore_error: false #Ignore the error occurred on parsing html. 451 | silent: false #Disable logging optimize informations. Defaults to `false`. 452 | exclude: #Exclude files. Glob is support. 453 | 454 | css_minifier: 455 | enable: true #Enable the CSS minifier. Defaults to `true`. 456 | silent: false #Disable logging optimize informations. Defaults to `false`. 457 | exclude: #Exclude files. Glob is support. 458 | - '*.min.css' 459 | 460 | js_minifier: 461 | enable: true #Enable the JS minifier. Defaults to true. 462 | mangle: true #Mangle file names 463 | silent: false #Disable logging optimize informations. Defaults to `false`. 464 | output: #Output options. If it is empty, please remove it from the .yml file! Otherwise it will be set to `null`, which is different from `undefined`. 465 | compress: #Compress options. If it is empty, please remove it from the .yml file! Otherwise it will be set to `null`, which is different from `undefined`. 466 | exclude: 467 | - '*.min.js' 468 | 469 | image_minifier: 470 | enable: true #Enable the image minifier. Defaults to `true`. 471 | interlaced: false #Interlace gif for progressive rendering. Defaults to `false`. 472 | multipass: false #Optimize svg multiple times until it’s fully optimized. Defaults to `false`. 473 | optimizationLevel: 2 #Select an optimization level between 0 and 7. Defaults to `2`. 474 | pngquant: false #Enable imagemin-pngquant plugin. Defaults to false. 475 | progressive: false #Lossless conversion to progressive. Defaults to false. 476 | silent: false #Disable logging optimize informations. Defaults to false. 477 | exclude: #Exclude specific types of image files, the input value could be gif,jpg, png, or svg. Default to null. Glob is not support. 478 | ``` 479 | 480 | ### `hexo-pwa` 支持PWA 481 | 482 | `hexo-pwa` 使得 Hexo 站点将支持以下特性： 483 | 484 | - [Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) - Users can add your site to mobile home screen 485 | - [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/) - Make your site available offline 486 | 487 | ```bash 488 | $ npm install --save hexo-pwa 489 | ``` 490 | 491 | **配置** 492 | 493 | You can configure this plugin in `_config.yml`. 494 | 495 | ```yaml 496 | pwa: 497 | manifest: 498 | path: /manifest.json 499 | body: 500 | name: hexo 501 | short_name: hexo 502 | icons: 503 | - src: /images/android-chrome-192x192.png 504 | sizes: 192x192 505 | type: image/png 506 | - src: /images/android-chrome-512x512.png 507 | sizes: 512x512 508 | type: image/png 509 | theme_color: '#ffffff' 510 | background_color: '#ffffff' 511 | display: standalone 512 | serviceWorker: 513 | path: /sw.js 514 | preload: 515 | urls: 516 | - / 517 | posts: 5 518 | opts: 519 | networkTimeoutSeconds: 5 520 | routes: 521 | - pattern: !!js/regexp /hm.baidu.com/ 522 | strategy: networkOnly 523 | - pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/ 524 | strategy: cacheFirst 525 | - pattern: !!js/regexp /\// 526 | strategy: networkFirst 527 | priority: 5 528 | ``` 529 | 530 | - manifest - manifest configuration 531 | - path - the path of `manifest.json`, eg: `/manifest.json` 532 | - body - the content of `manifest.json`, [manifest.json example](https://developer.mozilla.org/en-US/docs/Web/Manifest). `body` can be null, if not null, `hexo-pwa` will generate `manifest.json` with `JSON.stringify(body)` 533 | - serviceWorker - service worker configuration 534 | - path: the path of `sw.js`, eg: `/sw.js`, you shouldn't put sw.js in subdirectory because of the [service worker scope](https://developers.google.com/web/ilt/pwa/introduction-to-service-worker#registration_and_scope) 535 | - preload - urls or posts that you want to preload 536 | - urls: an array of the preload urls 537 | - posts: the count of preload posts 538 | - opts: the options for [sw-toolbox](https://googlechromelabs.github.io/sw-toolbox/api.html#options) 539 | - routes - request routes and strategies, based on [sw-toolbox](https://googlechromelabs.github.io/sw-toolbox/api.html#options). **The routes order does matter.** 540 | - pattern: url pattern, this config can be express-style or RegExp 541 | - strategy: the strategy you want to choose. [All strategies](https://googlechromelabs.github.io/sw-toolbox/api.html#options): `cacheFirst`, `networkFirst`, `cacheOnly`, `networkOnly`, `fastest`. Caution: Log requests should use `networkOnly` strategy. 542 | - priority - [plugin priority](https://hexo.io/api/filter.html) (default value is 10) 543 | 544 | ### `hexo-lazyload-image` 图片懒加载 545 | 546 | ```bash 547 | $ npm install hexo-lazyload-image --save 548 | ``` 549 | 550 | **使用** 551 | 552 | First add configuration in `_config.yml` from your hexo project. 553 | 554 | ```yaml 555 | lazyload: 556 | enable: true 557 | onlypost: false 558 | loadingImg: # eg ./images/loading.gif 559 | ``` 560 | 561 |
    562 | 563 | ## 标签拓展 564 | 565 | > 💡 温馨提示 566 | > 567 | > 为方便未来可能的数据迁移，建议少用独有 markdown 语法。 568 | > 569 | > 并且 许多上古插件早已过时，作者已不再维护，极容易出现类似 **DeprecationWarning: fs.SyncWriteStream is deprecated** 等的问题。 570 | > 571 | > 其次，建议使用 `hexo-renderer-markdown-it` 作为 markdown 渲染器，功能强大，高效渲染。它可以将 `markdown-it` 的一套通用的生态体系带到 Hexo 上来。 572 | > 573 | > 如果你觉得这些都不是问题，那么，开始 enjoy 吧！👇 574 | 575 | ### `hexo-codepen-v2` 插入 Codepen 代码片段 576 | 577 | ```bash 578 | npm install hexo-codepen-v2 --save 579 | ``` 580 | 581 | **Usage** 582 | 583 | Create [Embedded Pen](http://blog.codepen.io/documentation/features/embedded-pens/) with following syntax: 584 | 585 | ```ejs 586 | {% codepen slugHash default_tabs height width userId|anonymous|anon theme %} 587 | ``` 588 | 589 | **How to get arguments from CodePen embed** 590 | 591 | This is something generated by `CodePen`: 592 | 593 | ```html 594 |

    See the Pen Flow #1 by yuanchuan (@yuanchuan) on CodePen.

    595 | 596 | ``` 597 | 598 | You can extract required arguments: 599 | 600 | | Field | Value | 601 | | ------------ | ------------------------------------------------------------ | 602 | | userId | yuanchuan | 603 | | slugHash | mKEmpj | 604 | | theme | 33713 | 605 | | default_tabs | html,result | 606 | | height | 300 | 607 | | width | This value should be adjusted according to your blog theme, by default it is `100%` | 608 | 609 | All of this settings except for slugHash can be set in `_config.yml` under `codepen` property. 610 | 611 | ```yaml 612 | codepen: 613 | userId: "yuanchuan" 614 | theme: "33713" 615 | default_tabs: "js,result" 616 | height: 500 617 | width: "100%" 618 | ``` 619 | 620 | ### `hexo-tag-kbd` 支持 kbd 标签 621 | 622 | ![img](https://camo.githubusercontent.com/4bb2bfdae0a26acc4a2de31a980db51884324e31/687474703a2f2f692e696d6775722e636f6d2f6737694c4a38322e706e67) 623 | 624 | ```bash 625 | npm install hexo-tag-kbd --save 626 | ``` 627 | 628 | **用例** 629 | 630 | ```ejs 631 | {% kbd Ctrl %} + {% kbd A %} 632 | {% kbd Ctrl %} + {% kbd ALT %} + {% kbd DELETE %} 633 | ``` 634 | 635 | **几个特殊按键** 636 | 637 | Enter 638 | 639 | [![img](https://camo.githubusercontent.com/3b7f40a8c5b759271deaf1b3d4945cdd269294dd/687474703a2f2f692e696d6775722e636f6d2f546e58717a374c2e706e67)](https://camo.githubusercontent.com/3b7f40a8c5b759271deaf1b3d4945cdd269294dd/687474703a2f2f692e696d6775722e636f6d2f546e58717a374c2e706e67) 640 | 641 | Shift 642 | 643 | [![img](https://camo.githubusercontent.com/8d2017bde155daf39d70f46fe355f80ee5c4c0e3/687474703a2f2f692e696d6775722e636f6d2f51646c753334622e706e67)](https://camo.githubusercontent.com/8d2017bde155daf39d70f46fe355f80ee5c4c0e3/687474703a2f2f692e696d6775722e636f6d2f51646c753334622e706e67) 644 | 645 | Command 646 | 647 | [![img](https://camo.githubusercontent.com/36fdd2a3d32d16ecf65f77d4b43c0cdf17567166/687474703a2f2f692e696d6775722e636f6d2f365954354778512e706e67)](https://camo.githubusercontent.com/36fdd2a3d32d16ecf65f77d4b43c0cdf17567166/687474703a2f2f692e696d6775722e636f6d2f365954354778512e706e67) 648 | 649 | Option 650 | 651 | [![img](https://camo.githubusercontent.com/4f51c3020739858eda80c2de98b0b1226d6b8263/687474703a2f2f692e696d6775722e636f6d2f4f624a344472792e706e67)](https://camo.githubusercontent.com/4f51c3020739858eda80c2de98b0b1226d6b8263/687474703a2f2f692e696d6775722e636f6d2f4f624a344472792e706e67) 652 | 653 | ### `hexo-tag-color-block` 颜色标签 654 | 655 | [![example of #f8dcf8](https://github.com/patrick330602/hexo-tag-color-block/raw/master/example.png)](https://github.com/patrick330602/hexo-tag-color-block/blob/master/example.png) 656 | 657 | ```bash 658 | npm i hexo-tag-color-block 659 | ``` 660 | 661 | **使用方法** 662 | 663 | The full tag format is as follows: 664 | 665 | ```ejs 666 | {% colorblock [color hex code] [width] [height] %} 667 | ``` 668 | 669 | Example: 670 | 671 | 672 | ```ejs 673 | {% colorblock #f8dcf8 %} 674 | ``` 675 | 676 | **额外配置** 677 | 678 | 请访问 679 | 680 | ### `hexo-tag-hint` 681 | 682 | ![hexo-tag-hint screenshot](https://raw.githubusercontent.com/etigerstudio/hexo-tag-hint/master/hexo-tag-hint_screenshot.png) 683 | 684 | ```bash 685 | $ npm install hexo-tag-hint --save 686 | ``` 687 | 688 | **Usage** 689 | 690 | ```ejs 691 | {% hint 'body_text' 'hint_text' %} 692 | ``` 693 | 694 | ### `hexo-tag-bilibili` 插入bilibili视频 695 | 696 | ```bash 697 | npm install --save hexo-tag-bilibili 698 | ``` 699 | 700 | **Usage** 701 | 702 | The full tag format is as follows: 703 | 704 | ```ejs 705 | {% bilibili [av_id] %} 706 | or 707 | {% bilibili [av_id] [page] %} 708 | ``` 709 | 710 | example: 711 | 712 | ```ejs 713 | {% bilibili 2333333 3 %} 714 | ``` 715 | 716 | ### `hexo-ruby-character` Ruby character tag 717 | 718 | Ruby character tag for Hexo, inspired by the [Ruby template](http://zh.moegirl.org/Template:Ruby) of [萌娘百科](http://zh.moegirl.org/). 719 | 720 | ```bash 721 | npm install hexo-ruby-character --save 722 | ``` 723 | 724 | **Usage** 725 | 726 | ```ejs 727 | {% ruby Base|top %} 728 | ``` 729 | → Base (top) 730 | 731 | Specifically, if the top field is in Chinese characters, it while be converted to Chinese pinyin, because the pinyin chatater with heads are not easy to type. 732 | 733 | Followings are the examples. 734 | 735 | ```ejs 736 | {% ruby 佐天泪子|掀裙狂魔 %} 737 | ``` 738 | → 佐天泪子 (xiān qún kuáng mó) 739 | 740 | Other languages like Japanese is also supported. 741 | 742 | ```ejs 743 | {% ruby 超電磁砲|レールガン %} 744 | ``` 745 | → 超電磁砲 (レールガン) 746 | 747 | ### `hexo-github-card` GitHub 用户资料卡片 748 | 749 | Display a card for GitHub profile and repo in your [hexo](https://hexo.io/) blog. Implemented with [Github-cards](https://github.com/lepture/github-cards). 750 | 751 | ```bash 752 | npm install --save hexo-github-card 753 | ``` 754 | 755 | Usage 756 | 757 | Insert `githubCard` tag in your article: 758 | 759 | ```ejs 760 | {% githubCard user:your_user [repo:your_repo] [width:400] [theme:Default] [client_id:your_client_id] [client_secret:your_client_secret] [align:text-align_position] %} 761 | ``` 762 | 763 | | Argument | Description | 764 | | ------------- | ------------------------------------------------------------ | 765 | | user | GitHub user name | 766 | | repo | (Optional) GitHub repository name of the user. If omit then display only the user profile | 767 | | width | (Optional) Widget's width. It should be a valid CSS width value. Default is 400. | 768 | | client_id | (Optional) Your GitHub app client_id | 769 | | client_secret | (Optional) Your GitHub app client_secret | 770 | | align | (Optional) What kind of text-align is you want. Default is center. | 771 | 772 | (Configuration are consistent with [github-cards](https://github.com/lepture/github-cards#widgetjs)) 773 | 774 | Example: 775 | 776 | Display user profile only 777 | 778 | ```ejs 779 | {% githubCard user:Gisonrg %} 780 | ``` 781 | 782 | Display a repo 783 | 784 | ```ejs 785 | {% githubCard user:Gisonrg repo:hexo-github-card %} 786 | ``` 787 | 788 | ### `hexo-caniuse` Can I Use CSS Features? 789 | 790 | ```bash 791 | $ npm install hexo-caniuse --save 792 | ``` 793 | 794 | **Usage** 795 | 796 | Create [The CanIUse Embed](https://caniuse.bitsofco.de/) with following syntax: 797 | 798 | ```ejs 799 | {% caniuse feature periods|current %} 800 | ``` 801 | 802 | **How to get arguments from caniuse embed** 803 | 804 | This is something generated by `caniuse`: 805 | 806 | ```html 807 |

    808 | Can I Use css-variables? Data on support for the css-variables feature across the major browsers from caniuse.com. 809 |

    810 | 811 | ``` 812 | 813 | You can extract required arguments: 814 | 815 | | Field | Value | 816 | | ------------ | -------------------------------------- | 817 | | data-feature | Choose `caniuse` Feature feature | 818 | | data-periods | Select the Browser Versions to Display | 819 | 820 | ### `hexo-github` 追踪 GitHub 仓库 commit 821 | 822 | [![GitHub Badge Animation](https://github.com/akfish/hexo-github/raw/master/capture.gif?raw=true)](https://github.com/akfish/hexo-github/blob/master/capture.gif?raw=true) 823 | 824 | ```bash 825 | npm install --save hexo-github 826 | ``` 827 | 828 | **使用方法** 829 | 830 | Insert `github` tag in your article: 831 | 832 | ```ejs 833 | {% github user repo referenced_commit [auto_expand = true | false] [width = 100%] %} 834 | ``` 835 | 836 | | Argument | Description | 837 | | ----------- | ------------------------------------------------------------ | 838 | | user | GitHub user name | 839 | | repo | GitHub repository name of that user | 840 | | commit | Commit sha1 referenced in the article | 841 | | auto_expand | (Optional, default == false) true of false. Expand the timeline once synced if set to true. | 842 | | width | (Optional, default == 100%). Widget's width. It should be a valid CSS width value. | 843 | 844 | **例子** 845 | 846 | ```ejs 847 | {% github akfish hexo-math b82e65 %} 848 | ``` 849 | 850 |
    851 | 852 | ## 部署 853 | 854 | ### `hexo-deployer-git` 部署到 Git 855 | 856 | ```bash 857 | $ npm install hexo-deployer-git --save 858 | ``` 859 | 860 | **配置** 861 | 862 | You can configure this plugin in `_config.yml`. 863 | 864 | ```yaml 865 | # You can use this: 866 | deploy: 867 | type: git 868 | repo: 869 | branch: [branch] 870 | message: [message] 871 | name: [git user] 872 | email: [git email] 873 | extend_dirs: [extend directory] 874 | ignore_hidden: false # default is true 875 | ignore_pattern: regexp # whatever file that matches the regexp will be ignored when deploying 876 | 877 | # or this: 878 | deploy: 879 | type: git 880 | message: [message] 881 | repo: 882 | github: ,[branch] 883 | coding: ,[branch] 884 | extend_dirs: 885 | - [extend directory] 886 | - [another extend directory] 887 | ignore_hidden: 888 | public: false 889 | [extend directory]: true 890 | [another extend directory]: false 891 | ignore_pattern: 892 | [folder]: regexp # or you could specify the ignore_pattern under a certain directory 893 | ``` 894 | 895 |
    896 | 897 | ## 美化 898 | 899 | ### `hexo-helper-live2d` 萌萌哒二次元看板娘 900 | 901 | 向你的Hexo里放上一只萌萌哒二次元看板娘! 902 | 903 | 演示: 904 | 905 | 原作大大的博客: 906 | 907 | ```bash 908 | npm install --save hexo-helper-live2d 909 | ``` 910 | 911 | 详细配置过多，请查看 912 | 913 | 914 | 915 |
    916 | 917 | ------ 918 | 919 | 📘《从零开始的Hexo博客搭建教程》系列文章： 920 | 921 | 1. [从零开始的Hexo博客搭建教程（一）：开始](https://www.nuist.today/h94Rf-/) 922 | 2. [从零开始的Hexo博客搭建教程（二）：主题](https://www.nuist.today/0IxRfH/) 923 | 3. [从零开始的Hexo博客搭建教程（三）：SEO优化](https://www.nuist.today/i5bofg/) 924 | 4. [从零开始的Hexo博客搭建教程（四）：图床](https://www.nuist.today/JjDMWM/) 925 | 5. [从零开始的Hexo博客搭建教程（五）：文章发布](https://www.nuist.today/1eC0kV/) 926 | 6. [从零开始的Hexo博客搭建教程（六）：插件](https://www.nuist.today/hAbX6u/) 927 | 7. [从零开始的Hexo博客搭建教程（七）：遇到的坑](https://www.nuist.today/A-fgp4/) 928 | -------------------------------------------------------------------------------- /logo.svg: -------------------------------------------------------------------------------- 1 | 资源 1 --------------------------------------------------------------------------------