diff --git a/archives/2019/07/index.html b/archives/2019/07/index.html index 10cf60a04..f14b1348e 100644 --- a/archives/2019/07/index.html +++ b/archives/2019/07/index.html @@ -5,6 +5,7 @@ + Archives: 2019/7 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
+ + + + + + + + + + +
@@ -176,7 +209,7 @@
-

荷塘月色

+
荷塘月色

每天进步一点点

@@ -231,7 +264,7 @@

荷塘月色

- + @@ -244,31 +277,7 @@

荷塘月色

- - - -
- - - - - - - - + @@ -319,7 +328,7 @@

荷塘月色

- + @@ -347,6 +356,62 @@

荷塘月色

+ + +
+ + 🍻 + 正在加载今日诗词.... + + + + + + + + +
+ + + + + +
+ +
@@ -921,19 +986,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1064,7 +1129,7 @@

    • - + diff --git a/archives/2019/08/index.html b/archives/2019/08/index.html index e88efb269..f461365f1 100644 --- a/archives/2019/08/index.html +++ b/archives/2019/08/index.html @@ -5,6 +5,7 @@ + Archives: 2019/8 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -634,19 +699,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -777,7 +842,7 @@

    • - + diff --git a/archives/2019/11/index.html b/archives/2019/11/index.html index e66769a13..128780659 100644 --- a/archives/2019/11/index.html +++ b/archives/2019/11/index.html @@ -5,6 +5,7 @@ + Archives: 2019/11 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -1673,19 +1738,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1816,7 +1881,7 @@

    • - + diff --git a/archives/2019/12/index.html b/archives/2019/12/index.html index 2a090d38e..37e50fda5 100644 --- a/archives/2019/12/index.html +++ b/archives/2019/12/index.html @@ -5,6 +5,7 @@ + Archives: 2019/12 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -634,19 +699,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -777,7 +842,7 @@

    • - + diff --git a/archives/2019/index.html b/archives/2019/index.html index 7804f0b85..5876079aa 100644 --- a/archives/2019/index.html +++ b/archives/2019/index.html @@ -5,6 +5,7 @@ + Archives: 2019 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -2224,19 +2289,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -2367,7 +2432,7 @@

    • - + diff --git a/archives/2020/01/index.html b/archives/2020/01/index.html index d1d9d7e6a..99824937a 100644 --- a/archives/2020/01/index.html +++ b/archives/2020/01/index.html @@ -5,6 +5,7 @@ + Archives: 2020/1 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -592,19 +657,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -735,7 +800,7 @@

    • - + diff --git a/archives/2020/02/index.html b/archives/2020/02/index.html index 02c77a028..fb645b59f 100644 --- a/archives/2020/02/index.html +++ b/archives/2020/02/index.html @@ -5,6 +5,7 @@ + Archives: 2020/2 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -638,19 +703,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -781,7 +846,7 @@

    • - + diff --git a/archives/2020/03/index.html b/archives/2020/03/index.html index d3a88b949..cea14662a 100644 --- a/archives/2020/03/index.html +++ b/archives/2020/03/index.html @@ -5,6 +5,7 @@ + Archives: 2020/3 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -688,19 +753,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -831,7 +896,7 @@

    • - + diff --git a/archives/2020/04/index.html b/archives/2020/04/index.html index ca3606cfa..f3aae1a6d 100644 --- a/archives/2020/04/index.html +++ b/archives/2020/04/index.html @@ -5,6 +5,7 @@ + Archives: 2020/4 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -374,6 +439,52 @@

    荷塘月色

    + + + +
    + + +

    + hexo+yilia添加APlayer音乐播放器 +

    + + +
    + +
    + + +
    + + + +
    +
    + +
    + + + + +
    +
    +
    +
    + + + + @@ -596,19 +707,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -739,7 +850,7 @@

    • - + diff --git a/archives/2020/index.html b/archives/2020/index.html index 6afca406f..6118f8350 100644 --- a/archives/2020/index.html +++ b/archives/2020/index.html @@ -5,6 +5,7 @@ + Archives: 2020 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -374,6 +439,52 @@

    荷塘月色

    + + + +
    + + +

    + hexo+yilia添加APlayer音乐播放器 +

    + + +
    + +
    + + +
    + + + +
    +
    +
    +
    +
    + + + +
    +
    +
    +
    + + + + @@ -876,19 +987,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1019,7 +1130,7 @@

    • - + diff --git a/archives/index.html b/archives/index.html index 0186e7981..f6b762a5f 100644 --- a/archives/index.html +++ b/archives/index.html @@ -5,6 +5,7 @@ + Archives | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -374,6 +439,52 @@

    荷塘月色

    + + + +
    + + +

    + hexo+yilia添加APlayer音乐播放器 +

    + + +
    + +
    + + +
    + + + +
    +
    +
    +
    +
    + + + +
    +
    +
    +
    + + + + @@ -2564,19 +2675,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -2707,7 +2818,7 @@

    • - + diff --git a/article/252051e3.html b/article/252051e3.html index 1a2621dd8..cca709cb4 100644 --- a/article/252051e3.html +++ b/article/252051e3.html @@ -5,6 +5,7 @@ + hexo-yilia添加Dplayer视频播放插件 | 荷塘月色的博客 @@ -28,6 +29,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -180,7 +213,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -235,7 +268,7 @@

    荷塘月色

    - + @@ -248,31 +281,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -323,7 +332,7 @@

    荷塘月色

    - + @@ -351,6 +360,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -448,10 +513,10 @@

    测试

    1.简单模式

    【J.Fla】J.Fla最新翻唱《Let Her Go》（中英字幕）

    1
    2
    {% dplayer "url=https://oss.yansheng.xyz/video/Let%20Her%20Go-J.Fla.mp4" 
    "loop=yes" "theme=#FADFA3" "autoplay=false"%}
    -
    +

    2.设置大小

    1
    2
    {% dplayer "url=https://oss.yansheng.xyz/video/Let%20Her%20Go-J.Fla.mp4" 
    "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}
    -
    +

    3.各视频网站测试

    注：获取网站视频链接的方法

      @@ -469,7 +534,7 @@

      优酷-blob:http

      1
      2
      {% dplayer "url=https://ip3909677239.mobgslb.tbcache.com/697527F075E4271B3854E35FD/03000801005D16BE6A7657C5ACCC9273FC634F-4FE4-42BD-9058-BDD737033AD6.mp4?ccode=0501&duration=209&expire=18000&psid=d4651e02fe8648bae7ba5eb90e634aee&ups_client_netip=78efecb2&ups_ts=1580803578&ups_userid=&utid=5dEkFu7TTAoCAaOOg8%2Fdh%2Bzg&vid=XNDEzMTQ2Mzc2OA&vkey=Ae25465c34a3e1d5a0008c52dbd954ac2&bc=2&dre=u21&si=42&ali_redirect_domain=ykugc.cp31.ott.cibntv.net&ali_redirect_ex_ftag=6bb8c51a31829f123b81d2f8f31d62ad1de1e72da5be49b4&ali_redirect_ex_tmining_ts=1580803613&ali_redirect_ex_tmining_expire=3600&ali_redirect_ex_hot=100"
      "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}
      -
      +

      爱奇艺-blob:http

      @@ -480,7 +545,7 @@

      腾讯视频

      1
      2
      {% dplayer "url=https://apd-269733cd84807e39d1c4e3453c172928.v.smtcdns.com/om.tc.qq.com/AUBPmiNNTAT3He9k_05J1HRAM1yZVGlQ-hDZtg0epZFQ/uwMROfz2r57IIaQXGdGnC2ddDmZUA-P9pUvDyp7Vcj06VB05/shg_57576174_50001_208137e9f2843cf7850adcc2052bdd4a.f622.mp4?sdtfrom=v1010&guid=7ae1df42357b9bcea3195ca549ce5531&vkey=4B6DB7E072CA38A41C053A938FA7D1B91D1783ACF46A1356E88C71B8160881DEC88D761C281209C12C1DAB9772F55FB572EA0D675ACA209A621B3BC4789A2D91FEA05680B9EA477C282FC1B4A32BCB1E5EEF5DFCC65AA2A4B2BCB2AB51E54FABD0E1122171184A171FFE7C84CFB1295C720E320BFCE4648EF92358A0BFDAC7FB"
      "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}
      -
      +

      B站-blob:http

      @@ -488,7 +553,7 @@

      B站-blob:http

      1
      2
      {% dplayer "url=https://cn-jxnc-cmcc-bcache-07.bilivideo.com/upgcxcode/97/06/37010697/37010697-1-6.mp4?e=ig8euxZM2rNcNbdlhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1580811360&gen=playurl&os=bcache&oi=2028989618&trid=49761c7626084b8b8b97074e119e8a41h&platform=html5&upsig=d5272df25514a59fbdb296cefefcb96c&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=91203456&origin_cdn=ks3" 
      "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}
      -
      +

      酷狗音乐MV

      @@ -499,7 +564,7 @@

      网易云音乐MV-blob:http

      1
      2
      {% dplayer "url=http://vodkgeyttp8.vod.126.net/cloudmusic/1182/core/91d9/071e7736fb284fe4d7d020a3cf693362.mp4?wsSecret=ff87443a41aebf38eaafd4385b736940&wsTime=1580818343" 
      "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}
      -
      +

      bug🐛

      @@ -962,19 +1027,19 @@

      2.视频链接会失效

    1. - 工具软件 + Git
    2. - 软件破解 + GitHub
    3. - Git + 工具软件
    4. - GitHub + 软件破解
    5. @@ -1105,7 +1170,7 @@

      2.视频链接会失效

    - + diff --git a/article/285260df.html b/article/285260df.html index f3d0d7b0e..40fdd53ef 100644 --- a/article/285260df.html +++ b/article/285260df.html @@ -5,6 +5,7 @@ + hexo+yilia测试代码块样式 | 荷塘月色的博客 @@ -25,6 +26,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -177,7 +210,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -232,7 +265,7 @@

    荷塘月色

    - + @@ -245,31 +278,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -320,7 +329,7 @@

    荷塘月色

    - + @@ -348,6 +357,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -929,19 +994,19 @@

    YML

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1072,7 +1137,7 @@

    YML

    • - + diff --git a/article/2928fb74.html b/article/2928fb74.html index 7b16c75a4..f16e9b698 100644 --- a/article/2928fb74.html +++ b/article/2928fb74.html @@ -5,6 +5,7 @@ + 一分钟教你快速识别不同茶叶分类！ | 荷塘月色的博客 @@ -38,6 +39,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -190,7 +223,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -245,7 +278,7 @@

    荷塘月色

    - + @@ -258,31 +291,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -333,7 +342,7 @@

    荷塘月色

    - + @@ -361,6 +370,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -854,19 +919,19 @@

    【茶的分类】

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -997,7 +1062,7 @@

    【茶的分类】

    • - + diff --git a/article/31bbdc67.html b/article/31bbdc67.html index 0a0482397..70d201f6a 100644 --- a/article/31bbdc67.html +++ b/article/31bbdc67.html @@ -5,6 +5,7 @@ + hexo+yilia添加隐藏左边栏目按钮 | 荷塘月色的博客 @@ -30,6 +31,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -182,7 +215,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -237,7 +270,7 @@

    荷塘月色

    - + @@ -250,31 +283,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -325,7 +334,7 @@

    荷塘月色

    - + @@ -353,6 +362,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -911,19 +976,19 @@

    🐛

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1054,7 +1119,7 @@

    🐛

    • - + diff --git a/article/37bae0ef.html b/article/37bae0ef.html index 6c4cc63dd..e5157c1c0 100644 --- a/article/37bae0ef.html +++ b/article/37bae0ef.html @@ -5,6 +5,7 @@ + hexo2.基本框架搭建-hexo(yilia)+GitHub Pages搭建个人博客系列文章 | 荷塘月色的博客 @@ -32,6 +33,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -184,7 +217,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -239,7 +272,7 @@

    荷塘月色

    - + @@ -252,31 +285,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -327,7 +336,7 @@

    荷塘月色

    - + @@ -355,6 +364,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -983,19 +1048,19 @@

    五、发布到github pages

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1126,7 +1191,7 @@

    五、发布到github pages

    • - + diff --git a/article/3d67529f.html b/article/3d67529f.html index 7d4fe643d..bee15725f 100644 --- a/article/3d67529f.html +++ b/article/3d67529f.html @@ -5,6 +5,7 @@ + hexo+yilia添加版权声明 | 荷塘月色的博客 @@ -29,6 +30,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -181,7 +214,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -236,7 +269,7 @@

    荷塘月色

    - + @@ -249,31 +282,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -324,7 +333,7 @@

    荷塘月色

    - + @@ -352,6 +361,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -898,19 +963,19 @@

    2.升级版-配置版

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1041,7 +1106,7 @@

    2.升级版-配置版

    • - + diff --git a/article/3efe2740.html b/article/3efe2740.html index b9d7e1726..f5f1ba197 100644 --- a/article/3efe2740.html +++ b/article/3efe2740.html @@ -5,6 +5,7 @@ + hexo4.扩展主题的个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章 | 荷塘月色的博客 @@ -30,6 +31,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -182,7 +215,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -237,7 +270,7 @@

    荷塘月色

    - + @@ -250,31 +283,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -325,7 +334,7 @@

    荷塘月色

    - + @@ -353,6 +362,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -1021,19 +1086,19 @@

    3.自定义帖子元数据

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1164,7 +1229,7 @@

    3.自定义帖子元数据

    • - + diff --git a/article/47e1ef2d.html b/article/47e1ef2d.html index c6cbf34f6..a3198f9f1 100644 --- a/article/47e1ef2d.html +++ b/article/47e1ef2d.html @@ -5,6 +5,7 @@ + hexo+yilia测试新的渲染引擎和表情 | 荷塘月色的博客 @@ -29,6 +30,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -181,7 +214,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -236,7 +269,7 @@

    荷塘月色

    - + @@ -249,31 +282,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -324,7 +333,7 @@

    荷塘月色

    - + @@ -352,6 +361,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -925,19 +990,19 @@

    测试选择框

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1068,7 +1133,7 @@

    测试选择框

    • - + diff --git a/article/5026011a.html b/article/5026011a.html index 3b0218eb8..742d5b3f5 100644 --- a/article/5026011a.html +++ b/article/5026011a.html @@ -5,6 +5,7 @@ + hexo+yilia的标签和分类的区别 | 荷塘月色的博客 @@ -25,6 +26,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -177,7 +210,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -232,7 +265,7 @@

    荷塘月色

    - + @@ -245,31 +278,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -320,7 +329,7 @@

    荷塘月色

    - + @@ -348,6 +357,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -877,19 +942,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1020,7 +1085,7 @@

    • - + diff --git a/article/50902a4.html b/article/50902a4.html index eef606679..36c76b83a 100644 --- a/article/50902a4.html +++ b/article/50902a4.html @@ -5,6 +5,7 @@ + hexo+yilia添加网站运行时间，ICP备案信息，设定站点建立时间 | 荷塘月色的博客 @@ -28,6 +29,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -180,7 +213,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -235,7 +268,7 @@

    荷塘月色

    - + @@ -248,31 +281,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -323,7 +332,7 @@

    荷塘月色

    - + @@ -351,6 +360,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -913,19 +978,19 @@

    效果

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1056,7 +1121,7 @@

    效果

    • - + diff --git a/article/521a17ae.html b/article/521a17ae.html index e5d7c8634..5d0c020e1 100644 --- a/article/521a17ae.html +++ b/article/521a17ae.html @@ -5,6 +5,7 @@ + hexo+yilia添加分类页面 | 荷塘月色的博客 @@ -31,6 +32,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -183,7 +216,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -238,7 +271,7 @@

    荷塘月色

    - + @@ -251,31 +284,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -326,7 +335,7 @@

    荷塘月色

    - + @@ -354,6 +363,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -904,19 +969,19 @@

    效果图

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1047,7 +1112,7 @@

    效果图

    • - + diff --git a/article/57f89578.html b/article/57f89578.html index e1a8d1605..e58705f13 100644 --- a/article/57f89578.html +++ b/article/57f89578.html @@ -5,6 +5,7 @@ + 抑郁症 | 荷塘月色的博客 @@ -29,6 +30,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -181,7 +214,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -236,7 +269,7 @@

    荷塘月色

    - + @@ -249,31 +282,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -324,7 +333,7 @@

    荷塘月色

    - + @@ -352,6 +361,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -933,19 +998,19 @@

    预防

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1076,7 +1141,7 @@

    预防

    • - + diff --git a/article/5c52aefe.html b/article/5c52aefe.html index 095b30d11..bc4fbc20a 100644 --- a/article/5c52aefe.html +++ b/article/5c52aefe.html @@ -5,6 +5,7 @@ + hexo+yilia添加背景音乐 | 荷塘月色的博客 @@ -27,6 +28,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -179,7 +212,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -234,7 +267,7 @@

    荷塘月色

    - + @@ -247,31 +280,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -322,7 +331,7 @@

    荷塘月色

    - + @@ -350,6 +359,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -908,19 +973,19 @@

    更新

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1051,7 +1116,7 @@

    更新

    • - + diff --git a/article/6216745.html b/article/6216745.html index 0321b82f3..8dcd41491 100644 --- a/article/6216745.html +++ b/article/6216745.html @@ -5,6 +5,7 @@ + 2016十大校花排行榜，美翻了 | 荷塘月色的博客 @@ -37,6 +38,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -189,7 +222,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -244,7 +277,7 @@

    荷塘月色

    - + @@ -257,31 +290,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -332,7 +341,7 @@

    荷塘月色

    - + @@ -360,6 +369,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -881,19 +946,19 @@

    复旦大学校花——海棠花

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1024,7 +1089,7 @@

    复旦大学校花——海棠花

    • - + diff --git a/article/658be5fc.html b/article/658be5fc.html index 269b3de88..5f51ad598 100644 --- a/article/658be5fc.html +++ b/article/658be5fc.html @@ -5,6 +5,7 @@ + hexo+yilia添加valine评论系统 | 荷塘月色的博客 @@ -27,6 +28,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -179,7 +212,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -234,7 +267,7 @@

    荷塘月色

    - + @@ -247,31 +280,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -322,7 +331,7 @@

    荷塘月色

    - + @@ -350,6 +359,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -900,19 +965,19 @@

    5.3邮箱验证

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1043,7 +1108,7 @@

    5.3邮箱验证

    • - + diff --git a/article/660ecf00.html b/article/660ecf00.html index ef36b20c8..e91f3bc82 100644 --- a/article/660ecf00.html +++ b/article/660ecf00.html @@ -5,6 +5,7 @@ + 文件对比软件:Beyond Compare 4-破解方法 | 荷塘月色的博客 @@ -31,6 +32,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -183,7 +216,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -238,7 +271,7 @@

    荷塘月色

    - + @@ -251,31 +284,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -326,7 +335,7 @@

    荷塘月色

    - + @@ -354,6 +363,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -976,19 +1041,19 @@

    3、删除指定文件夹内容：

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1119,7 +1184,7 @@

    3、删除指定文件夹内容：

    - + diff --git a/article/6bb10e64.html b/article/6bb10e64.html index 11c968a17..18c6d869a 100644 --- a/article/6bb10e64.html +++ b/article/6bb10e64.html @@ -5,6 +5,7 @@ + Ubuntu升级Ruby | 荷塘月色的博客 @@ -27,6 +28,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -179,7 +212,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -234,7 +267,7 @@

    荷塘月色

    - + @@ -247,31 +280,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -322,7 +331,7 @@

    荷塘月色

    - + @@ -350,6 +359,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -890,19 +955,19 @@

    安装后查看版本号：

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1033,7 +1098,7 @@

    安装后查看版本号：

    • - + diff --git a/article/72a91df5.html b/article/72a91df5.html index e553a2b6f..1aa9c2d3f 100644 --- a/article/72a91df5.html +++ b/article/72a91df5.html @@ -5,6 +5,7 @@ + hexo+yilia添加背景图片 | 荷塘月色的博客 @@ -32,6 +33,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -184,7 +217,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -239,7 +272,7 @@

    荷塘月色

    - + @@ -252,31 +285,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -327,7 +336,7 @@

    荷塘月色

    - + @@ -355,6 +364,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -940,19 +1005,19 @@

    4.6行内代码、引用块的
  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1083,7 +1148,7 @@

    4.6行内代码、引用块的

    • - + diff --git a/article/7322d22a.html b/article/7322d22a.html index ba9cbc89b..80343997a 100644 --- a/article/7322d22a.html +++ b/article/7322d22a.html @@ -5,6 +5,7 @@ + the first blog writtern by hexo | 荷塘月色的博客 @@ -27,6 +28,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -179,7 +212,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -234,7 +267,7 @@

    荷塘月色

    - + @@ -247,31 +280,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -322,7 +331,7 @@

    荷塘月色

    - + @@ -350,6 +359,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -835,19 +900,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -978,7 +1043,7 @@

    • - + diff --git a/article/792be839.html b/article/792be839.html index 3e5233cb1..e26f65671 100644 --- a/article/792be839.html +++ b/article/792be839.html @@ -5,6 +5,7 @@ + 什么是随笔？ | 荷塘月色的博客 @@ -25,6 +26,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -177,7 +210,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -232,7 +265,7 @@

    荷塘月色

    - + @@ -245,31 +278,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -320,7 +329,7 @@

    荷塘月色

    - + @@ -348,6 +357,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -888,19 +953,19 @@

    例文编辑

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1031,7 +1096,7 @@

    例文编辑

    • - + diff --git a/article/91e4f23f.html b/article/91e4f23f.html index 3906b06a8..99a10918c 100644 --- a/article/91e4f23f.html +++ b/article/91e4f23f.html @@ -5,6 +5,7 @@ + hexo+yilia添加RSS订阅功能 | 荷塘月色的博客 @@ -25,6 +26,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -177,7 +210,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -232,7 +265,7 @@

    荷塘月色

    - + @@ -245,31 +278,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -320,7 +329,7 @@

    荷塘月色

    - + @@ -348,6 +357,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -874,19 +939,19 @@

    4.重新生成文件

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1017,7 +1082,7 @@

    4.重新生成文件

    • - + diff --git a/article/94a46e7b.html b/article/94a46e7b.html index 6aff35c9f..d682a18de 100644 --- a/article/94a46e7b.html +++ b/article/94a46e7b.html @@ -5,6 +5,7 @@ + 2019再见，2020你好 | 荷塘月色的博客 @@ -30,6 +31,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -182,7 +215,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -237,7 +270,7 @@

    荷塘月色

    - + @@ -250,31 +283,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -325,7 +334,7 @@

    荷塘月色

    - + @@ -353,6 +362,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -891,19 +956,19 @@

    习近平主席2020新年贺词

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1034,7 +1099,7 @@

    习近平主席2020新年贺词

    • - + diff --git a/article/a07aa35d.html b/article/a07aa35d.html index 4763931a1..b037e179e 100644 --- a/article/a07aa35d.html +++ b/article/a07aa35d.html @@ -5,6 +5,7 @@ + 中国加油，武汉加油！ | 荷塘月色的博客 @@ -25,6 +26,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -177,7 +210,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -232,7 +265,7 @@

    荷塘月色

    - + @@ -245,31 +278,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -320,7 +329,7 @@

    荷塘月色

    - + @@ -348,6 +357,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -434,7 +499,7 @@

    愿《黎明的

    此次创作的《CHIME OF THE DAWN BELLS》（黎明的编钟声），尚·马龙特别加入了湖北编钟的元素，结合他本人的钢琴演奏，东西方乐器交融回旋，谱写了一曲“中国与世界命运与共”的华章。歌曲饱含深情，处处流露着中国传统文化和武汉城市元素。尚·马龙特别加了一段自己的中文独白：“夜走了，天亮了，天空和钟声一同醒来了，樱花在温暖的春风中飞扬，武汉，我们在等你。”以此来表达他对武汉，对中国深切的关怀与期待。

    尚·马龙在采访中表示：“我想告诉西方人民，他们不必害怕，应与目前陷入困境的中国人民友好相处。在我职业生涯的最近二十年里，中国给了我很大帮助，我真诚的愿意为中国的朋友们做些事来帮助他们。”（译）没有一个冬天不可逾越，没有一个春天不会来临，武汉和整个中国一定会战胜疫情，全世界人民都在期盼这一刻的到来。

    歌曲MV的制作也得到了全球各地人们以及武汉大学中南医院、世界银行华人职工协会、湖北省外商投资企业协会等众多机构的帮助，同时也邀请到了世界音乐大师Silvano Macaluso一起参与创作，这是他们的再次合作，Silvano Macaluso和尚·马龙曾经共同担任尚雯婕专辑《Nightmare》制作人。

    -
    +
    -
    - -
    - 荷塘月色的博客 -
    -
    -
    - 荷塘月色的博客 -
    -
    -     - -
    - ♡ 小尾巴 -
    -
    -
    -

    ♡ 小尾巴

    -
    -
    -     - -
    - 咪咕鱼 -
    -
    -
    -

    咪咕鱼

    -
    -
    -     - -
    - 白俊遥 -
    -
    -
    -

    白俊遥

    -
    -
    -     - -
    - mirror -
    -
    -
    -

    mirror

    -
    -
    -     - -
    - Hran -
    -
    -
    -

    Hran

    -
    -
    -     - -
    - lulublog -
    -
    -
    -

    lulublog

    -
    -
    -     - -
    - lulublog -
    -
    -
    -

    lulublog

    -
    -
    -     - -
    - lulublog -
    -
    -
    -

    lulublog

    -
    -
    -     - -
    - lulublog -
    -
    -
    -

    lulublog

    -
    -
    -     - -
    - ♡ 小尾巴 -
    -
    -
    -

    ♡ 小尾巴

    -
    -
    -     -
    -

    友链申请

    -

    温馨提示
    -说明及要求：

    -

    1.友链排名不分前后，来者就是友。

    -

    2.站点不能是黄赌毒等非法网站。

    -

    3.站点要不定期的更新动态。

    -

    4.站点打不开本站有权撤销友链。

    -

    ps：如果是妹子可以忽略以上的要求

    -

    申请之前请做好本站友情链接

    -

    网址：https://aidabuda.cn

    -

    站点名称：一木博客

    -

    站点描述：越努力、越幸运。

    -

    申请友情链接，在下方留言，或者请将你得网址以及描述发至我的邮箱申请

    -

    邮箱地址：yimublog@aidabuda.cn

    -

    相关链接

    -

    Tinypng图片压缩: 'https://tinypng.com/'
    -路过图床: ‘https://imgchr.com/’

    +

    之前写过一篇文章，是将APlayer音乐播放器放到左侧的（详见：hexo+yilia添加背景音乐），但是在手机端时，因为左侧边栏会被隐藏，因此也就会将播放器给隐藏掉。也就会是说手机端不能显示该播放器。

    +

    这里换一种方式，直接添加到整个页面中，使其在手机端也能使用。
    +

    + +

    说明

    +
      +
    1. 如果你第一次安装APlayer音乐播放器，我建议你先看一下上面的那篇文章（如果你不介意手机端不能使用，按照那篇文章来也是OK的😬），这里不再详细介绍APlayer。
      2. +
    2. 如果你之前有按照我上面的文章进行配置，建议先删除之前的配置，不然可能会有冲突。
      3. +
    +

    安装步骤

    +

    1.添加插件

    +

    找到对应H:\Hexo\themes\yilia\layout\layout.ejs的文件，在<body>和 <div id="container"之间添加：

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!-- 《添加--APlayer音乐播放器,详见: https://aplayer.js.org/#/zh-Hans/ -->
    <% if(theme.aplayer.enable) { %>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">

        <div id="aplayer" style="text-align:left;z-index: 10;"></div>
        <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>

        <!-- 为方便修改，添加一个配置文件，修改时直接修改配置文件即可。 -->
        <script type="text/javascript" src="<%- url_for('js/APlayer_config.js') %>"></script>

        <!-- 根据封面自适应主题色，主要是作用于进度条 -->
        <script type="text/javascript">
              const colorThief = new ColorThief();
              const setTheme = (index) => {
                if (!ap.list.audios[index].theme) {
                  colorThief.getColorAsync(ap.list.audios[index].cover, function(color) {
                    ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
                  });
                }
              };
              setTheme(ap.list.index);
              ap.on('listswitch', (data) => {
                setTheme(data.index);
              });
        </script>
    <% } %>
    <!-- 添加--APlayer音乐播放器》 -->
    +

    注意

    +
      +
    1. js/APlayer_config.js文件是APlayer的配置文件，需要自己新建，位置为：themes\yilia\source\js\APlayer_config.js，如果不懂参考之前的文章。
      2. +
    2. 这里的<div id="aplayer"id需要与js/APlayer_config.js中container: document.getElementById('aplayer')的id一致。
      3. +
    +

    2.添加样式

    +

    在H:\Hexo\themes\yilia\source\main.0cf68a.css任意位置添加如下代码：

    +
    1
    2
    3
    4
    5
    @media screen and (max-width: 800px) {
        .aplayer {
            opacity:0.8;
        }
    }
    +

    效果图

    +

    PC端：见上

    +

    手机端
    +

    +
    +

    参考：为hexo博客yilia模版添加aplayer音乐播放器

    @@ -670,7 +523,33 @@

    相关链接

    - +
    + 本文作者： + + 荷塘月色 + +
    + 发布时间： + 2020-04-05 +
    + 最后更新： + 2020-04-06 +
    + 本文标题： + hexo+yilia添加APlayer音乐播放器 +
    + 本文链接： + https://www.yansheng.xyz/article/bf60dd05.html +
    + 版权声明： + 本作品采用 + CC BY-NC-SA 4.0 + 许可协议进行许可。转载请注明出处！ + +
    + 知识共享许可协议 + +
    @@ -704,6 +583,21 @@

    相关链接

    +
    + + +
    + @@ -754,7 +648,7 @@

    相关链接

    扫一扫，分享到微信

    - 微信分享二维码 + 微信分享二维码
    @@ -766,6 +660,16 @@

    相关链接

    + +
    - + diff --git a/article/c1217b1d.html b/article/c1217b1d.html index f004f1312..5978fd75d 100644 --- a/article/c1217b1d.html +++ b/article/c1217b1d.html @@ -5,6 +5,7 @@ + hexo+yilia进行SEO优化 | 荷塘月色的博客 @@ -30,6 +31,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -182,7 +215,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -237,7 +270,7 @@

    荷塘月色

    - + @@ -250,31 +283,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -325,7 +334,7 @@

    荷塘月色

    - + @@ -353,6 +362,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -957,19 +1022,19 @@

    补充

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1100,7 +1165,7 @@

    补充

    • - + diff --git a/article/c344994.html b/article/c344994.html index cfd6b5f2e..4400b6149 100644 --- a/article/c344994.html +++ b/article/c344994.html @@ -5,6 +5,7 @@ + hexo+yilia修改代码块等样式 | 荷塘月色的博客 @@ -27,6 +28,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -179,7 +212,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -234,7 +267,7 @@

    荷塘月色

    - + @@ -247,31 +280,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -322,7 +331,7 @@

    荷塘月色

    - + @@ -350,6 +359,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -926,19 +991,19 @@

    2.修改样式

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1069,7 +1134,7 @@

    2.修改样式

    • - + diff --git a/article/c5f6d65b.html b/article/c5f6d65b.html index 7b6301982..859c41fb1 100644 --- a/article/c5f6d65b.html +++ b/article/c5f6d65b.html @@ -5,6 +5,7 @@ + hexo+yilia集成utteranc评论系统 | 荷塘月色的博客 @@ -30,6 +31,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -182,7 +215,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -237,7 +270,7 @@

    荷塘月色

    - + @@ -250,31 +283,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -325,7 +334,7 @@

    荷塘月色

    - + @@ -353,6 +362,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -963,19 +1028,19 @@
    灵活嵌入
  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1106,7 +1171,7 @@
    灵活嵌入
    • - + diff --git a/article/cd4e4c1.html b/article/cd4e4c1.html index b9a89cd07..10ab66639 100644 --- a/article/cd4e4c1.html +++ b/article/cd4e4c1.html @@ -5,6 +5,7 @@ + hexo+yilia添加“心知天气” | 荷塘月色的博客 @@ -28,6 +29,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -180,7 +213,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -235,7 +268,7 @@

    荷塘月色

    - + @@ -248,31 +281,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -323,7 +332,7 @@

    荷塘月色

    - + @@ -351,6 +360,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -883,19 +948,19 @@

    3.设置成方便开启和关
  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1026,7 +1091,7 @@

    3.设置成方便开启和关

    • - + diff --git a/article/cf9c6a5e.html b/article/cf9c6a5e.html index 8b5962c4e..f7780878a 100644 --- a/article/cf9c6a5e.html +++ b/article/cf9c6a5e.html @@ -5,6 +5,7 @@ + hexo+yilia添加背景特效 | 荷塘月色的博客 @@ -34,6 +35,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -186,7 +219,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -241,7 +274,7 @@

    荷塘月色

    - + @@ -254,31 +287,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -329,7 +338,7 @@

    荷塘月色

    - + @@ -357,6 +366,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -965,19 +1030,19 @@

    代码雨

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1108,7 +1173,7 @@

    代码雨

    • - + diff --git a/article/d0ba4c3d.html b/article/d0ba4c3d.html index 2d39119e3..4b8c9a4c2 100644 --- a/article/d0ba4c3d.html +++ b/article/d0ba4c3d.html @@ -5,6 +5,7 @@ + hexo+yilia添加相册视屏功能 | 荷塘月色的博客 @@ -29,6 +30,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -181,7 +214,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -236,7 +269,7 @@

    荷塘月色

    - + @@ -249,31 +282,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -324,7 +333,7 @@

    荷塘月色

    - + @@ -352,6 +361,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -927,19 +992,19 @@

    3、修改
  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1070,7 +1135,7 @@

    3、修改 - + diff --git a/article/dbd84c59.html b/article/dbd84c59.html index a5c6fb235..6cb113e49 100644 --- a/article/dbd84c59.html +++ b/article/dbd84c59.html @@ -5,6 +5,7 @@ + 记一次Spring项目的MySQL乱码问题 | 荷塘月色的博客 @@ -27,6 +28,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -179,7 +212,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -234,7 +267,7 @@

    荷塘月色

    - + @@ -247,31 +280,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -322,7 +331,7 @@

    荷塘月色

    - + @@ -350,6 +359,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -960,19 +1025,19 @@

    3.mybatis问题

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1103,7 +1168,7 @@

    3.mybatis问题

    • - + diff --git a/article/e239dc63.html b/article/e239dc63.html index ac4600b6c..5666561b6 100644 --- a/article/e239dc63.html +++ b/article/e239dc63.html @@ -5,6 +5,7 @@ + hexo+yilia添加live2d看板娘 | 荷塘月色的博客 @@ -27,6 +28,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -179,7 +212,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -234,7 +267,7 @@

    荷塘月色

    - + @@ -247,31 +280,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -322,7 +331,7 @@

    荷塘月色

    - + @@ -350,6 +359,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -898,19 +963,19 @@

    卸载插件

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1041,7 +1106,7 @@

    卸载插件

    • - + diff --git a/article/e62c38c4.html b/article/e62c38c4.html index a084f4375..1e7bd2ca7 100644 --- a/article/e62c38c4.html +++ b/article/e62c38c4.html @@ -5,6 +5,7 @@ + 建站日志 | 荷塘月色的博客 @@ -28,6 +29,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -180,7 +213,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -235,7 +268,7 @@

    荷塘月色

    - + @@ -248,31 +281,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -323,7 +332,7 @@

    荷塘月色

    - + @@ -351,6 +360,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -1006,19 +1071,19 @@

    我采用第一种方式：

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1149,7 +1214,7 @@

    我采用第一种方式：

    • - + diff --git a/article/e9d1b881.html b/article/e9d1b881.html index c60a6f214..bb6a255df 100644 --- a/article/e9d1b881.html +++ b/article/e9d1b881.html @@ -5,6 +5,7 @@ + hexo+yilia添加复制代码块的功能 | 荷塘月色的博客 @@ -22,10 +23,10 @@ - - - - + + + + @@ -38,6 +39,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -190,7 +223,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -245,7 +278,7 @@

    荷塘月色

    - + @@ -258,31 +291,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -333,7 +342,7 @@

    荷塘月色

    - + @@ -361,6 +370,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -523,15 +588,15 @@

    3.添加复制按钮图标

    1
    <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">

    效果图

    有滚动条时：
    -

    +

    复制成功显示：
    -

    +

    微调图标样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    clipboard.on('success', function (e) {
        e.trigger.innerHTML = "<i class='fa fa-check' style='color:green'></i><span style='color:green'>复制成功</span>"
        setTimeout(function () {
            e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
        }, 1000)
        e.clearSelection();
    });
    clipboard.on('error', function (e) {
        e.trigger.innerHTML = "<i class='fa fa-exclamation' style='color:red'></i><span style='color:red'>复制失败</span>"
        setTimeout(function () {
            e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
        }, 1000)
        e.clearSelection();
    });

    复制成功效果：
    -

    +

    复制失败效果：
    -

    +

    收工！

    修复前后对比

    前
    @@ -982,19 +1047,19 @@

    修复前后对比

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1125,7 +1190,7 @@

    修复前后对比

    • - + diff --git a/article/eda67a25.html b/article/eda67a25.html index 156433ab0..002f735c5 100644 --- a/article/eda67a25.html +++ b/article/eda67a25.html @@ -5,6 +5,7 @@ + hexo+yilia添加百度统计和Google统计 | 荷塘月色的博客 @@ -31,6 +32,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -183,7 +216,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -238,7 +271,7 @@

    荷塘月色

    - + @@ -251,31 +284,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -326,7 +335,7 @@

    荷塘月色

    - + @@ -354,6 +363,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -918,19 +983,19 @@

    说明

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1061,7 +1126,7 @@

    说明

    • - + diff --git a/article/ef6b6c25.html b/article/ef6b6c25.html index bcc9c0ebf..c68240ffd 100644 --- a/article/ef6b6c25.html +++ b/article/ef6b6c25.html @@ -5,6 +5,7 @@ + 冠状病毒2019-nCoV实时统计 | 荷塘月色的博客 @@ -29,6 +30,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -181,7 +214,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -236,7 +269,7 @@

    荷塘月色

    - + @@ -249,31 +282,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -324,7 +333,7 @@

    荷塘月色

    - + @@ -352,6 +361,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -882,19 +947,19 @@

    Coronavirus Map

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1025,7 +1090,7 @@

    Coronavirus Map

    • - + diff --git a/article/faa5d14.html b/article/faa5d14.html index 139836412..3cc23f66f 100644 --- a/article/faa5d14.html +++ b/article/faa5d14.html @@ -5,29 +5,32 @@ + hexo+yilia添加URL持久化 | 荷塘月色的博客 - + - + - - + + - + + + + + + +
    + + + + + + + + + + +
    @@ -180,7 +213,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -235,7 +268,7 @@

    荷塘月色

    - + @@ -248,31 +281,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -323,7 +332,7 @@

    荷塘月色

    - + @@ -351,6 +360,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -395,7 +460,7 @@

    字数统计: - 826字 + 838字 @@ -422,38 +487,39 @@

    URL持久化

    参考：你的Hexo博客SEO优化了吗？

    -

    我们可以发现hexo默认生成的文章地址路径是 【网站名称／年／月／日／文章名称】。比如这篇博客：
    -http://localhost:4000/2019/11/10/hexo+yilia添加URL持久化
    +

    我们可以发现hexo默认生成的文章地址路径是 【网站名称／年／月／日／文章名称】。比如这篇博客原来的测试页面链接：http://localhost:4000/2019/11/10/hexo+yilia添加URL持久化
    这种链接对搜索爬虫是很不友好的，第一它的url结构超过了三层，太深了。第二使用了中文路径。这样会导致一个问题，在某些聊天工具或分享链接的时候会造成url转码变成很长一串难以读写的链接。而且如果你的页面之前被收录或被转载后，当你再次编辑过后可能会造成之前的url失效带来不必要的404, 比如下面这样：
    http://localhost:4000/article/faa5d14。别担心，我们有好办法来解决它。

    第一种方式：

    -

    打开_config.yml配置文件，找到permalink

    -
    1
    2
    3
    #permalink: :year/:month/:day/:title/ 注释掉
    # 改为下面这样
    permalink:   /article/:title.html
    +

    打开hexo的配置文件：H:\Hexo\_config.yml，找到permalink

    +
    1
    2
    3
    #permalink: :year/:month/:day/:title/ 
    #注释上行的原配置，改为下面这样
    permalink:   /article/:title.html

    上面这种方式是去掉了年月日，保持网站最多三层。

    第二种方式：(推荐)

    安装 hexo-abbrlink插件：

    1
    npm install hexo-abbrlink --save
    -

    配置_config.yml，查找permalink，修改成这样：

    +

    配置H:\Hexo\_config.yml，查找permalink，修改成这样：

    1
    2
    3
    4
    5
    # permalink: :title/  将之前的注释掉
    permalink: article/:abbrlink.html
    abbrlink:
      alg: crc32  # 算法：crc16(default) and crc32
      rep: hex    # 进制：dec(default) and hex
    -

    安装后的网址：http://localhost:4000/article/c5f6d65b.html

    -

    注意：配置成功需要重新生成文件hexo clean,hexo g，不然会出现undefined的问题，如下：

    +

    安装后的网址形如：http://localhost:4000/article/c5f6d65b.html

    +

    注意：配置成功需要重新生成文件hexo clean,hexo g，不然会出现undefined的问题，如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    $ npm install hexo-abbrlink --save
    npm WARN babel-eslint@10.0.2 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    + hexo-abbrlink@2.0.5
    added 15 packages from 13 contributors and audited 26333 packages in 27.509s
    found 21 vulnerabilities (8 low, 6 moderate, 6 high, 1 critical)
      run `npm audit fix` to fix them, or `npm audit` for details

    yansheng@MECHREVO MINGW64 /h/Hexo (blog)
    $ hexo s
    (node:1612) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
    INFO  Start processing
    INFO  Generating Baidu urls for last 100 posts
    INFO  Posts urls generated in baidu_urls.txt
    https://yansheng836.github.io/archives/undefined.html
    https://yansheng836.github.io/archives/undefined.html
    https://yansheng836.github.io/archives/undefined.html
    https://yansheng836.github.io/archives/undefined.html
    https://yansheng836.github.io/archives/undefined.html
    https://yansheng836.github.io/archives/undefined.html

    INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

    弊端

    其实使用这个也有弊端：

      -
    • 按照原格式，发布后，在github仓库中你能很清楚的看到你写博客的日期，因为是按照网址分文件夹的。使用该插件后就看不到了。
      +
    • 按照原格式，发布后，在github仓库中你能很清楚地看到你写博客的日期，因为是按照网址分文件夹的。使用该插件后就看不到了。
      file

    分类和标签路径名英文化

    上面我们已经实现将文章的URL简短化和英文化了，但是如果我们的标签和分类有中文，这个插件是控制不了的，

    -

    如有个生活的标签，该标签下的所有文章汇总如下：http://localhost:4000/tags/生活/，还是会出现中文，其实这个问题hexo官方自带解决方法，详见：https://hexo.io/zh-cn/docs/configuration.html#%E5%88%86%E7%B1%BB-amp-%E6%A0%87%E7%AD%BE

    +

    比如有个生活的标签，该标签下的所有文章汇总如下：http://localhost:4000/tags/生活/，还是会出现中文，其实这个问题hexo官方自带解决方法，详见：hexo-configuration：分类-amp-标签

    截个图：
    -image

    -

    站点的配置文件有category_map和tag_map配置，即分类和标签的别名（映射），举个例子：

    +

    +

    站点的配置文件H:\Hexo\_config.yml有category_map和tag_map配置，即分类和标签的别名（映射），举个例子：

    1
    2
    3
    4
    5
    6
    # Category & Tag
    default_category: uncategorized
    category_map:
        编程: programming
    tag_map:
        生活: life

    这样标签生活的访问网址为：http://localhost:4000/tags/life/，分类同理。

    +

    参考：https://yq.aliyun.com/articles/8607?spm=0.0.0.0.TP5ICj

    +
    @@ -475,7 +541,7 @@

    分类和标签路径名英文化

    最后更新： - 2019-11-12 + 2020-04-10
    本文标题： hexo+yilia添加URL持久化 @@ -898,19 +964,19 @@

    分类和标签路径名英文化

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1041,7 +1107,7 @@

    分类和标签路径名英文化

    - + diff --git a/atom.xml b/atom.xml deleted file mode 100644 index 847b04d80..000000000 --- a/atom.xml +++ /dev/null @@ -1,1119 +0,0 @@ - - - 荷塘月色的博客 - - 每天进步一点点 - - - - 2020-04-04T04:13:26.123Z - https://www.yansheng.xyz/ - - - 荷塘月色 - - - - Hexo - - - 2020年清明节 - - https://www.yansheng.xyz/article/b75f4e3a.html - 2020-04-04T01:26:45.000Z - 2020-04-04T04:13:26.123Z - - 2020年4月4日清明节

    国务院发布公告：2020年4月4日举行全国性哀悼活动

    为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院今天（4月3日）发布公告，决定2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。

    《只要平凡》

    歌词

    只要平凡（电影《我不是药神》主题曲）

    演唱：张杰，张碧晨

    张杰：也许很远或是昨天 在这里或在对岸
    长路辗转离合悲欢 人聚又人散
    放过对错才知答案 活着的勇敢
    没有神的光环 你我生而平凡

    张碧晨：在心碎中认清遗憾 生命漫长也短暂
    跳动心脏长出藤蔓 愿为险而战
    跌入灰暗坠入深渊 沾满泥土的脸
    没有神的光环 握紧手中的平凡
    此心此生无憾 生命的火已点燃

    张杰：有一天也许会走远 也许还能再相见
    无论在人群在天边 让我再看清你的脸
    任泪水铺满了双眼 虽无言泪满面
    不要神的光环 只要你的平凡

    张碧晨：在心碎中认清遗憾 生命漫长也短暂
    跳动心脏长出藤蔓 愿为险而战
    跌入灰暗坠入深渊 沾满泥土的脸
    没有神的光环 握紧手中的平凡

    张杰：有一天也许会走远 也许还能再相见

    张碧晨：无论在人群在天边 让我再看清你的脸

    张杰：任泪水铺满了双眼 虽无言泪满面

    合：不要神的光环 只要你的平凡
    此心此生无憾 生命的火已点燃

    多灾多难的一年

    2019年非洲猪瘟肆意，猪价疯涨，至今仍未跌回原价。

    2019年3月30日17时，四川省凉山州木里县境内发生森林火灾，27名森林消防支队战士牺牲。我们的伤痛还未抚平，2020年3月30日凌晨3点，四川省凉山州西昌市突发山火，19位救火英雄牺牲。哪有什么岁月静好，只不过有人在替你负重前行。

    2019年年底至今，突如其来的新型冠状病毒肺炎让我们如临大敌，由武汉蔓延至全国，乃至全球。一场没有没有硝烟的战争悄然打响，武汉封城，一大批医护人员自愿请战，赶往第一线。全国人民众志成城，捐款捐物。

    祝愿：明天会更好！

    参考：

    ]]>     - - - - <p>2020年4月4日清明节</p> -<p><img src="https://myblog12.qiniu.yansheng.xyz/picgo/%E8%9C%A1%E7%83%9B.jpg" alt></p> - - - - - - - - - - - -     - - - 冠状病毒2019-nCoV实时统计 - - https://www.yansheng.xyz/article/ef6b6c25.html - 2020-03-25T10:07:49.000Z - 2020-03-25T15:52:12.489Z - - 介绍两个两个有实时数据的网站，方便我们关注新冠肺炎的情况。

    中文网站（数据以国内为主）

    全球新冠病毒最新实时疫情地图_丁香园

    丁香园、丁香医生整合各权威渠道发布的官方数据，通过疫情地图直观展示，持续更新最新的新型冠状病毒肺炎的实时疫情动态。
    网址：https://ncov.dxy.cn/ncovh5/view/pneumonia

    全球新冠病毒最新实时疫情地图_丁香园

    英文网站（数据以国外为主）

    Coronavirus Map

    See the Coronavirus (COVID-19) cases on the map. Latest stats, information on new cases.
    网址：https://clustrmaps.com/coronavirus/

    Coronavirus Map

    ]]>     - - - - <p>介绍两个两个有实时数据的网站，方便我们关注新冠肺炎的情况。</p> -<p><img src="https://myblog12.qiniu.yansheng.xyz/picgo/20200325234333.png" alt></p> - - - - - - - - - - - -     - - - Hexo文章保存为草稿 - - https://www.yansheng.xyz/article/ab5d2a72.html - 2020-03-17T09:39:14.000Z - 2020-03-19T08:44:02.033Z - -

    Version

    Hexo 3.3.8

    传统建立文章方式

    一般我们都会使用 hexo new <title> 来建立文章（该命令其实是hexo new post <title>命令的简写形式），这种建立方法会将新文章建立在 source/_posts 目录下，当使用 hexo generate 编译 markdown 文件时，会将其 HTML 结果编译在 public 目录下，之后 hexo deploy 将会把 public 目录下所有文章部署到 GitHub，这是我们熟悉的 Hexo 流程。

    这种建立文章方式的缺点是：若我们同时编辑多篇文章，只要其中一篇文章尚未编辑完成，也会随着 hexo deploy 一起部署到 GitHub，也就是 GitHub 可能会看到我们尚未完成的文章。

    建立文章草稿

    1
    $ hexo new draft <title>

    Hexo 另外提供 draft 机制，它的原理是新文章将建立在 source/_drafts 目录下，因此 hexo generate 并不会将其编译到 public 目录下，所以 hexo deploy 也不会将其部署到 GitHub。

    本机预览草稿

    1
    $ hexo s --draft

    虽然 hexo generate 不会编译 source/_drafts 目录下的文章，但 Hexo 的 Hexo server 另外提供 --draft 参数，这让我们只要搭配 hexo-browsersync plugins，就可以达到一边编辑 markdown 文章，一边使用浏览器预览的目的。

    将草稿发布为正式文章

    1
    $ hexo p <filename>

    其中 <filename> 为不包含 md 后缀的文章名称。它的原理只是将文章从 source/_drafts 移动到 source/_posts 而已。

    之后的 hexo generate 与 hexo deploy 的用法就完全一样了。

    若日后想将正式文章转为为草稿，只需手动将文章从 source/_posts 目录移动到 source/_drafts 目录即可。

    ]]>     - - - - <img src="https://api.uixsj.cn/bing/bing.php" width="auto" height="auto" alt="bing每日壁纸" title="bing每日壁纸"> - - - - - - - -     - - - 中国加油，武汉加油！ - - https://www.yansheng.xyz/article/a07aa35d.html - 2020-02-29T17:17:01.000Z - 2020-03-25T15:58:07.515Z - - 1月31日，武汉市江汉区西北湖附近高层建筑外墙打出“武汉加油”等字样（无人机照片）。 新华社记者 肖艺九 摄

    愿《黎明的编钟声》响起，一切疾病都已远去！

    以下内容转自：https://baijiahao.baidu.com/s?id=1658231454062945935&wfr=spider&for=pc

    夜走了

    天亮了

    天空和钟声一同醒来了

    樱花在温暖的春风中飞扬

    武汉，我们在等你

    近日，享誉世界盛名的国际流行钢琴家尚·马龙（Jean -Franois Maljean），在他的家乡比利时，特别为中国、为武汉创作的一首“战疫防疫”国际公益曲《CHIME OF THE DAWN BELLS》（中文名：《黎明的编钟声》）。他通过这首歌从地球的另一端为武汉送来遥远的祝福，致敬那些勇敢抗疫的前线人员，为中国人民、中国医护工作者加油鼓气。这也是新冠肺炎疫情爆发以来，首位外国艺术家创作的公益歌曲。

    尚·马龙是比利时知名的乐坛诗人，与雅尼、班得瑞、理查德·克莱德曼、喜多郎齐名，并称为新世纪十大音乐大师。他对中国的感情很深远，对中国的文化情有独钟，2010年与中国知名歌手共同演唱上海世博会比利时馆主题歌《我们的歌》 ，2018年创作的侗族大歌《尽情欢歌》曾登上央视春节联欢晚会。

    此次创作的《CHIME OF THE DAWN BELLS》（黎明的编钟声），尚·马龙特别加入了湖北编钟的元素，结合他本人的钢琴演奏，东西方乐器交融回旋，谱写了一曲“中国与世界命运与共”的华章。歌曲饱含深情，处处流露着中国传统文化和武汉城市元素。尚·马龙特别加了一段自己的中文独白：“夜走了，天亮了，天空和钟声一同醒来了，樱花在温暖的春风中飞扬，武汉，我们在等你。”以此来表达他对武汉，对中国深切的关怀与期待。

    尚·马龙在采访中表示：“我想告诉西方人民，他们不必害怕，应与目前陷入困境的中国人民友好相处。在我职业生涯的最近二十年里，中国给了我很大帮助，我真诚的愿意为中国的朋友们做些事来帮助他们。”（译）没有一个冬天不可逾越，没有一个春天不会来临，武汉和整个中国一定会战胜疫情，全世界人民都在期盼这一刻的到来。

    歌曲MV的制作也得到了全球各地人们以及武汉大学中南医院、世界银行华人职工协会、湖北省外商投资企业协会等众多机构的帮助，同时也邀请到了世界音乐大师Silvano Macaluso一起参与创作，这是他们的再次合作，Silvano Macaluso和尚·马龙曾经共同担任尚雯婕专辑《Nightmare》制作人。

    《CHIME OF THE DAWN BELLS》（黎明的编钟声）

    曲名：《CHIME BELLS OF DAWN》黎明的编钟声
    作词：Kelvin Ho（何浏）、Jean-Franois Maljean（尚·马龙）、ROBERT MURRAY
    作曲：Jean-Franois Maljean（尚·马龙）
    主唱：Noémie Maljean

    SUFFERING,SUFFERING
    疾病，苦难

    IS LIKE A DARK CLOUD.
    有如乌云

    LOOKING, LOOKING FAR AWAY
    远远望去

    YOU WILL SEE A DARK SKY
    你会看到天空墨黑一片

    BUT WHEN YOU’RE UNDER IT
    但是身临其下

    YOU ARE, YOU ARE ONLY GREY
    不过是灰色而已

    DON’T GIVE UP
    永不言弃

    WHEN YOU HEAR THE MUSIC OF CHIME BELLS
    听到编钟声响起

    STANDING ON THE YELLOW CRANE TOWER
    站在黄鹤楼上

    YOU MAY FEEL ALONE NOW
    此时你可能会感到孤单

    BUT THE WORLD STANDS WITH YOU
    但要相信世界人民与你们同在

    UNITED, UNITED PROUD AND BRAVE
    齐心协力、自强不息、勇往直前

    YOU WILL HEAR THE CHIME BELLS
    编钟响起时

    MUSIC LIFTS THE DARKNESS
    音乐终将会驱散黑暗

    SHINING, SHINING ON THE WAVES
    阳光照耀在江面上

    DON’T GIVE UP
    永不言弃

    WHEN YOU HEAR THE MUSIC OF CHIME BELLS
    听到编钟声响起

    STANDING ON THE YELLOW CRANE TOWER
    站在黄鹤楼上

    独白：夜走了
    天亮了
    天空和钟声一同醒来了
    樱花在温暖的春风中飞扬
    武汉，我们在等你

    THE DAWN WILL BREAK
    黎明总会到来

    TO END YOUR DARKEST HOUR
    黑夜终将过去

    STANDING ON THE YELLOW CRANE TOWER.
    站在黄鹤楼上

    THE DAWN WILL BREAK
    黎明总会到来

    TO END YOUR DARKEST HOUR
    黑夜终将过去

    STANDING ON THE YELLOW CRANE TOWER
    站在黄鹤楼上

    相关链接

    ]]>     - - - - <p><img src="https://oss.yansheng.xyz/img/%E4%B8%AD%E5%9B%BD%E5%8A%A0%E6%B2%B9-%E6%AD%A6%E6%B1%89%E5%8A%A0%E6%B2%B9.jpg" alt="1月31日，武汉市江汉区西北湖附近高层建筑外墙打出“武汉加油”等字样（无人机照片）。 新华社记者 肖艺九 摄"></p> - - - - - - - - - - - -     - - - hexo+yilia添加分类页面 - - https://www.yansheng.xyz/article/521a17ae.html - 2020-02-21T14:44:00.000Z - 2020-03-19T08:45:52.819Z - - 效果图

    PC端：

    手机端：

    一般情况下

    只需要新建一个页面，并且指定页面的类型即可生成对应的分类和归档页面，因为很多hexo的主题都集成了分类和标签的功能。

    具体可参考：Hexo新建标签、分类、归档等页面

    针对yilia主题

    虽然这个主题好像有集成，但是好像不管用！！！

    主要参考：https://github.com/litten/hexo-theme-yilia/issues/835

    步骤

    1.新建页面

    在hexo根目录运行命令hexo new page categories，新建一个分类页面。会在生成\source\categories\index.md文件，编辑的内容为：

    1
    2
    3
    4
    5
    6
    7
    ---
    title: 文章分类
    date: 2019-08-19 11:48:35
    toc: false
    comments: false
    layout: categories
    ---

    2.新建一个布局文件

    在你的博客路径下（如\themes\yilia\layout\目录)新建一个categories.ejs文件(用原来的category.ejs生成静态文件时会报错)，内容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <article class="article">
      <h3 class="category-count">共计 <%= site.categories.length %> 个分类, <%= site.tags.length %> 个标签</h3>
      <% if (site.categories.length){ %>
      <ul class="category-list">
        <% site.categories.sort('name').each(function(item){ %>
          <% if(item.posts.length){ %>
            <li class="category-list-item">
              <a href="<%- config.root %><%- item.path %>" class="category-list-link" title="<%= item.name %>">
                <%= item.name %>
                <span class="category-list-count"><%= item.posts.length %></span>
              </a>
            </li>
          <% } %>
        <% }) %>
      </ul>
      <% } %>
      <div class="tag-cloud">
        <%- tagcloud({
          min_font: 20, 
          max_font: 35, 
          amount: 999
        }) %>
      </div>
    </article>

    部署即可。

    3.添加样式

    你可以根据需要更改它的样式。可以参考这个，在\themes\yilia\source\main.0cf68a.css中添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    .category-count {
    text-align:center;
    line-height:3;
    font-size:18px;
    font-weight:bold;
    }
    .category-list {
    text-align:center;
    padding:20px
    }
    .category-list li.category-list-item {
    display:inline-block;
    margin:0 1em .5em 0;
    padding:4px;
    border:1px solid #aaaaaa;
    font-size:1.2rem
    }
    .category-list li.category-list-item:hover {
    background:rgba(204,204,204,0.3)
    }
    .tag-cloud {
    text-align:center;
    padding:20px
    }
    .tag-cloud a {
    margin:0 20px;
    word-break:keep-all;
    position:relative
    }
    .tag-cloud a:hover::before {
    width:100%;
    left:0;
    right:auto
    }
    .tag-cloud a::before {
    content:"";
    position:absolute;
    width:0;
    right:0;
    bottom:0;
    height:2px;
    background:#08c;
    -webkit-transition:width .3s ease;
    transition:width .3s ease
    }

    4.效果

    默认样式的效果：

    手机端

    修改样式

    这主要是修改标题和超链接的样式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    /*《分类页面，标签页面样式*/
    /*标题*/
    .category-count {
        text-align:center;
        line-height:3;
        font-size:50px;
        font-weight: bold;
        font-family: STCaiyun, STXingkai;
        display: block;
        /*渐变背景*/
        background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
        color: transparent;
        /*文字填充色为透明*/
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        /*背景剪裁为文字，只将文字显示为背景*/
        background-size: 200% 100%;
        /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
        /* 动画 */
        animation: masked-animation 4s infinite linear;
    }
    @keyframes masked-animation {
        0% {
            background-position: 0 0;
            /*background-position 属性设置背景图像的起始位置。*/
        }
        100% {
            background-position: -100% 0;
        }
    }
    /* 手机端CSS代码 */
     @media screen and (max-width: 960px) {
        .category-count {
            text-align:center;
            line-height:3;
            font-size:27px;
        }
    }
    /* 分类 */
    .category-list {
        text-align:center;
        padding:20px
    }
    .category-list li.category-list-item {
        display:inline-block;
        margin:0 1em .5em 0;
        padding:4px;
        /* border:1px solid #aaaaaa; */
        font-size:1.2rem
    }
    .category-list li.category-list-item a{
        text-decoration: none;
    }
    .category-list li.category-list-item:hover {
        color:#ffffff;
    }
    /* .category-list li.category-list-item:hover {
        background:rgba(204, 204, 204, 0.3)
    } */

    /* https://github.com/IanLunn/Hover,
    https://ianlunn.github.io/Hover/ */
    /* Rectangle In */
    .hvr-rectangle-in {
      display: inline-block;
      vertical-align: middle;
      padding: 0.5em;
      -webkit-transform: perspective(1px) translateZ(0);
      transform: perspective(1px) translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      position: relative;
      background: #2098D1;
      border-radius: 10px;
      -webkit-transition-property: color;
      transition-property: color;
      -webkit-transition-duration: 0.5s;
      transition-duration: 0.5s;
    }
    .hvr-rectangle-in:before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #e1e1e1;
      border-radius: 10px;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transition-property: transform;
      transition-property: transform;
      -webkit-transition-duration: 0.5s;
      transition-duration: 0.5s;
      -webkit-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
    }
    .hvr-rectangle-in:hover, .hvr-rectangle-in:focus, .hvr-rectangle-in:active {
      color: white;
    }
    .hvr-rectangle-in:hover:before, .hvr-rectangle-in:focus:before, .hvr-rectangle-in:active:before {
      -webkit-transform: scale(0);
      transform: scale(0);
    }

    /* 分类和标签的分界面 */
    .category-hr-tag {
    }

    /* 标签 */
    .tag-cloud {
        text-align:center;
        padding:20px
    }
    .tag-cloud a {
        margin:0 20px;
        word-break:keep-all;
        position:relative
    }
    .tag-cloud a:hover::before {
        width:100%;
        left:0;
        right:auto
    }
    .tag-cloud a::before {
        content:"";
        position:absolute;
        width:0;
        right:0;
        bottom:0;
        height:2px;
        background:#08c;
        -webkit-transition:width .3s ease;
        transition:width .3s ease
    }
    /*分类页面，标签页面样式》*/

    /*《版权声明的样式*/
     .declare {
        background-color: #eaeaea;
        margin-top: 2em;
        border-left: 3px solid #ff1700;
        padding: .5em 1em;
    }
    /*版权声明的样式》*/

    新增分界线

    修改H:\Hexo\themes\yilia\layout\categories.ejs，在<div class="tag-cloud">前面新增：

    1
    <hr class="category-hr-tag" width="90%" color="#987cb9" size="3">

    效果图

    见上

    ]]>     - - - - <h2 id="效果图">效果图</h2> -<p>PC端：<br> -<img src="https://myblog12.qiniu.yansheng.xyz/picgo/20200221224830.png" alt></p> -<p>手机端：<br> -<img src="https://myblog12.qiniu.yansheng.xyz/picgo/20200221225116.png" alt></p> - - - - - - - - - -     - - - hexo-yilia添加Dplayer视频播放插件 - - https://www.yansheng.xyz/article/252051e3.html - 2020-02-04T05:06:21.000Z - 2020-02-09T07:15:21.000Z - - 引言

    如何在博客中插入视频是件麻烦事，视频来源多种多样，优酷、爱奇艺、云空间；视频的相关控件也需要考虑。如果有插件就很方便了。Dplayer就是为这种需求而产生的！

    使用Dplayer插件

    github: https://github.com/MoePlayer/hexo-tag-dplayer

    file

    引用

    npm install

    1
    npm install hexo-tag-dplayer --save

    Usage

    1
    {% dplayer key=value ... %}

    key can be

    1
    2
    3
    4
    5
    6
    7
    8
    dplayer options:
        'autoplay', 'loop', 'screenshot', 'hotkey', 'mutex', 'dmunlimited' : bool options, use "yes" "y" "true" "1" "on" or just without value to enable
        'preload', 'theme', 'lang', 'logo', 'url', 'pic', 'thumbnails', 'vidtype', 'suburl', 'subtype', 'subbottom', 'subcolor', 'subcolor', 'id', 'api', 'token', 'addition', 'dmuser' : string arguments
        'volume', 'maximum' : number arguments
    container options:
        'width', 'height' : string, used in container element style
    other:
        'code' : value of this key will be append to script tag

    arguments to DPlayer options mapping:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    {
        container: "you needn't set this",
        autoplay: 'autoplay',
        theme: 'theme',
        loop: 'loop',
        lang: 'lang',
        screenshot: 'screenshot',
        hotkey: 'hotkey',
        preload: 'preload',
        logo: 'logo',
        volume: 'volume',
        mutex: 'mutex',
        video: {
            url: 'url',
            pic: 'pic',
            thumbnails: 'thumbnails',
            type: 'vidtype',
        },
        subtitle: {
            url: 'suburl',
            type: 'subtype',
            fontSize: 'subsize',
            bottom: 'subbottom',
            color: 'subcolor',
        },
        danmaku: {
            id: 'id',
            api: 'api',
            token: 'token',
            maximum: 'maximum',
            addition: ['addition'],
            user: 'dmuser',
            unlimited: 'dmunlimited',
        },
        icons: 'icons',
        contextmenu: 'menu',
    }

    see dplayer documents for more infomation.

    for example:

    1
    2
    {% dplayer "url=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4" "addition=https://dplayer.daoapp.io/bilibili?aid=4157142" "api=https://api.prprpr.me/dplayer/" "pic=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.jpg" "id=9E2E3368B56CDBB4" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}
    {% dplayer 'url=some.mp4' "id=someid" "api=https://api.prprpr.me/dplayer/" "addition=/some.json" 'code=player.on("loadstart",function(){console.log("loadstart")})' "autoplay" %}

    引用结束

    测试

    注：以下可能有部分视频链接已失效，详见bug:2.视频链接会失效。

    1.简单模式

    【J.Fla】J.Fla最新翻唱《Let Her Go》（中英字幕）

    1
    2
    {% dplayer "url=https://oss.yansheng.xyz/video/Let%20Her%20Go-J.Fla.mp4" 
    "loop=yes" "theme=#FADFA3" "autoplay=false"%}

    2.设置大小

    1
    2
    {% dplayer "url=https://oss.yansheng.xyz/video/Let%20Her%20Go-J.Fla.mp4" 
    "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

    3.各视频网站测试

    注：获取网站视频链接的方法

    1. 直接F12审查网页元素可以获取大部分视频链接。
    2. blob:http开头的链接，在调试模式下，切换成手机端，一般都可以获取视频链接。当然也可以尝试使用下面的几种方法（不敢保证肯定可以）。

    相关链接：

    优酷-blob:http

    测试地址：播放量破60亿的神曲就是不一样，Jfla翻唱播放量都能破亿：https://v.youku.com/v_show/id_XNDEzMTQ2Mzc2OA==.html?spm=a2h0k.11417342.soresults.dtitle

    1
    2
    {% dplayer "url=https://ip3909677239.mobgslb.tbcache.com/697527F075E4271B3854E35FD/03000801005D16BE6A7657C5ACCC9273FC634F-4FE4-42BD-9058-BDD737033AD6.mp4?ccode=0501&duration=209&expire=18000&psid=d4651e02fe8648bae7ba5eb90e634aee&ups_client_netip=78efecb2&ups_ts=1580803578&ups_userid=&utid=5dEkFu7TTAoCAaOOg8%2Fdh%2Bzg&vid=XNDEzMTQ2Mzc2OA&vkey=Ae25465c34a3e1d5a0008c52dbd954ac2&bc=2&dre=u21&si=42&ali_redirect_domain=ykugc.cp31.ott.cibntv.net&ali_redirect_ex_ftag=6bb8c51a31829f123b81d2f8f31d62ad1de1e72da5be49b4&ali_redirect_ex_tmining_ts=1580803613&ali_redirect_ex_tmining_expire=3600&ali_redirect_ex_hot=100"
    "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

    爱奇艺-blob:http

    好像找不到链接！！

    测试地址：JFla最新翻唱视频 《Havana》中英文字幕版：http://www.iqiyi.com/w_19rye3lv79.html

    腾讯视频

    测试地址：开口跪！JFla小姐姐逆天翻唱《英雄联盟》主题曲《Legends Never die》(传奇永不熄)，也就听了100遍：https://v.qq.com/x/page/r07217dqdps.html

    1
    2
    {% dplayer "url=https://apd-269733cd84807e39d1c4e3453c172928.v.smtcdns.com/om.tc.qq.com/AUBPmiNNTAT3He9k_05J1HRAM1yZVGlQ-hDZtg0epZFQ/uwMROfz2r57IIaQXGdGnC2ddDmZUA-P9pUvDyp7Vcj06VB05/shg_57576174_50001_208137e9f2843cf7850adcc2052bdd4a.f622.mp4?sdtfrom=v1010&guid=7ae1df42357b9bcea3195ca549ce5531&vkey=4B6DB7E072CA38A41C053A938FA7D1B91D1783ACF46A1356E88C71B8160881DEC88D761C281209C12C1DAB9772F55FB572EA0D675ACA209A621B3BC4789A2D91FEA05680B9EA477C282FC1B4A32BCB1E5EEF5DFCC65AA2A4B2BCB2AB51E54FABD0E1122171184A171FFE7C84CFB1295C720E320BFCE4648EF92358A0BFDAC7FB"
    "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

    B站-blob:http

    测试地址：【J.Fla】J.Fla最新翻唱《Let Her Go》（中英字幕）:https://www.bilibili.com/medialist/play/ml445525356/

    1
    2
    {% dplayer "url=https://cn-jxnc-cmcc-bcache-07.bilivideo.com/upgcxcode/97/06/37010697/37010697-1-6.mp4?e=ig8euxZM2rNcNbdlhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1580811360&gen=playurl&os=bcache&oi=2028989618&trid=49761c7626084b8b8b97074e119e8a41h&platform=html5&upsig=d5272df25514a59fbdb296cefefcb96c&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=91203456&origin_cdn=ks3" 
    "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

    酷狗音乐MV

    好像找不到

    测试地址：https://www.kugou.com/mvweb/html/mv_1298B160E162FD8DD62176860AC07B0B.html

    网易云音乐MV-blob:http

    测试地址：J.Fla不插电演唱原创新单《Good Vibe》:https://music.163.com/#/mv?id=10893889

    1
    2
    {% dplayer "url=http://vodkgeyttp8.vod.126.net/cloudmusic/1182/core/91d9/071e7736fb284fe4d7d020a3cf693362.mp4?wsSecret=ff87443a41aebf38eaafd4385b736940&wsTime=1580818343" 
    "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

    bug🐛

    1.设置宽高参数后，手机端不能自适应

    额外添加样式控制手机端样式H:\Hexo\themes\yilia\source\main.0cf68a.css

    1
    2
    3
    4
    5
    6
    @media screen and (max-width: 800px) {
       .dplayer {
    max-width:394.4px;
    max-height:221.6px;
        }
    }

    2.视频链接会失效

    虽然上面提到的方式大部分可以获取视频链接，但是可以发现，这个链接都很长，是“防盗链”（?后面的是查询串，包含各种参数。比如设置时间参数，超时就失效。这是为了防止被频繁访问，造成服务器负担而考虑的）。那怎么解决呢？推荐下面几种方法：

    1. 研究防盗链，看能不能让他不失效。好像有点复杂……
    2. 自建云空间：根据视频链接下载该视频，然后上传到自己的云空间☁️（七牛云、阿里云等的OSS空间），然后使用自己的链接。（推荐，第一个视频就是我下载后，上传到阿里云OSS的。）
    3. 使用视频网站自己的分享渠道：

    如：

    1
    <iframe height=498 width=510 src='https://player.youku.com/embed/XNDEzMTQ2Mzc2OA==' frameborder=0 'allowfullscreen'></iframe>

    效果：

    ]]>     - - - - <h2 id="引言">引言</h2> -<p>如何在博客中插入视频是件麻烦事，视频来源多种多样，优酷、爱奇艺、云空间；视频的相关控件也需要考虑。如果有插件就很方便了。Dplayer就是为这种需求而产生的！</p> -<h2 id="使用dplayer插件">使用Dplayer插件</h2> -<p>github: <a href="https://github.com/MoePlayer/hexo-tag-dplayer" target="_blank" rel="noopener">https://github.com/MoePlayer/hexo-tag-dplayer</a></p> -<p><img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1580801312951.png" alt="file"></p> - - - - - - - - - -     - - - 2019再见，2020你好 - - https://www.yansheng.xyz/article/94a46e7b.html - 2020-01-01T14:05:47.000Z - 2020-01-01T15:09:55.457Z - - Happy New Year！

    习近平主席2020新年贺词

    2019年12月31日晚7时，国家主席习近平通过中央广播电视总台和互联网，发表二〇二〇年新年贺词。全文如下：(转自：http://news.ifeng.com/c/7srLqMlTqMR)

    ​ 2020年就要到了，我在首都北京向大家送上新年的美好祝福！

    ​2019年，我们用汗水浇灌收获，以实干笃定前行。高质量发展平稳推进，我国国内生产总值预计将接近100万亿元人民币、人均将迈上1万美元的台阶。三大攻坚战取得关键进展。京津冀协同发展、长江经济带发展、粤港澳大湾区建设、长三角一体化发展按下快进键，黄河流域生态保护和高质量发展成为国家战略。全国将有340个左右贫困县摘帽、1000多万人实现脱贫。嫦娥四号在人类历史上第一次登陆月球背面，长征五号遥三运载火箭成功发射，雪龙2号首航南极，北斗导航全球组网进入冲刺期，5G商用加速推出，北京大兴国际机场“凤凰展翅”……这些成就凝结着新时代奋斗者的心血和汗水，彰显了不同凡响的中国风采、中国力量。

    ​一年来，改革开放不断催生发展活力。党和国家机构改革圆满完成。增设一批自由贸易试验区和上海自由贸易试验区新片区。科创板顺利启动推进。减税降费总额超过2万亿元。个人所得税起征点提高了，老百姓常用的许多药品降价了，网络提速降费使刷屏更快了，垃圾分类引领着低碳生活新时尚。“基层减负年”让基层干部轻装上阵。放眼神州大地，处处都有新变化新气象。

    ​一年来，国防和军队改革扎实推进，人民军队展现出新时代强军风貌。我们进行国庆大阅兵，举行海军、空军成立70周年庆祝活动，举办第七届世界军人运动会。首艘国产航母正式列装。人民子弟兵永远是保卫祖国的钢铁长城，让我们向守护家园的忠诚卫士们致敬！

    ​2019年，最难忘的是隆重庆祝新中国成立70周年。我们为共和国70年的辉煌成就喝彩，被爱国主义的硬核力量震撼。阅兵方阵威武雄壮，群众游行激情飞扬，天安门广场成了欢乐的海洋。大江南北披上红色盛装，人们脸上洋溢着自豪的笑容，《我和我的祖国》在大街小巷传唱。爱国主义情感让我们热泪盈眶，爱国主义精神构筑起民族的脊梁。这一切，汇聚成礼赞新中国、奋斗新时代的前进洪流，给我们增添了无穷力量。

    ​一年来，我去了不少地方。雄安新区画卷徐徐铺展，天津港蓬勃兴盛，北京城市副中心生机勃发，内蒙古大草原壮美亮丽，河西走廊穿越千年、历久弥新，九曲黄河天高水阔、雄浑安澜，黄浦江两岸物阜民丰、流光溢彩……祖国各地一派欣欣向荣的景象。我沿着中国革命的征程砥砺初心。从江西于都红军长征集结出发地到河南新县鄂豫皖苏区首府革命博物馆，从甘肃高台西路军纪念碑到北京香山革命纪念地，每个地方都让我思绪万千，初心和使命是我们走好新时代长征路的不竭动力。

    ​同往常一样，我无论多忙，都要抽时间到乡亲们中走一走看一看。大家跟我说了很多心里话，我一直记在心上。云南贡山独龙族群众、福建寿宁县下党乡的乡亲、“王杰班”全体战士、北京体育大学研究生冠军班同学、澳门小朋友和义工老人，给我写了信。我在回信中肯定了大家取得的成绩，也表达了良好祝愿。

    ​一年来，许多人和事感动着我们。一辈子深藏功名、初心不改的张富清，把青春和生命献给脱贫事业的黄文秀，为救火而捐躯的四川木里31名勇士，用自己身体保护战友的杜富国，以十一连胜夺取世界杯冠军的中国女排……许许多多无怨无悔、倾情奉献的无名英雄，他们以普通人的平凡书写了不平凡的人生。

    ​2019年，中国继续张开双臂拥抱世界。我们主办了第二届“一带一路”国际合作高峰论坛、北京世界园艺博览会、亚洲文明对话大会、第二届中国国际进口博览会，向世界展示了一个文明、开放、包容的中国。我同很多国家元首和政府首脑会晤，分享了中国主张，增进了友谊，深化了共识。世界上又有一些国家同我国建交，我国建交国达到180个。我们的朋友遍天下！

    ​2020年是具有里程碑意义的一年。我们将全面建成小康社会，实现第一个百年奋斗目标。2020年也是脱贫攻坚决战决胜之年。冲锋号已经吹响。我们要万众一心加油干，越是艰险越向前，把短板补得再扎实一些，把基础打得再牢靠一些，坚决打赢脱贫攻坚战，如期实现现行标准下农村贫困人口全部脱贫、贫困县全部摘帽。

    ​前几天，我出席了澳门回归祖国20周年庆祝活动，我为澳门繁荣稳定感到欣慰。澳门的成功实践表明，“一国两制”完全行得通、办得到、得人心。近几个月来，香港局势牵动着大家的心。没有和谐稳定的环境，怎会有安居乐业的家园！真诚希望香港好、香港同胞好。香港繁荣稳定是香港同胞的心愿，也是祖国人民的期盼。

    ​历史长河奔腾不息，有风平浪静，也有波涛汹涌。我们不惧风雨，也不畏险阻。中国将坚定不移走和平发展道路，坚定不移维护世界和平、促进共同发展。我们愿同世界各国人民携起手来，积极共建“一带一路”，推动构建人类命运共同体，为创造人类美好未来而不懈努力。

    ​此时此刻，还有许多人在坚守岗位，许多人在守护平安，许多人在辛勤劳作。大家辛苦了！

    ​让我们只争朝夕，不负韶华，共同迎接2020年的到来。

    ​祝大家新年快乐！

    ]]>     - - - - <p><strong>Happy New Year！</strong></p> -<p><img src="https://myblog12.qiniu.yansheng.xyz/picgo/wallhaven-83jmq2.png" alt></p> - - - - - - - - - -     - - - Commit message 和 Change log 编写指南 - - https://www.yansheng.xyz/article/ad81da89.html - 2019-12-09T12:46:12.000Z - 2020-03-25T15:59:40.700Z - - 如何写好Commit message 和 Change log

    常规的changelog，conventional-changelog

    以下内容转自：Commit message 和 Change log 编写指南

    链接：http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html

    作者： 阮一峰

    日期： 2016年1月 6日

    Commit message 和 Change log 编写指南

    Git 每次提交代码，都要写 Commit message（提交说明），否则就不允许提交。

    1
    $ git commit -m "hello world"

    上面代码的-m参数，就是用来指定 commit mesage 的。

    如果一行不够，可以只执行git commit，就会跳出文本编辑器，让你写多行。

    1
    $ git commit

    基本上，你写什么都行（这里，这里和这里）。

    但是，一般来说，commit message 应该清晰明了，说明本次提交的目的。

    目前，社区有多种 Commit message 的写法规范。本文介绍Angular 规范（见上图），这是目前使用最广的写法，比较合理和系统化，并且有配套的工具。

    一、Commit message 的作用

    格式化的Commit message，有几个好处。

    （1）提供更多的历史信息，方便快速浏览。

    比如，下面的命令显示上次发布后的变动，每个commit占据一行。你只看行首，就知道某次 commit 的目的。

    1
    $ git log <last tag> HEAD --pretty=format:%s

    （2）可以过滤某些commit（比如文档改动），便于快速查找信息。

    比如，下面的命令仅仅显示本次发布新增加的功能。

    1
    $ git log <last release> HEAD --grep feature

    （3）可以直接从commit生成Change log。

    Change Log 是发布新版本时，用来说明与上一个版本差异的文档，详见后文。

    二、Commit message 的格式

    每次提交，Commit message 都包括三个部分：Header，Body 和 Footer。

    1
    2
    3
    4
    5
    <type>(<scope>): <subject>
    // 空一行
    <body>
    // 空一行
    <footer>

    其中，Header 是必需的，Body 和 Footer 可以省略。

    不管是哪一个部分，任何一行都不得超过72个字符（或100个字符）。这是为了避免自动换行影响美观。

    2.1 Header

    Header部分只有一行，包括三个字段：type（必需）、scope（可选）和subject（必需）。

    （1）type

    type用于说明 commit 的类别，只允许使用下面7个标识。

    • feat：新功能（feature）
    • fix：修补bug
    • docs：文档（documentation）
    • style： 格式（不影响代码运行的变动）
    • refactor：重构（即不是新增功能，也不是修改bug的代码变动）
    • test：增加测试
    • chore：构建过程或辅助工具的变动

    如果type为feat和fix，则该 commit 将肯定出现在 Change log 之中。其他情况（docs、chore、style、refactor、test）由你决定，要不要放入 Change log，建议是不要。

    （2）scope

    scope用于说明 commit 影响的范围，比如数据层、控制层、视图层等等，视项目不同而不同。

    （3）subject

    subject是 commit 目的的简短描述，不超过50个字符。

    • 以动词开头，使用第一人称现在时，比如change，而不是changed或changes
    • 第一个字母小写
    • 结尾不加句号（.）

    2.2 Body

    Body 部分是对本次 commit 的详细描述，可以分成多行。下面是一个范例。

    1
    2
    3
    4
    5
    6
    7
    More detailed explanatory text, if necessary.  Wrap it to 
    about 72 characters or so. 

    Further paragraphs come after blank lines.

    - Bullet points are okay, too
    - Use a hanging indent

    有两个注意点。

    （1）使用第一人称现在时，比如使用change而不是changed或changes。

    （2）应该说明代码变动的动机，以及与以前行为的对比。

    Footer 部分只用于两种情况。

    （1）不兼容变动

    如果当前代码与上一个版本不兼容，则 Footer 部分以BREAKING CHANGE开头，后面是对变动的描述、以及变动理由和迁移方法。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    BREAKING CHANGE: isolate scope bindings definition has changed.

        To migrate the code follow the example below:

        Before:

        scope: {
          myAttr: 'attribute',
        }

        After:

        scope: {
          myAttr: '@',
        }

        The removed `inject` wasn't generaly useful for directives so there should be no code using it.

    （2）关闭 Issue

    如果当前 commit 针对某个issue，那么可以在 Footer 部分关闭这个 issue 。

    1
    Closes #234

    也可以一次关闭多个 issue 。

    1
    Closes #123, #245, #992

    2.4 Revert

    还有一种特殊情况，如果当前 commit 用于撤销以前的 commit，则必须以revert:开头，后面跟着被撤销 Commit 的 Header。

    1
    2
    3
    revert: feat(pencil): add 'graphiteWidth' option

    This reverts commit 667ecc1654a317a13331b17617d973392f415f02.

    Body部分的格式是固定的，必须写成This reverts commit &lt;hash>.，其中的hash是被撤销 commit 的 SHA 标识符。

    如果当前 commit 与被撤销的 commit，在同一个发布（release）里面，那么它们都不会出现在 Change log 里面。如果两者在不同的发布，那么当前 commit，会出现在 Change log 的Reverts小标题下面。

    三、Commitizen

    Commitizen是一个撰写合格 Commit message 的工具。

    安装命令如下。

    1
    $ npm install -g commitizen

    然后，在项目目录里，运行下面的命令，使其支持 Angular 的 Commit message 格式。

    1
    $ commitizen init cz-conventional-changelog --save --save-exact

    以后，凡是用到git commit命令，一律改为使用git cz。这时，就会出现选项，用来生成符合格式的 Commit message。

    四、validate-commit-msg

    validate-commit-msg 用于检查 Node 项目的 Commit message 是否符合格式。

    它的安装是手动的。首先，拷贝下面这个JS文件，放入你的代码库。文件名可以取为validate-commit-msg.js。

    接着，把这个脚本加入 Git 的 hook。下面是在package.json里面使用 ghooks，把这个脚本加为commit-msg时运行。

    1
    2
    3
    4
    5
    "config": {
        "ghooks": {
          "commit-msg": "./validate-commit-msg.js"
        }
      }

    然后，每次git commit的时候，这个脚本就会自动检查 Commit message 是否合格。如果不合格，就会报错。

    1
    2
    3
    $ git add -A 
    $ git commit -m "edit markdown" 
    INVALID COMMIT MSG: does not match "<type>(<scope>): <subject>" ! was: edit markdown

    五、生成 Change log

    如果你的所有 Commit 都符合 Angular 格式，那么发布新版本时， Change log 就可以用脚本自动生成（例1，例2，例3）。

    生成的文档包括以下三个部分。

    • New features
    • Bug fixes
    • Breaking changes.

    每个部分都会罗列相关的 commit ，并且有指向这些 commit 的链接。当然，生成的文档允许手动修改，所以发布前，你还可以添加其他内容。

    conventional-changelog 就是生成 Change log 的工具，运行下面的命令即可。

    1
    2
    3
    $ npm install -g conventional-changelog
    $ cd my-project
    $ conventional-changelog -p angular -i CHANGELOG.md -w

    上面命令不会覆盖以前的 Change log，只会在CHANGELOG.md的头部加上自从上次发布以来的变动。

    如果你想生成所有发布的 Change log，要改为运行下面的命令。

    1
    $ conventional-changelog -p angular -i CHANGELOG.md -w -r 0

    为了方便使用，可以将其写入package.json的scripts字段。

    1
    2
    3
    4
    5
    {
      "scripts": {
        "changelog": "conventional-changelog -p angular -i CHANGELOG.md -w -r 0"
      }
    }

    以后，直接运行下面的命令即可。

    1
    $ npm run changelog

    （完）

    文档信息

    • 版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
    • 发表日期：2016年1月 6日

    转载结束

    相关链接

    https://github.com/conventional-changelog/conventional-changelog

    Git commit message和工作流规范]https://www.cnblogs.com/qcloud1001/p/6640787.html

    ［译］AngularJS Git提交信息规范:https://segmentfault.com/a/1190000004282514

    Git-Commit-Log规范（Angular 规范）https://www.jianshu.com/p/c7e40dab5b05

    ]]>     - - - - <p>如何写好Commit message 和 Change log</p> -<p><img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1575910523037.png" alt="常规的changelog，conventional-changelog"></p> - - - - - - - - - -     - - - 记一次Spring项目的MySQL乱码问题 - - https://www.yansheng.xyz/article/dbd84c59.html - 2019-12-08T14:39:29.000Z - 2019-12-09T18:05:09.627Z - - 项目：Spring+Mybatis++SpringMVC+MySQL。

    首先要明确发生乱码的原因是字符编码不一致，抓住这一个进行分析。出现问题的出处常常是中文、小表情（测试时要有针对性）。

    file

    排查过程可参考一下几点：

    1.硬要去–统一文件的编码

    假设都一utf-8为编码。

    1. 数据库统一设置为utf8编码。数据库编码设置为utf8，表、字段如果不进行设置，默认继承上级设置。
    2. 项目编码设置为utf8，主要是java、html、jsp、css、js等文件的编码。

    2.传输过程编码

    前台–>后台

    措施

    在springMVC中设置编码过滤器，统一设置成utf8

    测试

    后台控制台打印前台传输的数据，参看数据与输入数据是否一致。（如果设置到js，也可能前端控制台打印输入数据）。

    后台–>数据库

    措施

    数据库连接的URL，添加字符集参数：

    1.字符集参数

    jdbc:mysql://192.168.0.105:3306/shgb_fz?useUnicode=true&characterEncoding=UTF8&autoReconnect=true&zeroDateTimeBehavior=convertToNull

    参数名称 参数说明
    user 数据库用户名（用于连接数据库）
    password 用户密码（用于连接数据库）
    useUnicode 是否使用Unicode字符集，如果参数characterEncoding设置为gb2312或gbk，本参数值必须设置为true
    characterEncoding 当useUnicode设置为true时，指定字符编码。比如可设置为gb2312或gbk
    autoReconnect 当数据库连接异常中断时，是否自动重新连接？
    autoReconnectForPools 是否使用针对数据库连接池的重连策略
    failOverReadOnly 自动重连成功后，连接是否设置为只读？
    maxReconnects autoReconnect设置为true时，重试连接的次数
    initialTimeout autoReconnect设置为true时，两次重连之间的时间间隔，单位：秒
    connectTimeout 和数据库服务器建立socket连接时的超时，单位：毫秒。 0表示永不超时，适用于JDK 1.4及更高版本
    socketTimeout socket操作（读写）超时，单位：毫秒。 0表示永不超时

    ————————————————
    版权声明：本文为CSDN博主「哈唬咯」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
    原文链接：https://blog.csdn.net/qq_36793179/article/details/78719592

    jdbc URL中的各个参数详解

    https://blog.csdn.net/weixin_34220963/article/details/86463924

    1
    String url = "jdbc:mysql://localhost:3306/DATABASES-NAME?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true&allowPublicKeyRetrieval=true";

    https://dev.mysql.com/doc/connectors/en/connector-j-reference-configuration-properties.html

    2.连接名

    云服务器：jdbc:mysql://192.168.0.105:3306/shgb_fz

    本地：jdbc:mysql://localhost:3306/shgb_fz，简写形式：jdbc:mysql:///shgb_fz

    3.jdbc8

    1
    2
    3
    4
    5
    6
    Class.forName("com.mysql.cj.jdbc.Driver");
    String url = "jdbc:mysql://localhost:3306/DATABASES-NAME?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true&allowPublicKeyRetrieval=true";

    ————————————————
    版权声明：本文为CSDN博主「溜溜的小胖」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
    原文链接：https://blog.csdn.net/aliuxina/article/details/91358010

    3.xml文件需要转义

    1
    2
    3
    &
    转义为
    &amp;

    测试

    利用junit进行测试，直接模拟数据，从控制台插入到数据库，查看是否乱码。

    涉及到的问题

    1.基于spring的句junit测试：junit测试Dao层：https://blog.csdn.net/lovelease/article/details/70155788

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    package com.project.dao;
     
    import org.junit.Assert;
    import org.junit.Test;
    import org.junit.runner.RunWith;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.test.context.ContextConfiguration;
    import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
     
     
    @RunWith(SpringJUnit4ClassRunner.class)// 不能是PowerMock等别的class，否则无法识别spring的配置文件
    @ContextConfiguration("file:conf/applicationContext.xml")// 读取spring配置文件
    public class userDAOTest {

    @Autowired//检索applicationContext.xml，自动注入指定的bean
    UserDAO userDAO;
     
    @Test
    public void testGetUser() {
    int userId = 1;
    String nickname = "昵称1";

    Assert.assertEquals(userId, userDAO.getUser( userId ).getUserId());
    Assert.assertEquals(nickname, userDAO.getUser( userId ).getNickname());
    }
    }
    1.@RunWith和@ContextConfiguration的作用解析

    https://blog.csdn.net/H838071332/article/details/89916490

    1
    2
    @RunWith(SpringJUnit4ClassRunner.class)
    @ContextConfiguration( locations = {"classpath:applicationContext.xml"} )

    @RunWith(SpringJUnit4ClassRunner.class)：
    @Runwith的作用是让测试的实例在spring容器的环境下运行，那么什么是spring容器的环境，这个容器环境就是如:service, controller等包的使用就是spring容器。
    @ContextConfiguration：
    1、 他的作用是引入配置文件applicationContext.xml，如果没有写配置文件名的话则会根据测试的名字去匹配

    @ContextConfigurationpublic void test{}

    2、可以写多个配置文件
    用，隔开如下：

    1
    @ContextConfiguration( locations = {"classpath:applicationContext.xml","classpath:applicationContext2.xml"}
    2.spring的@ContextConfiguration注解

    https://blog.csdn.net/fanbaodan/article/details/100121551

    1
    2
    3
    4
    @ContextConfiguration(value="/applicationContext.xml")  //方法一
    @ContextConfiguration(locations="/applicationContext.xml")   //方法二
    @ContextConfiguration("classpath:/applicationContext.xml")   //方法三
    @ContextConfiguration("/applicationContext.xml")       //方法四

    切记前边要加一个 “/” 代表根目录（不带双引号）
    这是我亲测的几种都可以正常运行junit。

    其实也不用去死记， 这个分开也就是两块;

    一个是属性名（value、locations）
    一个是 属性值（双引号里边的，就是文件路径）
    单个文件一般直接在双引号里边写路径或者用value属性（切记要加“ / ” ！！！）
    如果有多个文件要加载可以使用多个文件时，可用{}括起来，并用逗号分隔，以下示例

    @ContextConfiguration(locations = { “classpath*:/spring1.xml”, “classpath*:/spring2.xml” })

    或者用value

    @ContextConfiguration(value = { “/spring1.xml”, “/spring2.xml” })

    或者不写属性名，（加不加"classpath:" 都可以）

    @ContextConfiguration({ “classpath:/spring1.xml”, “classpath:/spring2.xml” })

    当然单个文件也可以用locations 如上述方法二。

    根据上述源码可以看到， 该属性可以使用 locations 、value 或者直接写值（不写属性名），重点是值（路径）一定要写对。
    根据返回值可以得出以上三种方式都可以配置多个文件

    3.聊聊单元测试（三）——Spring Test+JUnit完美组合

    https://blog.csdn.net/shan9liang/article/details/40452469

    4.Spring系列——@ContextConfiguration注解的使用

    https://blog.csdn.net/m0_37941483/article/details/90727830

    1
    2
    3
    4
    5
    @RunWith(SpringJUnit4ClassRunner.class)
    @ContextConfiguration(locations = {"classpath*:/*.xml"})
    public class CDPlayerTest {

    }

    @ContextConfiguration括号里的locations = {“classpath*😕*.xml”}就表示将class路径里的所有.xml文件都包括进来，那么刚刚创建的那么XML文件就会包括进来，那么里面自动扫描的bean就都可以拿到了，此时就可以在测试类中使用@Autowired注解来获取之前自动扫描包下的所有bean

    classpath和classpath*区别:

    classpath：只会到你的class路径中查找找文件。

    classpath*：不仅包含class路径，还包括jar文件中（class路径）进行查找。

    5.默认不写

    https://blog.csdn.net/u012260238/article/details/87462366

    可以根据测试的类名，去找到与之对应的配置文件。

    3.mybatis问题

    Mybatis 开启控制台打印sql语句：https://blog.csdn.net/qq_37495786/article/details/82799910

    完整SQL是否会乱码。

    ]]>     - - - - <p>项目：Spring+Mybatis++SpringMVC+MySQL。</p> -<p>首先要明确发生乱码的原因是字符编码不一致，抓住这一个进行分析。出现问题的出处常常是中文、小表情（测试时要有针对性）。</p> -<p><img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1575912638971.png" alt="file"></p> - - - - - - - -     - - - 抑郁症 - - https://www.yansheng.xyz/article/57f89578.html - 2019-11-25T15:43:01.000Z - 2019-12-08T12:46:38.770Z - - 抑郁症，一种心病。这是我的定义，但是有时候我甚至怀疑这能不能被称作一种病、怀疑它是否真的存在……然而，现实如此残酷，这种病真实存在，而且发病时间和后果可能让人无法预料。我们不时听到某某明星因为抑郁而自杀的新闻，在叹息的同时，却又不禁在想：又有多少普通人抑郁而终？

    抑郁，亦有轻重，诱发因素或大或小。艾滋病患者多死于肿瘤，艾滋病毒破坏病人的免疫系统，也许一个小小的炎症，可能就会致命；在我看来，抑郁是类似的，它破坏病人的“心情系统”，也许一点点的不愉快可能就会变成诱因，让人走向极端。

    ​——记于2019年国考（2019年11月24日）的后一天

    以下内容转自百度百科：抑郁症.

    抑郁症的定义

    本词条由国家卫健委权威医学科普项目传播网络平台/百科名医网 提供内容 。

    抑郁症又称抑郁障碍，以显著而持久的心境低落为主要临床特征，是心境障碍的主要类型。临床可见心境低落与其处境不相称，情绪的消沉可以从闷闷不乐到悲痛欲绝，自卑抑郁，甚至悲观厌世，可有自杀企图或行为；甚至发生木僵；部分病例有明显的焦虑和运动性激越；严重者可出现幻觉、妄想等精神病性症状。每次发作持续至少2周以上、长者甚或数年，多数病例有反复发作的倾向，每次发作大多数可以缓解，部分可有残留症状或转为慢性。

    抑郁症有多可怕

    基本信息

    file

    发展概况

    我国与世界的抑郁症患病率比较情况如下：

    世界我国
    抑郁症患者人数3.22亿 [1]（无精确数据）
    患病率4.4% [1](4.2±1.9)% [1-2]

    注：

    1.大多数报道将我国抑郁症患病率确定在3%~5%的区间，但有报道称达到了6.1%。

    2.我国抑郁症发病率地区差异较大。

    3.30年间，报告的抑郁症发病率暴增10~20倍，现在仍然呈上升趋势；不排除有的以“世界卫生组织数据表明”的字眼作了错误（虚假）报道，故本数据可能不准确。

    病因

    迄今，抑郁症的病因并不非常清楚，但可以肯定的是，生物、心理与社会环境诸多方面因素参与了抑郁症的发病过程。生物学因素主要涉及遗传、神经生化、神经内分泌、神经再生等方面；与抑郁症关系密切的心理学易患素质是病前性格特征，如抑郁气质。成年期遭遇应激性的生活事件，是导致出现具有临床意义的抑郁发作的重要触发条件。然而，以上这些因素并不是单独起作用的，强调遗传与环境或应激因素之间的交互作用、以及这种交互作用的出现时点在抑郁症发生过程中具有重要的影响。

    临床表现

    抑郁症可以表现为单次或反复多次的抑郁发作，以下是抑郁发作的主要表现。

    1.心境低落

    主要表现为显著而持久的情感低落，抑郁悲观。轻者闷闷不乐、无愉快感、兴趣减退，重者痛不欲生、悲观绝望、度日如年、生不如死。典型患者的抑郁心境有晨重夜轻的节律变化。在心境低落的基础上，患者会出现自我评价降低，产生无用感、无望感、无助感和无价值感，常伴有自责自罪，严重者出现罪恶妄想和疑病妄想，部分患者可出现幻觉。

    2.思维迟缓

    患者思维联想速度缓慢，反应迟钝，思路闭塞，自觉“脑子好像是生了锈的机器”，“脑子像涂了一层糨糊一样”。临床上可见主动言语减少，语速明显减慢，声音低沉，对答困难，严重者交流无法顺利进行。

    3.意志活动减退

    患者意志活动呈显著持久的抑制。临床表现行为缓慢，生活被动、疏懒，不想做事，不愿和周围人接触交往，常独坐一旁，或整日卧床，闭门独居、疏远亲友、回避社交。严重时连吃、喝等生理需要和个人卫生都不顾，蓬头垢面、不修边幅，甚至发展为不语、不动、不食，称为“抑郁性木僵”，但仔细精神检查，患者仍流露痛苦抑郁情绪。伴有焦虑的患者，可有坐立不安、手指抓握、搓手顿足或踱来踱去等症状。严重的患者常伴有消极自杀的观念或行为。调查显示，我国每年有28.7万人死于自杀，其中63%有精神障碍，40%患有抑郁症。 [3] 因抑郁症而自杀的不乏名人，包括梵高、海明威、三毛、张国荣、 [3] 徐行、李晓、罗宾·威廉姆斯、乔任梁等 [4] 。消极悲观的思想及自责自罪、缺乏自信心可萌发绝望的念头，认为“结束自己的生命是一种解脱”，“自己活在世上是多余的人”，并会使自杀企图发展成自杀行为。这是抑郁症最危险的症状，应提高警惕。

    4.认知功能损害

    研究认为抑郁症患者存在认知功能损害。主要表现为近事记忆力下降、注意力障碍、反应时间延长、警觉性增高、抽象思维能力差、学习困难、语言流畅性差、空间知觉、眼手协调及思维灵活性等能力减退。认知功能损害导致患者社会功能障碍，而且影响患者远期预后。

    5.躯体症状

    主要有睡眠障碍、乏力、食欲减退、体重下降、便秘、身体任何部位的疼痛、性欲减退、阳痿、闭经等。躯体不适的体诉可涉及各脏器，如恶心、呕吐、心慌、胸闷、出汗等。自主神经功能失调的症状也较常见。病前躯体疾病的主诉通常加重。睡眠障碍主要表现为早醒，一般比平时早醒2～3小时，醒后不能再入睡，这对抑郁发作具有特征性意义。有的表现为入睡困难，睡眠不深；少数患者表现为睡眠过多。体重减轻与食欲减退不一定成比例，少数患者可出现食欲增强、体重增加。

    检查

    对疑为抑郁症的患者，除进行全面的躯体检查及神经系统检查外，还要注意辅助检查及实验室检查。迄今为止，尚无针对抑郁障碍的特异性检查项目。因此，目前的实验室检查主要是为了排除物质及躯体疾病所致的抑郁症。有2种实验室检查具有一定的意义，包括地塞米松抑制试验（DST）和促甲状腺素释放激素抑制试验（TRHST）。

    诊断

    抑郁症的诊断主要应根据病史、临床症状、病程及体格检查和实验室检查，典型病例诊断一般不困难。国际上通用的诊断标准一般有ICD-10和DSM-IV。国内主要采用ICD-10，是指首次发作的抑郁症和复发的抑郁症，不包括双相抑郁。患者通常具有心境低落、兴趣和愉快感丧失、精力不济或疲劳感等典型症状。其他常见的症状是①集中注意和注意的能力降低；②自我评价降低；③自罪观念和无价值感（即使在轻度发作中也有）；④认为前途暗淡悲观；⑤自伤或自杀的观念或行为；⑥睡眠障碍；⑦食欲下降。病程持续至少2周。

    治疗

    1.治疗目标

    抑郁发作的治疗要达到三个目标：①提高临床治愈率，最大限度减少病残率和自杀率，关键在于彻底消除临床症状；②提高生存质量，恢复社会功能；③预防复发。

    2.治疗原则

    ①个体化治疗；②剂量逐步递增，尽可能采用最小有效量，使不良反应减至最少，以提高服药依从性；③足量足疗程治疗；④尽可能单一用药，如疗效不佳可考虑转换治疗、增效治疗或联合治疗，但需要注意药物相互作用；⑤治疗前知情告知；⑥治疗期间密切观察病情变化和不良反应并及时处理；⑦可联合心理治疗增加疗效；⑧积极治疗与抑郁共病的其他躯体疾病、物质依赖、焦虑障碍等。

    3.药物治疗

    药物治疗是中度以上抑郁发作的主要治疗措施。目前临床上一线的抗抑郁药主要包括选择性5-羟色胺再摄取抑制剂（SSRI，代表药物氟西汀、帕罗西汀、舍曲林、氟伏沙明、西酞普兰和艾司西酞普兰）、5-羟色胺和去甲肾上腺素再摄取抑制剂（SNRI，代表药物文拉法辛和度洛西汀）、去甲肾上腺素和特异性5-羟色胺能抗抑郁药（NaSSA，代表药物米氮平）等。传统的三环类、四环类抗抑郁药和单胺氧化酶抑制剂由于不良反应较大，应用明显减少。

    4.心理治疗

    对有明显心理社会因素作用的抑郁发作患者，在药物治疗的同时常需合并心理治疗。常用的心理治疗方法包括支持性心理治疗、认知行为治疗、人际治疗、婚姻和家庭治疗、精神动力学治疗等，其中认知行为治疗对抑郁发作的疗效已经得到公认。

    5.物理治疗

    近年来出现了一种新的物理治疗手段——重复经颅磁刺激（rTMS）治疗，主要适用于轻中度的抑郁发作。

    预防

    有人对抑郁症患者追踪10年的研究发现，有75%～80%的患者多次复发，故抑郁症患者需要进行预防性治疗。发作3次以上应长期治疗，甚至终身服药。维持治疗药物的剂量多数学者认为应与治疗剂量相同，还应定期门诊随访观察。心理治疗和社会支持系统对预防本病复发也有非常重要的作用，应尽可能解除或减轻患者过重的心理负担和压力，帮助患者解决生活和工作中的实际困难及问题，提高患者应对能力，并积极为其创造良好的环境，以防复发。

    ]]>     - - - - <p>抑郁症，一种心病。这是我的定义，但是有时候我甚至怀疑这能不能被称作一种病、怀疑它是否真的存在……然而，现实如此残酷，这种病真实存在，而且发病时间和后果可能让人无法预料。我们不时听到某某明星因为抑郁而自杀的新闻，在叹息的同时，却又不禁在想：又有多少普通人抑郁而终？</p> -<p>抑郁，亦有轻重，诱发因素或大或小。艾滋病患者多死于肿瘤，艾滋病毒破坏病人的免疫系统，也许一个小小的炎症，可能就会致命；在我看来，抑郁是类似的，它破坏病人的“心情系统”，也许一点点的不愉快可能就会变成诱因，让人走向极端。</p> -<p>​ ——记于2019年国考（2019年11月24日）的后一天</p> -<p><img src="http://5b0988e595225.cdn.sohucs.com/images/20190503/5b2a4ecc0a724b25967493c34d0a4f7f.jpeg" alt></p> - - - - - - - -     - - - Ubuntu升级Ruby - - https://www.yansheng.xyz/article/6bb10e64.html - 2019-11-14T14:39:29.000Z - 2019-12-09T17:29:08.509Z - - Ubuntu服务器最近扫描出很多漏洞，发现很多是Ruby的问题，而且有一些年代久远，想着应该是老版本的问题。于是去查了下更新问题，记录下更新过程。

    file

    当前的版本是 2.3，打算升级到最新的 2.6。可以使用下面的命令查看 Ruby 版本：

    1
    2
    $ ruby -v
    ruby 2.3.1p112 (2016-04-26) [x86_64-linux-gnu]

    添加 PPA 源：

    1
    2
    sudo add-apt-repository ppa:brightbox/ruby-ng
    sudo apt-get update

    Launchpad PPA Repositories是很有用的非ubuntu官方的第三方个人资源库，可以很方便地安装第三方软件。
    但是在运行add-apt-repository命令时，有时会提示命令不存在，这个时候直接apt-get
    add-apt-repository是不可以的！ 解决的方法是安装software-properties-common。
    输入命令：apt-get install software-properties-common

    先删除旧版本：

    1
    $ sudo apt-get purge --auto-remove ruby

    然后安装新版本：

    1
    $ sudo apt-get install ruby2.6 ruby2.6-dev

    安装后查看版本号：

    1
    2
    $ ruby -v
    ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-linux-gnu]

    更新成功后，重新扫描，漏洞少了20个……

    相关链接：

    ]]>     - - - - <p>Ubuntu服务器最近扫描出很多漏洞，发现很多是Ruby的问题，而且有一些年代久远，想着应该是老版本的问题。于是去查了下更新问题，记录下更新过程。</p> -<p><img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1575912501635.png" alt="file"></p> - - - - - - - - - -     - - - hexo+yilia添加复制代码块的功能 - - https://www.yansheng.xyz/article/e9d1b881.html - 2019-11-10T09:08:42.000Z - 2020-03-27T15:23:42.000Z - - 实现复制代码块的功能，效果：
    file

    我的提问

    我在hexo-theme-yilia-plus主题上的提问：https://github.com/JoeyBling/hexo-theme-yilia-plus/issues/29

    初级版

    支持复制代码块的功能，如下图（截自csdn）：
    image

    个人觉得这个功能还是挺重要的。

    加强版

    如果文章中有原创版权声明，复制时，会携带相关信息。

    🙋Others

    我自己也去查了下，找到的好像都是next主题的，没有yilia主题的，但是不太会转化……

    参考链接：

    自己动手

    因为回复比较慢，就自己动手去尝试了。

    参考：[clipboard.js]代码块复制

    该文章也是基于next主题，迁移过来有些问题：

    1. next主题可能自带jQuery，故没有引入，但是yilia没有，需要引入。
    2. 会报错ClipboardJS is not defined，我这里直接改成了Clipboard就可以了，后面找到原因了：是版本问题，https://github.com/zenorocha/clipboard.js/releases/v2.0.0，v2.0.0的变化：Changes constructor from new Clipboard() to new ClipboardJS() #468。相关问题：

    0.原理

    在页面加载完毕后，使用js动态地为每一个代码块添加一个按钮，使用这个按钮复制代码块内容。

    1.新建实现复制功能的js

    H:\Hexo\themes\yilia\source\js\clipboard_use.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /*页面载入完成后，创建复制按钮*/
    !function (e, t, a) { 
    /* code */
    var initCopyCode = function(){
        var copyHtml = '';
        copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
        copyHtml += '  <i class="fa fa-globe"></i><span>copy</span>';
        copyHtml += '</button>';
        $(".highlight .code").before(copyHtml);
        new Clipboard('.btn-copy', {
            target: function(trigger) {
                return trigger.nextElementSibling;
            }
        });
    }
    initCopyCode();
    }(window, document);

    2.引入js

    在H:\Hexo\themes\yilia\layout\layout.ejs文件的</body>前引入：（作用：页面加载完再执行js）

    1
    2
    3
    4
    5
    <!-- 代码块复制功能 -->
    <script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- <script type="text/javascript" src="/js/clipboard.js"></script>  -->
    <script type="text/javascript" src="/js/clipboard_use.js"></script>

    需要注意的问题：

    • 前面提到：因为：clipboard_use.js中需要用到jQuery，而yilia没有引入jQuery，故需要引入。
    • 对于clipboard.js的引入问题：根据github社区反馈，引入本地文件好像会出现问题（我本地测试就引入不了），故使用CDN引入。（有人反映CDN好像也会有问题，反正我没有遇到……）
    • 注意引入顺序：jquery和clipboard.js需要在clipboard_use.js之前引入。
    • <script>标签问题，虽然HTML5标准里面没有严格要求标签一定要关闭，但是建议要关闭，不然可能会出现问题。这里我一开始没有关闭标签，就出现问题了，后面研究了很久才发现原来是这个问题。

    3.添加样式

    修改：H:\Hexo\themes\yilia\source\main.0cf68a.css，在末尾添加下面代码（最好是pre .css~* .id, pre .id下面，即代码块样式附近）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    /*  这是原代码块 */
    pre .css~* .id, pre .id {
        color:#fd971f
    }

    /* 代码块复制按钮 */
     .highlight {
        /* 方便copy代码按钮（btn-copy）的定位 */
        position: relative;
    }
    .btn-copy {
        display: inline-block;
        cursor: pointer;
        background-color: #eee;
        background-image: linear-gradient(#fcfcfc, #eee);
        border: 1px solid #d5d5d5;
        border-radius: 3px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
        font-size: 13px;
        font-weight: 700;
        line-height: 20px;
        color: #333;
        -webkit-transition: opacity .3s ease-in-out;
        -o-transition: opacity .3s ease-in-out;
        transition: opacity .3s ease-in-out;
        padding: 2px 6px;
        position: absolute;
        right: 5px;
        top: 5px;
        opacity: 0;
    }
    .btn-copy span {
        margin-left: 5px;
    }
    .highlight:hover .btn-copy {
        opacity: 1;
    }
    /* 代码块复制按钮 */

    成果

    点击按钮后，会全选代码块，就复制成功了。
    效果图：
    file

    file

    动图：
    file

    问题讨论

    乍一看效果还不错，但是还是存在问题：

    1. 如果代码块超出，会出现问题。虽然图标样式使用绝对定位，但是该按钮没有“固定”在代码块页面的右上角，仅仅是固定在当前页面的右上角，可能不好理解，截个图：
      file
      然后我去研究了下CSDN的样式，发现好像差不多，但是效果明显不一样啊。后面有空再研究吧。
    2. 虽然复制成功会全选代码块，但是不成功呢？不晓得？好像没反应。后期可能会添加对应设置（模仿CSDN）：默认时“复制”，复制成功显示“复制成功”，几秒后再次显示“复制”，失败给出对应提示。

    依赖升级

    使用最新版本的clipboard.js–v2.0.4，CDN：https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/，替换之前的，需要修改的地方：

    1.改变引入源

    1
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.js"></script>

    2.改变函数名

    Clipboard to ClipboardJS

    1
    2
    3
    4
    5
    new Clipboard('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });

    改为：

    1
    2
    3
    4
    5
    new ClipboardJS('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });

    bug修复

    更新时间：2020-3-27 23:25:54

    感谢：辛猿毅码的这篇文章https://code-ape.gitee.io/article/5bc9f198.html。

    1.修改js

    在highlight元素外围加一个父元素，方便定位复制按钮。
    H:\Hexo\themes\yilia\source\js\clipboard_use2.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    $(".highlight").wrap("<div class='code-wrapper' style='position:relative'></div>");
    /*页面载入完成后，创建复制按钮*/
    !function (e, t, a) {
        /* code */
        var initCopyCode = function () {
            var copyHtml = '';
            copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
            copyHtml += '  <i class="fa fa-clipboard"></i><span>复制</span>';
            copyHtml += '</button>';
            $(".highlight .code").before(copyHtml);
            var clipboard = new ClipboardJS('.btn-copy', {
                target: function (trigger) {
                    return trigger.nextElementSibling;
                }
            });
            clipboard.on('success', function (e) {
                e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制成功</span>"
                setTimeout(function () {
                    e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
                }, 1000)
                e.clearSelection();
            });
            clipboard.on('error', function (e) {
                e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制失败</span>"
                setTimeout(function () {
                    e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
                }, 1000)
                e.clearSelection();
            });
        }
        initCopyCode();
    }(window, document);

    2.修改复制按钮样式

    H:\Hexo\themes\yilia\source\main.0cf68a.css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    .btn-copy {
        display: inline-block;
        cursor: pointer;
        background-color: #eee;
        background-image: linear-gradient(#fcfcfc, #eee);
        border: 1px solid #d5d5d5;
        border-radius: 3px;
        . -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
        font-size: 13px;
        font-weight: 700;
        line-height: 20px;
        color: #333;
        -webkit-transition: opacity .3s ease-in-out;
        -o-transition: opacity .3s ease-in-out;
        transition: opacity .3s ease-in-out;
        padding: 2px 6px;
        position: absolute;
        right: 5px;
        top: 5px;
        opacity: 0;
    }
    .btn-copy span {
        margin-left: 5px;
    }
    .highlight:hover .btn-copy {
        opacity: 1;
    }

    3.添加复制按钮图标

    需要引入font-awesome，在H:\Hexo\themes\yilia\layout\_partial\head.ejs的</head>前添加：

    1
    <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">

    效果图

    有滚动条时：

    复制成功显示：

    微调图标样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    clipboard.on('success', function (e) {
        e.trigger.innerHTML = "<i class='fa fa-check' style='color:green'></i><span style='color:green'>复制成功</span>"
        setTimeout(function () {
            e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
        }, 1000)
        e.clearSelection();
    });
    clipboard.on('error', function (e) {
        e.trigger.innerHTML = "<i class='fa fa-exclamation' style='color:red'></i><span style='color:red'>复制失败</span>"
        setTimeout(function () {
            e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
        }, 1000)
        e.clearSelection();
    });

    复制成功效果：

    复制失败效果：

    收工！

    修复前后对比

    前

    后

    ]]>     - - - - <p>实现复制代码块的功能，效果：<br> -<img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1573012450293.png" alt="file"></p> - - - - - - - - - -     - - - hexo+yilia测试代码块样式 - - https://www.yansheng.xyz/article/285260df.html - 2019-11-10T09:07:49.000Z - 2019-11-12T07:49:38.909Z - - 测试代码块、引用块、（文章内）超链接的样式以及高亮问题。

    高亮说明

    经测试，发现有以下几个问题：

    1. 引用块里面的代码块样式有问题。
    2. 如果语言不支持高亮，默认使用plain（简单的，无格式的）。
    3. MySQL等SQL需要统一设置为SQL，不然不高亮。
    4. shell脚本使用bash，不然不高亮。
    5. cmd命令/Linux命令使用bash，可以部分高亮。
    6. markdown代码块不支持高亮。
    7. ejs使用HTML进行高亮。

    引用块

    引用的三级目录

    这是引用

    下面是引用中的代码块：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    > <!DOCTYPE html>
    > <html>
    > <head>
    > <meta charset="utf-8">
    > <title>菜鸟教程(runoob.com)</title>
    > </head>
    > <body>
    >     <h1>我的第一个标题</h1>
    >     <p class="p1" style="font-size:20px;">我的第一个段落。</p>
    > </body>
    > </html>
    >

    行内代码块

    这是行内代码块：git clone url。

    标题中的行内代码块git clone url

    超链接

    超链接样式：

    1. [文字](url):我的博客仓库，如果url含有中文，建议加<>，不然可能会被截断，导致连接失效。
    2. <url>:https://yansheng836.github.io/。
    3. url:https://yansheng836.github.io/，不推荐适用这种，不规范。

    HTML

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p class="p1" style="font-size:20px;">我的第一个段落。</p>
    </body>
    </html>

    XML

    1
    2
    3
    4
    5
    6
    7
    8
    <?xml version="1.0" encoding="UTF-8"?>
    <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.10</version>
        <scope>provided</scope>
    </dependency>

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @charset"utf-8";
    .bar2 {
    width:35px;
    height:3px;
    background-color:#333;
    margin:6px 0;
    transition:0.4s;
    opacity:0;
    }

    JavaScript

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var hide = false;

    function myFunction(x) {
        x.classList.toggle("change");
        if (hide == false) {
            console.log("hide == false");
            hide = true;
        } else {
            $(".left-col").css('display', '')
            hide = false;
        }
    }

    Json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    {
        "sites": [
            {
                "name": "菜鸟教程",
                "url": "www.runoob.com"
            },
            {
                "name": "google",
                "url": "www.google.com"
            },
            {
                "name": "微博",
                "url": "www.weibo.com"
            }
        ]
    }

    Java

    1
    2
    3
    4
    5
    6
    public class HelloWorld {
        public static void main(String[] args) {
             // 单行注释
            System.out.println("Hello World");
        }
    }

    Python3

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    #!/usr/bin/python3

    class MyClass:
        """一个简单的类实例"""
        i = 12345
        def f(self):
            return 'hello world'
     
    # 实例化类
    x = MyClass()
     
    # 访问类的属性和方法
    print("MyClass 类的属性 i 为：", x.i)
    print("MyClass 类的方法 f 输出为：", x.f())

    SQL

    1
    2
    INSERT INTO table_name
    VALUES (value1,value2,value3,...);

    MySQL

    1
    SELECT * from runoob_tbl ORDER BY submission_date ASC;

    MySQL–>SQL

    1
    SELECT * from runoob_tbl ORDER BY submission_date ASC;

    Shell

    1
    2
    3
    4
    for loop in 1 2 3 4 5
    do
        echo "The value is: $loop"
    done

    Shell–>BASH

    1
    2
    3
    4
    for loop in 1 2 3 4 5
    do
        echo "The value is: $loop"
    done

    Bash/Git

    1
    2
    3
    4
    5
    6
    7
    8
    # cmd
    cd dir
    mkdir new_dir

    # 注释
    $ git add *.c
    $ git add README
    $ git commit -m '初始化项目版本'

    C

    1
    2
    3
    4
    5
    6
    7
    8
    #include <stdio.h>
     
    int main()
    {
        /* 我的第一个 C 程序 */
        printf("Hello, World! \n");
        return 0;
    }

    C++

    1
    2
    3
    4
    5
    6
    7
    8
    #include <iostream>
    using namespace std;
    int main()
    {
        // 注释
        cout << "Hello, world!" << endl;
        return 0;
    }

    Markdown

    1
    2
    3
    4
    这是超链接：<https://github.com/yansheng836/>
    下面的是列表：
    - 列表
    - 列表

    EJS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
        <section id="comments" class="comments">
          <style>
            .comments{margin:30px;padding:10px;background:#fff}
            @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
          </style>
          <%- partial('post/valine', {
            key: post.slug,
            title: post.title,
            url: config.url+url_for(post.path)
            }) %>
      </section>
    <% } %>

    EJS–>HTML

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
        <section id="comments" class="comments">
          <style>
            .comments{margin:30px;padding:10px;background:#fff}
            @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
          </style>
          <%- partial('post/valine', {
            key: post.slug,
            title: post.title,
            url: config.url+url_for(post.path)
            }) %>
      </section>
    <% } %>

    YML

    1
    2
    3
    #hexo g 会默认将所有md文件转换成（渲染成）HTML文件放到public文件夹中；加上这句话的意思就是告诉hexo的解析器，跳过渲染(skip_render)README.md文件
    skip_render: 
     - 'README.md'
    ]]>     - - - - <p>测试代码块、引用块、（文章内）超链接的样式以及高亮问题。</p> -<h2 id="高亮说明">高亮说明</h2> -<p>经测试，发现有以下几个问题：</p> -<ol> -<li>引用块里面的代码块样式有问题。</li> -<li>如果语言不支持高亮，默认使用plain（简单的，无格式的）。</li> -<li>MySQL等SQL需要统一设置为SQL，不然不高亮。</li> -<li>shell脚本使用bash，不然不高亮。</li> -<li>cmd命令/Linux命令使用bash，可以部分高亮。</li> -<li>markdown代码块不支持高亮。</li> -<li>ejs使用HTML进行高亮。</li> -</ol> - - - - - - - - - -     - - - hexo+yilia修改代码块等样式 - - https://www.yansheng.xyz/article/c344994.html - 2019-11-10T09:06:49.000Z - 2019-11-11T08:23:17.957Z - - 代码块的样式真的很重要，毕竟咱好歹是一个技术博客，难免会贴一些代码的。因此参考https://cqh-i.github.io的样式进行了调整，下面是HTML的例子，更多具体效果可以参考这篇博客的样式：test-codestyle。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>html代码块样本</title>
    </head>
    <body>
        <h1>这个样式可还行？</h1>
        <p class="p1" style="font-size:20px;">我的第一个段落。</p>
    </body>
    </html>

    说明

    1. 由于每个人可能都修改过样式文件，所以每个人的样式可能都会有所不同。建议修改之前做好备份，防止出现错误难于恢复，可以使用git进行版本管理（备份博客的源码和配置）。
    2. 我的备份文件，详见代码块样式调整备份文件，cqh-i.github.io.css为博客https://cqh-i.github.io的代码块样式。main.0cf68a.css为我之前的css文件的备份。

    文中超链接样式

    默认：

    1
    2
    3
    4
    5
    a {
        background: 0 0;
        text-decoration: none;
        color: #08c;
    }

    修改（添加内容）后：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 文章中的超链接,鼠标悬浮特效 */
    .article-entry li a:hover, .article-entry p a:hover {
        background: 0 0;
        text-decoration: underline;
        color: #08c;
        /* font-size:18px; */
        font-weight:bold;
        transition:.8s;
    }

    再次修改：

    参考：https://css.30secondsofcode.org/snippet/hover-underline-animation

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    /* 文章中的超链接,鼠标悬浮特效*/
    .article-entry a{
        display: inline-block;
        position: relative;
        color: #0087ca;
        font-family: lucida console;/* 这种字体的英文比较好看（像代码样式） */
    }
    /* 鼠标悬浮时，变色 */
    .article-entry a:hover{
        color: #d7191a;
        transition:.8s;
    }
    /* 鼠标悬浮时，下划线从中间向两边延伸 */
    .article-entry a:hover::after{
      transform: scaleX(1);
      /* 旋转，与transform连用；这里作用：鼠标悬浮时，底部的下划线从中间扩散到两边。
       bottom right :左到右出现，左到右消失（需配合上面的::after）
      */
      transform-origin: bottom center;
    }
    /* 鼠标移开后，下划线从两边向中间消失 */
    .article-entry a::after{
      content: '';
      position: absolute;
      width: 100%;
      transform: scaleX(0);
      height: 1.5px;
      bottom: 0;
      left: 0;
      background-color: #0087ca;
      /* 详见：https://www.w3school.com.cn/cssref/pr_transform-origin.asp,
      旋转，与transform连用；这里作用：鼠标移开后，底部的下划线从中间开始消失 */
      transform-origin: bottom center;
      transition: transform 0.5s ease-out;
    }

    2019年11月8日调整将article-entry换成mid-col，原来只是文章中文的超链接，现在改为右边栏都进行设置。（可能会出现很多负面影响，请自行决定是否更改）。

    行内代码块样式

    默认：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .article-entry li code,.article-entry p code {
        padding: 1px 3px;
        margin: 0 3px;
        background: #ddd;
        border: 1px solid #ccc;
        font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
        word-wrap: break-word;
        font-size: 14px
    }

    参考csdn代码块样式：主要是调整颜色为红色

    1
    2
    3
    4
    5
    .markdown_views code {
        color: #c7254e;
        background-color: #f9f2f4;
        border-radius: -9px;
    }

    修改后：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /* 行内代码块``的样式，参考csdn的
        color: #c7254e;
        background-color: #f9f2f4;
        border-radius: 2px;
        padding: 2px 4px;
    */
    .article-entry li code, .article-entry p code {
    color: #c7254e;
        background-color: #f9f2f4;
        border-radius: 2px;
        padding:2px 4px;
        margin:0 3px;
        /* background:#ddd; */
        /* border:2px solid #ccc; */
        font-family:Menlo, Monaco, Andale Mono, lucida console, Courier New, monospace;
        word-wrap:break-word;
        /* font-size:14px */
    }

    补充：一开始没注意到原来该样式不包含标题中的代码块，添加:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* 标题中的代码块样式 */
    .article-entry code {
        /* background:#eee;
        padding:0 .3em;
        border:none */
        color: #c7254e;
        background-color: rgba(249,242,244,.7);
        border-radius: 2px;
        padding: 2px 4px;
        margin: 0 3px;
        font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
        word-wrap: break-word
    }

    代码块主要样式文件

    代码块简单设置

    参考：Hexo 基于yilia主题及其它插件优化

    1.修改代码块的样式

    直接修改编译好的文件。路径为： theme/yilia/source/main.0cf68a.css:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    (1)修改代码背景色，
    搜索 .article-entry .highlight, 修改background后面的颜色
    将 pre{background:#272822;
    改为 pre{background:#1a0139;

    (2)修改行号颜色，
    搜索 .article-entry .highlight .gutter pre .line
    将.article-entry .highlight .gutter pre .line{color:#666
    改为.article-entry .highlight .gutter pre .line{color:#fc0000

    (3)修改代码字体颜色 
    搜索 .article-entry .highlight .line
    将.article-entry .highlight .line{color:#fff;
    修改为.article-entry .highlight .line{color:#00ff0d;

    效果图：

    个人感觉还不是很满意，有待优化。

    2.代码块行号显示错乱

    修改yilia/source/main.0cf68a.css的内容：将white-space:pre-wrap; 删除，这个问题是自动换行造成的，使用不自动换行的white-space:pre;样式代码块部分会自动出现底部滚动条，行号错乱问题就没有了。

    3.重点调整

    不知道是hexo还是yilia主题自带的是使用highlight.js进行代码高亮的，但是好像是内置的，因为我不会写源码，只能更改生成的文件：yilia/source/main.0cf68a.css，按照识别的关键字自定义颜色，这里是我的一些配置，你也可以自己使用F12进行调试。（当然网上也有许多替换自指定的highlight.js进行代码高亮的教程）。

    特别注意：高亮的前提是语言要写对，不然只能当做普通文本进行识别。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    /* 代码块样式之评论：黄色 */
    pre .comment {
        color:#ffec8b
    }
    /* 代码块样式之类的参数、函数的关键字、关键字：蓝色 */
    pre .class .params, pre .function .keyword, pre .keyword, pre .literal {
        color:#66d9ef
    }
    /* 代码块样式之css的属性值、函数名、参数、标签：白色 */
    pre .css .value, pre .doctype, pre .function, pre .params, pre .tag {
        color:#fff
    /* color:#66d9ef; */
    }
    /* 代码块样式之HTML或者xml的头部元素：红色(颜色较浅) */
    pre .meta{
        color:#f78da1;
    }
    /* 代码块样式之HTML的标签：红色 */
    pre .tag .name {
        /* color:#dc3958; */
     color:#ff6481;
    }
    /* 代码块样式之：色 */
    pre .at_rule, pre .at_rule .keyword, pre .css~* .tag, pre .preprocessor, pre .preprocessor .keyword, pre .title{
        color:#fa9400
    }
    /* 代码块样式之属性、类、函数的title：绿色 */
    pre .attr,pre .attribute, pre .built_in, pre .class, pre .css~* .class, pre .function .title {
        color:#a6e22e
    }
    /* 代码块样式之字符串、属性值：猪肝色 */
    pre .string, pre .value {
        color:#e6db74
    }
    /* 代码块样式之数字：粉红色 */
    pre .number {
        color:#ffe4b5
    }
    pre .css~* .id, pre .id {
        color:#fd971f
    }

    文章内的超链接和引用块超出页面的问题

    参考：css自动换行如何设置?url太长会撑开页面

    当页面进行缩放时，说明这两个区域可能会超出页面。

    使用下面这两个属性进行截断：

    1
    2
    3
    /* 如果超长，自动截断 */
    word-wrap:break-word;
    word-break:break-all;

    具体如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    a {
        background:transparent;
        text-decoration:none;
        color:#08c;
    /* 如果超长，自动截断 */
        word-wrap:break-word;
        word-break:break-all;
    }
    .article-entry blockquote {
        background:#ddd;
        border-left:5px solid #ccc;
        padding:15px 20px;
        margin-top:10px;
        border-left:5px solid #657b83;
        background:#f6f6f6;
        /* 如果超长，自动截断 */
        word-wrap:break-word;
        word-break:break-all;
    }

    左侧边栏的菜单

    导航超链接样式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* 这个字体不错font-family: STCaiyun,STXingkai; */
    .left-col #header .header-menu {
        font-family: STCaiyun,STXingkai;
        line-height: 31px;
        text-transform: uppercase;
        float: none;
        min-height: 150px;
        margin-left: -12px;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    主页‘展开全文’按钮样式

    样式参考：http://ianlunn.github.io/Hover/的hvr-shutter-in-horizontal按钮，示例：https://codepen.io/yansheng836/pen/QWWmEro。

    1.添加class

    修改H:\Hexo\themes\yilia\layout\_partial\article.ejs，查找index && theme.show_all_link，找到如下内容

    1
    2
    3
    4
    5
    <% if (index && theme.show_all_link){ %>
      <p class="article-more-link">
        <a class="article-more-a" href="<%- url_for(post.path) %>"><%= theme.show_all_link %> >></a>
      </p>
    <% } %>

    在class="article-more-a中添加hvr-shutter-in-horizontal

    1
    2
    3
    4
    5
    <% if (index && theme.show_all_link){ %>
      <p class="article-more-link">
        <a class="article-more-a  hvr-shutter-in-horizontal" href="<%- url_for(post.path) %>"><%= theme.show_all_link %> >></a>
      </p>
    <% } %>

    2.修改样式

    修改H:\Hexo\themes\yilia\source\main.0cf68a.css，查找.article-more-link a

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .article-more-link a {
        background:#4d4d4d;
        color:#fff;
        font-size:12px;
        padding:5px 8px;
        line-height:16px;
        border-radius:2px;
        transition:background .3s
    }
    .article-more-link a:hover {
        background:#3c3c3c
    }

    修改为：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    /* 《展开全文按钮 */
     .article-more-link a {
        color:#fff;
        font-size:12px;
        padding:5px 8px;
        line-height:16px;
        border-radius:2px;
        /* Prevent highlight colour when element is tapped */
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        /* Smooth fonts */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    /* Shutter In Horizontal ,from : http://ianlunn.github.io/Hover/ */
     .hvr-shutter-in-horizontal {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        position: relative;
    /* 在鼠标悬浮时为：蓝色 */
        background: #2098D1;
        -webkit-transition-property: color;
        transition-property: color;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
    }
    .hvr-shutter-in-horizontal:before {
        content:"";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    /* 在默认情况下为：灰褐色 */
        background: #4d4d4d;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    .hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active {
        color: white;
    }
    .hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }
    /* 展开全文按钮》 */
    ]]>     - - - - <p>代码块的样式真的很重要，毕竟咱好歹是一个技术博客，难免会贴一些代码的。因此参考<a href="https://cqh-i.github.io/" target="_blank" rel="noopener">https://cqh-i.github.io</a>的样式进行了调整，下面是HTML的例子，更多具体效果可以参考这篇博客的样式：<a href="/article/285260df.html">test-codestyle</a>。</p> -<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>html代码块样本<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这个样式可还行？<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"p1"</span> <span class="attr">style</span>=<span class="string">"font-size:20px;"</span>&gt;</span>我的第一个段落。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure> - - - - - - - - - -     - - - hexo+yilia添加live2d看板娘 - - https://www.yansheng.xyz/article/e239dc63.html - 2019-11-10T09:06:30.000Z - 2019-11-12T07:53:08.769Z - - 添加live2d看板娘，插件：hexo-helper-live2d，github仓库：https://github.com/EYHN/hexo-helper-live2d

    右下角：可爱小黑猫🐱

    file

    安装

    1.安装插件

    运行命令npm install --save hexo-helper-live2d

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    $ npm install --save hexo-helper-live2d

    > core-js@2.6.10 postinstall H:\Hexo\node_modules\babel-polyfill\node_modules\core-js
    > node postinstall || echo "ignore"

    Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

    The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
    > https://opencollective.com/core-js
    > https://www.patreon.com/zloirock

    Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


    > core-js@2.6.10 postinstall H:\Hexo\node_modules\babel-runtime\node_modules\core-js
    > node postinstall || echo "ignore"


    > live2d-widget@3.1.4 postinstall H:\Hexo\node_modules\live2d-widget
    > opencollective-postinstall

    Thank you for using live2d-widget!
    If you rely on this package, please consider supporting our open collective:
    > https://opencollective.com/live2d-widgetjs/donate


    > hexo-helper-live2d@3.1.1 postinstall H:\Hexo\node_modules\hexo-helper-live2d
    > opencollective-postinstall

    Thank you for using hexo-helper-live2d!
    If you rely on this package, please consider supporting our open collective:
    > https://opencollective.com/hexo-helper-live2d/donate

    npm WARN babel-eslint@10.0.2 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    + hexo-helper-live2d@3.1.1
    added 277 packages from 109 contributors and audited 25235 packages in 255.268s
    found 20 vulnerabilities (7 low, 6 moderate, 6 high, 1 critical)
      run `npm audit fix` to fix them, or `npm audit` for details

    2.选择模型

    可到https://huaji8.top/post/live2d-plugin-2.0/预览效果。

    命令为:npm install live2d-widget-model-模型名，模型为可参考上面的预览内容。

    安装模型:

    1
    2
    3
    4
    5
    6
    7
    $ npm install live2d-widget-model-hijiki
    npm WARN babel-eslint@10.0.2 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    + live2d-widget-model-hijiki@1.0.5
    added 1 package in 52.155s

    3.配置

    站点的配置文件\_config.yml或者是主题的配置文件中添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    # Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    live2d:
      enable: true
      scriptFrom: local
      pluginRootPath: live2dw/
      pluginJsPath: lib/
      pluginModelPath: assets/
      tagMode: false
      debug: false
      model:
        use: live2d-widget-model-hijiki # 模型：https://huaji8.top/post/live2d-plugin-2.0/
      display:
        position: right
        width: 150
        height: 300
      mobile:
        show: true

    注意这里的use参数是上面安装的那个模型全名。

    4.效果图

    可爱的小黑猫已上线（见封面）。如果不起效，一般需要重新生成hexo clean & hexo g。

    补充

    取消看板娘

    暂时不用

    将配置中的enable设置成false即可。

    卸载插件

    运行命令下载插件，删除配置信息：

    1. 卸载模型：npm install live2d-widget-model-模型名
    2. 卸载live2d插件：npm uninstall hexo-helper-live2d
    3. 去掉站点_config.yml下的配置信息即可。
    ]]>     - - - - <p>添加live2d看板娘，插件：hexo-helper-live2d，github仓库：<a href="https://github.com/EYHN/hexo-helper-live2d" target="_blank" rel="noopener">https://github.com/EYHN/hexo-helper-live2d</a></p> -<p>右下角：可爱小黑猫🐱</p> -<p><img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1573481131575.png" alt="file"></p> - - - - - - - - - -     - - - hexo+yilia添加背景特效 - - https://www.yansheng.xyz/article/cf9c6a5e.html - 2019-11-10T09:06:25.000Z - 2019-11-11T13:18:35.953Z - - 添加多种页面背景特效，参考：Hexo 博客优化之博客美化系列（持续更新），需要注意的是：添加背景特效是很消耗浏览器内容的，建议只选择其中的一两个。

    特效目录

    套路说明

    为防止后面的代码遗漏了什么东西，在这里统一说明：添加背景动画的套路（适用于各种hexo主题）：

    1. 新建生成动画的JS文件，或者引入现成的JS文件的CDN文件（我这里为了备份，基本是新建文件；比较有名的特效一般都会上传到GitHub，而且有引入CDN的相关介绍）。我的文件放再H:\Hexo\themes\yilia\source\js\目录下。
    2. 因为背景特效属于陪衬类，也就是说不是很重要的，所以一般都是在加载完页面之后再引入的。因此我们在页面的</body>标签前引入即可。yilia主题是在H:\Hexo\themes\yilia\layout\layout.ejs中，其他主题类似。
    3. 在2中引入需要设置成配置时，即当配置文件中开启设置时，才会开启这个特效。因此最后一步是在主题的配置文件中开启配置。yilia主题是在H:\Hexo\themes\yilia\_config.yml中，其他主题类似。

    鼠标点击出现爱心特效

    新建H:\Hexo\themes\yilia\source\js\love.js:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    (function (window, document, undefined) {
        var hearts = [];
        window.requestAnimationFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback) {
                    setTimeout(callback, 1000 / 60);
                }
        })();
        init();

        function init() {
            css(
                ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
            );
            attachEvent();
            gameloop();
        }

        function gameloop() {
            for (var i = 0; i < hearts.length; i++) {
                if (hearts[i].alpha <= 0) {
                    document.body.removeChild(hearts[i].el);
                    hearts.splice(i, 1);
                    continue;
                }
                hearts[i].y--;
                hearts[i].scale += 0.004;
                hearts[i].alpha -= 0.013;
                hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i]
                    .alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale +
                    ") rotate(45deg);background:" + hearts[i].color;
            }
            requestAnimationFrame(gameloop);
        }

        function attachEvent() {
            var old = typeof window.onclick === "function" && window.onclick;
            window.onclick = function (event) {
                old && old();
                createHeart(event);
            }
        }

        function createHeart(event) {
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push({
                el: d,
                x: event.clientX - 5,
                y: event.clientY - 5,
                scale: 1,
                alpha: 1,
                color: randomColor()
            });
            document.body.appendChild(d);
        }

        function css(css) {
            var style = document.createElement("style");
            style.type = "text/css";
            try {
                style.appendChild(document.createTextNode(css));
            } catch (ex) {
                style.styleSheet.cssText = css;
            }
            document.getElementsByTagName('head')[0].appendChild(style);
        }

        function randomColor() {
            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) +
                ")";
        }
    })(window, document);

    添加到H:\Hexo\themes\yilia\layout\layout.ejs的</body>前

    1
    2
    3
    4
    5
    <!-- 《页面点击小红心 -->
    <% if (theme.love){ %>
        <script type="text/javascript" src="/js/love.js"></script>
    <% } %>
    <!-- 页面点击小红心》 -->

    开启配置H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 页面点击小红心
    love: true

    file

    鼠标点击显示文字–需要引入jQuery

    H:\Hexo\themes\yilia\source\js\click_show_text.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array
            ("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
            var $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
            y = e.pageY;
            $i.css({
                "z-index": 5,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "#FF0000"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
    3000,
    function() {
        $i.remove();
    });
        });
        setTimeout('delay()', 2000);
    });

    function delay() {
        $(".buryit").removeAttr("onclick");
    }

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    <!--单击显示文字-->
    <% if (theme.click_show_text){ %>
        <script type="text/javascript" src="/js/click_show_text.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 鼠标点击显示文字
    click_show_text: true

    file

    鼠标点击烟花爆炸效果

    H:\Hexo\themes\yilia\source\js\fireworks.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    "use strict";

    function updateCoords(e) {
        pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[
            0].clientY - canvasEl.getBoundingClientRect().top
    }

    function setParticuleDirection(e) {
        var t = anime.random(0, 360) * Math.PI / 180,
            a = anime.random(50, 180),
            n = [-1, 1][anime.random(0, 1)] * a;
        return {
            x: e.x + n * Math.cos(t),
            y: e.y + n * Math.sin(t)
        }
    }

    function createParticule(e, t) {
        var a = {};
        return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos =
            setParticuleDirection(a), a.draw = function () {
                ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill()
            }, a
    }

    function createCircle(e, t) {
        var a = {};
        return a.x = e, a.y = t, a.color = "#F00", a.radius = 0.1, a.alpha = 0.5, a.lineWidth = 6, a.draw = function () {
            ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth =
                a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1
        }, a
    }

    function renderParticule(e) {
        for (var t = 0; t < e.animatables.length; t++) {
            e.animatables[t].target.draw()
        }
    }

    function animateParticules(e, t) {
        for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) {
            n.push(createParticule(e, t))
        }
        anime.timeline().add({
            targets: n,
            x: function (e) {
                return e.endPos.x
            },
            y: function (e) {
                return e.endPos.y
            },
            radius: 0.1,
            duration: anime.random(1200, 1800),
            easing: "easeOutExpo",
            update: renderParticule
        }).add({
            targets: a,
            radius: anime.random(80, 160),
            lineWidth: 0,
            alpha: {
                value: 0,
                easing: "linear",
                duration: anime.random(600, 800)
            },
            duration: anime.random(1200, 1800),
            easing: "easeOutExpo",
            update: renderParticule,
            offset: 0
        })
    }

    function debounce(e, t) {
        var a;
        return function () {
            var n = this,
                i = arguments;
            clearTimeout(a), a = setTimeout(function () {
                e.apply(n, i)
            }, t)
        }
    }
    var canvasEl = document.querySelector(".fireworks");
    if (canvasEl) {
        var ctx = canvasEl.getContext("2d"),
            numberOfParticules = 30,
            pointerX = 0,
            pointerY = 0,
            tap = "mousedown",
            colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"],
            setCanvasSize = debounce(function () {
                canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width =
                    window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext(
                        "2d").scale(2, 2)
            }, 500),
            render = anime({
                duration: 1 / 0,
                update: function () {
                    ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
                }
            });
        document.addEventListener(tap, function (e) {
            "sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !==
                e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY))
        }, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1)
    }
    "use strict";

    function updateCoords(e) {
        pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[
            0].clientY - canvasEl.getBoundingClientRect().top
    }

    function setParticuleDirection(e) {
        var t = anime.random(0, 360) * Math.PI / 180,
            a = anime.random(50, 180),
            n = [-1, 1][anime.random(0, 1)] * a;
        return {
            x: e.x + n * Math.cos(t),
            y: e.y + n * Math.sin(t)
        }
    }

    function createParticule(e, t) {
        var a = {};
        return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos =
            setParticuleDirection(a), a.draw = function () {
                ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill()
            }, a
    }

    function createCircle(e, t) {
        var a = {};
        return a.x = e, a.y = t, a.color = "#F00", a.radius = 0.1, a.alpha = 0.5, a.lineWidth = 6, a.draw = function () {
            ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth =
                a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1
        }, a
    }

    function renderParticule(e) {
        for (var t = 0; t < e.animatables.length; t++) {
            e.animatables[t].target.draw()
        }
    }

    function animateParticules(e, t) {
        for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) {
            n.push(createParticule(e, t))
        }
        anime.timeline().add({
            targets: n,
            x: function (e) {
                return e.endPos.x
            },
            y: function (e) {
                return e.endPos.y
            },
            radius: 0.1,
            duration: anime.random(1200, 1800),
            easing: "easeOutExpo",
            update: renderParticule
        }).add({
            targets: a,
            radius: anime.random(80, 160),
            lineWidth: 0,
            alpha: {
                value: 0,
                easing: "linear",
                duration: anime.random(600, 800)
            },
            duration: anime.random(1200, 1800),
            easing: "easeOutExpo",
            update: renderParticule,
            offset: 0
        })
    }

    function debounce(e, t) {
        var a;
        return function () {
            var n = this,
                i = arguments;
            clearTimeout(a), a = setTimeout(function () {
                e.apply(n, i)
            }, t)
        }
    }
    var canvasEl = document.querySelector(".fireworks");
    if (canvasEl) {
        var ctx = canvasEl.getContext("2d"),
            numberOfParticules = 30,
            pointerX = 0,
            pointerY = 0,
            tap = "mousedown",
            colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"],
            setCanvasSize = debounce(function () {
                canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width =
                    window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext(
                        "2d").scale(2, 2)
            }, 500),
            render = anime({
                duration: 1 / 0,
                update: function () {
                    ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
                }
            });
        document.addEventListener(tap, function (e) {
            "sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !==
                e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY))
        }, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1)
    };

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    5
    6
    <!--鼠标点击烟花爆炸效果，需要引入jQuery-->
    <% if (theme.fireworks){ %>
        <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
        <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
        <script type="text/javascript" src="/js/fireworks.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 鼠标点击烟花爆炸效果
    fireworks: true

    file

    动态线条背景

    https://github.com/hustcc/canvas-nest.js

    H:\Hexo\themes\yilia\layout\layout.ejs

    直接方法

    1
    2
    3
    4
    <!--动态线条背景-->
    <script type="text/javascript"
    color="220,220,220" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
    </script>

    配置式：

    1
    2
    3
    4
    5
    6
    7
    <!--动态线条背景-->
    <% if (theme.canvas_nest.enable){ %>
        <script type="text/javascript" color="<%=theme.canvas_nest.color %>" opacity="<%=theme.canvas_nest.opacity %>" 
            zIndex="<%=theme.canvas_nest.zIndex %>" count="<%=theme.canvas_nest.count %>" 
            src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
        </script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # https://github.com/hustcc/canvas-nest.js
    # 配置详见： https://github.com/hustcc/canvas-nest.js#configuration
    # 动态线条效果，会向鼠标集中
    canvas_nest:
      enable: true
      color: '255, 235, 59'        # color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
      pointColor: '156,39,176'     # color of points, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
      opacity: '0.8'               # the opacity of line (0~1), default: 0.5.
      count: '99'                  # the number of lines, default: 99.
      zIndex: '-1'                 # z-index property of the background, default: -1.

    file

    雪花特效2.大雪花(有齿轮)

    H:\Hexo\themes\yilia\source\js\snow2.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    /*样式一*/
    (function ($) {
        $.fn.snow = function (options) {
            var $flake = $('<div id="snowbox" />').css({
                    'position': 'absolute',
                    'z-index': '9999',
                    'top': '-50px'
                }).html('❄'),
                documentHeight = $(document).height(),
                documentWidth = $(document).width(),
                defaults = {
                    minSize: 10,
                    maxSize: 20,
                    newOn: 1000,
                    flakeColor: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
                },
                options = $.extend({}, defaults, options);
            var interval = setInterval(function () {
                var startPositionLeft = Math.random() * documentWidth - 100,
                    startOpacity = 0.5 + Math.random(),
                    sizeFlake = options.minSize + Math.random() * options.maxSize,
                    endPositionTop = documentHeight - 200,
                    endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
                    durationFall = documentHeight * 10 + Math.random() * 5000;
                $flake.clone().appendTo('body').css({
                    left: startPositionLeft,
                    opacity: startOpacity,
                    'font-size': sizeFlake,
                    color: options.flakeColor
                }).animate({
                    top: endPositionTop,
                    left: endPositionLeft,
                    opacity: 0.2
                }, durationFall, 'linear', function () {
                    $(this).remove()
                });
            }, options.newOn);
        };
    })(jQuery);
    $(function () {
        $.fn.snow({
            minSize: 5,
            /* 定义雪花最小尺寸 */
            maxSize: 50,
            /* 定义雪花最大尺寸 */
            newOn: 300 /* 定义密集程度，数字越小越密集 */
        });
    });

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    <!-- 雪花特效2 -->
    <% if (theme.snow2){ %>
      <script type="text/javascript" src="/js/snow2.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 雪花特效2
    snow2: true

    file

    雪花特效3.小雪花(无齿轮)

    H:\Hexo\themes\yilia\source\js\snow3.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    /*样式二*/
    /* 控制下雪 */
    function snowFall(snow) {
        /* 可配置属性 */
        snow = snow || {};
        this.maxFlake = snow.maxFlake || 200; /* 最多片数 */
        this.flakeSize = snow.flakeSize || 10; /* 雪花形状 */
        this.fallSpeed = snow.fallSpeed || 1; /* 坠落速度 */
    }
    /* 兼容写法 */
    requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        function (callback) {
            setTimeout(callback, 1000 / 60);
        };

    cancelAnimationFrame = window.cancelAnimationFrame ||
        window.mozCancelAnimationFrame ||
        window.webkitCancelAnimationFrame ||
        window.msCancelAnimationFrame ||
        window.oCancelAnimationFrame;
    /* 开始下雪 */
    snowFall.prototype.start = function () {
        /* 创建画布 */
        snowCanvas.apply(this);
        /* 创建雪花形状 */
        createFlakes.apply(this);
        /* 画雪 */
        drawSnow.apply(this)
    }
    /* 创建画布 */
    function snowCanvas() {
        /* 添加Dom结点 */
        var snowcanvas = document.createElement("canvas");
        snowcanvas.id = "snowfall";
        snowcanvas.width = window.innerWidth;
        snowcanvas.height = document.body.clientHeight;
        snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
        document.getElementsByTagName("body")[0].appendChild(snowcanvas);
        this.canvas = snowcanvas;
        this.ctx = snowcanvas.getContext("2d");
        /* 窗口大小改变的处理 */
        window.onresize = function () {
            snowcanvas.width = window.innerWidth;
            /* snowcanvas.height = window.innerHeight */
        }
    }
    /* 雪运动对象 */
    function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
        this.x = Math.floor(Math.random() * canvasWidth); /* x坐标 */
        this.y = Math.floor(Math.random() * canvasHeight); /* y坐标 */
        this.size = Math.random() * flakeSize + 2; /* 形状 */
        this.maxSize = flakeSize; /* 最大形状 */
        this.speed = Math.random() * 1 + fallSpeed; /* 坠落速度 */
        this.fallSpeed = fallSpeed; /* 坠落速度 */
        this.velY = this.speed; /* Y方向速度 */
        this.velX = 0; /* X方向速度 */
        this.stepSize = Math.random() / 30; /* 步长 */
        this.step = 0 /* 步数 */
    }
    flakeMove.prototype.update = function () {
        var x = this.x,
            y = this.y;
        /* 左右摆动(余弦) */
        this.velX *= 0.98;
        if (this.velY <= this.speed) {
            this.velY = this.speed
        }
        this.velX += Math.cos(this.step += .05) * this.stepSize;

        this.y += this.velY;
        this.x += this.velX;
        /* 飞出边界的处理 */
        if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
            this.reset(canvas.width, canvas.height)
        }
    };
    /* 飞出边界-放置最顶端继续坠落 */
    flakeMove.prototype.reset = function (width, height) {
        this.x = Math.floor(Math.random() * width);
        this.y = 0;
        this.size = Math.random() * this.maxSize + 2;
        this.speed = Math.random() * 1 + this.fallSpeed;
        this.velY = this.speed;
        this.velX = 0;
    };
    // 渲染雪花-随机形状（此处可修改雪花颜色！！！）
    flakeMove.prototype.render = function (ctx) {
        var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
        snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此处是雪花颜色，默认是白色 */
        snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
        snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16进制的RGB 颜色代码。 */
        ctx.save();
        ctx.fillStyle = snowFlake;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    };
    /* 创建雪花-定义形状 */
    function createFlakes() {
        var maxFlake = this.maxFlake,
            flakes = this.flakes = [],
            canvas = this.canvas;
        for (var i = 0; i < maxFlake; i++) {
            flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
        }
    }
    /* 画雪 */
    function drawSnow() {
        var maxFlake = this.maxFlake,
            flakes = this.flakes;
        ctx = this.ctx, canvas = this.canvas, that = this;
        /* 清空雪花 */
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (var e = 0; e < maxFlake; e++) {
            flakes[e].update();
            flakes[e].render(ctx);
        }
        /*  一帧一帧的画 */
        this.loop = requestAnimationFrame(function () {
            drawSnow.apply(that);
        });
    }
    /* 调用及控制方法 */
    var snow = new snowFall({
        maxFlake: 60
    });
    snow.start();

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    <!-- 雪花特效3 -->
    <% if (theme.snow3){ %>
      <script type="text/javascript" src="/js/snow3.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 雪花特效3
    snow3: false

    file

    彩带1.鼠标点击自动替换彩带

    H:\Hexo\themes\yilia\source\js\ribbon.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    /**
     * Copyright (c) 2016 hustcc
     * License: MIT
     * Version: v1.0.1
     * GitHub: https://github.com/hustcc/ribbon.js
    **/
    /*jshint -W030 */
    ! function() {
      function attr(node, attr, default_value) {
        return Number(node.getAttribute(attr)) || default_value;
      }

      // get user config
      var scripts = document.getElementsByTagName('script'),
        script = scripts[scripts.length - 1]; // 当前加载的script
      config = {
        z: attr(script, "zIndex", -1), // z-index
        a: attr(script, "alpha", 0.6), // alpha
        s: attr(script, "size", 90), // size
      };

      var canvas = document.createElement('canvas'),
        g2d = canvas.getContext('2d'),
        pr = window.devicePixelRatio || 1,
        width = window.innerWidth,
        height = window.innerHeight,
        f = config.s,
        q, t,
        m = Math,
        r = 0,
        pi = m.PI*2,
        cos = m.cos,
        random = m.random;
      canvas.width = width * pr;
      canvas.height = height * pr;
      g2d.scale(pr, pr);
      g2d.globalAlpha = config.a;
      canvas.style.cssText = 'opacity: ' + config.a + ';position:fixed;top:0;left:0;z-index: ' + config.z + ';width:100%;height:100%;pointer-events:none;';
      // create canvas
      document.getElementsByTagName('body')[0].appendChild(canvas);

      function redraw() {
        g2d.clearRect(0, 0, width, height);
        q = [{x: 0, y: height * 0.7 + f}, {x: 0, y: height * 0.7 - f}];
        while(q[1].x < width + f) draw(q[0], q[1]);
      }
      function draw(i, j) {
        g2d.beginPath();
        g2d.moveTo(i.x, i.y);
        g2d.lineTo(j.x, j.y);
        var k = j.x + (random()*2-0.25)*f, n = line(j.y);
        g2d.lineTo(k, n);
        g2d.closePath();
        r -= pi / -50;
        g2d.fillStyle = '#'+(cos(r)*127+128<<16 | cos(r+pi/3)*127+128<<8 | cos(r+pi/3*2)*127+128).toString(16);
        g2d.fill();
        q[0] = q[1];
        q[1] = {x: k, y: n};
      }
      function line(p){
        t = p + (random() * 2 - 1.1) * f;
        return (t > height || t < 0) ? line(p) : t;
      }

      document.onclick = redraw;
      document.ontouchstart = redraw;
      redraw();
    }();

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    5
    <!--彩带1.点击自动替换彩带-->
    <% if (theme.ribbon){ %>
        <!-- <script src="https://g.joyinshare.com/hc/ribbon.min.js" type="text/javascript"></script> -->
        <script type="text/javascript" src="/js/ribbon.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    3
    # https://github.com/hustcc/ribbon.js
    # 彩带1.点击自动替换彩带
    ribbon: false

    file

    彩带2.自动飘动

    H:\Hexo\themes\yilia\source\js\ribbon_flow.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    (function (name, factory) {
        if (typeof window === "object") {
            window[name] = factory()
        }
    })("Ribbons", function () {
        var _w = window,
            _b = document.body,
            _d = document.documentElement;
        var random = function () {
            if (arguments.length === 1) {
                if (Array.isArray(arguments[0])) {
                    var index = Math.round(random(0, arguments[0].length - 1));
                    return arguments[0][index]
                }
                return random(0, arguments[0])
            } else if (arguments.length === 2) {
                return Math.random() * (arguments[1] - arguments[0]) + arguments[0]
            }
            return 0
        };
        var screenInfo = function (e) {
            var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0),
                height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0),
                scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0),
                scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0);
            return {
                width: width,
                height: height,
                ratio: width / height,
                centerx: width / 2,
                centery: height / 2,
                scrollx: scrollx,
                scrolly: scrolly
            }
        };
        var mouseInfo = function (e) {
            var screen = screenInfo(e),
                mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0,
                mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0;
            return {
                mousex: mousex,
                mousey: mousey,
                centerx: mousex - screen.width / 2,
                centery: mousey - screen.height / 2
            }
        };
        var Point = function (x, y) {
            this.x = 0;
            this.y = 0;
            this.set(x, y)
        };
        Point.prototype = {
            constructor: Point,
            set: function (x, y) {
                this.x = x || 0;
                this.y = y || 0
            },
            copy: function (point) {
                this.x = point.x || 0;
                this.y = point.y || 0;
                return this
            },
            multiply: function (x, y) {
                this.x *= x || 1;
                this.y *= y || 1;
                return this
            },
            divide: function (x, y) {
                this.x /= x || 1;
                this.y /= y || 1;
                return this
            },
            add: function (x, y) {
                this.x += x || 0;
                this.y += y || 0;
                return this
            },
            subtract: function (x, y) {
                this.x -= x || 0;
                this.y -= y || 0;
                return this
            },
            clampX: function (min, max) {
                this.x = Math.max(min, Math.min(this.x, max));
                return this
            },
            clampY: function (min, max) {
                this.y = Math.max(min, Math.min(this.y, max));
                return this
            },
            flipX: function () {
                this.x *= -1;
                return this
            },
            flipY: function () {
                this.y *= -1;
                return this
            }
        };
        var Factory = function (options) {
            this._canvas = null;
            this._context = null;
            this._sto = null;
            this._width = 0;
            this._height = 0;
            this._scroll = 0;
            this._ribbons = [];
            this._options = {
                colorSaturation: "80%",
                colorBrightness: "60%",
                colorAlpha: 0.65,
                colorCycleSpeed: 6,
                verticalPosition: "center",
                horizontalSpeed: 150,
                ribbonCount: 5,
                strokeSize: 5,
                parallaxAmount: -0.5,
                animateSections: true
            };
            this._onDraw = this._onDraw.bind(this);
            this._onResize = this._onResize.bind(this);
            this._onScroll = this._onScroll.bind(this);
            this.setOptions(options);
            this.init()
        };
        Factory.prototype = {
            constructor: Factory,
            setOptions: function (options) {
                if (typeof options === "object") {
                    for (var key in options) {
                        if (options.hasOwnProperty(key)) {
                            this._options[key] = options[key]
                        }
                    }
                }
            },
            init: function () {
                try {
                    this._canvas = document.createElement("canvas");
                    this._canvas.style["display"] = "block";
                    this._canvas.style["position"] = "fixed";
                    this._canvas.style["margin"] = "0";
                    this._canvas.style["padding"] = "0";
                    this._canvas.style["border"] = "0";
                    this._canvas.style["outline"] = "0";
                    this._canvas.style["left"] = "0";
                    this._canvas.style["top"] = "0";
                    this._canvas.style["width"] = "100%";
                    this._canvas.style["height"] = "100%";
                    this._canvas.style["z-index"] = "-1";
                    this._onResize();
                    this._context = this._canvas.getContext("2d");
                    this._context.clearRect(0, 0, this._width, this._height);
                    this._context.globalAlpha = this._options.colorAlpha;
                    window.addEventListener("resize", this._onResize);
                    window.addEventListener("scroll", this._onScroll);
                    document.body.appendChild(this._canvas)
                } catch (e) {
                    console.warn("Canvas Context Error: " + e.toString());
                    return
                }
                this._onDraw()
            },
            addRibbon: function () {
                var dir = Math.round(random(1, 9)) > 5 ? "right" : "left",
                    stop = 1000,
                    hide = 200,
                    min = 0 - hide,
                    max = this._width + hide,
                    movex = 0,
                    movey = 0,
                    startx = dir === "right" ? min : max,
                    starty = Math.round(random(0, this._height));
                if (/^(top|min)$/i.test(this._options.verticalPosition)) {
                    starty = 0 + hide
                } else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
                    starty = this._height / 2
                } else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
                    starty = this._height - hide
                }
                var ribbon = [],
                    point1 = new Point(startx, starty),
                    point2 = new Point(startx, starty),
                    point3 = null,
                    color = Math.round(random(0, 360)),
                    delay = 0;
                while (true) {
                    if (stop <= 0) break;
                    stop--;
                    movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed);
                    movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25));
                    point3 = new Point();
                    point3.copy(point2);
                    if (dir === "right") {
                        point3.add(movex, movey);
                        if (point2.x >= max) break
                    } else if (dir === "left") {
                        point3.subtract(movex, movey);
                        if (point2.x <= min) break
                    }
                    ribbon.push({
                        point1: new Point(point1.x, point1.y),
                        point2: new Point(point2.x, point2.y),
                        point3: point3,
                        color: color,
                        delay: delay,
                        dir: dir,
                        alpha: 0,
                        phase: 0
                    });
                    point1.copy(point2);
                    point2.copy(point3);
                    delay += 4;
                    color += this._options.colorCycleSpeed
                }
                this._ribbons.push(ribbon)
            },
            _drawRibbonSection: function (section) {
                if (section) {
                    if (section.phase >= 1 && section.alpha <= 0) {
                        return true
                    }
                    if (section.delay <= 0) {
                        section.phase += 0.02;
                        section.alpha = Math.sin(section.phase) * 1;
                        section.alpha = section.alpha <= 0 ? 0 : section.alpha;
                        section.alpha = section.alpha >= 1 ? 1 : section.alpha;
                        if (this._options.animateSections) {
                            var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1;
                            if (section.dir === "right") {
                                section.point1.add(mod, 0);
                                section.point2.add(mod, 0);
                                section.point3.add(mod, 0)
                            } else {
                                section.point1.subtract(mod, 0);
                                section.point2.subtract(mod, 0);
                                section.point3.subtract(mod, 0)
                            }
                            section.point1.add(0, mod);
                            section.point2.add(0, mod);
                            section.point3.add(0, mod)
                        }
                    } else {
                        section.delay -= 0.5
                    }
                    var s = this._options.colorSaturation,
                        l = this._options.colorBrightness,
                        c = "hsla(" + section.color + ", " + s + ", " + l + ", " + section.alpha + " )";
                    this._context.save();
                    if (this._options.parallaxAmount !== 0) {
                        this._context.translate(0, this._scroll * this._options.parallaxAmount)
                    }
                    this._context.beginPath();
                    this._context.moveTo(section.point1.x, section.point1.y);
                    this._context.lineTo(section.point2.x, section.point2.y);
                    this._context.lineTo(section.point3.x, section.point3.y);
                    this._context.fillStyle = c;
                    this._context.fill();
                    if (this._options.strokeSize > 0) {
                        this._context.lineWidth = this._options.strokeSize;
                        this._context.strokeStyle = c;
                        this._context.lineCap = "round";
                        this._context.stroke()
                    }
                    this._context.restore()
                }
                return false
            },
            _onDraw: function () {
                for (var i = 0, t = this._ribbons.length; i < t; ++i) {
                    if (!this._ribbons[i]) {
                        this._ribbons.splice(i, 1)
                    }
                }
                this._context.clearRect(0, 0, this._width, this._height);
                for (var a = 0; a < this._ribbons.length; ++a) {
                    var ribbon = this._ribbons[a],
                        numSections = ribbon.length,
                        numDone = 0;
                    for (var b = 0; b < numSections; ++b) {
                        if (this._drawRibbonSection(ribbon[b])) {
                            numDone++
                        }
                    }
                    if (numDone >= numSections) {
                        this._ribbons[a] = null
                    }
                }
                if (this._ribbons.length < this._options.ribbonCount) {
                    this.addRibbon()
                }
                requestAnimationFrame(this._onDraw)
            },
            _onResize: function (e) {
                var screen = screenInfo(e);
                this._width = screen.width;
                this._height = screen.height;
                if (this._canvas) {
                    this._canvas.width = this._width;
                    this._canvas.height = this._height;
                    if (this._context) {
                        this._context.globalAlpha = this._options.colorAlpha
                    }
                }
            },
            _onScroll: function (e) {
                var screen = screenInfo(e);
                this._scroll = screen.scrolly
            }
        };
        return Factory
    });
    new Ribbons({
        colorSaturation: "60%",
        colorBrightness: "50%",
        colorAlpha: 0.5,
        colorCycleSpeed: 5,
        verticalPosition: "random",
        horizontalSpeed: 200,
        ribbonCount: 3,
        strokeSize: 0,
        parallaxAmount: -0.2,
        animateSections: true
    });

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    5
    <!--彩带2.自动飘动-->
    <% if (theme.ribbon_flow){ %>
        <!-- <script src="https://g.joyinshare.com/hc/piao.js" type="text/javascript"></script> -->
        <script type="text/javascript" src="/js/ribbon_flow.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 彩带2.自动飘动
    ribbon_flow: false

    代码雨

    存在问题：位置不对

    H:\Hexo\themes\yilia\source\js\code_rain.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    window.onload = function(){
        //获取画布对象
        var canvas = document.getElementById("code_rain_canvas");
        //获取画布的上下文
        var context =canvas.getContext("2d");
        var s = window.screen;
        var W = canvas.width = s.width;
        var H = canvas.height;
        //获取浏览器屏幕的宽度和高度
        //var W = window.innerWidth;
        //var H = window.innerHeight;
        //设置canvas的宽度和高度
        canvas.width = W;
        canvas.height = H;
        //每个文字的字体大小
        var fontSize = 12;
        //计算列
        var colunms = Math.floor(W /fontSize);
        //记录每列文字的y轴坐标
        var drops = [];
        //给每一个文字初始化一个起始点的位置
        for(var i=0;i<colunms;i++){
            drops.push(0);
        }
        //运动的文字
        var str ="WELCOME TO WWW.ITRHX.COM";
        //4:fillText(str,x,y);原理就是去更改y的坐标位置
        //绘画的函数
        function draw(){
            context.fillStyle = "rgba(238,238,238,.08)";//遮盖层
            context.fillRect(0,0,W,H);
            //给字体设置样式
            context.font = "600 "+fontSize+"px  Georgia";
            //给字体添加颜色
            context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)];//randColor();可以rgb,hsl, 标准色，十六进制颜色
            //写入画布中
            for(var i=0;i<colunms;i++){
                var index = Math.floor(Math.random() * str.length);
                var x = i*fontSize;
                var y = drops[i] *fontSize;
                context.fillText(str[index],x,y);
                //如果要改变时间，肯定就是改变每次他的起点
                if(y >= canvas.height && Math.random() > 0.99){
                    drops[i] = 0;
                }
                drops[i]++;
            }
        };
        function randColor(){//随机颜色
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb("+r+","+g+","+b+")";
        }
        draw();
        setInterval(draw,35);
    };

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!--代码雨-->
    <% if (theme.code_rain){ %>
          <!-- 数字雨 -->
          <canvas id="code_rain_canvas" width="1440" height="900"></canvas>
          <script type="text/javascript" src="/js/code_rain.js">
            <style>
                #code_rain_canvas {
                  position: fixed;
                  right: 0px;
                  bottom: 0px;
                  min-width: 100%;
                  min-height: 100%;
                  height: auto;
                  width: auto;
                  z-index: 4;
                }
            </style>
        </script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 代码雨
    code_rain: true

    file

    ]]>     - - - - <p>添加多种页面背景特效，参考：<a href="https://blog.csdn.net/qq_36759224/article/details/85420403" target="_blank" rel="noopener">Hexo 博客优化之博客美化系列（持续更新）</a>，需要注意的是：添加背景特效是很消耗浏览器内容的，建议只选择其中的一两个。</p> -<h2 id="特效目录">特效目录</h2> -<ul> -<li><a href="#%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E5%87%BA%E7%8E%B0%E7%88%B1%E5%BF%83%E7%89%B9%E6%95%88">鼠标点击出现爱心特效</a></li> -<li><a href="#%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E6%98%BE%E7%A4%BA%E6%96%87%E5%AD%97--%E9%9C%80%E8%A6%81%E5%BC%95%E5%85%A5jquery">鼠标点击显示文字–需要引入jQuery</a></li> -<li><a href="#%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E7%83%9F%E8%8A%B1%E7%88%86%E7%82%B8%E6%95%88%E6%9E%9C">鼠标点击烟花爆炸效果</a></li> -<li><a href="#%E5%8A%A8%E6%80%81%E7%BA%BF%E6%9D%A1%E8%83%8C%E6%99%AF">动态线条背景</a></li> -<li><a href="#%E9%9B%AA%E8%8A%B1%E7%89%B9%E6%95%882%E5%A4%A7%E9%9B%AA%E8%8A%B1%E6%9C%89%E9%BD%BF%E8%BD%AE">雪花特效2.大雪花(有齿轮)</a></li> -<li><a href="#%E9%9B%AA%E8%8A%B1%E7%89%B9%E6%95%883%E5%B0%8F%E9%9B%AA%E8%8A%B1%E6%97%A0%E9%BD%BF%E8%BD%AE">雪花特效3.小雪花(无齿轮)</a></li> -<li><a href="#%E5%BD%A9%E5%B8%A61%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E8%87%AA%E5%8A%A8%E6%9B%BF%E6%8D%A2%E5%BD%A9%E5%B8%A6">彩带1.鼠标点击自动替换彩带</a></li> -<li><a href="#%E5%BD%A9%E5%B8%A62%E8%87%AA%E5%8A%A8%E9%A3%98%E5%8A%A8">彩带2.自动飘动</a></li> -<li><a href="#%E4%BB%A3%E7%A0%81%E9%9B%A8">代码雨</a></li> -</ul> - - - - - - - - - -     - - - hexo+yilia添加背景图片 - - https://www.yansheng.xyz/article/72a91df5.html - 2019-11-10T09:06:21.000Z - 2019-11-11T08:48:37.988Z - - 添加背景图片，效果图：

    file

    注：因为有博客不是修改时写的，部分代码没有进行备份，所以有些只能从git中获取代码，有些可能有点乱。

    同时因为每个人选的背景图片可能有所不同，主体颜色可能差异很大，需要调整的颜色可能比较多，这篇博客仅供参考，请自行选择是否替换背景。

    1.左侧边栏

    取消上半部分的背景颜色

    ：themes/yilia/layout/_partial/left-col.ejs，如下：这是掉上面的一行代码，使用下面的

    1
    2
    3
    <!-- <div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"> -->
    <!-- 左侧边栏（上半部分）不设置背景颜色 -->
    <div class="overlay" >

    添加背景图片

    H:\Hexo\themes\yilia\source\main.0cf68a.css，注释掉原有的背景颜色，添加照片：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .left-col {
        /* background:#fff; */
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url('http://bucket836.oss-cn-shenzhen.aliyuncs.com/wallpaper/381535373.jpeg') no-repeat 0% 20%/ cover;
        width:300px;
        position:fixed;
        opacity:1;
        transition:all .3s ease-in;
        -ms-transition: all .3s ease-in;
        height:100%;
        z-index:999
    }

    根据背景图片修改字体颜色（这步可以自定义），我是将color:#696969改成color:#673ab7:git

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     .left-col #header a {
    -    color:#696969
    +    color:#673ab7^M
     }
     .left-col #header a:hover {
    -    color:#b0a0aa
    +    color: #03A9F4^M
     }
     .left-col #header .header-subtitle {
         text-align:center;
    -    color:#999;
    +    color:#673ab7;
         font-size:18px;

    2.右边的文章

    调整背景颜色为透明

    主要是将白色背景变成透明的，background:#fff;–>background: rgba(255,255,255,.5);调整后Git

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     .article {
    -    margin:30px;
    -    position:relative;
    -    border:1px solid #ddd;
    -    border-top:1px solid #fff;
    -    border-bottom:1px solid #fff;
    -    background:#fff;
    -    /* background: rgba(255,255,255,.5); */
    -    transition:all .2s ease-in
    +    margin: 30px;^M
    +    border: 1px solid #ddd;^M
    +    border-top: 1px solid #fff;^M
    +    border-bottom: 1px solid #fff;^M
    +    background: rgba(255,255,255,.5);^M
    +    transition: all .2s ease-in^M
     }

    即：

    1
    2
    3
    4
    5
    6
    7
    8
    .article {
        margin: 30px;
        border: 1px solid #ddd;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        background: rgba(255,255,255,.5);
        transition: all .2s ease-in
    }

    3.添加背景图片

    将白色background-color:#fff;替换为照片：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    body {
        margin:0;
        font-size:14px;
        font-family:Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
        line-height:1.5;
        color:#333;
        /* background-color:#fff; */
        min-height:100%;
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
        url('https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/00/ChMkJlbKw6KIXhXnAA4L-_oxRzUAALG6QBUSg8ADgwT181.jpg') no-repeat 0% 0%/ cover;
    }

    /* 手机端换用一张背景图片，可以不使用 */
    @media screen and (max-width:800px) {
        body {
    background: url('https://oss.yansheng.xyz/your-name-phone2ys.jpg') no-repeat fixed top;
        }

    效果：

    file

    4.微调

    4.1调整评论区背景

    原来为白色，现在改为透明。

    file

    先将之前定义在H:\Hexo\themes\yilia\layout\_partial\article.ejs的样式统一放到H:\Hexo\themes\yilia\source\main.0cf68a.css，如下git diff

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     <!-- 《valine评论 -->
     <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
         <section id="comments" class="comments">
    -      <style>
    -        .comments{margin:30px;padding:10px;background:#fff}
    -        @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
    -      </style>
    +
           <%- partial('post/valine', {
             key: post.slug,
             title: post.title,

    在最后面添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    /* 《评论框 */
    .comments {
        margin:30px;
        padding:10px;
        /* background:#fff */
        background: rgba(255,255,255,.5);
    }
    @media screen and (max-width:800px) {
        .comments {
            margin:auto;
            padding:10px;
            /* background:#fff */
            background: rgba(255,255,255,.5);
        }
    }

    /* valine的背景颜色 */
    #vcomment{
    /* background:#fff */
        background: rgba(255,255,255,.9);
    }

    /* 设置valine占位符的颜色 */
    #vcomment :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #979292; 
    }
    #vcomment ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #979292;
    }
    #vcomment input:-ms-input-placeholder, #vcomment textarea:-ms-input-placeholder {
        color: #979292;
    }
    #vcomment input::-webkit-input-placeholder,#vcomment textarea::-webkit-input-placeholder {
        color: #979292;
    }
    /* 评论框》 */

    效果：

    file

    参考：html中怎么设定input的占位符字体颜色

    4.2调整归档背景

    之前调整的文章背景透明好像没有影响到这个：

    file

    进行调整：

    1
    2
    3
    4
    5
    6
    7
    8
    .archives-wrap {
        position:relative;
        margin:0 30px;
        padding-right:60px;
        border-bottom:1px solid #eee;
        /* background:#fff */
        background: rgba(255,255,255,.5);
    }

    调整日期颜色

    1
    2
    3
    4
    .article-meta time {
        /* color:#aaa */
        color: #2f2d2a;
    }

    日期时间大小

    1
    2
    3
    4
    5
    6
    7
    .archive-article-inner .article-meta .archive-article-date {
        cursor:default;
        font-size:15px;
        margin-bottom:5px;
        margin-top:-10px;
        margin-right:0
    }

    微调归档页面的标题样式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /* 丢弃之前的 */
    .archives .archive-article-title {
        font-size: 16px;
        color: #333;
        transition: color .3s
    }
    /* 修改： */
    /* 分类页面的标题 */
    .archives .archive-article-title {
        font-size:20px;
        /* color:#333; */
        transition:color .3s
    }
    .archives .archive-article-title:hover {
        /* color:#657b83 */
    }

    因为将右边栏的超链接都统一进行了设置，如果不需要特效，可以通过下面的代码取消超链接的下划线样式：

    1
    2
    3
     a.share-outer:hover::after {
        transform: scaleX(0);
    }

    4.3主页的文章块的日期取消超链接样式

    日期和文章统计数样式

    原：

    1
    2
    3
    4
    5
    .archive-article-date {
        color:#999;
        margin-right:7.6923%;
        float:right
    }

    修改后：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /* 日期栏（如果是文章还包含卜算子的页面访问量） */
    .archive-article-date {
        /* color:#0087ca; */
        color:#4b4949;
        margin-right:7.6923%;
        float:right
    }
    /* 日期 */
    .archive-article-date time{
        color:#4b4949;
    }
    /* 日期同一行的文章阅读数量 */
    .archive-article-date[id=busuanzi_container_page_pv] {
        color:#4b4949;
    }

    主页的“展开全文”按钮样式：受全局超链接样式影响，悬浮后，会变成红色。处理：提前加一个悬浮，掩盖全局的：

    1
    2
    3
    4
    /* 防止鼠标悬浮时，变色，因为会被全局的超链接样式影响 */
     .article-more-link a:hover{
        color:#fff;
    }

    前一页后一页：去掉悬浮的样式，可以直接注释掉：

    1
    2
    3
    #article-nav .article-nav-link-wrap:hover .article-nav-title, #article-nav .article-nav-link-wrap:hover i {
        /* color:#4d4d4d */
    }

    标签按钮：受全局超链接样式影响，悬浮后，会变成红色。处理：提前加一个悬浮，掩盖全局的：

    1
    2
    3
    4
     .tagcloud a:hover {
    +    color:#fff;^M
         opacity:.8
     }

    4.4手机端头部背景颜色

    H:\Hexo\themes\yilia\layout\_partial\mobile-nav.ejs取消内嵌样式，在全局css中进行设置：

    1
    2
    <!--<div class="overlay js-overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"></div>-->
    <div class="overlay js-overlay"></div>

    H:\Hexo\themes\yilia\source\main.0cf68a.css设置成渐变：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #mobile-nav .overlay {
        height:110px;
        position:absolute;
        width:100%;
        z-index:2;
         /* 渐变：浅绿色变淡蓝色 */
        background-image: linear-gradient(#8fecc5,#0badf7);
        /* 浏览器不支持渐变时显示默认颜色 */
        background-color: #4d4d4d;
    }

    效果图：

    file

    4.5鼠标图片

    去网上找一种鼠标指针的图片，用图片替换默认的鼠标样式：cursor:url('url'), default;，default表示：如果图片不起效，就是用默认的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    body {
        margin:0;
        font-size:14px;
        font-family:Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
        line-height:1.5;
        color:#333;
        /* background-color:#fff; */
        min-height:100%;
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
            url('https://oss.yansheng.xyz/wallpaper/qinshimingyue.jpg') no-repeat 0% 0%/ cover;
        cursor:url('https://oss.yansheng.xyz/ico/favicon-2019110906554413.ico'), default;
    }

    /* 因为超链接默认情况下是：cursor: pointer; 显示为手，这里进行设置 */
    a {
        cursor:url('https://oss.yansheng.xyz/ico/favicon-2019110906554413.ico'), default;
    }

    4.6行内代码、引用块的背景颜色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
     .article-entry li code, .article-entry p code {
        color: #c7254e;
        /* background-color: #f9f2f4; */
        background-color: rgba(249, 242, 244, .7);
        border-radius: 2px;
        padding:2px 4px;
        margin:0 3px;
        /* background:#ddd; */
        /* border:2px solid #ccc; */
        font-family:Menlo, Monaco, Andale Mono, lucida console, Courier New, monospace;
        word-wrap:break-word;
        /* font-size:14px */
    }
    .article-entry blockquote {
        background:#ddd;
        border-left:5px solid #ccc;
        padding:15px 20px;
        margin-top:10px;
        border-left:5px solid #657b83;
        /* background:#f6f6f6; */
        background: rgba(246, 246, 246, .7);
        /* 如果超长，自动截断 */
        word-wrap:break-word;
        word-break:break-all;
    }
    ]]>     - - - - <p>添加背景图片，效果图：</p> -<p><img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1573200205240.png" alt="file"></p> - - - - - - - - - -     - - - hexo+yilia添加隐藏左边栏目按钮 - - https://www.yansheng.xyz/article/31bbdc67.html - 2019-11-10T09:06:17.000Z - 2019-11-11T07:32:19.776Z - - 效果图：
    file

    点击按钮时，缩进左侧边栏，再次点击再弹出来。

    添加隐藏左边栏目按钮

    参考：添加隐藏左边栏目按钮

    下面为引用内容：

    折腾了一个下午,终于把隐藏左边侧边栏目的效果实现了. 实现了点击按钮隐藏侧边栏, 查找和修改源码实在是太麻烦了.

    制作按钮样式

    先找一款你喜欢的CSS菜单按钮切换,或者自己实现一个,我在网上找到一款比较简单的样式,稍微做了下修改.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    .mymenucontainer {
    display:block;
    cursor:pointer;
    left:0;
    top:0;
    width:35px;
    height:35px;
    z-index:9999;
    position:fixed;
    }
    .bar1 {
    width:35px;
    height:3px;
    background-color:#333;
    margin:6px 0;
    transition:0.4s;
    -webkit-transform:rotate(-45deg) translate(-8px,8px);
    transform:rotate(-45deg) translate(-8px,8px);
    }
    .bar2 {
    width:35px;
    height:3px;
    background-color:#333;
    margin:6px 0;
    transition:0.4s;
    opacity:0;
    }
    .bar3 {
    width:35px;
    height:3px;
    background-color:#333;
    margin:6px 0;
    transition:0.4s;
    -webkit-transform:rotate(45deg) translate(-4px,-6px);
    transform:rotate(45deg) translate(-4px,-6px);
    }
    .change .bar1 {
    -webkit-transform:rotate(0deg) translate(0px,0px);
    transform:rotate(0deg) translate(0px,0px);
    }
    .change .bar2 {
    opacity:1;
    }
    .change .bar3 {
    -webkit-transform:rotate(0deg) translate(0px,0px);
    transform:rotate(0deg) translate(0px,0px);
    }

    样式制作完成后,压缩,然后添加进\themes\yilia\source\main.0cf68a.css文件中,添加在最前面即可

    添加按钮到相应的位置

    打开\themes\yilia\layout\layout.ejs文件, 找到<div class="left-col",在其上面添加如下代码:

    1
    2
    3
    4
    5
    <div class="mymenucontainer" onclick="myFunction(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>

    在</body>之后, </html>前添加如下Js代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <script>
        var hide = false;
        function myFunction(x) {
            x.classList.toggle("change");
            if(hide == false){
                $(".left-col").css('display', 'none');
                $(".mid-col").css("left", 6);
                $(".tools-col").css('display', 'none');
                $(".tools-col.hide").css('display', 'none');
                hide = true;
            }else{
                $(".left-col").css('display', '');
                $(".mid-col").css("left", 300);
                $(".tools-col").css('display', '');
                $(".tools-col.hide").css('display', '');
                hide = false;
            }
        }
    </script>

    重新生成文件,部署即可看到效果, 可以看看我的博客效果

    效果图：
    file

    引用结束

    结合我的配置进行修改

    因为我的左侧边栏添加了心知天气（如下图），所以按钮不能放在一起，因此进行了修改：
    file

    修改位置

    主要变化：修改按钮位置，移到右边：left: 260px;，修改bar1,bar2,bar3的颜色：background-color: #0087ca;：修改文件：H:\Hexo\themes\yilia\source\main.0cf68a.css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .mymenucontainer {
      display: block;
      cursor: pointer;
      left: 260px;  /*原来： left:0; */
      top: 0;
      width: 35px;
      height: 35px;
      z-index: 9999;
      position: fixed;
    }
    .bar1 {
      width: 35px;
      height: 3px;
      background-color: #0087ca;  /*原来： background-color:#333; */
      margin: 6px 0;
      transition: 0.4s;
      -webkit-transform: rotate(-45deg) translate(-8px, 8px);
      transform: rotate(-45deg) translate(-8px, 8px);
    }

    事件响应

    因为修改了图标位置，事件响应时也要对应修改位置：缩小后设置为$(".mymenucontainer").css('left', '0');,展开：$(".mymenucontainer").css('left', '260px');。
    修改文件：H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    </body>

    <!-- 《添加折叠按钮脚本 -->
    <script>
        var hide = false;
        function myFunction(x) {
            x.classList.toggle("change");
            if(hide == false){
                $(".left-col").css('display', 'none');
                $(".mid-col").css("left", 6);
                $(".tools-col").css('display', 'none');
                $(".tools-col.hide").css('display', 'none');
                hide = true;

                $(".mymenucontainer").css('left', '0');

            }else{
                $(".left-col").css('display', '');
                $(".mid-col").css("left", 300);
                $(".tools-col").css('display', '');
                $(".tools-col.hide").css('display', '');
                hide = false;

                $(".mymenucontainer").css('left', '260px');
            }
        }
    </script>
    <!-- 添加折叠按钮脚本》 -->

    </html>

    响应式：手机端隐藏按钮

    手机端(当页面变小时)隐藏按钮：修改文件：H:\Hexo\themes\yilia\source\main.0cf68a.css，找到@media screen and (max-width:800px)下面的内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    @media screen and (max-width:800px) {
        #container, body, html {
            height:auto;
            overflow-x:hidden;
            overflow-y:auto
        }
        #mobile-nav {
            display:block
        }
        .body-wrap {
            margin-bottom:0
        }
        .left-col{
            display:none
        }
    }

    在.left-col中添加一个按钮的标签：

    1
    2
    3
    .left-col,.mymenucontainer {
        display:none
    }

    效果图：
    file

    🐛

    有个小问题：在PC端进行测试时，如果先尝试缩放，然后返回再展开，直接测试手机端，就会出现问题：按钮仍然撑开界面；但是如果进到页面直接测试手机端就不会这种问题（或者是在缩放后进行测试也不会影响）。
    因为这个问题好像影响不是很大，就不深入了。

    ]]>     - - - - <p>效果图：<br> -<img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1573145229532.png" alt="file"></p> -<p>点击按钮时，缩进左侧边栏，再次点击再弹出来。</p> - - - - - - - - - -     - - - hexo+yilia添加“心知天气” - - https://www.yansheng.xyz/article/cd4e4c1.html - 2019-11-10T09:06:16.000Z - 2019-11-12T07:55:45.773Z - - 添加“心知天气”
    file

    參考：https://letmequadrakill.github.io/post/843b0170.html#more

    1.注册账号，设置天气样式：

    官网：https://www.seniverse.com/widgetv3，需要先注册账号，然后选择样式，如下：

    file

    生成js代码，复制代码，如下（我的免费版的代码）:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <div id="tp-weather-widget"></div>
    <script>
        (function(a, h, g, f, e, d, c, b) {
            b = function() {
                d = h.createElement(g);
                c = h.getElementsByTagName(g)[0];
                d.src = e;
                d.charset = "utf-8";
                d.async = 1;
                c.parentNode.insertBefore(d, c)
            };
            a["SeniverseWeatherWidgetObject"] = f;
            a[f] || (a[f] = function() {
                (a[f].q = a[f].q || []).push(arguments)
            });
            a[f].l = +new Date();
            if (a.attachEvent) {
                a.attachEvent("onload", b)
            } else {
                a.addEventListener("load", b, false)
            }
        }(window, document, "script", "SeniverseWeatherWidget", "//cdn.sencdn.com/widget2/static/js/bundle.js"));
        window.SeniverseWeatherWidget('show', {
            flavor: "slim",
            location: "WS06YNEMPP18",
            geolocation: true,
            language: "zh-Hans",
            unit: "c",
            theme: "auto",
            token: "a579c7ea-507d-41d7-b578-3537882d20c2",
            hover: "enabled",
            container: "tp-weather-widget"
        })
    </script>

    以下是复制的另一个人的代码，可能是升级版的(感觉效果很不错，就用了这个，可能会出现问题，因为应该是用他的秘钥，要是他修改你就会变)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <!-- 《添加“心知天气”-->
    <div id="tp-weather-widget"></div>
    <script>
            (function(T, h, i, n, k, P, a, g, e) {
                g = function() {
                    P = h.createElement(i);
                    a = h.getElementsByTagName(i)[0];
                    P.src = k;
                    P.charset = "utf-8";
                    P.async = 1;
                    a.parentNode.insertBefore(P, a)
                };
                T["ThinkPageWeatherWidgetObject"] = n;
                T[n] || (T[n] = function() {
                    (T[n].q = T[n].q || []).push(arguments)
                });
                T[n].l = +new Date();
                if (T.attachEvent) {
                    T.attachEvent("onload", g)
                } else {
                    T.addEventListener("load", g, false)
                }
            }(window, document, "script", "tpwidget", "//widget.thinkpage.cn/widget/chameleon.js"))
        </script>
        <script>
            tpwidget("init", {
                "flavor": "slim",
                "location": "WM6N2PM3WY2K",
                "geolocation": "enabled",
                "language": "zh-chs",
                "unit": "c",
                "theme": "chameleon",
                "container": "tp-weather-widget",
                "bubble": "enabled",
                "alarmType": "badge",
                "color": "#FFFFFF",
                "uid": "U88B4B2797",
                "hash": "c9d7cb43b80ffece52c9a1ebbfbca65f"
            });
            tpwidget("show");
        </script>
    <!-- 添加“心知天气”》-->

    2.添加到左侧边栏

    修改themes/yilia/layout/_partial/left-col.ejs，将上面的js代码添加到指定位置，位置如下：

    1
    2
    3
    4
    5
    6
    <div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>">

    <!-- 添加“心知天气”-->

    </div>
    <div class="intrude-less">

    3.设置成方便开启和关闭的形式

    如果主题中开启了这个设置，才开启这个功能：

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- 《添加“心知天气”-->
    <% if(theme.xinzhi_weather){ %>
    <div id="tp-weather-widget"></div>
    ……
            tpwidget("show");
        </script>
    <% } %>
    <!-- 添加“心知天气”》-->

    themes/yilia/_config.yml中添加如下配置：

    1
    2
    # 心知天气(如果不用为false):https://www.seniverse.com
    xinzhi_weather: true
    ]]>     - - - - <p>添加“心知天气”<br> -<img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1573378054017.png" alt="file"></p> - - - - - - - - - -     - - - hexo+yilia测试新的渲染引擎和表情 - - https://www.yansheng.xyz/article/47e1ef2d.html - 2019-11-10T09:06:14.000Z - 2019-11-12T07:40:16.896Z - - 测试表情（emoji）🤔和hexo渲染器（hexo-renderer-markdown-it）。

    表情

    正常文本间的表情

    看在文字间的情况🤔看在文字间的情况

    看在文字间的情况🛩看在文字间的情况

    引用块中的表情

    🤒

    📑

    标题中的表情📝

    常用表情网站汇总

    1.速度较快的：https://emoji.muan.co/
    file

    2.较慢的：https://www.webfx.com/tools/emoji-cheat-sheet/
    file

    3.专门用于github的提交的：https://gitmoji.carloscuesta.me/
    file

    hexo渲染器

    测试HTML

    1
    <div>这是div</div>
    这是div

    测试换行

    1
    2
    换行<br>
    换行

    换行

    换行

    测试相同标题

    测试相同标题

    查看相同标题的id是否重复，理论上会添加’-v2’ '-v3’等后缀。

    测试有序列表

    1
    2
    3
    4
    1. 11111
    2. 22222
    3. 33333
    1. 11111 # 这个能够正确处理
    1. 11111
    2. 22222
    3. 33333
    4. 11111

    注意list后面不能有空行，不然会出现问题：序号占一行，然后内容从下一行开始

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 空行的情况
    1. 1111

    2. 2222

    # 处理后
    1.
    1111

    2.
    2222

    测试无序列表

    • 无序列表
    • 无序列表
      • 第二层
      • 第二层
        • 第三层
        • 第三层
      • 第二层

    测试选择框

    • [x] 选择框：好像有问题
    ]]>     - - - - <p>测试表情（emoji）🤔和hexo渲染器（hexo-renderer-markdown-it）。</p> - - - - - - - - - -     - - - hexo+yilia替换渲染引擎，支持emoji表情 - - https://www.yansheng.xyz/article/b902694c.html - 2019-11-10T09:06:13.000Z - 2019-11-11T08:58:16.704Z - - Hexo默认是采用hexo-renderer-marked渲染器将markdown渲染成HTML，这个渲染器不支持插件扩展，因此不能支持表情；还有一个支持插件扩展的是 hexo-renderer-markdown-it，所以我们可以使用这个渲染引擎来支持emoji表情。

    就比如这样的表情：😁😂🤣🍱，更多可参考：测试新的渲染引擎和表情

    替换渲染引擎，支持emoji表情

    参考：https://segmentfault.com/a/1190000009478837#articleHeader5

    如何让markdown可以解析emoji呢？实际上我们发现，在编辑器中输入 :blush: 并没有表情出现，是为什么呢？ 这是markdown渲染引擎的问题 。
    Hexo默认是采用hexo-renderer-marked,这个渲染器不支持插件扩展，当然就不行了，还有一个支持插件扩展的是 hexo-renderer-markdown-it（github：https://github.com/hexojs/hexo-renderer-markdown-it），所以我们可以使用这个渲染引擎来支持emoji表情，具体实现过程如下：

    • 更换渲染器
      进入blog跟目录，执行如下命令
    1
    2
    npm un hexo-renderer-marked --save
    npm i hexo-renderer-markdown-it --save
    • 安装emoji插件，执行如下命令
    1
    npm install markdown-it-emoji --save
    • 编辑站点配置文件
      就是编辑根目录的_config.yml文件，添加如下内容

    配置H:\Hexo\_config.yml：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    # Markdown-it config
    ## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
    markdown:
      render:
        html: true          # 是否对HTML标签进行解析，false时HTML将按照原样输出
        xhtmlOut: false     # 是否需要满足严格的XHTML格式，换行为<br />
        breaks: true
        linkify: true
        typographer: true
        quotes: '“”‘’'
      plugins:
        - markdown-it-abbr
        - markdown-it-footnote
        - markdown-it-ins
        - markdown-it-sub
        - markdown-it-sup
        - markdown-it-emoji  # add emoji
      anchors:
        # Minimum level for ID creation. (Ex. h2 to h6)
        level: 2
        # A suffix that is prepended to the number given if the ID is repeated.
        collisionSuffix: 'v'
        # If `true`, creates an anchor tag with a permalink besides the heading.
        permalink: false
        # Class used for the permalink anchor tag.
        permalinkClass: header-anchor
        # The symbol used to make the permalink
        permalinkSymbol:

    更近一步

    ]]>     - - - - <p>Hexo默认是采用<code>hexo-renderer-marked</code>渲染器将markdown渲染成HTML，这个渲染器不支持插件扩展，因此不能支持表情；还有一个支持插件扩展的是 <code>hexo-renderer-markdown-it</code>，所以我们可以使用这个渲染引擎来支持emoji表情。</p> -<p>就比如这样的表情：😁😂🤣🍱，更多可参考：<a href="/article/47e1ef2d.html">测试新的渲染引擎和表情</a></p> - - - - - - - - - -     - - - hexo+yilia添加添加robots配置 - - https://www.yansheng.xyz/article/ae673bea.html - 2019-11-10T09:05:49.000Z - 2019-11-11T13:40:52.927Z - - 介绍

    robots是网站跟爬虫间的协议，用简单直接的txt格式文本方式告诉对应的爬虫被允许的权限，也就是说robots.txt是搜索引擎中访问网站的时候要查看的第一个文件。当一个搜索蜘蛛访问一个站点时，它会首先检查该站点根目录下是否存在robots.txt，如果存在，搜索机器人就会按照该文件中的内容来确定访问的范围；如果该文件不存在，所有的搜索蜘蛛将能够访问网站上所有没有被口令保护的页面。

    配置

    该配置可以管理我们想要搜索引擎爬取的内容，Allow表示允许被访问的，Disallow是不允许的意思。注意后面两个Sitemap就是网站地图了。而网站地图前面说了是给爬虫用的。这里配置在robots中。可参考如下配置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    # 允许所有用户代理的浏览器爬虫进行访问（爬起数据）
    User-agent: *

    # 允许访问的内容
    Allow: /
    Allow: /2019/
    Allow: /archives/
    Allow: /categories/
    Allow: /2019/
    Allow: /page/
    Allow: /photos/
    Allow: /tags/

    # 不允许访问的内容
    Disallow: /assets/
    Disallow: /fonts/
    Disallow: /img/
    Disallow: /js/
    Disallow: /music/
    Disallow: /css/

    Disallow: /*.js
    Disallow: /*.css

    # 网站地图Sitemap
    Sitemap: https://www.yansheng.xyz/sitemap.xml
    Sitemap: https://www.yansheng.xyz/baidusitemap.xml

    进入搜索引擎管理平台更新robots

    Google Search Console: https://www.google.com/webmasters/tools/home?hl=zh-CN
    百度站长平台: http://zhanzhang.baidu.com/

    robots.txt 生成器

    配置相关参数，自动生成robots内容的网站：

    ]]>     - - - - <h3 id="介绍">介绍</h3> -<p>robots是网站跟爬虫间的协议，用简单直接的txt格式文本方式告诉对应的爬虫被允许的权限，也就是说robots.txt是搜索引擎中访问网站的时候要查看的第一个文件。当一个搜索蜘蛛访问一个站点时，它会首先检查该站点根目录下是否存在robots.txt，如果存在，搜索机器人就会按照该文件中的内容来确定访问的范围；如果该文件不存在，所有的搜索蜘蛛将能够访问网站上所有没有被口令保护的页面。</p> - - - - - - - - - -     - - - hexo+yilia添加网站运行时间，ICP备案信息，设定站点建立时间 - - https://www.yansheng.xyz/article/50902a4.html - 2019-11-10T09:05:16.000Z - 2020-02-21T14:04:42.000Z - - hexo+yilia（在底部）添加

    • 网站运行时间：本站已安全运行 101 天 12 小时 13 分 41 秒
    • ICP备案信息：粤ICP备00000000号
    • 设定站点建立时间（年份）：@ 2018 - 2019

    1.添加网站运行时间

    添加位置建议：如果有统计量（如不蒜子统计量），放在不蒜子后面。没有就按照下面的建议。

    硬性配置

    参考：Hexo主题更改以及小功能的添加–添加网站运行时间

    修改\themes\yilia\layout\_partial\footer.ejs，在</footer>上面添加如下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <!--《添加网站运行时间 -->
    <!--<br/>-->
    <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
    <script>
        var now = new Date();

        function createtime() {
            var grt = new Date("07/25/2019 12:00:00"); //此处修改你的建站时间或者网站上线时间 
            now.setTime(now.getTime() + 250);
            days = (now - grt) / 1000 / 60 / 60 / 24;
            dnum = Math.floor(days);
            hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
            hnum = Math.floor(hours);
            if (String(hnum).length == 1) {
                hnum = "0" + hnum;
            }
            minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
            mnum = Math.floor(minutes);
            if (String(mnum).length == 1) {
                mnum = "0" + mnum;
            }
            seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
            snum = Math.round(seconds);
            if (String(snum).length == 1) {
                snum = "0" + snum;
            }
            document.getElementById("timeDate").innerHTML = " | 本站已安全运行 " + dnum + " 天 ";
            document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
        }
        setInterval("createtime()", 250);
    </script>
    <!-- 添加网站运行时间》 -->

    灵活配置（推荐）

    优化上面的内容，设置成可以直接在配置文件中进行开启和关闭的形式：

    1.修改\themes\yilia\_config.yml，添加如下内容：

    1
    2
    3
    4
    5
    # 网站运行时间，格式形如：“本站已安全运行 101 天 12 小时 13 分 41 秒”
    # Runing Time
    running_time:
     enable: true
     create_time: '07/25/2019 12:00:00' #此处修改你的建站时间或者网站上线时间

    2.修改\themes\yilia\layout\_partial\footer.ejs，在</footer>上面添加如下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!--《添加网站运行时间  <br/>-->
    <% if (theme.running_time && theme.running_time.enable && theme.running_time.create_time){ %>
        <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
        <script>
        var now = new Date();

        function createtime() {
            //此处修改你的建站时间或者网站上线时间
            var create_time = '<%- theme.running_time.create_time %>';
            now.setTime(now.getTime() + 250);
            days = (now - grt) / 1000 / 60 / 60 / 24;
            dnum = Math.floor(days);
            hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
            hnum = Math.floor(hours);
            if (String(hnum).length == 1) {
                hnum = "0" + hnum;
            }
            minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
            mnum = Math.floor(minutes);
            if (String(mnum).length == 1) {
                mnum = "0" + mnum;
            }
            seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
            snum = Math.round(seconds);
            if (String(snum).length == 1) {
                snum = "0" + snum;
            }
            document.getElementById("timeDate").innerHTML = " | 本站已安全运行 " + dnum + " 天 ";
            document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
        }
        setInterval("createtime()", 250);
        </script>
    <% } %>
    <!-- 添加网站运行时间》-->

    效果

    本站已安全运行 101 天 12 小时 13 分 41 秒

    2.添加ICP备案信息

    添加位置建议：底部第首行。如果有统计量、运行时间前面。没有就按照下面的建议。

    参考：Hexo博客页脚添加ICP备案号

    1.修改\themes\yilia\_config.yml，添加如下内容：

    1
    2
    3
    4
    5
    6
    # ICP备案信息（英文全称：Internet Content Provider，中文全称：网络内容提供商。）
    # 参考：https://blog.csdn.net/qq_37449342/article/details/95649140
    # 粤ICP备00000000号
    icp:
     enable: true
     id: '粤ICP备00000000号'  # 备案号

    2.修改\themes\yilia\layout\_partial\footer.ejs，在</footer>上面添加如下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!-- 《网站备案号 -->
    <% if (theme.icp && theme.icp.enable && theme.icp.id){ %>
        <div class="BeiAn-info">
            <img src="https://static.dy208.cn/o_1dfilp8ruo521thr1hvf18ji17soa.png" title="备案管理系统">
            <a href="http://www.beian.miit.gov.cn/" style="color:#f72b07" target="_blank" title="备案号">
                <%- theme.icp.id %>
            </a>
        </div>
    <% } %>
    <!-- 网站备案号》 -->

    图标也可为：http://www.beian.miit.gov.cn/images/top/0.png

    效果

    file

    注意

    域名备案后，一般都需要将备案号添加到网站底部，不然会收到类似信息的！！！

    3.设定站点建立时间

    参考：

    这个时间将在站点的底部显示，如果建站时间小于当前时间（年份），形式为：@ 2018 - 2019；否则默认为当前年份，如：@2019。
    编辑主題的 \themes\yilia\_config.yml（在hexo根目录的配置文件中也可以），新增字段 since。

    1
    2
    3
    # Year of Site Creation | 网站成立年份
    # 设定站点建立时间,这个时间将在站点的底部显示，如果是当年显示为 @ 2019，否则显示为时间段 © 2018 - 2019。
    since: 2019

    对应的配置文件H:\Hexo\themes\yilia\layout\_partial\footer.ejs的原内容（部分内容，主要是<div class="footer-left">标签内容）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <footer id="footer">
      <div class="outer">
        <div id="footer-info">
        <div class="footer-left">
        &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
        </div>
          <div class="footer-right">
          <a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
          </div>
        </div>
      </div>

    存在问题：小于时，不能正常显示（/按照需求显示）。修改后：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <footer id="footer">
      <div class="outer">
        <div id="footer-info">
        <div class="footer-left">
                <!--如果有设置theme.since，并且时间小于当前时间（年份），形式为：@ 2018 - 2019(+作者/标题)；否则默认为当前年份(+作者/标题)。 -->
        <% if (theme.since && !isNaN(theme.since) && theme.since < date(new Date(), 'YYYY')) { %>
                    &copy; <%- theme.since %>-<%= date(new Date(), 'YYYY') %>
                <% } else { %>
                    &copy; <%= date(new Date(), 'YYYY') %>
                <% } %>
                <%= config.author || config.title %>
        </div>

    效果

    如：since: 2018显示为@ 2018 - 2019；否则默认为当前年份，如：@2019。

    ]]>     - - - - <p>hexo+yilia（在底部）添加</p> -<ul> -<li>网站运行时间：<code>本站已安全运行 101 天 12 小时 13 分 41 秒</code></li> -<li>ICP备案信息：<code>粤ICP备00000000号</code></li> -<li>设定站点建立时间（年份）：<code>@ 2018 - 2019</code></li> -</ul> - - - - - - - - - -     - - - hexo+yilia添加RSS订阅功能 - - https://www.yansheng.xyz/article/91e4f23f.html - 2019-11-10T09:05:01.000Z - 2019-11-11T14:22:50.572Z - - 使用hexo-generator-feed插件生成RSS文件atom.xml，实现RSS订阅功能。
    插件github网址：https://github.com/hexojs/hexo-generator-feed。
    使用详见：https://www.jianshu.com/p/2aaac7a19736，https://wxnacy.com/2018/12/12/hexo-add-rss/

    1.先安装插件：

    1
    npm install hexo-generator-feed

    2.在hexo根目录配置文件_config.yml中配置插件:

    1
    2
    3
    4
    5
    6
    7
    8
    # Extensions
    plugins:
      hexo-generator-feed
    #Feed Atom
    feed:
      type: atom
      path: atom.xml
      limit: 20 # 最新的20篇文章

    3.开启主题的左侧边栏的RSS功能

    在主题的配置文件theme/yilia/_config.yml中进行设置:

    1
    2
    3
    # SubNav
    subnav:
      rss: "atom.xml"

    4.重新生成文件

    hexo clean, hexo g后会在public目录下生成auto.xml订阅文件，到浏览器进行访问，点击图标会跳转到*/auto.xml界面，显示最近的几篇文章的更新。

    ]]>     - - - - <p>使用<strong>hexo-generator-feed</strong>插件生成RSS文件<code>atom.xml</code>，实现RSS订阅功能。<br> -插件github网址：<a href="https://github.com/hexojs/hexo-generator-feed" target="_blank" rel="noopener">https://github.com/hexojs/hexo-generator-feed</a>。<br> -使用详见：<a href="https://www.jianshu.com/p/2aaac7a19736" target="_blank" rel="noopener">https://www.jianshu.com/p/2aaac7a19736</a>，<a href="https://wxnacy.com/2018/12/12/hexo-add-rss/" target="_blank" rel="noopener">https://wxnacy.com/2018/12/12/hexo-add-rss/</a></p> - - - - - - - - - -     - - - hexo+yilia添加版权声明 - - https://www.yansheng.xyz/article/3d67529f.html - 2019-11-10T09:04:55.000Z - 2019-11-11T14:26:03.987Z - - 添加版权声明，效果图：
    file

    参考：

    1.借鉴修改版

    1.1在文末添加声明

    在themes/yilia/layout/_partial/article.ejs文件的指定位置如下：

    1
    2
    3
    4
    <%- post.content %>
    <% } %>
    <-- 在此处添加代码-->
    <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>

    添加如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
     <!-- 添加版权声明 -->
        <%
      var sUrl = url.replace(/index\.html$/, '');
      sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
    %>
    <% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %>
      <div class="declare">
        <strong>本文作者：</strong>
        <% if(config.author != undefined){ %>
          <%= config.author%>
        <% }else{%>
          <font color="red">请在博客根目录“_config.yml”中填入正确的“author”</font>
        <%}%>
        <br>
        <strong>本文链接：</strong>
        <a href="<%= config.url %>/<%= post.path %>" title="<%= post.title %>" target="_blank"><%= config.url %>/<%= post.path %></a>
        <br>
        <strong>版权声明：</strong>
        本作品采用
        <a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
        进行许可。转载请注明出处！
        <% if(theme.licensee_img != undefined){ %>
          <br>
          <a rel="license" href="<%= theme.licensee_url%>"><img alt="知识共享许可协议" style="border-width:0" src="<%= theme.licensee_img%>"/></a>
        <% } %>
      </div>
    <% } else {%>
      <div class="declare" hidden="hidden"></div>
    <% } %>
          <!-- 添加版权声明 -->

    1.2添加样式

    在文件yilia/source/main.0cf68a.css中添加:

    1
    2
    3
    4
    5
    6
    7
    /*版权声明的样式*/
    .declare {
      background-color: #eaeaea;
      margin-top: 2em;
      border-left: 3px solid #ff1700;
      padding: .5em 1em; 
    }

    1.3在主题中开启设置

    在文件themes/yilia/_config.yml中添加：

    1
    2
    3
    4
    5
    6
    7
    # 版权声明
    #在需要进行版权声明的文章的md文件头部，设置属性declare: true。
    #版权基础设定：0-关闭声明； 1-文章对应的md文件里有declare: true属性，才有版权声明； 2-所有文章均有版权声明
    declare_type: 1
    licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/        #当前应用的版权协议地址。
    licensee_name: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议'        #版权协议的名称
    licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png    #版权协议的Logo

    效果图：

    file

    2.升级版-配置版

    修改：H:\Hexo\themes\yilia\_config.yml:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 版权声明
    #在需要进行版权声明的文章的md文件头部，设置属性declare: true。
    #版权基础设定：0-关闭声明； 1-文章对应的md文件里有declare: true属性，才有版权声明； 2-所有文章均有版权声明
    declare:
      declare_type: 1
      licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/        #当前应用的版权协议地址。
      licensee_name: 'CC BY-NC-SA 4.0'                                        #版权协议的名称
      licensee_alias: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议'       # alias别名
      licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png    #版权协议的Logo

    新建H:\Hexo\themes\yilia\layout\_partial\post\declare.ejs：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <!-- 《添加版权声明 -->
    <!--添加版权声明https://github.com/JoeyBling/hexo-theme-yilia-plus/commit/c1215e132f6d5621c5fea83d3c4f7ccbcca074a3-->
    <%
      var sUrl = url.replace(/index\.html$/, '');
      sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
    %>

    <!-- #版权基础设定：0-关闭声明； 1-文章对应的md文件里有declare: true属性，才有版权声明； 2-所有文章均有版权声明 -->
    <% if ((theme.declare.declare_type === 2 || (theme.declare.declare_type === 1 && post.declare)) && !index){ %>
      <div class="declare">
        <strong class="author">本文作者：</strong>
        <% if(config.author != undefined){ %>
          <%= config.author%>
        <% }else{%>
          <font color="red">请在博客根目录“_config.yml”中填入正确的“author”</font>
        <%}%>
        <br>
        <strong class="create-time">发布时间：</strong>
        <%- date(post.date, 'YYYY-MM-DD') %>
        <br>
        <strong class="update-time">最后更新：</strong>
        <%- date(post.updated, 'YYYY-MM-DD') %>
        <br>
        <strong class="article-titles">本文标题：</strong>
        <a href="<%= config.url %>/<%= post.path %>" title="<%= post.title %>" target="_blank"><%= post.title %></a>
        <br>
        <strong class="article-url">本文链接：</strong>
        <a href="<%= config.url %>/<%= post.path %>" title="<%= post.title %>" target="_blank"><%= config.url %>/<%= post.path %></a>
        <br>
        <strong class="copyright">版权声明：</strong>
        本作品采用
        <a rel="license" href="<%= theme.declare.licensee_url%>" title="<%= theme.declare.licensee_alias %>"><%= theme.declare.licensee_name%></a>
        许可协议进行许可。转载请注明出处！
        <% if(theme.declare.licensee_img != undefined){ %>
          <br>
          <a rel="license" href="<%= theme.declare.licensee_url%>"><img alt="知识共享许可协议" style="border-width:0" src="<%= theme.declare.licensee_img%>"/></a>
        <% } %>
      </div>
    <% } else {%>
      <div class="declare" hidden="hidden"></div>
    <% } %>
    <!-- 添加版权声明》 -->

    修改H:\Hexo\themes\yilia\layout\_partial\article.ejs

    1
    2
    3
    4
    5
    <!-- 《添加版权声明 -->
    <% if(theme.declare){%>
        <%- partial('post/declare') %>
    <% } %>
    <!-- 添加版权声明》 -->

    效果图：

    file

    ]]>     - - - - <p>添加版权声明，效果图：<br> -<img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1573110209160.png" alt="file"></p> - - - - - - - - - -     - - - hexo+yilia添加背景音乐 - - https://www.yansheng.xyz/article/5c52aefe.html - 2019-11-10T09:04:31.000Z - 2019-11-11T15:31:08.918Z - - 添加背景音乐（截图为APlayer播放器）
    file

    简单版：网易云外链

    参考：

    步骤：

    1.到网易云官网获取音乐外链：搜索音乐–>生成外链播放器（使用iframe插件形式）–>复制代码

    2.打开路径 themes/yilia/layout/_partial/left-col.ejs，在最后一个</nav>上面添加代码，就像下面这样。注意是否需要自动播放，建议不要设置为自动播放（src中的auto=0表示不自动播放，如果是1就自动播放）。

    1
    2
    3
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=228 height=86 
            src="//music.163.com/outchain/player?type=2&id=1371939273&auto=0&height=66"></iframe>
    </nav>

    3.根据需要设置宽高属性，宽建议228。

    4.为了方便起见，设置成能够在主题的配置文件中开启和关闭的形式：

    1
    2
    3
    4
    5
    6
    <!-- 《左侧边栏添加--网易云音乐插件 -->
    <!-- https://www.writebug.site/2018/04/21/hexo-yilia个性化之-添加背景音乐/ -->
    <% if(theme.simple_163_music && theme.simple_163_music.enable){ %>
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=228 height=86 src="//music.163.com/outchain/player?type=2&id=1371939273&auto=0&height=66"></iframe>
    <% } %>
    <!-- 网易云音乐插件》-->

    同时需要在主题的配置文件themes/yilia/_config.yml中开启：

    1
    2
    3
    4
    # 音乐
    # 简单的网易云音乐
    simple_163_music:
     enable: true

    如需关闭设置为false。

    复杂版：APlayer音乐播放器

    参考：

    安装步骤

    1.打开路径 themes/yilia/layout/_partial/left-col.ejs，在最后一个</nav>上面添加代码，就像下面这样。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <!-- 《左侧边栏添加--APlayer音乐播放器 -->
    <% if(theme.aplayer.enable) { %>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
    <!-- // 这里div的样式是笔者自己修改过的，你可以直接使用APlayer官方的原配置：<div id="aplayer"></div> -->
    <div id="aplayer" style="position:absolute;left;0;bottom:0;"></div>
    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>
    <script>
        const ap = new APlayer({
            container: document.getElementById('aplayer'),
            autoplay: false,
            listFolded: true,
            listMaxHeight: 90,
            order: 'list',
            loop: 'all',
            theme: '#b7daff',
            preload: 'none',
            mutex: true,
            lrcType: 3,
            volume: 0.7,
            fixed: true,
            audio: [{
                    name: '亲爱的旅人啊（Cover：木村弓）',
                    artist: '周深',
                    lrc: '/music/lrc/亲爱的旅人啊（Cover：木村弓）-周深.lrc',
                    cover: 'http://p1.music.126.net/1YrCPOBV314i-mTtlDg8mQ==/109951164148664637.jpg?param=300x300',
                    url: 'http://m10.music.126.net/20191102134206/7c499bc0065a03c980aa04817b2b7b2b/ymusic/555f/525a/5258/b5f91cd86ce0046a6f70e249d0802a1e.mp3'
                },
                {
                    name: '陈情令：无羁',
                    artist: 'Silu Wang',
                    lrc: '',
                    cover: 'http://p2.music.126.net/8eL7nls1F8o48_umy0uqBQ==/109951164361652548.jpg?param=300x300',
                    url: 'http://m10.music.126.net/20191102144314/e85a4a99852144dced7bc7eace047ecc/ymusic/015d/550f/5152/67f6f0756ebe8bd362f5f85c507acf68.mp3'
                }
            ]
        });

        <!-- 根据封面自适应主题色 -->
        const colorThief = new ColorThief();
        const setTheme = (index) => {
            if (!ap.list.audios[index].theme) {
                colorThief.getColorAsync(ap.list.audios[index].cover, function(color) {
                    ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
                });
            }
        };
        setTheme(ap.list.index);
        ap.on('listswitch', (data) => {
            setTheme(data.index);
        });
    </script>
    <% } %>
    <!-- 左侧边栏添加--APlayer音乐播放器》 -->

    2.同时需要在主题的配置文件themes/yilia/_config.yml中开启：

    1
    2
    3
    4
    # 添加APlayer音乐播放器，官网：https://aplayer.js.org
    # github: https://github.com/MoePlayer/APlayer
    aplayer:
      enable: true

    如需关闭设置为false。

    说明

    1.存在问题：fixed: true模式下，歌曲列表高度listMaxHeight好像无效。

    2.使用：音乐直链搜索：https://music.liuzhijin.cn/ 查找的歌曲好像有限制，就是如果使用太频繁，会被拒绝访问（响应码403，有点像禁爬虫）。可以使用七牛云存储对应MP3文件。（歌词好像是没有显示的）

    3.对于有些歌曲没有歌词的情况（如上面的第二首歌），不建议直接置为空lrc: '',，这样会出现问题：一开始可能没有问题，如果设置循环，第二次时就会报错–找不到歌词。建议：添加同名歌词文件，如/music/lrc/无羁 - Silu Wang-陈情令.lrc，歌词内容置为空，如：[00:00.00] 暂无歌词，这样就不会出现类似问题。

    补充🐛

    上面说到的歌曲列表高度listMaxHeight问题，应该是一个bug，详见：listMaxHeight does not work and no scroll in Fixed mode，但是可以不进行设置，因为它有一个默认值250px。

    更新

    将配置分开，方便修改。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!-- 《左侧边栏添加--APlayer音乐播放器：详见：https://aplayer.js.org/#/zh-Hans/ -->
    <% if(theme.aplayer.enable) { %>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">

        <div id="aplayer" style="text-align:left"></div>
        <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>

        <!-- 为方便修改，添加一个配置文件，修改时直接修改配置文件即可。 -->
        <script type="text/javascript" src="<%- url_for('js/APlayer_config.js') %>"></script>

        <!-- 根据封面自适应主题色，主要是作用于进度条 -->
        <script type="text/javascript">
              const colorThief = new ColorThief();
              const setTheme = (index) => {
                if (!ap.list.audios[index].theme) {
                  colorThief.getColorAsync(ap.list.audios[index].cover, function(color) {
                    ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
                  });
                }
              };
              setTheme(ap.list.index);
              ap.on('listswitch', (data) => {
                setTheme(data.index);
              });       
        </script>
    <% } %>
    <!-- 左侧边栏添加--APlayer音乐播放器》 -->

    配置文件H:\Hexo\themes\yilia\source\js\APlayer_config.js:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        fixed: true,
        autoplay: false,
        theme: '#b7daff',
        loop: 'all',
        order: 'list',
        preload: 'auto',
        volume: 0.5,
        lrcType: 3,
        mutex: true,
        listFolded: false,

        audio: [{
                name: '一直很安静',
                artist: '阿桑',
                lrc: '/music/lrc/一直很安静 - 阿桑.lrc',
                cover: 'https://p1.music.126.net/SpovasHBud2A1qXXADXsBg==/109951163167455610.jpg?param=300x300',
                url: 'http://q0fzyzixq.bkt.clouddn.com/audio/mp3/一直很安静 - 阿桑.mp3'
                      },
            {
                name: '亲爱的旅人啊（Cover：木村弓）',
                artist: '周深',
                lrc: '/music/lrc/亲爱的旅人啊（Cover：木村弓）-周深.lrc',
                cover: 'https://p1.music.126.net/1YrCPOBV314i-mTtlDg8mQ==/109951164148664637.jpg?param=300x300',
                url: 'http://q0fzyzixq.bkt.clouddn.com/audio/mp3/亲爱的旅人啊（Cover：木村弓） - 周深.mp3'
                      }
            ]
    });

    分开后，如果需要更新歌曲，只需要更新音乐的配置文件APlayer_config.js就可以了，而不是修改主题的布局文件。

    ]]>     - - - - <p>添加背景音乐（截图为APlayer播放器）<br> -<img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1573392916217.png" alt="file"></p> - - - - - - - - - -     - - - hexo+yilia添加相册视屏功能 - - https://www.yansheng.xyz/article/d0ba4c3d.html - 2019-11-10T09:04:12.000Z - 2019-11-11T15:35:37.970Z - - 主要是添加相册和视频功能，参考Hexo-Github实现相册功能 ，csdn博客：Hexo+Github实现相册功能，我看到网上好多人都是按照这个模板来实现的。
    效果图：
    mV0P56.jpg

    注：这个视频加载不出来应该是因为和视频链接有关系.
    mV0CUx.jpg

    一、增加相册功能

    1. 原理

    两个github仓库，一个存放图片，一个存放hexo博客（当然你一个仓库两个分支也可以，我就是这样）。
    mV0Yrj.jpg

    2.修改代码

    源代码到github去下：https://github.com/lawlite19/Blog-Back-Up

    2.1 新建博客的photos页面

    • 在博客的source文件夹下建立一个photos文件夹

    • 将样式文件放到photos文件夹下，样式文件我都放到了github上：https://github.com/lawlite19/Blog-Back-Up/tree/master/blog_photos_copy

      1
      2
      3
      4
      5
      6
      ├─blog_photos_copy
      │      data.json
      │      index.ejs
      │      ins.css
      │      ins.js
      │      lazyload.min.js

    • 修改ins.js文件，主要是里面的render函数

    • 其中的url对应到你的github放图片的地址

    1
    2
    var minSrc = 'https://raw.githubusercontent.com/lawlite19/blog-back-up/master/min_photos/' + data.link[i];
    var src = 'https://raw.githubusercontent.com/lawlite19/blog-back-up/master/photos/' + data.link[i];

    2.2 新建本地图片库

    新建一个文件夹存放图片，我的是photos-source，新建目录photos，min_photos，同时把ImageProcess.py,ImageProcess.pyc， tool.py 这三个文件放到该目录下。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    H:.photos-source
    │  ImageProcess.py
    │  ImageProcess.pyc
    │  tool.py
    │
    ├─blog_photos_copy
    │      data.json
    │      index.ejs
    │      ins.css
    │      ins.js
    │      lazyload.min.js
    │
    ├─min_photos
    │      2014-11-16_鞠婧祎1.jpg
    │
    ├─photos
    │      2014-11-16_鞠婧祎1.jpg
    │      data.json
    │
    └─__pycache__
            ImageProcess.cpython-37.pyc

    2.3 修改tool.py中的路径

    修改这里的下面代码块的路径：

    1
    2
    3
    #路径换成自己的博客的图片文件夹的路径:H:\Hexo\source\photos
        with open("H:\\Hexo\\source\\photos\\data.json","w") as fp:
            json.dump(final_dict, fp)

    注意：如果不是用两个仓库，可以注释git命令部分内容，然后需要自己先将图片上传到github上，要不然显示不了。

    2.4 每次上传照片都需要运行python脚本

    需要安装python环境，在命令行运行py tool.py命令。

    2.5 开启相册功能

    H:\Hexo\themes\yilia\_config.yml取消注册相册行。

    1
    2
    3
    4
    5
    6
    7
    menu:
      主页: /
      #随笔: /tags/随笔/
      #分类: /categories
      归档: /archives
      相册: /photos
      #标签: /tags

    3.存在问题

    众所周知，国内访问GitHub还有比较慢的，所以有时候图片会加载不出来。
    替换方法：使用七牛云作为图库，存放图片，这种方式网上也很常见，可以自行修改。

    二、添加（相册页的）视频功能

    视频功能基于相册功能，相当于在其旁边添加一个导航栏，导航到相册页。

    1、添加视频样式css

    • 打开当前博客source\photos文件夹下的ins.css文件
    • 加入如下内容
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /* ====== video ===== */
     .video-container {
        z-index: 1;
        position: relative;
        padding-bottom: 56.25%;
        margin: 0 auto;
    }
    .video-container iframe, .video-container object, .video-container embed {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 7%;
        width: 85%;
        height: 85%;
        box-shadow: 0px 0px 20px 2px #888888;
    }

    2、添加视频

    • 我这里添加的是优酷上面的视频
    • 在当前博客source\photos文件夹下建立videos.ejs文件
    • 内容如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    ---
    layout: post
    slug: "photos"
    title: "相册"
    noDate: "true"
    comments: "true"
    reward: "true"
    open_in_new: false
    ---
    <link rel="stylesheet" href="./ins.css">
    <div class="photos-btn-wrap"><a class="photos-btn" href="/photos">Photos</a>
    <a class="photos-btn active" href="/photos/videos.html">Videos</a>
    </div>
    <center>
        <h1>指弹_女儿情</h1>
    </center>
    <hr/>
    <center>
        <div class="video-container">
            <iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjUzMzY4OTM3Ng==" frameborder=0 allowfullscreen></iframe>
        </div>
    </center>
    <hr/>
    <center>
        <h1>指弹_友谊地久天长</h1>
    </center>
    <hr/>
    <center>
        <div class="video-container">
            <iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjQ5MDExOTY2MA==" frameborder=0 allowfullscreen></iframe>
        </div>
    </center>
    <hr/>
    <center>
        <h1>指弹_Always with me</h1>
    </center>
    <hr/>
    <center>
        <div class="video-container">
            <iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjQ4MDQyNTQ0MA==" frameborder=0 allowfullscreen></iframe>
        </div>
    </center>

    3、修改\Hexo\source\photos\index.ejs的相册的超链接

    原来是<a class="photos-btn" href="#">Videos</a>，不修改是访问不了的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ---
    layout: post
    slug: "photos"
    title: "相册"
    noDate: "true"
    comments: "false"
    ---
    <link rel="stylesheet" href="./ins.css">
    <div class="photos-btn-wrap">
    <a class="photos-btn active" href="javascript:void(0)">Photos</a>
        <a class="photos-btn" href="/photos/videos.html">Videos</a>
    </div>
    ]]>     - - - - <p>主要是添加相册和视频功能，参考<a href="http://lawlite.me/2017/04/13/Hexo-Github%E5%AE%9E%E7%8E%B0%E7%9B%B8%E5%86%8C%E5%8A%9F%E8%83%BD/" target="_blank" rel="noopener">Hexo-Github实现相册功能</a> ，csdn博客：<a href="https://blog.csdn.net/u013082989/article/details/70162293" target="_blank" rel="noopener">Hexo+Github实现相册功能</a>，我看到网上好多人都是按照这个模板来实现的。<br> -效果图：<br> -<img src="https://s2.ax1x.com/2019/08/15/mV0P56.jpg" alt="mV0P56.jpg"></p> - - - - - - - - - -     - - - hexo+yilia添加百度统计和Google统计 - - https://www.yansheng.xyz/article/eda67a25.html - 2019-11-10T09:04:04.000Z - 2019-11-12T07:44:31.555Z - - 简介

    百度统计和Google统计主要用于分析网站数据：流量、访客量等。
    file

    需要注册账号，然后将代码（脚本）嵌入到网站中，然后在后台就会生成对应数据，然后进行分析。

    说明

    yilia主题已集成，位置如下，我们只需要在主题的配置文件中进行配置即可。

    • H:\Hexo\themes\yilia\layout\_partial\baidu-analytics.ejs
    • H:\Hexo\themes\yilia\layout\_partial\google-analytics.ejs

    配置

    H:\Hexo\themes\yilia\_config.yml原内容：

    1
    2
    3
    # Miscellaneous
    baidu_analytics: ''
    google_analytics: ''

    主要是配置对应的id即可（google_analytics的代码好像更新了，建议新建，使用新的代码）。

    百度

    网址生成的原代码（id是一串字符串，这里隐藏了）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?id";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>

    file

    对应的配置文件H:\Hexo\themes\yilia\layout\_partial\baidu-analytics.ejs:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <% if (theme.baidu_analytics){ %>
    <script>
    var _hmt = _hmt || [];
    (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?<%= theme.baidu_analytics %>";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
    })();
    </script>
    <% } %>

    Google全局网站代码 (gtag.js)

    我找了好久才找到代码，因此记录下：

    生成代码：控制台–>（左下角）管理–>管理–>（中间）媒体资源–>（中间）跟踪信息–>跟踪代码

    file

    这是针对此媒体资源的全局网站代码 (gtag.js) 跟踪代码。请复制此代码，并将其作为第一个项目粘贴到您要跟踪的每个网页的<HEAD> 标记中。如果您的网页上已经有全局网站代码，则只需将以下代码段中的 config 行添加到现有的全局网站代码。

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=ID"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'ID');
    </script>

    file

    对应的配置文件H:\Hexo\themes\yilia\layout\_partial\google_analytics.ejs:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <% if (theme.google_analytics){ %>
    <!-- Google Analytics -->
    <script type="text/javascript">
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', '<%= theme.google_analytics %>', 'auto');
    ga('send', 'pageview');

    </script>
    <!-- End Google Analytics -->
    <% } %>

    代码好像更新了，yilia主题自带的代码应该是旧的，更换为下面的：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <% if (theme.google_analytics){ %>
        <script async src="https://www.googletagmanager.com/gtag/js?id=<%= theme.google_analytics %>"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '<%= theme.google_analytics %>');
        </script>
    <% } %>
    <!-- End Google Analytics -->

    配置id

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    3
    # Miscellaneous(杂项):百度统计、Google统计
    baidu_analytics: '百度统计id'
    google_analytics: 'Google统计id'

    成功效果

    本地测试，F12打开控制台，没有报相关错误，而且在Sources-->Page有显示下面两个网站，说明配置成功了。过一段之间再去数据分析控制台查看，应该就会有数据。百度介绍说好像是20分钟就有数据了，我试了下，真有了，很快。google也立刻就有数据了。

    file

    说明

    Google虽然好，但是因为墙的原因，所以有时候可能会出现问题。

    参考：

    ]]>     - - - - <h3 id="简介">简介</h3> -<p>百度统计和Google统计主要用于分析网站数据：流量、访客量等。<br> -<img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1573478431897.png" alt="file"></p> -<p>需要注册账号，然后将代码（脚本）嵌入到网站中，然后在后台就会生成对应数据，然后进行分析。</p> -<ul> -<li>百度统计网址：<a href="https://tongji.baidu.com" target="_blank" rel="noopener">https://tongji.baidu.com</a></li> -<li>Google统计网址：<a href="https://analytics.google.com/analytics/web/" target="_blank" rel="noopener">https://analytics.google.com/analytics/web/</a></li> -</ul> - - - - - - - - - -     - - - hexo+yilia进行SEO优化 - - https://www.yansheng.xyz/article/c1217b1d.html - 2019-11-10T09:04:02.000Z - 2019-11-12T07:44:22.977Z - - 介绍

    SEO优化

    推广是一个烦人的事情，特别是对于我们搞技术的来说，可能就不擅长推广，那么怎么才能让别人知道我们呢，我们就要想办法让别人通过搜索就可以搜索到你博客的内容，给我们带来自然流量，这就需要seo优化,让我们的站点变得对搜索引擎友好。

    SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。

    百度收录

    参考：https://blog.csdn.net/linzhiqiang0316/article/details/89344595
    百度官方介绍：https://ziyuan.baidu.com/college/articleinfo?id=1504

    bug:提交推送链接后，百度好像有延迟，你不能立即看到提交数据的变化，我的是过几天后才有数据的。

    如何选择链接提交方式 ？

    1. 手动提交：一次性提交链接给百度，可以使用此种方式。
    2. 自动提交（虽然这种方式各有千秋，但是百度推荐全用上，全面一点！）：
      2.1 主动推送（实时）：最为快速的提交方式，推荐您将站点当天新产出链接立即通过此方式推送给百度，以保证新链接可以及时被百度收录。
      2.2 自动推送：最为便捷的提交方式，请将自动推送的JS代码部署在站点的每一个页面源代码中，部署代码的页面在每次被浏览时，链接会被自动推送给百度。可以与主动推送配合使用。
      2.3 sitemap：您可以定期将网站链接放到sitemap中，然后将sitemap提交给百度。百度会周期性的抓取检查您提交的sitemap，对其中的链接进行处理，但收录速度慢于主动推送。

    设置推送

    站长平台：https://ziyuan.baidu.com

    前提：注册百度，添加站点、验证站点。

    注意：使用HTML进行验证的话，要保证该文件上传到网站后是一模一样的，即不然被渲染和压缩，跳过渲染可以再HTML文件前面加入下面的内容；跳过压缩因插件而异。跳过该HTML文件。

    1
    2
    3
    ---
    layout: false
    ---

    验证成功就能在百度找到你的网站了,如site:www.yansheng.xyz，不过百度好像没有那么快，可能需要一两天。

    主动推送

    参考：Hexo插件之百度主动提交链接

    前提：获得秘钥

    您得注册百度站长工具，然后在**（标题栏）网站支持->数据引入->链接提交**里找到你的密匙。
    img

    添加插件hexo-baidu-url-submit

    该插件github网址：https://github.com/huiwang/hexo-baidu-url-submit

    首先，在Hexo根目录下，安装本插件：
    npm install hexo-baidu-url-submit --save

    配置“百度主动推送”

    然后，同样在根目录下，把以下内容配置到_config.yml文件中:

    1
    2
    3
    4
    5
    6
    # 百度主动推送
    baidu_url_submit:
      count: 1 ## 提交最新的一个链接
      host: www.hui-wang.info ## 在百度站长平台中注册的域名
      token: your_token ## 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
      path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里

    其次，记得查看_config.yml文件中url的值， 必须包含是百度站长平台注册的域名（一般有www）， 比如:

    1
    2
    # URL
    url: http://www.hui-wang.info

    最后，加入新的deployer:

    1
    2
    3
    4
    deploy:
    - type: s3 ## 这是我原来的deployer
      bucket: hui-wang.info
    - type: baidu_url_submitter ## 这是新加的

    注意：上面是官方的文档，而实际上应该要这样，可参考我的：

    1
    2
    3
    4
    5
    6
    7
    8
    deploy:
    - type: git
      repository: 
         github: https://github.com/yansheng836/yansheng836.github.io.git
         coding: https://git.dev.tencent.com/yansheng836/yansheng836.coding.me.git
      branch: master
      # 发布时，同时进行百度推送
    - type: baidu_url_submitter

    因为不是有两个deploy，要放在一起。

    如何进行推送

    执行hexo deploy的时候，新的连接就会被推送了。如下图

    mnv2AU.jpg

    查看官网信息(如下所示)我们可以知道这是推送成功了。

    补充：官网信息查看方式**(标题栏)网站支持->数据引入->链接提交->自动提交->主动推送**，在下面就有推送成功的信息（如下）。

    1
    2
    3
    4
    5
    6
    7
    #成功返回示例：
    {
        "remain":4999998,
        "success":2,
        "not_same_site":[],
        "not_valid":[]
    }

    重新生成后，我们可以发现在public\目录下生成有baidu_urls.txt里面的就是推送的链接。

    自动推送

    参考：https://purewhite.io/2017/04/29/hexo-baidu-url-submit/

    https://github.com/JoeyBling/hexo-theme-yilia-plus/commit/c1215e132f6d5621c5fea83d3c4f7ccbcca074a3

    1.在配置H:\Hexo\themes\yilia\_config.yml中开启功能：

    1
    2
    3
    # 开启百度站长平台自动推送(https://ziyuan.baidu.com/linksubmit/index)
    # 页面被访问了，就会被推送过去。
    baidu_push: true

    2.新建H:\Hexo\themes\yilia\layout\_partial\baidu-push.ejs：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <% if (theme.baidu_push){ %>
    <!-- 开启百度站长平台自动推送https://ziyuan.baidu.com/linksubmit/index，
    https://ziyuan.baidu.com/college/courseinfo?id=267&page=2#h2_article_title19-->
    <script>
      (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
          bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
          bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
      })();
    </script>
    <% } %>

    3.在H:\Hexo\themes\yilia\layout\_partial\head.ejs的</head>前引入脚本：

    1
    2
    3
    <!--百度自动推送-->
    <%- partial('baidu-push') %>
    </head>

    sitemap

    参考博客:https://purewhite.io/2017/04/29/hexo-baidu-url-submit/

    我们使用 hexo generator-baidu-sitemap这个插件，github：https://github.com/coneycode/hexo-generator-baidu-sitemap

    或者使用这个插件：https://github.com/ludoviclefevre/hexo-generator-seo-friendly-sitemap:它将为页面，帖子，类别，标签和XSL样式表生成单独的站点地图文件。

    安装hexo generator-baidu-sitemap插件
    1
    2
    3
    4
    5
    #if your hexo version is 2.x.x, you should install as follow:
    $ npm install hexo-generator-baidu-sitemap@0.0.8 --save

    #if version is 3.x.x, you should install as follow:
    $ npm install hexo-generator-baidu-sitemap --save
    然后在_config.yml 里面配置一下：
    1
    2
    baidusitemap:
      path: baidusitemap.xml

    hexo g后，会在public\目录下生成站点文件baidusitemap.xml。

    百度站长平台设置

    之后去百度站长平台提交一下 sitemap 的路径就好，一般都是 www.example.com/baidusitemap.xml，一段时间后，去百度搜索相关信息就会出现这些网页。

    效果

    在站长平台可以看到链接提交数量，如：

    file

    Google收录

    和百度类似。

    添加网站、验证

    登录Google账号，打开搜索控制台：https://search.google.com/search-console，添加你的网站，需要验证网站，它那里会提供几种验证方式，我是用HTML，下载它的HTML文件，将它添加到你的网站根目录下，然后点击验证。

    **注意：**使用HTML进行验证的话，要保证该文件上传到网站后是一模一样的，即不然被渲染和压缩，跳过渲染可以再HTML文件前面加入下面的内容，跳过压缩因插件而异。

    1
    2
    3
    ---
    layout: false
    ---

    验证成功很快就能再Google找到你的网站了,如site:www.yansheng.xyz。

    安装hexo-generator-sitemap插件

    提交sitemap，上面使用的是百度特有的sitemap，Google识别不了，所以使用通用sitemap生成器hexo-generator-sitemap：https://github.com/hexojs/hexo-generator-sitemap

    1
    npm install hexo-generator-sitemap --save

    配置_config.yml

    1
    2
    sitemap:
        path: sitemap.xml

    重新生成，会在根目录下生成sitemap.xml文件，发布后，就可以在google控制台提交这个sitemap了。

    效果

    file

    补充

    SEO只负责提交网站的索引量、访问量，具体数据可以通过添加百度分析和google分析来参看。可参考：hexo+yilia添加百度统计和Google统计

    ]]>     - - - - <h2 id="介绍">介绍</h2> -<h3 id="seo优化">SEO优化</h3> -<p>推广是一个烦人的事情，特别是对于我们搞技术的来说，可能就不擅长推广，那么怎么才能让别人知道我们呢，我们就要想办法让别人通过搜索就可以搜索到你博客的内容，给我们带来自然流量，这就需要seo优化,让我们的站点变得对搜索引擎友好。</p> -<blockquote> -<p>SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。</p> -</blockquote> - - - - - - - - - -     - - - hexo+yilia添加URL持久化 - - https://www.yansheng.xyz/article/faa5d14.html - 2019-11-10T09:04:00.000Z - 2019-11-12T07:44:01.575Z - - URL持久化

    参考：你的Hexo博客SEO优化了吗？

    我们可以发现hexo默认生成的文章地址路径是 【网站名称／年／月／日／文章名称】。比如这篇博客：
    http://localhost:4000/2019/11/10/hexo+yilia添加URL持久化
    这种链接对搜索爬虫是很不友好的，第一它的url结构超过了三层，太深了。第二使用了中文路径。这样会导致一个问题，在某些聊天工具或分享链接的时候会造成url转码变成很长一串难以读写的链接。而且如果你的页面之前被收录或被转载后，当你再次编辑过后可能会造成之前的url失效带来不必要的404, 比如下面这样：
    http://localhost:4000/article/faa5d14。别担心，我们有好办法来解决它。

    第一种方式：

    打开_config.yml配置文件，找到permalink

    1
    2
    3
    #permalink: :year/:month/:day/:title/ 注释掉
    # 改为下面这样
    permalink:   /article/:title.html

    上面这种方式是去掉了年月日，保持网站最多三层。

    第二种方式：(推荐)

    安装 hexo-abbrlink插件：

    1
    npm install hexo-abbrlink --save

    配置_config.yml，查找permalink，修改成这样：

    1
    2
    3
    4
    5
    # permalink: :title/  将之前的注释掉
    permalink: article/:abbrlink.html
    abbrlink:
      alg: crc32  # 算法：crc16(default) and crc32
      rep: hex    # 进制：dec(default) and hex

    安装后的网址：http://localhost:4000/article/c5f6d65b.html

    注意：配置成功需要重新生成文件hexo clean,hexo g，不然会出现undefined的问题，如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    $ npm install hexo-abbrlink --save
    npm WARN babel-eslint@10.0.2 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    + hexo-abbrlink@2.0.5
    added 15 packages from 13 contributors and audited 26333 packages in 27.509s
    found 21 vulnerabilities (8 low, 6 moderate, 6 high, 1 critical)
      run `npm audit fix` to fix them, or `npm audit` for details

    yansheng@MECHREVO MINGW64 /h/Hexo (blog)
    $ hexo s
    (node:1612) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
    INFO  Start processing
    INFO  Generating Baidu urls for last 100 posts
    INFO  Posts urls generated in baidu_urls.txt
    https://yansheng836.github.io/archives/undefined.html
    https://yansheng836.github.io/archives/undefined.html
    https://yansheng836.github.io/archives/undefined.html
    https://yansheng836.github.io/archives/undefined.html
    https://yansheng836.github.io/archives/undefined.html
    https://yansheng836.github.io/archives/undefined.html

    INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

    弊端

    其实使用这个也有弊端：

    • 按照原格式，发布后，在github仓库中你能很清楚的看到你写博客的日期，因为是按照网址分文件夹的。使用该插件后就看不到了。
      file

    分类和标签路径名英文化

    上面我们已经实现将文章的URL简短化和英文化了，但是如果我们的标签和分类有中文，这个插件是控制不了的，

    如有个生活的标签，该标签下的所有文章汇总如下：http://localhost:4000/tags/生活/，还是会出现中文，其实这个问题hexo官方自带解决方法，详见：https://hexo.io/zh-cn/docs/configuration.html#%E5%88%86%E7%B1%BB-amp-%E6%A0%87%E7%AD%BE

    截个图：
    image

    站点的配置文件有category_map和tag_map配置，即分类和标签的别名（映射），举个例子：

    1
    2
    3
    4
    5
    6
    # Category & Tag
    default_category: uncategorized
    category_map:
        编程: programming
    tag_map:
        生活: life

    这样标签生活的访问网址为：http://localhost:4000/tags/life/，分类同理。

    参考：https://yq.aliyun.com/articles/8607?spm=0.0.0.0.TP5ICj

    ]]>     - - - - <h2 id="url持久化">URL持久化</h2> -<p>参考：<a href="http://www.apkbus.com/blog-889706-76401.html" target="_blank" rel="noopener">你的Hexo博客SEO优化了吗？</a></p> -<p>我们可以发现hexo默认生成的文章地址路径是 【网站名称／年／月／日／文章名称】。比如这篇博客：<br> -<a href="http://localhost:4000/2019/11/10/hexo+yilia%E6%B7%BB%E5%8A%A0URL%E6%8C%81%E4%B9%85%E5%8C%96" target="_blank" rel="noopener">http://localhost:4000/2019/11/10/hexo+yilia添加URL持久化</a><br> -这种链接对搜索爬虫是很不友好的，第一它的url结构超过了三层，太深了。第二使用了中文路径。这样会导致一个问题，在某些聊天工具或分享链接的时候会造成url转码变成很长一串难以读写的链接。而且如果你的页面之前被收录或被转载后，当你再次编辑过后可能会造成之前的url失效带来不必要的404, 比如下面这样：<br> -<a href="http://localhost:4000/article/faa5d14.html" target="_blank" rel="noopener">http://localhost:4000/article/faa5d14</a>。别担心，我们有好办法来解决它。</p> - - - - - - - - - -     - - - 建站日志 - - https://www.yansheng.xyz/article/e62c38c4.html - 2019-11-09T16:15:19.000Z - 2020-01-01T14:53:37.598Z - - 记录hexo+yilia博客建立过程

    博客截图

    特别说明

    该篇博客仅用于记录博客搭建过程。因为这篇文章是后面补的，不是同步进行的，所以有些内容可能有所修改，可能还会存在错误。如需借鉴，仅供参考，如果出现问题可以在文末提问，我知无不言。

    前期添加的功能都使用git进行管理，在文中放了对应提交的链接，所以就没有怎么写博客；后面使用另一个私有仓库存放博客配置和源码，因此后期的功能没有在文章中放链接，但是有写博客，可以到博客中搜索。

    统一说明：在配置文件中，开启配置一般设置为true,关闭为false，因为有些功能我可能暂时不需要可能设置为false了，因此也可能不能在我的博客中预览效果。

    2019年11月10日

    • 添加hexo-yilia系列博客。

    2019年11月9日

    • 修复APlayer播放器的bug。更新音乐。
    • 添加功能标签tag，更新CHANGELOG.md。
    • 添加8个背景特效。
    • 修改背景图片（压缩后生成至阿里云OSS）。

    2019年11月8日

    • 添加按钮，实现缩小左侧边栏的效果。
    • 添加背景图片。（同时可能设置到需要修改很多样式问题）

    2019年11月7日

    • URL持久化，使用简短的URL。
    • 更新关键字和描述。
    • 替换渲染引擎，支持表情。

    2019年11月6日

    • 修改’展开全文’的按钮的样式。
    • 使用clipboard.js实现复制代码块的功能。
    • 添加爬虫协议robots.txt。
    • 添加百度分析和google分析。

    2019年11月5日

    • 修改部分样式。
    • 替换APlayer音乐的音乐外链为自己七牛云的外链。
    • 添加utteranc评论系统。

    2019年11月4日

    • 添加网站运行时间，如：本站已安全运行 101 天 12 小时 13 分 41 秒。
    • 添加ICP备案号，如：粤ICP备00000000号。
    • 修改一些超链接的样式。
    • 添加看板娘：Live2D。

    2019年11月3日

    • 修复底部建站时间（配置关键字’since’）无效的问题：如配置since: 2019，应该显示@2018-2019。

    2019年11月2日

    • 添加 APlayer音乐播放器。
    • 修改超链接和引用块的样式。

    2019年10月30日

    1. 修改代码块的样式。
    2. 修改文章内的超链接的样式。
    3. 修改分类页面的标题的样式。

    https://github.com/yansheng836/yansheng836.github.io/commit/ddbabc0689f66618810e17e8d0d3ac1a885cb815

    2019年10月18日

    2019年10月17日

    2019年8月20日

    2019年8月17日

    2019年8月16日

    • 为博客添加valine评论。v1.0.2

    2019年8月15日

    2019年7月29日

    • 为头像增加旋转效果：当鼠标悬浮到头像时，头像旋转一圈。v0.1.8
    • 安装hexo-admin插件：hexo-admin是一个hexo博客引擎的管理用户界面插件，左边编写博客、右边预览效果。v0.1.9

    2019年7月27日

    • 添加背景音乐：侧边栏添加（网易云链接的）背景音乐。v0.1.6
    • 为博客设置404页面。v0.1.7

    2019年7月26日

    • 添加“不蒜子”访问量统计功能。v0.1.4
    • 设置文章置顶功能：默认的设置是按照时间进行排序，时间越后面顺序越往前；修改后可通过在文章中设置top属性设置文章置顶顺序，top值越大顺序越往前。v0.1.5

    2019年7月25日

    • 建站，配置yilia主题的基本信息。主要是用自己的个人信息替换主题模板的信息，如网站、网址、标签、菜单、子导航栏、网站图标、社交关系SubNav图标等。
    • 处理“标签不能正常显示的问题”。
    • 增加侧边导航栏的SubNav图标。v0.1.1
    • 新增侧边栏归档、分类、标签内容。存在bug（归档可以，但是分类和标签无效）。v0.1.2
    • 设置建站时间（有bug，无效）。
    • 添加字数统计和阅读时长功能。v0.1.3

    2019年7月22日

    初次建站，忘记有个什么东西弄错了，但是没有办法恢复，即使hexo是使用Git进行管理的，只能是重新开始。（不能恢复的原因详见下文的master分支的介绍。）

    研究一番后，得出一个结论：备份，备份，备份！！！

    推荐两种备份方法：

    1. 一个GitHub仓库，两个分支：一个分支存放hexo博客源码和配置，另一分支存放发布后的HTML网页。
    2. 两个GitHub仓库：一个仓库存放hexo博客源码和配置（如果需要(比如有私密信息)，可以将该仓库设置私有仓库），另一仓库存放发布后的HTML网页。

    我采用第一种方式：

    ]]>     - - - - <p>记录hexo+yilia博客建立过程</p> -<p><img src="https://oss.yansheng.xyz/img/%E5%8D%9A%E5%AE%A2%E4%B8%BB%E9%A1%B5%E6%88%AA%E5%9B%BE-20191112160122.jpg" alt="博客截图"></p> - - - - - - - - - -     - - - hexo+yilia的标签和分类的区别 - - https://www.yansheng.xyz/article/5026011a.html - 2019-11-08T12:41:24.000Z - 2019-11-10T08:43:54.585Z - - 测试标签和分类的区别

    重点：分类是有层级关系的，而标签没有。因此如何将分类显示出来也是比较麻烦的，暂时为实现。
    下面主要看分类：

    引用自官方文档：https://hexo.io/zh-cn/docs/front-matter#JSON-Front-matter

    分类方法的分歧

    如果您有过使用 WordPress 的经验，就很容易误解 Hexo 的分类方式。WordPress 支持对一篇文章设置多个分类，而且这些分类可以是同级的，也可以是父子分类。但是 Hexo 不支持指定多个同级分类。下面的指定方法：

    1
    2
    3
    categories:
      - Diary
      - Life

    会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

    如果你需要为文章添加多个分类，可以尝试以下 list 中的方法。

    1
    2
    3
    4
    categories:
    - [Diary, PlayStation]
    - [Diary, Games]
    - [Life]

    此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。

    ]]>     - - - - <p>测试标签和分类的区别</p> - - - - - - - - - - - - - - - - - - - -     - - - hexo+yilia集成utteranc评论系统 - - https://www.yansheng.xyz/article/c5f6d65b.html - 2019-11-05T08:46:57.000Z - 2019-11-12T07:46:13.349Z - - hexo+yilia集成utteranc评论系统

    utteranc评论系统是基于GitHub issues的，类似Gitment/Git talk。

    file

    前言

    博客的评论系统还是挺多的，但是也死了挺多的，下面就简单介绍下。(注：以下数据多来自网络，可能存在错误。)

    第一类：已暂停服务的

    • 多说：已于2017年6月1日正式关停服务。
    • 网易云跟帖（网易第三方评论系统）：已于2017年8月1日停止服务。
    • 友言：2018年4月30日停止了服务。

    第二类：第三方，还可以使用的

    • 畅言（搜狐）：畅言是需要备案的，不备案会有15天的试用期。
    • Disqus：听说广告有点多。
    • 来比力（韩国）：挺好的，就是国外的，有点慢，可能会加载不出来。
    • Valine ：国内后端云服务提供商 LeanCloud 提供的评论系统。Valine 的特点：
      • 无后端实现
      • 高速，使用国内后端云服务提供商 LeanCloud 提供的存储服务
      • 开源，自定义程度高
      • 支持邮件通知
      • 支持验证码
      • 支持 Markdown
      • 头像可选择

    第三类：GitHub相关的

    • giteement：基于码云的评论系统，详见：https://gitee.com/zhousiwei/giteement。
    • Gitment/Git talk：基于GitHub issue的评论系统，使用Github Application，问题多，好像只能适配一个网站，不适合多网站发布。好像主要是这两个参数的设置：Homepage URL是你的仓库的名字;Authorization callback URL:网站地址，如果你指向了新的域名就填网站主页地址，如我的https://www.yansheng.xyz；否则写仓库的名字应该也可以（不确定，没使用过）。
    • utteranc：基于GitHub issue的评论系统，官网：https://utteranc.es/，详见下文。

    如需了解更多，可参考下面链接：

    utterances

    介绍

    一个机器人utterances bot，好像是2017年开工的，2018开始火（769star）,2019大热了（截止发文，2878star）。

    网址：https://utteranc.es/，下面是官网的介绍：

    A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!

    • Open source. 🙌
    • No tracking, no ads, always free. 📡🚫
    • No lock-in. All data stored in GitHub issues. 🔓
    • Styled with Primer, the css toolkit that powers GitHub. 💅
    • Dark theme. 🌘
    • Lightweight. Vanilla TypeScript. No font downloads, JavaScript frameworks or polyfills for evergreen browsers. 🐦🌲

    当有人评论时，自动在指定仓库创建一个issues，用于评论。（issues名可指定为多种形式）

    使用

    网上找的好像都是使用next主题的，如

    没有找到相同的，只能自己摸索了。

    1.安装应用

    安装utterances应用，网址 https://github.com/apps/utterances ，设置指定仓库即可。

    2.配置基本参数

    官方（主页）其实自带教程，配置相关参数，生成脚本如下：

    1
    2
    3
    4
    5
    6
    7
    <script src="https://utteranc.es/client.js"
            repo="yansheng836/yansheng836.github.io"
            issue-term="title"
            theme="github-light"
            crossorigin="anonymous"
            async>
    </script>

    解释一下主要参数：

    • repo：存放评论的issues的仓库名（即步骤1指定访问的仓库），可以和博客相同，也可以不同。
    • issue-term：指定issues的标题，title表示使用文章的标题作为issues的标题。可选参数（只介绍部分）：
    • theme：评论系统的主题，在Theme里面，选择主题，页面会变色：https://utteranc.es/#heading-theme
      github-light
      file
      github-dark
      file

    3.hexo+yilia配置

    直接嵌入

    修改：H:\Hexo\themes\yilia\layout\_partial\article.ejs，在博客评论系统代码附近，添加如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!-- 《utteranc评论：基于github issue的评论系统 -->
    <div>
        <section id="comments" class="comments">
          <style>
            .utterances{max-width: 100%;}
          </style>
            <script src="https://utteranc.es/client.js"
                    repo="yansheng836/yansheng836.github.io"
                    issue-term="title"
                    theme="github-light"
                    crossorigin="anonymous"
                    async>
            </script>
      </section>
    </div>
    <!-- utteranc评论》 -->

    在官网也有介绍到:Customize the layout using the.utterancesand.utterances-frameselectors.，如果需要控制样式，可以通过这两个选择器。因为指定了.utterances{max-width: 750px;}，我试了下，在yilia主题下，宽度不能充满评论区域，所以进行了调整。

    灵活嵌入

    可主题的配置文件中进行配置

    1
    2
    3
    4
    5
    6
    #7.utteranc评论： https://utteranc.es (参数配置详见主页)
    utterance:
      enable: true
      repo: 'yansheng836/yansheng836.github.io'     #仓库名字,格式：你的用户ID/仓库名称，如：blog/utterance_repo
      issue_term: 'title'            #映射配置
      theme: 'github-light'          #主题

    修改：H:\Hexo\themes\yilia\layout\_partial\article.ejs，在博客评论系统代码附近，添加如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!-- 《utteranc评论：基于github issue的评论系统 -->
    <% if (theme.utterance && theme.utterance.enable){ %>
        <section id="comments" class="comments">
          <style>
            .utterances{max-width: 100%;}
          </style>
            <script src="https://utteranc.es/client.js"
                    repo="<%= theme.utterance.repo %>"
                    issue-term="<%= theme.utterance.issue_term %>"
                    theme="<%= theme.utterance.theme %>"
                    crossorigin="anonymous"
                    async>
            </script>
      </section>
    <% } %>
    <!-- utteranc评论》 -->
    ]]>     - - - - <h2 id="hexo-yilia集成utteranc评论系统">hexo+yilia集成utteranc评论系统</h2> -<p>utteranc评论系统是基于GitHub issues的，类似Gitment/Git talk。</p> -<p><img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1572960972843.png" alt="file"> - - - - - - - - - -     - - - hexo+yilia添加valine评论系统 - - https://www.yansheng.xyz/article/658be5fc.html - 2019-08-16T13:52:21.000Z - 2019-11-10T08:31:57.446Z - - hexo+yilia添加valine评论系统

    mmDUS0.jpg

    参考链接

    1.注册leancloud

    到官网：https://leancloud.cn，注册一个账号，然后创建应用，名字可以随意。然后会生成一个应用，有对应的APP ID，APP KEY，在设置>应用key可以查看。

    2.hexo设置

    2.1 在博客主题文件中添加评论设置

    在H:\Hexo\themes\yilia\_config.yml大概在#5、Gitment后面添加valine设置，内容如下（注意把里面的APP ID，APP KEY换成自己应用中的信息）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    #6、Valine https://valine.js.org
    valine: 
     appid: 'APP ID'  #Leancloud应用的appId
     appkey: 'APP KEY'  #Leancloud应用的appKey
     verify: false #验证码
     notify: false #评论回复提醒
     avatar: retro #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
     #头像类型可见： https://valine.js.org/avatar.html
     placeholder: Just go go #评论框占位符

    2.2 为article.ejs添加valine评论

    在H:\Hexo\themes\yilia\layout\_partial\article.ejs中搜索这行代码<% if (!index && post.comments){ %>，在其后面添加代码：(这个代码是有响应式的)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
        <section id="comments" class="comments">
          <style>
            .comments{margin:30px;padding:10px;background:#fff}
            @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
          </style>
          <%- partial('post/valine', {
            key: post.slug,
            title: post.title,
            url: config.url+url_for(post.path)
            }) %>
      </section>
    <% } %>

    2.3 新建文件valine.ejs

    新建文件H:\Hexo\themes\yilia\layout\_partial\post\valine.ejs，内容为：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div id="vcomment" class="comment"></div> 
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
    <script>
       var notify = '<%= theme.valine.notify %>' == true ? true : false;
       var verify = '<%= theme.valine.verify %>' == true ? true : false;
        window.onload = function() {
            new Valine({
                el: '.comment',
                notify: notify,
                verify: verify,
                app_id: "<%= theme.valine.appid %>",
                app_key: "<%= theme.valine.appkey %>",
                placeholder: "<%= theme.valine.placeholder %>",
                avatar:"<%= theme.valine.avatar %>"
            });
        }
    </script>

    3.生成发布

    1
    2
    hexo g
    hexo s  #本地可以预览效果，或者hexo d

    4.后台查看数据

    应用>存储>comment

    注意：这里还要设置一下web安全域名，位置：应用>设置>安全中心>Web安全域名

    5.升级

    5.1头像设置

    可切换多种头像，请看下面代码：

    1
    2
    avatar: retro #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
     #头像类型可见： https://valine.js.org/avatar.html

    5.2验证码

    这个比较多争议，官网是说：“由于是无后端的评论系统，验证工作也就只能在前端做，体验上可能不会太优雅。

    验证码默认是关闭的，如果你觉得太烦人或者太反人类，那就请不要打开。”

    5.3邮箱验证

    这个我暂时也不知道怎么设置。

    ]]>     - - - - <p>hexo+yilia添加valine评论系统</p> -<p><img src="https://s2.ax1x.com/2019/08/16/mmDUS0.jpg" alt="mmDUS0.jpg"></p> - - - - - - - - - -     - - - 2016十大校花排行榜，美翻了 - - https://www.yansheng.xyz/article/6216745.html - 2019-08-13T07:06:45.000Z - 2019-11-06T15:44:49.400Z - - 根据教育君长期收集的资料，总结了一份全国十大高校校花的花名册。
    图片太美，惹人心醉。大家看之前控制好自己的情绪。

    鞠婧祎

    武汉大学校花——樱花

    武汉大学的樱园是出了名的美，不少电影电视剧前去取景。

    img

    北京大学校花——荷花

    北大未名湖里的荷花，出淤泥而不染，濯清涟而不妖。

    img

    清华大学校花——丁香花

    你说你最爱丁香花，因为你的名字就是她。

    img

    天津外国语大学校花——玉兰花

    雪白的玉兰花正如同天外校园里那一袭白裙的女生们，不艳丽却分外出彩。

    img

    中山大学校花——木棉花

    木棉喜怒按在南方，北方的爷们，是否会喜爱这朵来自南方的姑娘。

    img

    哈尔滨工业大学校花——杜鹃花

    不怕冷，傲娇，杜鹃花就是如此要强。

    img

    湖南大学校花——芙蓉花

    吸烟的朋友都会知道，有一款香烟叫芙蓉王。

    img

    福州大学校花——蝴蝶兰

    此花虽美，却也娇气的出奇。

    img

    浙江大学校花——栀子花

    栀子花开呀开，栀子花开呀开，栀子花开呀开，栀子花开呀开。

    img

    复旦大学校花——海棠花

    投我以木桃，报之以琼瑶;匪报也，永以为好也!投我以木李，报之以琼玖;匪报也，永以为好也!

    img

    转自：http://mini.eastday.com/mobile/170102070337255.html

    ]]>     - - - - <p>根据教育君长期收集的资料，总结了一份全国十大高校校花的花名册。<br> -图片太美，惹人心醉。大家看之前控制好自己的情绪。</p> -<p><a href="https://imgchr.com/i/mPalbF" target="_blank" rel="noopener"><img src="https://s2.ax1x.com/2019/08/13/mPalbF.th.jpg" alt="鞠婧祎"></a></p> - - - - - - - -     - - - 文件对比软件:Beyond Compare 4-破解方法 - - https://www.yansheng.xyz/article/660ecf00.html - 2019-07-30T13:55:49.000Z - 2019-11-12T08:00:27.688Z - - Beyond Compare允许您快速轻松地比较文件和文件夹。通过使用简单，强大的命令，您可以专注于您感兴趣的差异，并忽略那些您不感兴趣的差异。然后，您可以合并更改，同步文件并生成记录报告。
    很强大的一个文本比较工具（、文件夹……好像啥都行），用过就会爱不释手。
    file

    介绍

    主页：https://www.scootersoftware.com/index.php
    具体功能介绍：https://www.scootersoftware.com/features.php?zz=features_focused
    下载页面：https://www.scootersoftware.com/download.php
    下载步骤如下：
    img

    0、补一波注册码：（2019年7月5日）

    我之前找过一些注册码但是都失效了（下文也说过），但是最近偶然找到这个真的是牛，之前是一个账号只能一个人用，这个可以同时支持9999！有图有真相：

    img

    注意下这里提供了两种的注册码bc3和bc4，按需自取，每个小点即为一个注册码，例如：下面bc3的第一个注册码(即你需要复制的内容)为：

    — BEGIN LICENSE KEY —
    +WzZmc9nOhf6Nq6UZrdlTiyRwwkF0g0kc7Qi1m8u4W70MKkkGmx8GCAfApSsGZWmnyb-DxvqT4hWqmxDqP96NU
    — END LICENSE KEY —–

    输入秘钥步骤也很简单：（软件上面菜单栏）帮助–>输入密码–>把注册码直接复制进去–>注意要勾选“针对所有用户注册”–>确定–>重启。

    // Universal Unlock Keys //

    • for Beyond Compare v3.x.x on Win/Mac/Linux:

      • — BEGIN LICENSE KEY —
        +WzZmc9nOhf6Nq6UZrdlTiyRwwkF0g0kc7Qi1m8u4W70MKkkGmx8GCAfApSsGZWmnyb-DxvqT4hWqmxDqP96NU
        — END LICENSE KEY —–

    • — BEGIN LICENSE KEY —
      KkSCJ2mU2A5bC4PJBxcZuLPp6HcOvLW0N97IdgEpNl+TqMfhtGEYEZEGXoAjYDwH-aI88DuxPWiUtxkhOoyGWU
      — END LICENSE KEY —–

    • — BEGIN LICENSE KEY —
      nH3s9i9zmBiRjkoPALth4x97WARK9nb-qbp4q3LemOPJ4EtsYjWhTbR8VhauOSAluBJVvxV4kEc5waolW1m7B7JzJXE6YVapYW7f+tRRXRFI4yn4NjjZ0RiiqGRCTVzwComUcXB-eiFWRBY6JpSsCNkmIxL5KsRCo442djHhTZE+
      — END LICENSE KEY —–

    • — BEGIN LICENSE KEY —
      Vf5EsE8iQYtXQxeG46emmFmWioaxoyQt8qSioqZ6q3K86JnfjJ9IAjXZMA8AuHD
      +932+OIqXOKwcOupap+MONdJzJXE6YVapYW7f+tRRXRFI4yn4NjjZ0RiiqGRCTVz

      wComUcXB-eiFWRBY6JpSsCNkmIxL5KsRCo442djHhTZE+
      — END LICENSE KEY —–

      • — BEGIN LICENSE KEY —
        gQKdhUEz-lQ3eol25s7vt5UamLLDeu+t6Ud+OWz8ULka40y71BYSDyC8drGILcz01

      +rvSpRpgOjCKj6N93VUKtJzJXE6YVapYW7f+tRRXRFI4yn4NjjZ0RiiqGRCTVzwComUcXB-eiFWRBY6JpSsCNkmIxL5KsRCo442djHhTZE+
      — END LICENSE KEY —–

    • for Beyond Compare v4.x.x on Win/Mac/Linux:

      • — BEGIN LICENSE KEY —
        L+wNGHgqTtetFnWpzTyfCIsnGMJOaPjZRTwdNyY9jMv1zzHpRQHFX-YaSqfNgijG-qufcsJpzGlhQZ+J8GyYkz8vC0Z54YIMCNrpEr5sXQZG3Ae9SYFUiNgaUpRE3K0ETY3go

      NvnJ8LvALwVgCbgj+E2DsK88L+zzLdqRze5yrwNMS+NtnQucM0EOjeC9mhUnyLZqB4x3W1iDwcYCKhFnZSSM7Fb+BMPbe-SBnToqnk4aNJ1hxanlk+rH8iYHh8RrGFkHiSV6QCS+5UBs28gGGYq-Yo1HwQsCI-KSpLJpGGuz+EyTcCz9r8v1uThuNbuWhX0ZNZR0DrmjC+obgg4-k++
      — END LICENSE KEY —–

    • — BEGIN LICENSE KEY —
      H1bJTd2SauPv5Garuaq0Ig43uqq5NJOEw94wxdZTpU-pFB9GmyPk677gJ
      vC1Ro6sbAvKR4pVwtxdCfuoZDb6hJ5bVQKqlfihJfSYZt-xVrVU27+0Ja
      hFbqTmYskatMTgPyjvv99CF2Te8ec+Ys2SPxyZAF0YwOCNOWmsyqN5y9t
      q2Kw2pjoiDs5gIH-uw5U49JzOB6otS7kThBJE-H9A76u4uUvR8DKb+VcB
      rWu5qSJGEnbsXNfJdq5L2D8QgRdV-sXHp2A-7j1X2n4WIISvU1V9koIyS
      NisHFBTcWJS0sC5BTFwrtfLEE9lEwz2bxHQpWJiu12ZeKpi+7oUSqebX+
      — END LICENSE KEY —–

    • — BEGIN LICENSE KEY —
      8QP7zlhDPb+aoFyysKK68NwROgI0+mNV1pEhPK2CQF95zYrEF9gvL8TfR
      moO+BiBoJu1T4g-3i0lpQ1BytfO7QL4jnXU-G18UuzNCGL3JtqLxJghs2
      2gzB5VZnYKQfXfYZG2LL-Vjl43k4Pili1DCBCXsMm3xei6VKeiw4eWFwJ
      A91xx0gngBUWCpK4GvKSEW0VNqCwECuLUXMie2MMogTmySJ6Xn7Rf2rgy
      3wqgxExgQWVCVbdD7e3phco7vt2xTH2m0qJEoFN3HVf9l5PWQCO3JflvS
      CSmQYw+ZkpFcZtfH3EPZBAkfjMEbbTwOTNJT-PTixf2619csMbgIn+M5E
      ++
      — END LICENSE KEY —–

    转自：BEYOND COMPARE – INTELLIGENT AND ALL-ROUND COMPARISON FOR FILES & FOLDERS

    因为这个软件是付费的，试用30天后需要购买注册码，我们一般都会去网上找别人分享的注册码，但是好像不知道怎么回事会失效（我找的就失效了……）。这里介绍几个我找到的几种破解方法：（这里以bc4为例，bc3的话注意修改一下对应路径）

    1、删除指定文件夹内容：（亲测可用）

    img
    **C:\Users\Administrator\AppData\Roaming\Scooter Software\Beyond Compare 4\**

    删除上面文件夹的全部内容。

    注意一下那个路径，如果没有Administrator的话说明不是用的默认用户，找自己的用户名下的对应文件夹也一样的。

    参考：https://blog.csdn.net/ghd602338792/article/details/85700014

    2、删除对应注册表

    （1）在（文件资源管理器，即此电脑）搜索栏中输入 regedit（或者用命令行打开：win+R，输入：regedit ，回车确定），打开注册表。
    （2）删除项目：计算机\HKEY_CURRENT_USER\Software\Scooter Software\Beyond Compare 4\CacheId
    img

    参考：https://blog.csdn.net/vuvivian/article/details/87772437

    3、删除指定文件夹内容：

    修改C:\Program Files\Beyond Compare 4\BCUnrar.dll ,这个文件重命名或者直接删除，则会新增30天试用期，再次打开提示还有28天试用期。

    参考：https://blog.csdn.net/weixin_40751723/article/details/86218785

    这几个方法应该有那么一两个有效吧。

    文章首发于csdn:https://blog.csdn.net/weixin_41287260/article/details/88927174

    ]]>     - - - - <p>Beyond Compare允许您快速轻松地比较文件和文件夹。通过使用简单，强大的命令，您可以专注于您感兴趣的差异，并忽略那些您不感兴趣的差异。然后，您可以合并更改，同步文件并生成记录报告。<br> -很强大的一个文本比较工具（、文件夹……好像啥都行），用过就会爱不释手。<br> -<img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1573545469353.png" alt="file"></p> - - - - - - - - - -     - - - 一分钟教你快速识别不同茶叶分类！ - - https://www.yansheng.xyz/article/2928fb74.html - 2019-07-30T07:26:20.000Z - 2019-11-10T08:55:09.199Z - - 中国被称为茶的故乡，不仅因为这里的土地孕育出世界最早的茶树，更因为这里的人们将茶视为一种沟通天地的生命。茶树在中国大地上繁衍，更因气候和土壤的不同，分化出多样的品种，加之不同的制作工艺，茶叶的品类更加丰富起来。对于初识茶者，了解茶叶的分类便成为必修课。

    茶叶

    【茶的分类】

    以茶汤色泽和茶叶的制作工艺分类应该是最权威、最通俗的茶叶分类方法了。根据《中国茶经》的定义，所有的茶可以归为绿茶、黄茶、白茶、青茶（又称乌龙茶）、红茶、黑茶六大类。

    茶叶

    【绿茶】

    绿茶，不发酵，浅绿的汤色。根据杀青工艺不同分为：炒青绿茶、烘青绿茶、晒青绿茶、蒸青绿茶四种。

    茶叶

    不同绿茶，茶香特色不同。其中炒青香高，多为炒豆香和栗子香，亦有花果香。小伙伴们比较熟悉的西湖龙井，即是炒青绿茶中的细嫩炒青；烘青多清香、花果香；蒸青则多有类海苔的鲜香。

    茶叶

    【黄茶】

    黄茶，10%-20%轻发酵，汤色黄而亮。经过闷黄，形成特有的黄汤黄叶。其香也因工艺和原料而各有特色。蒙顶黄芽、君山银针类的黄芽茶，香气鲜嫩、清新；沩山毛尖、霍山黄大茶因烘焙工艺，而分别具松烟香和锅巴香。

    茶叶

    【白茶】

    轻度发酵的茶(发酵度为20～30%）。老白茶是采摘后，不经杀青或揉捻，只经过晒或文火干燥后加工的茶。具有外形芽毫完整，满身披毫，毫香清鲜，汤色黄绿清澈，滋味清淡回甘的品质特点。代表茶叶品种有：白毫银针、白牡丹等。

    茶叶

    【青茶】

    又称乌龙茶，半发酵的茶(发酵度为30～60%）。以香气著称，多按照产地划分，也是茶叶中品类最丰富的一类茶。它既有绿茶的鲜浓，又有红茶的甜醇。因其叶片中间为绿色，叶缘呈红色，故有“绿叶红镶边”之称。

    茶叶

    代表茶叶品种有：铁观音、大红袍、冻顶乌龙茶。这也是目前市面上主要最常见的三个品种。

    茶叶

    【红茶】

    全发酵的茶(发酵度为80～90%），世界上最早的红茶由中国明朝时期福建武夷山茶区的茶农发明，名为“正山小种”。按照其加工的方法与出品的茶形，一般又可分为三大类：小种红茶、工夫红茶、红碎茶和红茶茶珍。

    茶叶

    小种红茶是最古老的红茶，其他红茶都是从小种红茶演变而来的。除中国外，国外的红茶品种主要有印度的大吉岭红茶、斯里兰卡的锡兰红茶、印度的阿萨姆红茶。

    茶叶

    【黑茶】

    全发酵的茶，是六大茶类中工艺最复杂的茶了，也是唯一耐得住时间消磨的茶，而且有越陈越好的神奇特性在。工艺的复杂加上地域的风俗，造就了黑茶大家庭的盛况。

    茶叶

    主要有湖南黑茶、湖北老青茶、四川边茶、滇桂黑茶、安徽六安黑茶、云南普洱茶，影响力最大的，茶文化最普及的当属云南普洱茶，这得益于有着茶树发源地之称的云南极其丰富的茶树资源，加上愈百万年之久的时间沉积所孕育的山头茶底蕴，赋予了普洱茶与生俱来的口感魅力。

    茶叶

    以上词条内容均来源网络，均系原作者观点及所有，仅供参考。

    文章转自：京东-健康养生系列文章：https://www.jd.com/phb/zhishi/ed341c769764dba8.html

    ]]>     - - - - <p>中国被称为茶的故乡，不仅因为这里的土地孕育出世界最早的茶树，更因为这里的人们将茶视为一种沟通天地的生命。茶树在中国大地上繁衍，更因气候和土壤的不同，分化出多样的品种，加之不同的制作工艺，茶叶的品类更加丰富起来。对于初识茶者，了解茶叶的分类便成为必修课。</p> -<p><img alt="茶叶" src="//m.360buyimg.com/mobilecms/s550x346_jfs/t5296/189/445485792/43946/cf28b04b/59001396N6fe42368.jpg!q70.jpg" title="茶叶"></p> - - - - - - - -     - - - hexo4.扩展主题的个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章 - - https://www.yansheng.xyz/article/3efe2740.html - 2019-07-29T08:31:23.000Z - 2019-11-10T08:18:43.512Z - -

    • 虽然yilia主题已经集成了挺多功能的，界面也很不错。但是在某些方面好像还是略有欠缺。这篇博客主要是介绍一些外加的扩展功能。

    一、增加侧边导航栏的SubNav图标

    参考：修改Yilia左下角SubNav的社交图标
    Font Awesome:一套绝佳的图标字体库和CSS框架

    1. 这里只是添加csdn和gitee图标，其他可以参照上面两个链接进行设置。在H:\Hexo\themes\yilia\source\main.0cf68a.css文件中添加下面的代码（最好是在gitbub附近，分类管理）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    /* 1.这是github的默认图标 */
    .icon-github:before {
        content:"\E735"
    }
    /* 添加码云和CSDN的标签的图标 */
    .icon-gitee:before {
        content:"码"
    }
    .icon-csdn:before {
        content:"C"
    }

    /* 2.这是之前github的 */
    #header .header-nav .social a.github {
        background:#afb6ca;
        border:1px solid #afb6ca
    }
    #header .header-nav .social a.github:hover {
        border:1px solid #909ab6
    }

    /* 下面两个是新增的csdn和gitee */
    #header .header-nav .social a.csdn {
        background:#C71D23;
        border:1px solid #C71D23;
    }
    #header .header-nav .social a.csdn:hover {
        border:1px solid #C71D23;
    }
    #header .header-nav .social a.gitee {
        background:#C71D23;
        border:1px solid #C71D23;
    }
    #header .header-nav .social a.gitee:hover {
        border:1px solid #C71D23;
    }
    1. 在H:\Hexo\themes\yilia\_config.yml的中导航栏subnav中添加对应代码，添加后如下
    1
    2
    3
    4
    subnav:
      github: "https://github.com/username"
      gitee: "https://gitee.com/username"
      csdn: "https://blog.csdn.net/username"

    二、新增侧边栏归档、分类、标签内容–有bug（分类、标签）

    参考：hexo-theme-next的wiki：创建分类页面

    1. 添加一个分类页面，并在菜单中显示页面链接。
      新建一个页面，命名为 categories 。命令如下：
      hexo new page categories
    2. 编辑刚新建的页面，将页面的类型type设置为 categories ，主题将自动为这个页面显示所有分类。
    1
    2
    3
    title: 分类
    date: 2014-12-22 12:39:04
    type: "categories"
    1. 注意：如果有启用多说 或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false，如：
    1
    2
    3
    4
    title: 分类
    date: 2014-12-22 12:39:04
    type: "categories"
    comments: false
    1. 在菜单中添加链接。编辑主题的_config.yml ，将 menu中的 #categories: /categories注释去掉，如
    1
    2
    3
    4
    5
    6
    menu:
      home: /
      categories: /categories
      archives: /archives
      tags: /tags
    Add a custom footer

    三、设定站点建立时间–有bug（没有实现）

    参考：https://github.com/iissnan/hexo-theme-next/wiki/%E8%AE%BE%E5%AE%9A%E7%AB%99%E7%82%B9%E5%BB%BA%E7%AB%8B%E6%97%B6%E9%97%B4

    这个时间将在站点的底部显示，例如 ? 2013 - 2015

    编辑主題的 _config.yml，新增字段 since。

    1
    since: 2013

    四、添加字数统计和阅读时长功能

    参考：hexo下yilia主题添加字数统计和阅读时长功能

    1. 安装 hexo-wordcount
      在博客目录下打开Git Bash Here,输入命令:
      npm i --save hexo-wordcount
    2. 文件配置
      在theme\yilia\layout\_partial\post下创建word.ejs文件：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div style="margin-top:10px;">
        <span class="post-time">
          <span class="post-meta-item-icon">
            <i class="fa fa-keyboard-o"></i>
            <span class="post-meta-item-text">  字数统计: </span>
            <span class="post-count"><%= wordcount(post.content) %>字</span>
          </span>
        </span>

        <span class="post-time">
          &nbsp; | &nbsp;
          <span class="post-meta-item-icon">
            <i class="fa fa-hourglass-half"></i>
            <span class="post-meta-item-text">  阅读时长: </span>
            <span class="post-count"><%= min2read(post.content) %>分</span>
          </span>
        </span>
    </div>

    然后在themes/yilia/layout/_partial/article.ejs中添加:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div class="article-inner">
        <% if (post.link || post.title){ %>
          <header class="article-header">
            <%- partial('post/title', {class_name: 'article-title'}) %>
            <% if (!post.noDate){ %>
            <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
            <!-- 需要添加的位置 -->
            <!-- 开始添加字数统计-->
            <% if(theme.word_count && !post.no_word_count){%>
              <%- partial('post/word') %>
              <% } %>
            <!-- 添加完成 -->

            <% } %>
          </header>
    1. 开启功能
      在站点的_config.yml中添加下面代码:
    1
    2
    3
    # 是否开启字数统计
    #不需要使用，直接设置值为false，或注释掉
    word_count: True

    五、添加“不蒜子”访问量统计功能

    官网：不蒜子 - 极简网页计数器：http://busuanzi.ibruce.info/

    参考：Hexo博客添加访问量统计

    注意：本地测试时，访问量是不准确的！

    1. 配置是否开启不蒜子访问量统计功能
      在themes/yilia/_config.yml添加属性
    1
    2
    3
    # 是否开启访问量统计功能(不蒜子)
    busuanzi:
     enable: true
    1. 引入不蒜子并添加站点访问量
      在themes/yilia/layout/_partial/footer.ejs末尾(之前)添加如下代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <% if (theme.busuanzi && theme.busuanzi.enable){ %>
            <!-- 不蒜子统计 -->
            <span id="busuanzi_container_site_pv">
                    本站总访问量<span id="busuanzi_value_site_pv"></span>次
            </span>
            <span class="post-meta-divider">|</span>
            <span id="busuanzi_container_site_uv" style='display:none'>
                    本站访客数<span id="busuanzi_value_site_uv"></span>人
            </span>
            <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
      <% } %>
    1. 添加文章访问量

    我找到的添加位置主要有两种，下面会上图，可以选择自己喜欢的，推荐第一种。
    3.1 这种形式是：外面不显示，只在文章里面才显示，位置为右上角时间的右边。
    在themes/yilia/layout/_partial/post/date.ejs开头添加如下代码

    1
    2
    3
    4
    5
    6
    <% if (theme.busuanzi && theme.busuanzi.enable && !index){ %>
            <!-- 不蒜子统计 -->
            <span id="busuanzi_container_page_pv" style='display:none' class="<%= class_name %>">
                  <i class="icon-smile icon"></i> 阅读数：<span id="busuanzi_value_page_pv"></span>次
            </span>
    <% } %>

    主页样式：enG0f0.jpg
    文章样式（注意右上角）：enGDpV.jpg

    3.2 这种形式是：显示在标签的后面，即不仅文章里面会显示，外面主页也会显示，个人感觉体验略差。
    参考：hexo yilia 文章浏览量统计
    需要修改的文件：H:\Hexo\themes\yilia\layout\_partial\article.ejs

    1
    2
    3
    4
    5
    6
    7
     <%- partial('post/tag') %>

    <!-- 文末访问量统计（开始） -->
    <span id="busuanzi_container_page_pv">
        |阅读量:<span id="busuanzi_value_page_pv"></span>次
    </span>
    <!-- 文末访问量统计（结束） -->

    主页和文章样式（注意标签后面，因为之前忘记截图了，这是我自己标记的位置，不是实际显示效果）：enGwYq.jpg

    六、设置文章置顶功能

    参考：解决Hexo博客文章置顶问题：https://zhwhong.cn/2017/03/23/deal-with-hexo-article-top-problem/
    （这篇博客用的是另一个基于yilia的主题，感觉还是挺不错的，github：https://github.com/MOxFIVE/hexo-theme-yelee，但是也停止更新很久了……）
    原理：在Hexo生成首页HTML时，将top值高的文章排在前面，达到置顶功能。
    修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js，在生成文章之前进行文章top值排序。

    注意：一般情况下，git默认是忽略该文件的，所以应该先将该文件加到仓库，提交一次进行备份，然后再进行修改，不然不能实现备份该文件功能，可参考下面的示例代码进行操作：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 为了方便起见，不修改.gitignored文件，直接将该文件强制加入仓库。
    # 注意：修改后，再添加该文件时也要强制添加
    git add -f node_modules/hexo-generator-index/lib/generator.js

    # 参看是否添加成功，应该会变成绿色，表示已加入暂存区
    git status

    # 提交一次
    git commit -m "back up node_modules/hexo-generator-index/lib/generator.js"

    下面是generator.js修改后的代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    'use strict';

    var pagination = require('hexo-pagination');

    module.exports = function(locals) {
      var config = this.config;
      var posts = locals.posts.sort(config.index_generator.order_by);

      posts.data = posts.data.sort(function(a, b) {
          if(a.top && b.top) {
              if(a.top == b.top) return b.date - a.date;
              else return b.top - a.top;
          }
          else if(a.top && !b.top) {
              return -1;
          }
          else if(!a.top && b.top) {
              return 1;
          }
          else return b.date - a.date;
      });

      var paginationDir = config.pagination_dir || 'page';

      return pagination('', posts, {
        perPage: config.index_generator.per_page,
        layout: ['index', 'archive'],
        format: paginationDir + '/%d/',
        data: {
          __index: true
        }
      });
    };

    补充另一种：置顶方式：通过插件来实现。参考：Hexo—Yilia主题的归档页置顶

    1. blog目录下执行以下命令：
    1
    2
    npm uninstall hexo-generator-index --save
    npm install hexo-generator-index-pin-top --save
    1. 然后在文章头添加 top:true 如：
    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: 终于装好Hexo啦
    date: 2018-04-19 00:04:46
    tags: 心情
    top: true
    categories:
    - 你好，世界
    ---

    七、添加背景音乐

    参考：hexo+yilia个性化之-添加背景音乐

    1. 到网易云官网获取音乐外链：搜索音乐–>生成外链播放器–>复制代码
    2. 打开路径 themes/yilia/layout/_partial/left-col.ejs，在</nav>上面添加代码，就像下面这样。
    1
    2
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=228 height=86 src="//music.163.com/outchain/player?type=2&id=1371939273&auto=0&height=66"></iframe>
    </nav>
    1. 根据需要设置宽高属性，宽建议228。

    八、为博客设置404页面

    参考：github官网介绍：https://help.github.com/cn/articles/creating-a-custom-404-page-for-your-github-pages-site

    在/source/目录下新建404.md在头部添加属性permalink: /404.html，页面内容可以自定义。

    例1：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    ---
    # example 404.md
    title: 404 Not Found：该页无法显示
    permalink: /404.html
    ---

    # 404

    Page not found! :(

    推荐使用腾讯公益404页面（注意要把首页链接换成自己的）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    ---
    title: 404 Not Found：该页无法显示
    date: 2019-07-26 21:51:29
    permalink: /404.html
    ---

    <!DOCTYPE html>
    <html>
        <head>
             <meta charset="UTF-8" />
             <title>404</title>                           
        </head>
        <body>
             <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="返回首页" homePageUrl="https://www.yansheng.xyz/"></script>
    </body>
    </html>

    然后转换、部署就可以了。

    1
    2
    3
    hexo clean
    hexo g
    hexo d

    九、为头像增加旋转效果

    参考：hexo模版yilia头像增加旋转效果/

    1.在themes\yilia\source\文件夹下
    增加一个css文件avatarrotation.css用来旋转360度
    内容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .left-col #header .profilepic img {
    /* 控制旋转速度时间*/
      -webkit-transition: -webkit-transform 1.0s ease-out;
      -moz-transition: -moz-transform 1.0s ease-out;
      transition: transform 1.0s ease-out;
    }
    .left-col #header .profilepic img:hover {
    /* 鼠标经过360% */
      -webkit-transform: rotateZ(360deg);
      -moz-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
    }

    2.然后在themes\yilia\layout\_partial\head.ejs文件中添加进去创建的css文件：
    找到<%- partial('css') %>，在它的下面添加代码，把刚才写的文件添加进去，注意！！是在它的下面添加，不然旋转速度将不会生效

    1
    2
    3
    <% if (theme.avatarrotation){ %>
    <link rel="stylesheet" type="text/css" href="/./avatarrotation.css">
    <% } %>

    如果css不生效，查看css中的href位置是否写错了，可根据你具体存放的位置写路径。

    3.最后在主题文件_config.yml中添加

    1
    2
    #头像是否旋转(如果不要旋转取false)
    avatarrotation: true

    重新发布，最终就可以旋转了！

    十、安装hexo-admin插件

    github官网：https://github.com/jaredly/hexo-admin

    0.插件介绍

    hexo-admin 是一个Hexo博客引擎的管理用户界面插件。这个插件最初是作为本地编辑器设计的，在本地运行hexo使用hexo-admin编写文章，左边写右边预览，然后通过hexo g或hexo d（hexo g是本地渲染，hexo d是将渲染的静态页面发布到GitHub）将生成的静态页面发布到GitHub等静态服务器。如果你使用的是非静态托管服务器，比如自己买的主机搭建的hexo，那么一定要设置hexo-admin 的密码，否则谁都可以编辑你的文章。

    1.安装管理员并启动

    1
    2
    3
    npm install --save hexo-admin
    hexo server -d
    open http://localhost:4000/admin/

    2.密码保护

    如果您在实时服务器上使用Hexo admin，则需要一些密码保护。要启用此功能，只需在hexo中添加一些配置变量_config.yml：

    1
    2
    3
    4
    admin:
      username: myfavoritename
      password_hash: be121740bf988b2225a313fa1f107ca1
      secret: a secret something

    这password_hash是您密码的bcrypt哈希值。本secret是用来做饼干的安全，所以这是一个好主意，有它漫长而复杂。

    Hexo管理员设置中的实用程序可以散列您的密码并admin 为您生成该部分。启动Hexo并转到Settings > Setup authentification 并填写您的信息。将生成的YAML复制到您的_config.yml。

    一旦到位，启动您的hexo服务器，然后/admin/将要求您输入密码。

    3.自定义帖子元数据

    要使用管理界面添加和编辑您自己的帖子元数据，请将元数据变量和自定义变量添加到您的hexo中_config.yml：

    1
    2
    3
    metadata:
      author_id: defaultAuthorId
      language:

    您可以提供将用于初始化新帖子元数据的默认值。这些可以是基元或数组。

    hexo(yilia)+GitHub Pages搭建个人博客系列文章：
    1.hexo1.博客备份-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    2.hexo2.基本框架搭建-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    3.hexo3.主题简单个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    4.hexo4.扩展主题的个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章

    ]]> - - - - <div style="text-align:center"> -<img src="https://s2.ax1x.com/2019/07/29/e8DVS0.th.jpg" width height title="hexo"></div> -<p>虽然<code>yilia</code>主题已经集成了挺多功能的，界面也很不错。但是在某些方面好像还是略有欠缺。这篇博客主要是介绍一些外加的扩展功能。</p> - - - - - - - - - - - - - hexo3.主题简单个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章 - - https://www.yansheng.xyz/article/b37cf67a.html - 2019-07-29T08:30:55.000Z - 2019-11-10T08:18:37.199Z - -

    简单介绍一些yilia主题的需要或者说可以自定义的内容，该部分内容主要参考yilia的制作者litten的博客的博客，github网址：https://github.com/litten/hexo-theme-yilia/blob/master/_config.yml
    可通过 hexo s 本地发布，然后通过访问 http://localhost:4000/ 预览效果，进行个性化设置。

    一、主要信息配置：Hexo/_config.yml配置

    一般需要设置一下内容

    1
    site,url,jsonContent(标签不能正常显示的问题)

    注意：标签不能正常显示的问题

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    #标签不能正常显示的问题
    jsonContent:
      meta: false
      pages: false
      posts:
        title: true
        date: true
        path: true
        text: false
        raw: false
        content: false
        slug: false
        updated: false
        comments: false
        link: false
        permalink: false
        excerpt: false
        categories: true
        tags: true

    jsonContent(标签不能正常显示的问题)，该功能需要添加依赖：

    1
    npm i hexo-generator-json-content --save

    二、主题配置Hexo/themes/yilia/_config.yml配置

    1
    menu;subnav;favicon(设置网站图标);avatar(头像);friends(社交)

    注意：favicon设置网站图标，用自己的图标替换H:\Hexo\source\assets\img\favicon.ico，然后修改H:\Hexo\themes\yilia\_config.yml里面的图标链接

    1
    2
    #设置网站图标
    favicon: /assets/img/favicon.ico

    图标介绍及制作可参考：http://www.faviconico.org/

    推荐原因：可以预览图标，就是你制作后图标后，点击预览，它会将当前网页图标设置成你的图标。

    favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏、浏览器标签上或者在收藏夹上，是展示网站个性的缩略logo标志，也可以说是网站头像,目前主要的浏览器都支持favicon.ico图标，如果要让网站看起来更专业、更美、更有个性，favicon.ico是必不可少的，你在本站使用ICO图标转换工具就可以轻松将您的网站图标转换成favicon.ico。

    hexo(yilia)+GitHub Pages搭建个人博客系列文章：
    1.hexo1.博客备份-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    2.hexo2.基本框架搭建-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    3.hexo3.主题简单个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    4.hexo4.扩展主题的个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章

    ]]> - - - - <div style="text-align:center"> -<img src="https://s2.ax1x.com/2019/07/29/e8DVS0.th.jpg" width height title="hexo"></div> -<p>简单介绍一些<code>yilia</code>主题的需要或者说可以自定义的内容，该部分内容主要参考<code>yilia</code>的制作者<code>litten</code>的博客的博客，github网址：<a href="https://github.com/litten/hexo-theme-yilia/blob/master/_config.yml" target="_blank" rel="noopener">https://github.com/litten/hexo-theme-yilia/blob/master/_config.yml</a><br> -可通过 <code>hexo s</code> 本地发布，然后通过访问 <a href="http://localhost:4000/" target="_blank" rel="noopener">http://localhost:4000/</a> 预览效果，进行个性化设置。</p> - - - - - - - - - - - - - hexo2.基本框架搭建-hexo(yilia)+GitHub Pages搭建个人博客系列文章 - - https://www.yansheng.xyz/article/37bae0ef.html - 2019-07-29T08:30:27.000Z - 2019-11-10T08:18:30.991Z - -

    这篇文章主要介绍了搭建博客中关键部分–hexo的内容，前提工作（git、github、node.js部分）并没有展开讲，如果需要了解这部分内容请步他出。

    一、目标

    搭建hexo+yilia的基本的框架，并且部署在github上面，能够通过github pages 进行访问。

    统一说明：我的hexo根目录为Hexo，仓库为yansheng836.github.io。

    二、准备工作

    （不详细介绍，可参考hexo官方文档：https://hexo.io/zh-cn/docs/）

    1. 安装git。

    2. 注册github，新建一个特殊的仓库(username.github.io)。

    3. 安装Node.js。

    三、安装hexo，并初始化

    参考官网教程：https://hexo.io/zh-cn/index.html

    在你需要安装hexo的地方打开git命令行工具，运行一下命令（注：#开头为注释）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 全局安装hexo
    # 并初始化一个文件夹Hexo作为hexo的根目录（可自定义，命令格式为`hexo init <folder>`）
    # 进入Hexo文件夹
    # npm install：Hexo 将会在指定文件夹中新建所需要的文件。
    # hexo server：部署在本地，会提醒可通过`http://localhost:4000`访问，`Ctrl+C`可停止

    npm install hexo-cli -g
    hexo init Hexo
    cd Hexo
    npm install
    hexo server

    eZEIaj.jpg

    四、更换主题

    4.1 主题介绍

    默认主题是landscape，好像不是很好看，一般都会更换主题。

    现在比较流行的挺多的，这里只列举几种：（部署方式在github上面都有，有问题也可以去那里问。）

    4.2 更换yilia主题的简单介绍

    我选的是yilia，以下是安装方式，参考：

    （如果你的不是该主题，仅供参考。）
    注意：一般默认都是在博客根目录打开git命令行，运行这些代码。

    安装

    1
    $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

    配置

    修改hexo根目录下的 _config.yml ： theme: yilia

    注意：（强制）部署这类格式的配置时，冒号后面要加英文空格；（推荐）如果文件中有添加中文注释，统一改文件格式为UTF-8。

    更新

    该主题好像已经很久没有更新了，最近的一次更新好像是2017年的。

    1
    2
    cd themes/yilia
    git pull

    部署：

    1
    2
    3
    hexo clean
    hexo generate
    hexo server

    浏览器访问：http://localhost:4000/，注意访问期间不能按停止命令Ctrl+C,不然会停止服务，页面404。

    效果图：eZEoIs.jpg

    五、将hexo部署到github上面，实现双分支部署

    引用master分支中README.md中的有关双分支的部署说明：

    1
    2
    3
    yansheng836.github.io
    -- master  部署分支：主要存放生成的静态文件，用于部署到github pages
    -- blog    写作分支：主要存放hexo环境配置、博客（md）

    1. 部署master分支

    1.1 指定hexo部署的方式、仓库、分支

    修改hexo根目录下的 _config.yml

    1
    2
    3
    4
    5
    6
    7
    #部署到github的仓库
    #Deployment
    #Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repository: https://github.com/yansheng836/yansheng836.github.io.git
      branch: master

    1.2 为项目添加说明README.md

    你可以把README.md,LICENSE（许可证）等文件放在/source/目录下，该目录的文件可以上传到github根目录；之前提过hexo g是将/source//.md所有文件渲染成html文件（如果没有设置跳过渲染的话），然后放到对应的/public/目录下；而对于其他文件，直接复制到对应文件夹下。

    设置跳过渲染README.md，需要修改hexo根目录下的 _config.yml

    1
    2
    3
    #hexo g 会默认将所有md文件转换成（渲染成）HTML文件放到public文件夹中；加上这句话的意思就是告诉hexo的解析器，跳过渲染(skip_render)README.md文件
    skip_render: 
     - 'README.md'

    如果不设置该属性，README.md文件会被装换成README.html文件，同理你可以通过该配置跳过渲染你不希望hexo渲染的md文件。

    1.3 把master分支部署到github的master分支

    如果有修改配置文件，最好都进行重新编译。

    1
    2
    3
    hexo clean
    hexo g
    hexo d

    如果出现类似错误：

    1
    ERROR Deployer not found: git

    需要添加git依赖：

    1
    npm install hexo-deployer-git --save

    2. 部署blog分支

    注意：该分支名可自定义。

    2.1 在Hexo根目录打开git命令行，初始化一个仓库

    在hexo根目录下新建仓库，用于管理写作分支（之前的部署到github的为部署分支）

    1
    2
    git init
    git remote add origin https://github.com/yansheng836/yansheng836.github.io.git

    2.2 忽略一些不需要备份的文件

    修改跟目录下的.gitignore，.gitignore的原内容：

    1
    2
    3
    4
    5
    6
    7
    .DS_Store
    Thumbs.db
    db.json
    *.log
    node_modules/
    public/
    .deploy*/

    在后面增加以下内容，用来忽略原来的主题文件：

    1
    2
    #ignored the useless themes
    /themes/landscape/

    2.3 删除/themes/yilia/.git文件夹。

    为方便将yilia的主题配置进行同步（其实该主题已经很久没更新了……），但是之前我们使用github克隆的yilia，也就是话说：/themes/yilia/里面也有一个仓库，这涉及到git仓库下的子仓库的问题，默认情况下是不将该子仓库介入到外层仓库的，但是我们需要备份yilia主题的配置文件，所以需要删除该子仓库，即删除/themes/yilia/.git文件夹。

    2.4 创建blog分支。

    创建一个分支存放写作内容，方便同步到同一仓库的不同分支，先提交一次，不然会报

    1
    fatal: Not a valid object name: 'master'

    添加、提交

    1
    2
    git add .
    git commit -m "init the blog"

    创建分支，并同步到github的blog分支

    1
    2
    3
    git branch blog
    git checkout blog
    git push origin blog

    2.5 github上把blog分支设置为默认分支

    可设置该分支为默认分支Settings-->branches-->Default branch:master设置为blog-->update，这样以后仓库主页显示就是blog分支，而且拉取（或者克隆）的时候拉取的就是blog分支，而不是原来默认的master分支。

    2.6 实现双分支部署

    每次写完博客要同时同步到该仓库的不同分支上，以实现真正的同步(备份)。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #Writing
    # 同步到master分支
    hexo clean
    hexo generate
    hexo deploy

    # 手动同步到blog分支上
    git add. 
    git commit -m "提交信息"
    git push origin blog #如果设置了blog为默认分支，可以直接git push

    五、发布到github pages

    设置master分支为主页，步骤Settings-->options-->GitHub Pages:设置master分支-->update，成功后会刷新，显示则可通过<https://yansheng836.github.io/>访问。

    如果有购买域名，可设置对应域名，之前要设置域名解析（这个好像有点啰嗦不细讲），或者直接在hexo根目录的/source/文件夹下添加CNAME文件(注意：该文件没有后缀)，内容为域名，如：

    1
    www.yansheng.xyz

    然后发布到github上

    1
    2
    3
    hexo clean
    hexo generate
    hexo deploy

    成功后在setting中会显示可通过域名访问，而不是原来的路径。

    hexo(yilia)+GitHub Pages搭建个人博客系列文章：
    1.hexo1.博客备份-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    2.hexo2.基本框架搭建-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    3.hexo3.主题简单个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    4.hexo4.扩展主题的个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章

    ]]> - - - - <div style="text-align:center"> -<img src="https://s2.ax1x.com/2019/07/29/e8DVS0.th.jpg" width height title="hexo"></div> -<p>这篇文章主要介绍了搭建博客中关键部分–hexo的内容，前提工作（git、github、node.js部分）并没有展开讲，如果需要了解这部分内容请步他出。</p> - - - - - - - - - - - - - hexo1.博客备份-hexo(yilia)+GitHub Pages搭建个人博客系列文章 - - https://www.yansheng.xyz/article/b4e9a9a2.html - 2019-07-29T08:28:00.000Z - 2019-11-10T08:18:15.439Z - -

    偶然间看到github pages+hexo搭建的博客，感觉很不错，就想自己也动手搭建一个这样的博客。因为从未接触过，所以刚开始搭建只能到各种博客论坛找教程，虽然教程很多，但是因为时间比较久了，很多配图都失效了；加之每个人的电脑环境都不一样……加上其它的林林总总的原因，其实搭建过程还是比较艰难的！

    这篇文章介绍的是有关“博客备份”的内容，有些人可能会疑惑：为什么还没有搭建好，就开始讲备份？在软件测试的过程中，测试是越早进行越好，因为修改的代价越小。博客备份同样也是这个道理。也许只有亲身经历过，你就会懂；不，看完我的文章，你一个也可以懂。我写这篇就是希望：你们不要和我一样走弯路。

    踩坑过程：

    1. 搭建博客之路：掉坑系列之巨坑篇

    我是从2019年7月22日开始搭建的，本以为一两天就能搭建完成的，事实上一天就可以搭建完成。但是为了增加一些个性化设置，我感觉我把自己逼上了绝路……在不知道修改了某个配置文件后，页面崩了，样式表加载不了。因此前端技术一般，所以我压根就找不到问题所占；想按照配置过程一步步回退，但是一下子配置了太多东西也不知道是哪里错了……

    出了问题总得解决，难不成下次出错又再搭建一次？以下是我探究解决方案的过程， 我记下这部分内容的原因是：我想留下点啥，记录我的挣扎的过程……，同时也是希望能给遇到同样问题的人一些帮助。

    2. 第一次探索：hexo的主要工作流程

    然后想着既然hexo是使用git部署到github，那么就是用了版本管理，我想着它应该要起作用了。因此想试下能不能恢复借此之前的正确配置，一番挣扎后，我放弃了，因为这和普通的git还是有一定差别的。

    我去研究了下hexo的主要的常用命令：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    hexo clean     #删除缓冲文件(db.json)和(public中的)已生成的静态文件。
    hexo generate  #读取配置文件，根据主题配置，将md解析成HTML，将source里的文件转换到public文件夹。
    hexo server    #将静态文件部署到本地，预览。
    hexo deploy    #清理.deploy_git文件夹，将public复制到.deploy_git，发布到github。

    #简写形式为
    hexo clean
    hexo g
    hexo s
    hexo d

    如下图：
    hexo的主要工作流程

    3. 第二次探索：hexo中的.deploy_git

    根据上面的分析，我们可以发现一个问题：这里的.deploy_git版本管理其实是单向的，只有push，没有pull（或者fetch+merge）；另一方面我们到.deploy_git文件夹打开git命令行，运行git remote来查看远程仓库，发现没有远程仓库，但是它确是是能够上传的，说明是被hexo封装了（详情可见/_config.yml的Deployment部分内容），而封装就意味着丢失一些东西，就比如高级语言虽然比底层语言好用，但是速度却慢得多。

    从hexo的命令来看，我们只是一味的将本地的生成的静态文件推送到远程仓库，而没有将远程仓库拉取到本地，因为”拉取到本地“其实这是没有意义的！我认为主要原因有下面二：

    （1）由hexo的主要命令我们知道：上传的文件基本是静态页面相关的文件，没有配置文件，每次部署都会自动生成，所以拉取远程仓库根本没有意义。

    （2）同样因为上次的是静态文件，也就是说是由hexo将markdown转换而成的HTML，假如我们之前发的博客发现了有错误，想要修改，我们也是修改源文件（md），而不是修改生成的HTML。

    4. 问题的根本：没有对配置文件和历史博客进行备份

    但是这样的设置就容易出现问题：如果配置出错或者是md博客源文件丢失，就找不回了！！！比如：

    （1）如果本地修改配置后，出错了就没有办法恢复原来的状态（我就是这样的）。
    （2）按照之前我对核心命令的理解：如果重装系统或者两边写博客就会出现问题——md博客源文件丢失，因为clean每次清理public文件夹，也就是每次generate就是重新生成之前你写的所有博客，如果你分开两地写博客（或者重装后），也就意味着你丢失了历史博客，所有只生成你现在更新的博客，发布后也就只有当前更新的博客，而没有历史博客。

    5. 解决问题：新建分支存放配置文件和博客源文件

    造成这个的原因是我们对发布的文件进行了版本控制，但是没有对我们的环境和写作资料（md）进行办版本控制。因为我是新手，一开始研究hexo，我都是搜如何搭建，所以也没有这方面的考虑，出问题后才开始注意，但是这个问题其实是很致命的，就想我一样，一失手就只能从头再来！

    而官方其实是有提及这个问题的，但是是在很不起眼的地方，而且我一开始也没有仔细看文档，只是简单看了下主要的功能，谁能想到这个问题如此致命！根据官网的文档：deployment部分

    当初次新建一个库的时候，库将自动包含一个master分支。请在这个分支下进行写作和各种配置来完善您的网页。当执行hexo deploy时，Hexo会创建或更新另外一个用于部署的分支，这个分支就是_config.yml配置文件中指定的分支。Hexo会将生成的站点文件推送至该分支下，并且完全覆盖该分支下的已有内容。因此，部署分支应当不同于写作分支。（一个推荐的方式是把master作为写作分支，另外使用public分支作为部署分支。）

    值得注意的是，hexo deploy并不会对本地或远程的写作分支进行任何操作，因此依旧需要手动推送写作分支的所有改动以实现版本控制。此外，如果您的Github Pages需要使用CNAME文件自定义域名，请将CNAME文件置于写作分支的source_dir目录下，只有这样hexo deploy才能将CNAME文件一并推送至部署分支。

    很多人都吐槽hexo的官方文档实在是有点简陋，但是有些问题也许可以在它的github仓库的issues里面找到答案。

    有了方向就好办了，于是乎我就像是和杜甫“剑外忽传收蓟北，初闻涕泪满衣裳。”一样开心，与此同时”出门左转找度娘，出门右转找哥哥“，求得一篇：CSDN博客Hexo备份与恢复，大意和官方文档基本一致：用一个仓库的两个分支分别存放部署分支和写作分支。就比如我的:

    yansheng836.github.io

    – master 部署分支：主要存放生成的静态文件，用于部署到github pages

    – blog 写作分支：主要存放hexo环境配置、博客（md）

    这样部署，即使是重装电脑，我们也可以hexo的环境恢复到本地，并且同步之前的博客到本地，这样博客就会有历史了。当然你也可以新建一个仓库存放blog分支，这两种方法二选一，你随意。

    master分支说明

    主要用于备份hexo生成的文件静态文件（html），用于发布到github pages。
    详细内容可到我的github仓库上进行查看 : master分支。

    blog分支说明

    博客构建过程和备份，计划记录下部署过程，方便恢复。

    新建该分支后，可设置该分支为默认分支Settings-->branches-->Default branch:master设置为blog-->update，这样以后仓库主页显示就是blog分支，而且拉取（或者克隆）的时候拉取的就是blog分支，而不是原来默认的master分支。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    git clone url
    git push
    #其实是下面的简写形式
    git clone -b master url [<repository-name>]
    git push origin master

    #设置blog为默认分支后，相当于是这样的：
    git clone -b blog url [<repository-name>]
    git push origin blog

    详细内容可到我的github仓库上进行查看 : blog分支。

    hexo(yilia)+GitHub Pages搭建个人博客系列文章：
    1.hexo1.博客备份-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    2.hexo2.基本框架搭建-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    3.hexo3.主题简单个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    4.hexo4.扩展主题的个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章

    ]]> - - - - <div style="text-align:center"> -<img src="https://s2.ax1x.com/2019/07/29/e8DVS0.th.jpg" width height title="hexo"></div> -<p>偶然间看到github pages+hexo搭建的博客，感觉很不错，就想自己也动手搭建一个这样的博客。因为从未接触过，所以刚开始搭建只能到各种博客论坛找教程，虽然教程很多，但是因为时间比较久了，很多配图都失效了；加之每个人的电脑环境都不一样……加上其它的林林总总的原因，其实搭建过程还是比较艰难的！</p> -<p>这篇文章介绍的是有关“博客备份”的内容，有些人可能会疑惑：为什么还没有搭建好，就开始讲备份？在软件测试的过程中，测试是越早进行越好，因为修改的代价越小。博客备份同样也是这个道理。也许只有亲身经历过，你就会懂；不，看完我的文章，你一个也可以懂。我写这篇就是希望：你们不要和我一样走弯路。</p> - - - - - - - - - - - - - 什么是随笔？ - - https://www.yansheng.xyz/article/792be839.html - 2019-07-25T08:37:08.000Z - 2019-11-06T15:44:49.410Z - - 转自：百度百科

    注意查看：右下角是否有显示文章标题。

    随笔的定义

    随笔，顾名思义：随笔一记，是散文的一个分支，是议论文的一个变体，兼有议论和抒情两种特性，通常篇幅短小，形式多样，写作者惯常用各种修辞手法曲折传达自己的见解和情感，语言灵动，婉而多讽，是言禁未开之社会较为流行的一种文体。随笔作为一种文学样式，是由法国散文家蒙田所创的。

    通常指一种散文体裁，随手笔录，抒情、叙事或评论不拘，篇幅短小。或指听课、读书时所作的记录。

    引证解释编辑

    1．犹言随手下笔。鲁迅 《集外集拾遗·<铁流>编校后记》：“觉得译文很笨拙，而且怕有错字、脱字，望看的时候随笔代为改正一下。”
    2．一种灵活随便的笔记或文体。宋 洪迈《<容斋随笔>序》：“意之所之，随即纪录，因其后先，无复诠次，故目之曰随笔。”
    3．一种散文体裁。篇幅短小，表现形式灵活自由，可以抒情、叙事或评论。鲁迅《书信集·致李小峰》：“我们几个人在选我的随笔，从《坟》起到《二心》止。”

    写作要点

    随笔这类文章，或讲述文化知识，或发表学术观点，或评析世态人情，启人心智，引人深思。在写法上，它们往往旁征博引，而不作理论性太强的阐释，行文缜密而不失活泼，结构自由而不失谨严，因此，富有“理趣”是它们的突出特色。

    阅读这类文章，要整体把握文章的内容和风格，提炼作者的主要观点品味妙语佳句，还要敢于发表自己的见解。

    随笔是散文的一种，写随笔就像与邻家谈心般轻松，没有任何的负担，没有华丽的词藻，没有严密的结构。随笔的形式可以不受体裁的限制，灵活多样，不拘一格，可以观景抒情；可以睹物谈看法；可以读书谈感想；可以一事一议，也可以对同类事进行综合议论。随笔也不受字数的限制，短的几十字，长的几百字，篇幅长短皆由内容而定。

    写随笔最重要的是要表达出写作的意图：或者是一种快乐的心情，或者是一点小感悟，或者是一个新观点……总之，随笔之“随”字，正是突出了其如同邻家大婶般亲切与平易近人的特点。

    生活随笔就是日常生活中心情、感悟、新观点、新发现……生活如浩瀚的大海，博大宽广，时时处处事事都可以写成文章。

    “五四”新文学时代，现代随笔的创作繁荣一时，但“随笔”的命名与内涵尚未及统一，随笔这一文体便被左翼文学排斥至文学边缘。这给当代随笔的文体研究带来了一定困难。从现代随笔的滥觞、朱自清的“散文观”、周作人和鲁迅的“随笔观”等角度入手，在现代散文众多的命名中寻找随笔的源头，以期为当代随笔的发展提供可资借鉴的依据。

    分类

    记叙性随笔

    记叙性随笔大多取材于日常生活中的片断或作者的偶然经历，基本内容是叙事写人。随笔的主旨是写情见性，它的抒写往往融入作者的主观感受，有时直截了当说出，有时是隐藏在文字背后；它描写的往往是人人类似经历的平凡小事，但经过你仔细体味后，会使你察觉世俗风情、感悟人生道理。

    议论性随笔

    这类随笔又叫“随感”或“杂感”。所谓“随”，有随手记下而非刻意为文之义；所谓“杂”，是指内容广泛，包罗万象，大至社会问题、人生哲理，小至身边琐事，风花雪月，鸟虫宠物，校园风情，学习心得，书籍品评，亲人友人，无可不写。但随笔的重点还是个“感”字，作者要有感而发，哪怕是一点思考、一点感受、一点闪光的意念都可带到文章中去，不摆做文章的架子，保持一种随意漫谈的风格。

    说明性随笔

    黎先耀写人和自然关系的随笔《天之骄子》，着笔于形态各异的自然景观，表达自己热爱大自然的情趣，着力加强人们的生态意识。因此，说明性随笔不同于纯粹的说明文，它看重的是事物中的意趣，带有鉴赏的性质，有时则借物抒怀，另有寄托。模山范水，往往以片断的文字，把大自然的千姿百态准确形象地描绘出来。练习这类随笔，要以精细而敏锐的观察力，捕捉到事物特色的生命，笔调轻灵，不刻意为文。正如王国维所说的那样：“以我观物，故物皆著我之色彩。”

    技巧

    随手

    随笔中涉及的往往是一些即时发生的事件和看到事件当时产生的想法，那种想法也有点火花闪动似，所以需要及时捕捉，记录下来。因为扔了一段时间之后，您对事件的记忆可能就不那么清晰了，故事就很难说得完整，思想的火花可能也消失不见了。所以要养成随手写的习惯，如果能坚持记教育日记，那么您会发现那其中有很多您可能已经不太记得的事，但是在当时它是如何地让您受到震动。

    随便

    随笔没有什么格式的要求，不需要有什么论点论据,文字也可长可短，如果用200字就能把您想说的话说清楚了，也不一定要凑到1000字.如果您没想好这件事说明了什么，但是这件事却让您有所触动，不说不快，您也不必硬憋着，要找什么理论做依托，您可以把事情写出来，让读者自己去理解。

    随心

    这里讲的随心有两层意思，一是随心所欲，没有太多的限制；二是笔要随脑.文章是笔写出来的，但却是大脑想出来的，所以随笔是笔要随脑。

    总结

    随笔要想写好，必须有自己的独到之处，或是切入一个事件的角度不同于以往，或是自己的观点不同于常俗.这一切都需要我们有一双善于发现的眼睛，有一个善于思考的大脑，所以工作之中要注意观察.教师生活于学生之中，我们的工作对象是活生生的人，这就给我们提供了丰富的素材.每个孩子都是一本待读的书，和孩子的每一次倾心的谈话，都可以成为我们写作的素材.工作之余要读一点书，用心去思考一些新的教育理念的合理之处及与教育现实的结合点在哪里，所谓有正确的理念，才会有正确的眼光；有正确的眼光，才能有精彩的发现.

    最重要一点是，要想写好随笔，关键还在于动笔，动笔写了，才能有好的随笔。

    有了题材，如何得到一篇高质量的随笔你可能通常会觉得有话说不出说不好，这是因为尚缺乏理论积累，还不能从理论高度对手中的素材进行加工，整合，形成并表达出自己独到的视角.而这个至关重要的锤炼过程要求我们：
    1．注重积累相关理论.理论积累并无任何捷径，只有平常扎扎实实地研读并作好摘抄,久而久之，再处理起素材来自然会得心应手。
    2．认真解读他人随笔成果.一般报刊杂志上都有一些非常贴近我们工作实际的教学随笔，可以细细地分析一下它们是如何总结提炼得出自己观点的，久而久之，我们也会受到很大启发，感觉豁然开朗。

    例文编辑

    1．人的生命形态主要由许许多多细小的琐事组成，惊险奇特，英烈悲壮，可遇而不可求，是生活的非常态。平平凡凡，寻寻常常，随处皆是，是生活的常态。只有那些注目寻常琐事，并在其中能感发出无尽趣味来的人，他的心境必不至枯涩，他的心泉必不至干涸，而一旦弄笔写作便自然容易找到感觉，坠入境界，放任自由。对琐事不大放在心上的人，在平常生活中发现不了诗意的人，其人必定干枯无趣，其心必定顽劣粗糙，自然极难与笔墨有缘。
    2．于今世界红尘滚滚，物欲汹汹，人心越来越浮躁，时尚越来越火爆，而写作恰恰需要细腻的心灵，素材偏偏多在生活的幽微平常之处。所以，身处现代，你选择写作，其实写作也在选择你。只有当你在生活中“步步留心，时时在意”的时候，你才能从平常的生活中感发出具有共鸣效应的整体情感，生发出启迪人智的哲理思考，也便有可能与写作结下一份良缘。应该说，绮语清词，嘉言华章是天地间早就有了的，它在随笔式的自由写作中最易被呈现出来，只是它需要凝神遐思，用心体味方能妙手偶得。
    3．人总说永恒，期盼永恒，其实哪会有什么真正的永恒。人易朽，文字也易朽。如前所述，写作和其它种类的艺术一样，只是人的一种生命享受与精神自救。写作之初就心存“文章千古事”的觉悟与抱负的人，十有八九成不了写作的好手。用一颗善良之心，真诚之心去贴近平常的生活，从中感悟人生的真谛，触摸时代的脉搏，寻觅真善美的所在，并忠实地将其诉诸笔端，这才是我们生活随笔写作的正途。把发生在生活中的点点滴滴，记录下来，没有日记那么详细。

    ]]>     - - - - <p>转自：<a href="https://baike.baidu.com/item/%E9%9A%8F%E7%AC%94/4153?fr=aladdin" target="_blank" rel="noopener">百度百科</a></p> -<p>注意查看：右下角是否有显示文章标题。</p> -<hr> -<h3 id="随笔的定义">随笔的定义</h3> -<p>随笔，顾名思义：随笔一记，是散文的一个分支，是议论文的一个变体，兼有议论和抒情两种特性，通常篇幅短小，形式多样，写作者惯常用各种修辞手法曲折传达自己的见解和情感，语言灵动，婉而多讽，是言禁未开之社会较为流行的一种文体。随笔作为一种文学样式，是由法国散文家蒙田所创的。</p> - - - - - - - - - - - -     - - - the first blog writtern by hexo - - https://www.yansheng.xyz/article/7322d22a.html - 2019-07-22T06:36:29.000Z - 2019-11-10T08:23:13.672Z - - Hello hexo.

    hello-world

    ]]>     - - - - <p>Hello hexo.</p> -<p><img src="https://s2.ax1x.com/2019/07/22/ePNgBV.jpg" alt="hello-world"></p> - - - - - - - - - -     - - diff --git a/baidu_urls.txt b/baidu_urls.txt index 5c4630ea9..056dd23ea 100644 --- a/baidu_urls.txt +++ b/baidu_urls.txt @@ -1,3 +1,4 @@ +https://www.yansheng.xyz/article/bf60dd05.html https://www.yansheng.xyz/article/b75f4e3a.html https://www.yansheng.xyz/article/ef6b6c25.html https://www.yansheng.xyz/article/ab5d2a72.html diff --git a/baidusitemap.xml b/baidusitemap.xml index 7572f582e..4b8cea0cb 100644 --- a/baidusitemap.xml +++ b/baidusitemap.xml @@ -1,6 +1,12 @@ + https://www.yansheng.xyz/article/faa5d14.html + 2020-04-10 + + https://www.yansheng.xyz/article/bf60dd05.html + 2020-04-05 + https://www.yansheng.xyz/article/b75f4e3a.html 2020-04-04 @@ -63,9 +69,6 @@ https://www.yansheng.xyz/article/c1217b1d.html 2019-11-12 - - https://www.yansheng.xyz/article/faa5d14.html - 2019-11-12 https://www.yansheng.xyz/article/47e1ef2d.html 2019-11-12 diff --git a/categories/Daily/essay/index.html b/categories/Daily/essay/index.html index 6ea3fb25c..a75822eae 100644 --- a/categories/Daily/essay/index.html +++ b/categories/Daily/essay/index.html @@ -5,6 +5,7 @@ + Category: 随笔 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -603,19 +668,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -746,7 +811,7 @@

    • - + diff --git a/categories/Daily/index.html b/categories/Daily/index.html index 25db575cd..60bf8678e 100644 --- a/categories/Daily/index.html +++ b/categories/Daily/index.html @@ -5,6 +5,7 @@ + Category: Daily | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -603,19 +668,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -746,7 +811,7 @@

    • - + diff --git a/categories/categorie1/categorie11/index.html b/categories/categorie1/categorie11/index.html index 721e88b9f..7460ad5a5 100644 --- a/categories/categorie1/categorie11/index.html +++ b/categories/categorie1/categorie11/index.html @@ -5,6 +5,7 @@ + Category: categorie11 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -619,19 +684,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -762,7 +827,7 @@

    • - + diff --git a/categories/categorie1/index.html b/categories/categorie1/index.html index 461852d4f..d0227a697 100644 --- a/categories/categorie1/index.html +++ b/categories/categorie1/index.html @@ -5,6 +5,7 @@ + Category: categorie1 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -619,19 +684,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -762,7 +827,7 @@

    • - + diff --git a/categories/categorie21/categorie22/index.html b/categories/categorie21/categorie22/index.html index 82b7f1893..27f4f3819 100644 --- a/categories/categorie21/categorie22/index.html +++ b/categories/categorie21/categorie22/index.html @@ -5,6 +5,7 @@ + Category: categorie22 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -619,19 +684,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -762,7 +827,7 @@

    • - + diff --git a/categories/categorie21/index.html b/categories/categorie21/index.html index a1d896759..5ee88a43a 100644 --- a/categories/categorie21/index.html +++ b/categories/categorie21/index.html @@ -5,6 +5,7 @@ + Category: categorie21 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -619,19 +684,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -762,7 +827,7 @@

    • - + diff --git a/categories/categorie31/index.html b/categories/categorie31/index.html index e6d1f0e62..59e460b1f 100644 --- a/categories/categorie31/index.html +++ b/categories/categorie31/index.html @@ -5,6 +5,7 @@ + Category: categorie31 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -619,19 +684,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -762,7 +827,7 @@

    • - + diff --git a/categories/index.html b/categories/index.html index 6892746ec..c9a1f26d9 100644 --- a/categories/index.html +++ b/categories/index.html @@ -5,6 +5,7 @@ + categories | 荷塘月色的博客 @@ -25,6 +26,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -177,7 +210,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -232,7 +265,7 @@

    荷塘月色

    - + @@ -245,31 +278,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -320,7 +329,7 @@

    荷塘月色

    - + @@ -348,6 +357,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -613,19 +678,19 @@

    共计 10 个分类, 12 个标签

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -756,7 +821,7 @@

    共计 10 个分类, 12 个标签

    • - + diff --git a/content.json b/content.json index db08e09af..875868df6 100644 --- a/content.json +++ b/content.json @@ -1 +1 @@ -[{"title":"2020年清明节","date":"2020-04-04T01:26:45.000Z","path":"article/b75f4e3a.html","categories":[],"tags":[{"name":"生活","slug":"life","permalink":"https://www.yansheng.xyz/tags/life/"},{"name":"随笔","slug":"essay","permalink":"https://www.yansheng.xyz/tags/essay/"},{"name":"新冠肺炎","slug":"2019-nCoV","permalink":"https://www.yansheng.xyz/tags/2019-nCoV/"}]},{"title":"冠状病毒2019-nCoV实时统计","date":"2020-03-25T10:07:49.000Z","path":"article/ef6b6c25.html","categories":[],"tags":[{"name":"生活","slug":"life","permalink":"https://www.yansheng.xyz/tags/life/"},{"name":"随笔","slug":"essay","permalink":"https://www.yansheng.xyz/tags/essay/"},{"name":"新冠肺炎","slug":"2019-nCoV","permalink":"https://www.yansheng.xyz/tags/2019-nCoV/"}]},{"title":"Hexo文章保存为草稿","date":"2020-03-17T09:39:14.000Z","path":"article/ab5d2a72.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"}]},{"title":"中国加油，武汉加油！","date":"2020-02-29T17:17:01.000Z","path":"article/a07aa35d.html","categories":[],"tags":[{"name":"生活","slug":"life","permalink":"https://www.yansheng.xyz/tags/life/"},{"name":"随笔","slug":"essay","permalink":"https://www.yansheng.xyz/tags/essay/"},{"name":"新冠肺炎","slug":"2019-nCoV","permalink":"https://www.yansheng.xyz/tags/2019-nCoV/"}]},{"title":"hexo+yilia添加分类页面","date":"2020-02-21T14:44:00.000Z","path":"article/521a17ae.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo-yilia添加Dplayer视频播放插件","date":"2020-02-04T05:06:21.000Z","path":"article/252051e3.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"2019再见，2020你好","date":"2020-01-01T14:05:47.000Z","path":"article/94a46e7b.html","categories":[],"tags":[{"name":"生活","slug":"life","permalink":"https://www.yansheng.xyz/tags/life/"},{"name":"随笔","slug":"essay","permalink":"https://www.yansheng.xyz/tags/essay/"}]},{"title":"Commit message 和 Change log 编写指南","date":"2019-12-09T12:46:12.000Z","path":"article/ad81da89.html","categories":[],"tags":[{"name":"Git","slug":"git","permalink":"https://www.yansheng.xyz/tags/git/"},{"name":"GitHub","slug":"github","permalink":"https://www.yansheng.xyz/tags/github/"}]},{"title":"记一次Spring项目的MySQL乱码问题","date":"2019-12-08T14:39:29.000Z","path":"article/dbd84c59.html","categories":[],"tags":[{"name":"MySQL","slug":"mysql","permalink":"https://www.yansheng.xyz/tags/mysql/"}]},{"title":"抑郁症","date":"2019-11-25T15:43:01.000Z","path":"article/57f89578.html","categories":[],"tags":[{"name":"生活","slug":"life","permalink":"https://www.yansheng.xyz/tags/life/"}]},{"title":"Ubuntu升级Ruby","date":"2019-11-14T14:39:29.000Z","path":"article/6bb10e64.html","categories":[],"tags":[{"name":"Ubuntu","slug":"ubuntu","permalink":"https://www.yansheng.xyz/tags/ubuntu/"},{"name":"Ruby","slug":"ruby","permalink":"https://www.yansheng.xyz/tags/ruby/"}]},{"title":"hexo+yilia添加复制代码块的功能","date":"2019-11-10T09:08:42.000Z","path":"article/e9d1b881.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia测试代码块样式","date":"2019-11-10T09:07:49.000Z","path":"article/285260df.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia修改代码块等样式","date":"2019-11-10T09:06:49.000Z","path":"article/c344994.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加live2d看板娘","date":"2019-11-10T09:06:30.000Z","path":"article/e239dc63.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加背景特效","date":"2019-11-10T09:06:25.000Z","path":"article/cf9c6a5e.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加背景图片","date":"2019-11-10T09:06:21.000Z","path":"article/72a91df5.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加隐藏左边栏目按钮","date":"2019-11-10T09:06:17.000Z","path":"article/31bbdc67.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加“心知天气”","date":"2019-11-10T09:06:16.000Z","path":"article/cd4e4c1.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia测试新的渲染引擎和表情","date":"2019-11-10T09:06:14.000Z","path":"article/47e1ef2d.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia替换渲染引擎，支持emoji表情","date":"2019-11-10T09:06:13.000Z","path":"article/b902694c.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加添加robots配置","date":"2019-11-10T09:05:49.000Z","path":"article/ae673bea.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加网站运行时间，ICP备案信息，设定站点建立时间","date":"2019-11-10T09:05:16.000Z","path":"article/50902a4.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加RSS订阅功能","date":"2019-11-10T09:05:01.000Z","path":"article/91e4f23f.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加版权声明","date":"2019-11-10T09:04:55.000Z","path":"article/3d67529f.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加背景音乐","date":"2019-11-10T09:04:31.000Z","path":"article/5c52aefe.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加相册视屏功能","date":"2019-11-10T09:04:12.000Z","path":"article/d0ba4c3d.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加百度统计和Google统计","date":"2019-11-10T09:04:04.000Z","path":"article/eda67a25.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia进行SEO优化","date":"2019-11-10T09:04:02.000Z","path":"article/c1217b1d.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加URL持久化","date":"2019-11-10T09:04:00.000Z","path":"article/faa5d14.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"建站日志","date":"2019-11-09T16:15:19.000Z","path":"article/e62c38c4.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia的标签和分类的区别","date":"2019-11-08T12:41:24.000Z","path":"article/5026011a.html","categories":[{"name":"categorie1","slug":"categorie1","permalink":"https://www.yansheng.xyz/categories/categorie1/"},{"name":"categorie11","slug":"categorie1/categorie11","permalink":"https://www.yansheng.xyz/categories/categorie1/categorie11/"},{"name":"categorie21","slug":"categorie21","permalink":"https://www.yansheng.xyz/categories/categorie21/"},{"name":"categorie22","slug":"categorie21/categorie22","permalink":"https://www.yansheng.xyz/categories/categorie21/categorie22/"},{"name":"categorie31","slug":"categorie31","permalink":"https://www.yansheng.xyz/categories/categorie31/"}],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia集成utteranc评论系统","date":"2019-11-05T08:46:57.000Z","path":"article/c5f6d65b.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加valine评论系统","date":"2019-08-16T13:52:21.000Z","path":"article/658be5fc.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"2016十大校花排行榜，美翻了","date":"2019-08-13T07:06:45.000Z","path":"article/6216745.html","categories":[],"tags":[{"name":"生活","slug":"life","permalink":"https://www.yansheng.xyz/tags/life/"}]},{"title":"文件对比软件:Beyond Compare 4-破解方法","date":"2019-07-30T13:55:49.000Z","path":"article/660ecf00.html","categories":[],"tags":[{"name":"工具软件","slug":"tool-software","permalink":"https://www.yansheng.xyz/tags/tool-software/"},{"name":"软件破解","slug":"software-cracking","permalink":"https://www.yansheng.xyz/tags/software-cracking/"}]},{"title":"一分钟教你快速识别不同茶叶分类！","date":"2019-07-30T07:26:20.000Z","path":"article/2928fb74.html","categories":[],"tags":[{"name":"生活","slug":"life","permalink":"https://www.yansheng.xyz/tags/life/"}]},{"title":"hexo4.扩展主题的个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章","date":"2019-07-29T08:31:23.000Z","path":"article/3efe2740.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo3.主题简单个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章","date":"2019-07-29T08:30:55.000Z","path":"article/b37cf67a.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo2.基本框架搭建-hexo(yilia)+GitHub Pages搭建个人博客系列文章","date":"2019-07-29T08:30:27.000Z","path":"article/37bae0ef.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo1.博客备份-hexo(yilia)+GitHub Pages搭建个人博客系列文章","date":"2019-07-29T08:28:00.000Z","path":"article/b4e9a9a2.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"什么是随笔？","date":"2019-07-25T08:37:08.000Z","path":"article/792be839.html","categories":[{"name":"Daily","slug":"daily","permalink":"https://www.yansheng.xyz/categories/daily/"},{"name":"随笔","slug":"daily/essay","permalink":"https://www.yansheng.xyz/categories/daily/essay/"}],"tags":[{"name":"随笔","slug":"essay","permalink":"https://www.yansheng.xyz/tags/essay/"}]},{"title":"the first blog writtern by hexo","date":"2019-07-22T06:36:29.000Z","path":"article/7322d22a.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]}] \ No newline at end of file +[{"title":"hexo+yilia添加APlayer音乐播放器","date":"2020-04-05T15:26:34.000Z","path":"article/bf60dd05.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"2020年清明节","date":"2020-04-04T01:26:45.000Z","path":"article/b75f4e3a.html","categories":[],"tags":[{"name":"生活","slug":"life","permalink":"https://www.yansheng.xyz/tags/life/"},{"name":"随笔","slug":"essay","permalink":"https://www.yansheng.xyz/tags/essay/"},{"name":"新冠肺炎","slug":"2019-nCoV","permalink":"https://www.yansheng.xyz/tags/2019-nCoV/"}]},{"title":"冠状病毒2019-nCoV实时统计","date":"2020-03-25T10:07:49.000Z","path":"article/ef6b6c25.html","categories":[],"tags":[{"name":"生活","slug":"life","permalink":"https://www.yansheng.xyz/tags/life/"},{"name":"随笔","slug":"essay","permalink":"https://www.yansheng.xyz/tags/essay/"},{"name":"新冠肺炎","slug":"2019-nCoV","permalink":"https://www.yansheng.xyz/tags/2019-nCoV/"}]},{"title":"Hexo文章保存为草稿","date":"2020-03-17T09:39:14.000Z","path":"article/ab5d2a72.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"}]},{"title":"中国加油，武汉加油！","date":"2020-02-29T17:17:01.000Z","path":"article/a07aa35d.html","categories":[],"tags":[{"name":"生活","slug":"life","permalink":"https://www.yansheng.xyz/tags/life/"},{"name":"随笔","slug":"essay","permalink":"https://www.yansheng.xyz/tags/essay/"},{"name":"新冠肺炎","slug":"2019-nCoV","permalink":"https://www.yansheng.xyz/tags/2019-nCoV/"}]},{"title":"hexo+yilia添加分类页面","date":"2020-02-21T14:44:00.000Z","path":"article/521a17ae.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo-yilia添加Dplayer视频播放插件","date":"2020-02-04T05:06:21.000Z","path":"article/252051e3.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"2019再见，2020你好","date":"2020-01-01T14:05:47.000Z","path":"article/94a46e7b.html","categories":[],"tags":[{"name":"生活","slug":"life","permalink":"https://www.yansheng.xyz/tags/life/"},{"name":"随笔","slug":"essay","permalink":"https://www.yansheng.xyz/tags/essay/"}]},{"title":"Commit message 和 Change log 编写指南","date":"2019-12-09T12:46:12.000Z","path":"article/ad81da89.html","categories":[],"tags":[{"name":"Git","slug":"git","permalink":"https://www.yansheng.xyz/tags/git/"},{"name":"GitHub","slug":"github","permalink":"https://www.yansheng.xyz/tags/github/"}]},{"title":"记一次Spring项目的MySQL乱码问题","date":"2019-12-08T14:39:29.000Z","path":"article/dbd84c59.html","categories":[],"tags":[{"name":"MySQL","slug":"mysql","permalink":"https://www.yansheng.xyz/tags/mysql/"}]},{"title":"抑郁症","date":"2019-11-25T15:43:01.000Z","path":"article/57f89578.html","categories":[],"tags":[{"name":"生活","slug":"life","permalink":"https://www.yansheng.xyz/tags/life/"}]},{"title":"Ubuntu升级Ruby","date":"2019-11-14T14:39:29.000Z","path":"article/6bb10e64.html","categories":[],"tags":[{"name":"Ubuntu","slug":"ubuntu","permalink":"https://www.yansheng.xyz/tags/ubuntu/"},{"name":"Ruby","slug":"ruby","permalink":"https://www.yansheng.xyz/tags/ruby/"}]},{"title":"hexo+yilia添加复制代码块的功能","date":"2019-11-10T09:08:42.000Z","path":"article/e9d1b881.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia测试代码块样式","date":"2019-11-10T09:07:49.000Z","path":"article/285260df.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia修改代码块等样式","date":"2019-11-10T09:06:49.000Z","path":"article/c344994.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加live2d看板娘","date":"2019-11-10T09:06:30.000Z","path":"article/e239dc63.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加背景特效","date":"2019-11-10T09:06:25.000Z","path":"article/cf9c6a5e.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加背景图片","date":"2019-11-10T09:06:21.000Z","path":"article/72a91df5.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加隐藏左边栏目按钮","date":"2019-11-10T09:06:17.000Z","path":"article/31bbdc67.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加“心知天气”","date":"2019-11-10T09:06:16.000Z","path":"article/cd4e4c1.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia测试新的渲染引擎和表情","date":"2019-11-10T09:06:14.000Z","path":"article/47e1ef2d.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia替换渲染引擎，支持emoji表情","date":"2019-11-10T09:06:13.000Z","path":"article/b902694c.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加添加robots配置","date":"2019-11-10T09:05:49.000Z","path":"article/ae673bea.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加网站运行时间，ICP备案信息，设定站点建立时间","date":"2019-11-10T09:05:16.000Z","path":"article/50902a4.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加RSS订阅功能","date":"2019-11-10T09:05:01.000Z","path":"article/91e4f23f.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加版权声明","date":"2019-11-10T09:04:55.000Z","path":"article/3d67529f.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加背景音乐","date":"2019-11-10T09:04:31.000Z","path":"article/5c52aefe.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加相册视屏功能","date":"2019-11-10T09:04:12.000Z","path":"article/d0ba4c3d.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加百度统计和Google统计","date":"2019-11-10T09:04:04.000Z","path":"article/eda67a25.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia进行SEO优化","date":"2019-11-10T09:04:02.000Z","path":"article/c1217b1d.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加URL持久化","date":"2019-11-10T09:04:00.000Z","path":"article/faa5d14.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"建站日志","date":"2019-11-09T16:15:19.000Z","path":"article/e62c38c4.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia的标签和分类的区别","date":"2019-11-08T12:41:24.000Z","path":"article/5026011a.html","categories":[{"name":"categorie1","slug":"categorie1","permalink":"https://www.yansheng.xyz/categories/categorie1/"},{"name":"categorie11","slug":"categorie1/categorie11","permalink":"https://www.yansheng.xyz/categories/categorie1/categorie11/"},{"name":"categorie21","slug":"categorie21","permalink":"https://www.yansheng.xyz/categories/categorie21/"},{"name":"categorie22","slug":"categorie21/categorie22","permalink":"https://www.yansheng.xyz/categories/categorie21/categorie22/"},{"name":"categorie31","slug":"categorie31","permalink":"https://www.yansheng.xyz/categories/categorie31/"}],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia集成utteranc评论系统","date":"2019-11-05T08:46:57.000Z","path":"article/c5f6d65b.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo+yilia添加valine评论系统","date":"2019-08-16T13:52:21.000Z","path":"article/658be5fc.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"2016十大校花排行榜，美翻了","date":"2019-08-13T07:06:45.000Z","path":"article/6216745.html","categories":[],"tags":[{"name":"生活","slug":"life","permalink":"https://www.yansheng.xyz/tags/life/"}]},{"title":"文件对比软件:Beyond Compare 4-破解方法","date":"2019-07-30T13:55:49.000Z","path":"article/660ecf00.html","categories":[],"tags":[{"name":"工具软件","slug":"tool-software","permalink":"https://www.yansheng.xyz/tags/tool-software/"},{"name":"软件破解","slug":"software-cracking","permalink":"https://www.yansheng.xyz/tags/software-cracking/"}]},{"title":"一分钟教你快速识别不同茶叶分类！","date":"2019-07-30T07:26:20.000Z","path":"article/2928fb74.html","categories":[],"tags":[{"name":"生活","slug":"life","permalink":"https://www.yansheng.xyz/tags/life/"}]},{"title":"hexo4.扩展主题的个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章","date":"2019-07-29T08:31:23.000Z","path":"article/3efe2740.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo3.主题简单个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章","date":"2019-07-29T08:30:55.000Z","path":"article/b37cf67a.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo2.基本框架搭建-hexo(yilia)+GitHub Pages搭建个人博客系列文章","date":"2019-07-29T08:30:27.000Z","path":"article/37bae0ef.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"hexo1.博客备份-hexo(yilia)+GitHub Pages搭建个人博客系列文章","date":"2019-07-29T08:28:00.000Z","path":"article/b4e9a9a2.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]},{"title":"什么是随笔？","date":"2019-07-25T08:37:08.000Z","path":"article/792be839.html","categories":[{"name":"Daily","slug":"daily","permalink":"https://www.yansheng.xyz/categories/daily/"},{"name":"随笔","slug":"daily/essay","permalink":"https://www.yansheng.xyz/categories/daily/essay/"}],"tags":[{"name":"随笔","slug":"essay","permalink":"https://www.yansheng.xyz/tags/essay/"}]},{"title":"the first blog writtern by hexo","date":"2019-07-22T06:36:29.000Z","path":"article/7322d22a.html","categories":[],"tags":[{"name":"hexo","slug":"hexo","permalink":"https://www.yansheng.xyz/tags/hexo/"},{"name":"yilia","slug":"yilia","permalink":"https://www.yansheng.xyz/tags/yilia/"}]}] \ No newline at end of file diff --git a/css/rss.css b/css/rss.css new file mode 100644 index 000000000..1fdfc5ea8 --- /dev/null +++ b/css/rss.css @@ -0,0 +1,72 @@ +channel { + font: 14px/26px Consolas, 微软雅黑; + background: #fffffa; + margin-top: 10px +} +channel>* { + margin: 8px 20px; + display: block +} +channel>item { + margin: 16px 20px; + max-height: 200px; + overflow: hidden +} +channel>title { + margin-top: 20px; + font-size: 26px; + line-height: 32px; + display: inline-block; + margin-bottom: 0; + color: #333 +} +channel>pubDate { + margin: 0; + height: 4px; + position: absolute; + top: 0; + width: 100%; + right: -2px; + background-image: -webkit-linear-gradient(left, #003973, #e5e5be); + background-color: #fff; + left: -2px; + text-indent: -9999px +} +item>guid { + display: block; + color: #c3c3c3 +} +channel>generator { + display: none +} +item { + border: 1px solid #ccc; + padding: 10px; + display: block; + box-shadow: 0 0 10px #ececec; + position: relative; + color: #888 +} +item>pubDate { + color: #666; + position: absolute; + right: 10px; + top: 10px +} +item>description { + display: none +} +item>title { + font-weight: 700; + color: #333; + font-size: 16px +} +title { + cursor: pointer +} +title:hover { + color: #e63 +} +link { + display: none +} diff --git a/index.html b/index.html index fb6f758d9..30fab3594 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -355,7 +420,7 @@

    荷塘月色

    -
    +
    @@ -364,7 +429,7 @@

    荷塘月色

    - 2020年清明节 + hexo+yilia添加APlayer音乐播放器

    @@ -373,8 +438,8 @@

    - - + + @@ -392,10 +457,11 @@

    -

    2020年4月4日清明节

    -

    +

    之前写过一篇文章，是将APlayer音乐播放器放到左侧的（详见：hexo+yilia添加背景音乐），但是在手机端时，因为左侧边栏会被隐藏，因此也就会将播放器给隐藏掉。也就会是说手机端不能显示该播放器。

    +

    这里换一种方式，直接添加到整个页面中，使其在手机端也能使用。
    +

    - more >> + more >> @@ -425,15 +491,11 @@

    @@ -443,7 +505,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -474,7 +536,7 @@

    -
    +
    @@ -483,7 +545,7 @@

    - 冠状病毒2019-nCoV实时统计 + 2020年清明节

    @@ -492,8 +554,8 @@

    - - + + @@ -511,10 +573,10 @@

    -

    介绍两个两个有实时数据的网站，方便我们关注新冠肺炎的情况。

    -

    +

    2020年4月4日清明节

    +

    - more >> + more >> @@ -562,7 +624,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -593,7 +655,7 @@

    -
    +
    @@ -602,7 +664,7 @@

    - Hexo文章保存为草稿 + 冠状病毒2019-nCoV实时统计

    @@ -611,8 +673,8 @@

    - - + + @@ -630,9 +692,10 @@

    - bing每日壁纸 +

    介绍两个两个有实时数据的网站，方便我们关注新冠肺炎的情况。

    +

    - more >> + more >> @@ -662,7 +725,15 @@

    @@ -672,7 +743,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -703,7 +774,7 @@

    -
    +
    @@ -712,7 +783,7 @@

    - 中国加油，武汉加油！ + Hexo文章保存为草稿

    @@ -721,8 +792,8 @@

    - - + + @@ -740,9 +811,9 @@

    -

    1月31日，武汉市江汉区西北湖附近高层建筑外墙打出“武汉加油”等字样（无人机照片）。 新华社记者 肖艺九 摄

    + bing每日壁纸 - more >> + more >> @@ -772,15 +843,7 @@

    @@ -790,7 +853,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -821,7 +884,7 @@

    -
    +
    @@ -830,7 +893,7 @@

    - hexo+yilia添加分类页面 + 中国加油，武汉加油！

    @@ -839,8 +902,8 @@

    - - + + @@ -858,13 +921,9 @@

    -

    效果图

    -

    PC端：
    -

    -

    手机端：
    -

    +

    1月31日，武汉市江汉区西北湖附近高层建筑外墙打出“武汉加油”等字样（无人机照片）。 新华社记者 肖艺九 摄

    - more >> + more >> @@ -894,11 +953,15 @@

    效果图

    @@ -908,7 +971,7 @@

    效果图

    - 展开全文 >> + 展开全文 >>

    @@ -939,7 +1002,7 @@

    效果图

    -
    +
    @@ -948,7 +1011,7 @@

    效果图

    - hexo-yilia添加Dplayer视频播放插件 + hexo+yilia添加分类页面

    @@ -957,8 +1020,8 @@

    - - + + @@ -976,13 +1039,13 @@

    -

    引言

    -

    如何在博客中插入视频是件麻烦事，视频来源多种多样，优酷、爱奇艺、云空间；视频的相关控件也需要考虑。如果有插件就很方便了。Dplayer就是为这种需求而产生的！

    -

    使用Dplayer插件

    -

    github: https://github.com/MoePlayer/hexo-tag-dplayer

    -

    file

    +

    效果图

    +

    PC端：
    +

    +

    手机端：
    +

    - more >> + more >> @@ -1026,7 +1089,7 @@

    使用Dplayer插件

    - 展开全文 >> + 展开全文 >>

    @@ -1057,7 +1120,7 @@

    使用Dplayer插件

    -
    +
    @@ -1066,7 +1129,7 @@

    使用Dplayer插件

    - 2019再见，2020你好 + hexo-yilia添加Dplayer视频播放插件

    @@ -1075,8 +1138,8 @@

    - - + + @@ -1094,10 +1157,13 @@

    -

    Happy New Year！

    -

    +

    引言

    +

    如何在博客中插入视频是件麻烦事，视频来源多种多样，优酷、爱奇艺、云空间；视频的相关控件也需要考虑。如果有插件就很方便了。Dplayer就是为这种需求而产生的！

    +

    使用Dplayer插件

    +

    github: https://github.com/MoePlayer/hexo-tag-dplayer

    +

    file

    - more >> + more >> @@ -1127,11 +1193,11 @@

    @@ -1141,7 +1207,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -1172,7 +1238,7 @@

    -
    +
    @@ -1181,7 +1247,7 @@

    - Commit message 和 Change log 编写指南 + 2019再见，2020你好

    @@ -1190,8 +1256,8 @@

    - - + + @@ -1209,10 +1275,10 @@

    -

    如何写好Commit message 和 Change log

    -

    常规的changelog，conventional-changelog

    +

    Happy New Year！

    +

    - more >> + more >> @@ -1242,11 +1308,11 @@

    @@ -1256,7 +1322,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -1287,7 +1353,7 @@

    -
    +
    @@ -1296,7 +1362,7 @@

    - 记一次Spring项目的MySQL乱码问题 + Commit message 和 Change log 编写指南

    @@ -1305,8 +1371,8 @@

    - - + + @@ -1324,11 +1390,10 @@

    -

    项目：Spring+Mybatis++SpringMVC+MySQL。

    -

    首先要明确发生乱码的原因是字符编码不一致，抓住这一个进行分析。出现问题的出处常常是中文、小表情（测试时要有针对性）。

    -

    file

    +

    如何写好Commit message 和 Change log

    +

    常规的changelog，conventional-changelog

    - more >> + more >> @@ -1358,7 +1423,11 @@

    @@ -1368,7 +1437,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -1399,7 +1468,7 @@

    -
    +
    @@ -1408,7 +1477,7 @@

    - 抑郁症 + 记一次Spring项目的MySQL乱码问题

    @@ -1417,8 +1486,8 @@

    - - + + @@ -1436,12 +1505,11 @@

    -

    抑郁症，一种心病。这是我的定义，但是有时候我甚至怀疑这能不能被称作一种病、怀疑它是否真的存在……然而，现实如此残酷，这种病真实存在，而且发病时间和后果可能让人无法预料。我们不时听到某某明星因为抑郁而自杀的新闻，在叹息的同时，却又不禁在想：又有多少普通人抑郁而终？

    -

    抑郁，亦有轻重，诱发因素或大或小。艾滋病患者多死于肿瘤，艾滋病毒破坏病人的免疫系统，也许一个小小的炎症，可能就会致命；在我看来，抑郁是类似的，它破坏病人的“心情系统”，也许一点点的不愉快可能就会变成诱因，让人走向极端。

    -

    ​ ——记于2019年国考（2019年11月24日）的后一天

    -

    +

    项目：Spring+Mybatis++SpringMVC+MySQL。

    +

    首先要明确发生乱码的原因是字符编码不一致，抓住这一个进行分析。出现问题的出处常常是中文、小表情（测试时要有针对性）。

    +

    file

    - more >> + more >> @@ -1471,7 +1539,7 @@

    @@ -1481,7 +1549,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -1694,19 +1762,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1837,7 +1905,7 @@

    • - + diff --git a/js/rss.js b/js/rss.js new file mode 100644 index 000000000..8fa8e2a3b --- /dev/null +++ b/js/rss.js @@ -0,0 +1,16 @@ +document.onclick = function (e) { + if (e.target.tagName == "title") { + open(e.target.nextSibling.nextSibling.childNodes[0].data); + } +}; +onload = function () { + var i, o, v, s = document.getElementsByTagName("pubDate"); + for (i = 0; i < s.length; i++) + o = s[i].childNodes[0], v = new Date(o.data), o.data = [v.getFullYear(), v.getMonth() + 1, v.getDate()].join( + "-").replace(/\b\d\b/g, "0$&"); + var ctts = document.getElementsByTagName("description"); + for (i = 1; i < ctts.length; i++) { + var item = ctts[i].nextElementSibling; + item.textContent = item.textContent.replace(/<[^>]*?>/gmi, ""); + } +}; diff --git a/js/search.js b/js/search.js new file mode 100644 index 000000000..4c4d9f30e --- /dev/null +++ b/js/search.js @@ -0,0 +1,146 @@ +// A local search script with the help of hexo-generator-search +// Copyright (C) 2015 +// Joseph Pan +// Shuhao Mao +// This library is free software; you can redistribute it and/or modify +// it under the terms of the GNU Lesser General Public License as +// published by the Free Software Foundation; either version 2.1 of the +// License, or (at your option) any later version. +// +// This library is distributed in the hope that it will be useful, but +// WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU +// Lesser General Public License for more details. +// +// You should have received a copy of the GNU Lesser General Public +// License along with this library; if not, write to the Free Software +// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA +// 02110-1301 USA +// + +var searchFunc = function (path, search_id, content_id) { + 'use strict'; + var BTN = "x"; + $.ajax({ + url: path, + dataType: "xml", + success: function (xmlResponse) { + // get the contents from search data + var datas = $("entry", xmlResponse).map(function () { + return { + title: $("title", this).text(), + content: $("content", this).text(), + url: $("url", this).text() + }; + }).get(); + + var $input = document.getElementById(search_id); + var $resultContent = document.getElementById(content_id); + + $input.addEventListener('input', function () { + var str = '
      '; + var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/); + $resultContent.innerHTML = ""; + if (this.value.trim().length <= 0) { + return; + } + // perform local searching + datas.forEach(function (data) { + var isMatch = true; + var content_index = []; + if (!data.title || data.title.trim() === '') { + data.title = "Untitled"; + } + var data_title = data.title.trim().toLowerCase(); + var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase(); + var data_url = data.url; + var index_title = -1; + var index_content = -1; + var first_occur = -1; + // only match artiles with not empty contents + if (data_content !== '') { + keywords.forEach(function (keyword, i) { + index_title = data_title.indexOf(keyword); + index_content = data_content.indexOf(keyword); + + if (index_title < 0 && index_content < 0) { + isMatch = false; + } else { + if (index_content < 0) { + index_content = 0; + } + if (i == 0) { + first_occur = index_content; + } + // content_index.push({index_content:index_content, keyword_len:keyword_len}); + } + }); + } else { + isMatch = false; + } + // show search results + if (isMatch) { + str += "
    • " + data_title + ""; + var content = data.content.trim().replace(/<[^>]+>/g, ""); + if (first_occur >= 0) { + // cut out 100 characters + var start = first_occur - 20; + var end = first_occur + 80; + + if (start < 0) { + start = 0; + } + + if (start == 0) { + end = 100; + } + + if (end > content.length) { + end = content.length; + } + + var match_content = content.substr(start, end); + + // highlight all keywords + keywords.forEach(function (keyword) { + var regS = new RegExp(keyword, "gi"); + match_content = match_content.replace(regS, + "" + + keyword + ""); + }); + + str += "

      " + match_content + + "...

      " + } + str += "
      • "; + } + }); + str += "
    "; + if (str.indexOf('
  • ') === -1) { + return $resultContent.innerHTML = BTN + + "
      没有找到内容，更换下搜索词试试吧~
    "; + } + $resultContent.innerHTML = BTN + str; + }); + } + }); + $(document).on('click', '#local-search-close', function () { + $('#local-search-input').val(''); + $('#local-search-result').html(''); + $('#local-search-icon-close').html('🔍'); + $('#local-search-icon-close').attr('id', 'local-search-icon-search'); + }); + $(document).on('focus', '#local-search', function () { + $('#local-search-icon-search').html('❌'); + $('#local-search-icon-search').attr('id', 'local-search-icon-close'); + //console.log("66666"); + }); + $(document).on('click', '#local-search-icon-close', function () { + $('#local-search-input').val(''); + $('#local-search-result').html(''); + $('#local-search-icon-close').html('🔍'); + $('#local-search-icon-close').attr('id', 'local-search-icon-search'); + //console.log("1111"); + }); +} diff --git a/links/head.jpg b/links/head.jpg deleted file mode 100644 index 28d87ca29..000000000 Binary files a/links/head.jpg and /dev/null differ diff --git a/links/index.html b/links/index.html index ddc7e0764..2ce89eb5d 100644 --- a/links/index.html +++ b/links/index.html @@ -5,6 +5,7 @@ + 友链 | 荷塘月色的博客 @@ -27,7 +28,7 @@ - + @@ -37,6 +38,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -189,7 +222,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -244,7 +277,7 @@

    荷塘月色

    - + @@ -257,31 +290,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -332,7 +341,7 @@

    荷塘月色

    - + @@ -360,6 +369,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -962,19 +1027,19 @@

    在线工具推荐

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1105,7 +1170,7 @@

    在线工具推荐

    • - + diff --git "a/links/\345\217\213\351\223\276\350\257\264\346\230\216.html" "b/links/\345\217\213\351\223\276\350\257\264\346\230\216.html" deleted file mode 100644 index 519c14bb5..000000000 --- "a/links/\345\217\213\351\223\276\350\257\264\346\230\216.html" +++ /dev/null @@ -1,1030 +0,0 @@ - - - - - - - - - 荷塘月色的博客 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    -
    -
    -
    -
    - - -
    - - - -
    - - - -
    - - - - - -
    -
    - -
    - -
    - -
    - - - - -
    -
    -
    - -
    -
    -
    - -
    - - - -
    - -

    说明

    -

    友情链接

    -

    参考：http://xiaowiba.com/links.html/comment-page-1?replyTo=1754

    -

    原html

    -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    <div class="link-box">
        <a href="http://xiaowiba.com" target="_blank" class="no-underline">
            <div class="thumb">
                <img onerror="this.src='http://omuy6viz3.bkt.clouddn.com/2017/04/2995483407.gif'" width="200" height="200" src="http://xiaowiba.com/xwb.jpg" alt="♡ 小尾巴">
            </div>
            <div class="content">
                <div class="title"><span id="menu_index_1" name="menu_index_1"></span>
                    <h3>♡ 小尾巴</h3>
                </div>
            </div>
        </a>
        <a href="http://www.miguyu.com/Link/one/1784.html" target="_blank" class="no-underline">
            <div class="thumb">
                <img onerror="this.src='http://omuy6viz3.bkt.clouddn.com/2017/04/2995483407.gif'" width="200" height="200" src="http://xiaowiba.com/xwb.jpg" alt="咪咕鱼">
            </div>
            <div class="content">
                <div class="title"><span id="menu_index_2" name="menu_index_2"></span>
                    <h3>咪咕鱼</h3>
                </div>
            </div>
        </a>
        <a href="https://baijunyao.com" target="_blank" class="no-underline">
            <div class="thumb">
                <img onerror="this.src='http://omuy6viz3.bkt.clouddn.com/2017/04/2995483407.gif'" width="200" height="200" src="http://xiaowiba.com/xwb.jpg" alt="白俊遥">
            </div>
            <div class="content">
                <div class="title"><span id="menu_index_3" name="menu_index_3"></span>
                    <h3>白俊遥</h3>
                </div>
            </div>
        </a>
        <a href="https://mirror.am0200.com" target="_blank" class="no-underline">
            <div class="thumb">
                <img onerror="this.src='http://omuy6viz3.bkt.clouddn.com/2017/04/2995483407.gif'" width="200" height="200" src="http://xiaowiba.com/xwb.jpg" alt="mirror">
            </div>
            <div class="content">
                <div class="title"><span id="menu_index_4" name="menu_index_4"></span>
                    <h3>mirror</h3>
                </div>
            </div>
        </a>
        <a href="https://hran.me" target="_blank" class="no-underline">
            <div class="thumb">
                <img onerror="this.src='http://omuy6viz3.bkt.clouddn.com/2017/04/2995483407.gif'" width="200" height="200" src="http://xiaowiba.com/xwb.jpg" alt="Hran">
            </div>
            <div class="content">
                <div class="title"><span id="menu_index_5" name="menu_index_5"></span>
                    <h3>Hran</h3>
                </div>
            </div>
        </a>
        <a href="https://www.lulublog.cn/" target="_blank" class="no-underline">
            <div class="thumb">
                <img onerror="this.src='http://omuy6viz3.bkt.clouddn.com/2017/04/2995483407.gif'" width="200" height="200" src="http://xiaowiba.com/xwb.jpg" alt="lulublog">
            </div>
            <div class="content">
                <div class="title"><span id="menu_index_6" name="menu_index_6"></span>
                    <h3>lulublog</h3>
                </div>
            </div>
        </a>
        <a href="https://www.coolecho.net" target="_blank" class="no-underline">
            <div class="thumb">
                <img onerror="this.src='http://omuy6viz3.bkt.clouddn.com/2017/04/2995483407.gif'" width="200" height="200" src="https://www.coolecho.net/images/pic/head.jpg" alt="Cononico">
            </div>
            <div class="content">
                <div class="title"><span id="menu_index_7" name="menu_index_7"></span>
                    <h3>Cononico</h3>
                </div>
            </div>
        </a>
        <a href="https://2heng.xin/theme-sakura/" target="_blank" class="no-underline">
            <div class="thumb">
                <img onerror="this.src='http://omuy6viz3.bkt.clouddn.com/2017/04/2995483407.gif'" width="200" height="200" src="https://view.moezx.cc/images/2018/03/27/avatar.jpg" alt="樱花庄的白猫">
            </div>
            <div class="content">
                <div class="title"><span id="menu_index_8" name="menu_index_8"></span>
                    <h3>樱花庄的白猫</h3>
                </div>
            </div>
        </a>
    </div>
    -

    原css

    -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    .link-box {
        overflow: hidden;
        margin: -3rem -3rem -2.5rem -3rem;
        padding: 0rem 0rem 2.1875rem 1rem;
        border: 0px solid black;
    }

    /*.link-box{overflow:hidden;margin:-3.125rem -3.125rem -2.5rem -3.125rem;padding:0rem 2.1875rem 2.1875rem 2.1875rem;border:1px solid black;}*/
    .link-box a {
        /*float:left;margin:0 0 4.375rem;width:33.75rem;border-bottom:0;background:#fff;box-shadow:0 .0625rem .0625rem rgba(0,0,0,.1);color:#2e2e2e;text-decoration:none;-webkit-transition:.3s;transition:.3s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-user-select:none;-webkit-touch-callout:none;-moz-user-select:none;-ms-user-select:none;user-select:none*/
    }

    .link-box a {
        float: left;
        margin: .5rem;
        width: 12% !important;
        line-height: .5rem !important;
        font-size: 1rem !important;
        border-bottom: 0;
        background: #fff;
        box-shadow: .2rem .2rem .2rem rgba(0,0,0,.1),0 .2rem .2rem rgba(0,0,0,.1);
        color: #2e2e2e;
        text-decoration: none;
        -webkit-transition: .3s;
        transition: .3s;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border-radius: 0rem !important;
    }

    .link-box a .thumb {
        overflow: hidden;
        background-color: #fff;
        font-size: 0;
    }

    .link-box a .thumb img {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        -webkit-transition: .4s;
        transition: .4s
    }

    /*.link-box a .content .title h3{overflow:hidden;margin:0;padding:0;color:#2e2e2e;vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.09375rem;font-weight:300;font-size:1.05rem;line-height:1.5rem}*/
    .link-box a .content .title h3 {
        overflow: hidden;
        margin: 0;
        padding: 0;
        color: #2e2e2e;
        vertical-align: middle;
        text-overflow: ellipsis;
        white-space: nowrap;
        letter-spacing: 0rem;
        font-weight: 300;
        font-size: .6rem;
        line-height: 1rem;
    }

    .link-box a .content {
        text-align: center;
    }

    /*.link-box a .content .title{padding:.625rem 0;width:100%}*/
    .link-box a .content .title {
        padding: .4rem 0;
        width: 100%;
    }

    @media screen and (max-width: 640px) {
        .link-box a .content .title h3 {
            font-size:.6rem;
        }

        .link-box a .content .title {
            padding: .2rem 0;
        }

        .link-box a {
            width: 25% !important;
            margin: 0rem .2rem .5rem .2rem;
        }

        .link-box {
            margin: 0rem -3.5rem 0rem -0.1rem;
        }
    }
    -

    悬浮css

    -

    http://xiaowiba.com/usr/themes/Mirages/css/xwb/xwb.css

    -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    /*------links start------*/
     .link-box a:hover {
        box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.45) !important;
        -webkit-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.45) !important;
        -webkit-transform: translateY(-0.25rem);
        transform: translateY(-0.25rem);
        -moz-transform: none;
    }
    /*------links end------*/
    -

    修改整合后css

    -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    .link-box {
        overflow: hidden;
        padding: 5px;
        /* border: 2px solid black; */
    }
    .link-box a {
        float: left;
        margin: 10px 10px;
        width: 12% !important;
        line-height: .5rem !important;
        font-size: 1rem !important;
        border-bottom: 0;
    	border-radius: 0rem !important;
        background: #fff;
    	/* CSS3 文本效果：阴影 */
        box-shadow: .3rem .3rem .3rem rgba(0,0,0,.2),0 .2rem .2rem rgba(0,0,0,.2);
        color: #2e2e2e;
        text-decoration: none;
        -webkit-transition: .3s;
        transition: .3s;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    	/* 无法选中文本 */
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .link-box a .thumb {
        overflow: hidden;
        background-color: #fff;
        font-size: 0;
    }

    .link-box a .thumb img {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        -webkit-transition: .4s;
        transition: .4s
    }
    .link-box a .content .title{
        overflow: hidden;
        margin: 0;
        padding: 0;
        color: #2e2e2e;
        vertical-align: middle;
    	/* 超长显示省略号 */
        text-overflow: ellipsis;
        white-space: nowrap;
        letter-spacing: 0rem;
        font-weight: 300;
        font-size: .6rem;
        line-height: 1rem;
    }

    .link-box a .content {
        text-align: center;
    }

    .link-box a .content .title {
        padding: .4rem 0;
        width: 100%;
    }
    /* 鼠标悬浮：图片上移 */
     .link-box a:hover {
        text-decoration: none box-shadow: 0 1.375rem 2.6875rem rgba(0, 135, 202, 0.9) !important;
        -webkit-box-shadow: 0 1.375rem 2.6875rem rgba(0, 135, 202, 0.9) !important;
        -webkit-transform: translateY(-0.4rem);
        transform: translateY(-0.4rem);
        -moz-transform: none;
    }
    /* 消除全局的超链接样式的影响 */
     .link-box a:hover::after {
        transform: scaleX(0);
    }

    @media screen and (max-width: 640px) {

    .link-box a {
            width: 25% !important;
            margin: 10px 10px;
        }
        .link-box a .content .title{
            font-size:.6rem;
        }

        .link-box a .content .title {
            padding: .2rem 0;
        }

        .link-box {
            margin: 0rem -3.5rem 0rem -0.1rem;
        }
    }

    /* 禁止PhotoSwipe插件（图片缩放插件）
    github: https://github.com/dimsemenov/PhotoSwipe，
    solve: https://photoswipe.com/documentation/seo.html 
    */
     .pswp {
        display:none;
    }
    -

    新增友链模板

    -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <a href="https://www.yansheng.xyz" target="_blank" title="生活不止漫无天日的代码和bug，还有诗和远方。">
        <div class="thumb">
            <img onerror="this.src='https://myblog12.qiniu.yansheng.xyz/picgo/%E6%B2%B9%E7%BA%B8%E4%BC%9E.jpg'"
                 width="200" height="200" 
                 src="https://myblog12.qiniu.yansheng.xyz/head.jpg" 
                 alt="荷塘月色的博客头像">
        </div>
        <div class="content">
            <div class="title">
                <span>(example)荷塘月色的博客</span>
            </div>
        </div>
    </a>
    -

    添加到侧边栏

    -

    修改侧边栏

    -

    H:\Hexo\themes\yilia\_config.yml取消默认的友链配置，新增links

    -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    #smart_menu:
    #  friends: false
    smart_menu:
      innerArchive: '所有文章'
      #friends: '友链'
      links: '友链'
      aboutme: '关于我'

    #friends: '/links/index.html'
      #一分夕阳的博客: 'https://www.ifxiang.club/blog'
      #cqh-i的博客: 'https://cqh-i.github.io/'
      #蒋振飞的博客: 'https://jzfblog.com/blog'
      #Tinypng图片压缩: 'https://tinypng.com/'
      #路过图床: 'https://imgchr.com/'

    links: '/links/index.html'
    -

    修改生成效果

    -

    H:\Hexo\themes\yilia\layout\_partial\left-col.ejs

    -

    将links单独出来。

    -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!-- 智能菜单 -->
    <nav class="header-smart-menu">
        <% for (var i in theme.smart_menu){ %>
            <% if(theme.smart_menu[i]){ %>
                <!-- 如果该项是友链，直接跳转链接，不适用侧滑效果 -->
                <% if(theme.smart_menu[i] == "友链"){ %>
                      <a class="links" href="<%= theme.links %>" target="_blank" ><%= theme.smart_menu[i] %></a>
                <% } else { %>
                      <a q-on="click: openSlider(e, '<%-i%>')" href="javascript:void(0)"><%= theme.smart_menu[i] %></a>
                <% } %>
            <% } %>
        <%}%>
    </nav>
    - - - - - - - - - - - - - - - - - - - -
    - -
    - - 赏 - - - - -

    谢谢你请我吃糖果

    -
    - - -
    -     -     -     -
    -     -
    - -
    - -
    - - - - - - - - - - -
    - -

    扫一扫，分享到微信

    -
    - 微信分享二维码 -
    -
    - -
    - -
    -
    -
    -
    - - - - - - - - - - - -
    - - -
    - - - - - -
    - -
    - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -
    -
    - -
    - - - -
    - - 粤ICP备19131798号 -
    - - - - - - - - 本站总访问量次 - - | - - - - - - - - - -
    - -
    - - - - - - - - - - - - - - -
    -
    - - - - - - - - - - - - - - - - - -
    -
    - -
    -
    - - - -
    -
    -

    tag:

    - - -
    -
      -

      - 缺失模块。
      1、请确保node版本大于6.2
      2、在博客根目录（注意不是yilia根目录）执行以下命令：
      npm i hexo-generator-json-content --save

      - 3、在根目录_config.yml里添加配置： -

      -  jsonContent:
-    meta: false
-    pages: false
-    posts:
-      title: true
-      date: true
-      path: true
-      text: false
-      raw: false
-      content: false
-      slug: false
-      updated: false
-      comments: false
-      link: false
-      permalink: false
-      excerpt: false
-      categories: false
-      tags: true
-
      -

      -
    • - -

      - - -

      -

      - - -

      -
      • -
    -
    - - - - - -
    - -
    看书<br>打码<br>锻炼<br>躺草地，看天空
    - -
    - -
    - -
    - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/main.0cf68a.css b/main.0cf68a.css index 0180c4b0c..ce949ef3e 100644 --- a/main.0cf68a.css +++ b/main.0cf68a.css @@ -2071,7 +2071,7 @@ pre .css~* .id, pre .id { } .article { - margin: 30px; + margin: 20px 30px 30px 30px; border: 1px solid #ddd; border-top: 1px solid #fff; border-bottom: 1px solid #fff; @@ -2203,7 +2203,7 @@ pre .css~* .id, pre .id { margin:-30px 0 20px 7.6923% } .article-inner p { - margin:0 0 1.75em + margin:0 0 1.25em } .article-inner { border-color:#d1d1d1 @@ -3933,6 +3933,17 @@ a.pswp__share--download:hover { } /* 评论框》 */ +/* 《APlayer音频播放器样式 */ +#aplayer{ + /* opacity:0.5; */ +} +@media screen and (max-width: 800px) { + .aplayer { + opacity:0.8; + } +} +/* APlayer音频播放器样式》 */ + /* Dplayer视频播放器 */ /* 当为Dplayer设置宽高时，会将该属性设置行内样式，级别很高； 移动端，仍会显示PC端的尺寸，因此这里需要设置最大宽高，数据按照不设置宽高时进行设置。 */ @@ -3960,3 +3971,45 @@ summary:hover { background: #a9f5e8; } /* 缩放框样式 */ + +/* 页面头部：包含‘今日诗词’，站内搜索 */ +.page-header { + position: relative; + border: 1px solid #fff; + margin: 5px 30px 4px 30px; + background: #fff; + -webkit-transition: all 0.2s ease-in; + height:45px; + font-family: '微软雅黑'; + border-radius:5px; + padding-left:10px; +} + +/* 今日诗词 */ +#jinrishici-sentence{ + color:#27d7a1; + padding-left: 10px; + line-height: 45px; + font-size: 15px; +} + +@media screen and (max-width:800px) { + .page-header { + position: relative; + border: 1px solid #fff; + /* margin: 5px 30px 4px 30px; */ + background: #fff; + -webkit-transition: all 0.2s ease-in; + height: 35px; + font-family:'微软雅黑'; + border-radius: 5px; + padding-left: 5px; + } + #jinrishici-sentence { + color:#27d7a1; + padding-left: 10px; + line-height: 35px; + font-size: 15px; + /* vertical-align:middle; */ + } +} diff --git "a/message-wall/index-\345\211\257\346\234\254-\345\206\205\345\256\271.html" "b/message-wall/index-\345\211\257\346\234\254-\345\206\205\345\256\271.html" deleted file mode 100644 index 32a68e025..000000000 --- "a/message-wall/index-\345\211\257\346\234\254-\345\206\205\345\256\271.html" +++ /dev/null @@ -1,1136 +0,0 @@ - - - - - - - - - 留言墙 | 荷塘月色的博客 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    -
    -
    -
    -
    - - -
    - - - -
    - - - -
    - - - - - -
    -
    - -
    - -
    - -
    - - - - -
    -
    -
    - -
    -
    -
    - -
    - - -
    - - -

    - 留言墙 -

    - - - - - - - - - - - - - - - - - - - -
    - - - - - 字数统计: - 758字 - - - - -   |   - - - - 阅读时长≈ - 2分 - - -
    - - - - - -
    - - - -
    - -

    南台缘–陈小奇老师

    -

    前生应该和你有过一段缘，

    -

    晨钟暮鼓依稀敲了千百年。

    -

    清风中你静静卧在天地间，

    -

    心静如水，你我相看两不厌。

    -

    今生注定和你会有一段缘，

    -

    白云深处叩访了你千百遍，

    -

    夕阳下你静静留下一个梦，

    -

    鸟静山幽，你我相对两忘言。

    -

    我是不是你脚下的那朵莲，

    -

    等待你含笑拈花的指尖，

    -

    你是不是我许下的那个愿，

    -

    飘飘渺渺总萦绕在我心间。

    -

    https://v.youku.com/v_show/id_XNjM2NzQ1NjM2.html?refer=seo_operation.liuxiao.liux_00003303_3000_Qzu6ve_19042900

    - -

    相关链接

    -

    世界大佛–李剑歌曲

    -

    http://music.show160.com/74643

    -

    世界之佛；作词；李剑。作曲；阿斌；演唱；李剑。制作；李剑；。。

    -

    世界东方有一座山，山山水水南台缘。南台祥云罩着千万家，世界天然大佛南台山 。

    -

    爬上这座南台山，雄伟高大呦呵，世界第一大佛名扬天下.一座南台山,一首歌， 一首歌。

    -

    梅州有个巨人静卧在天地间 。

    -

    一座南台山，一段情，一段情，唱的是我华夏，从古致今，前所未有，谱写南台的神话。

    -

    千山万水拥抱着你，风风雨雨，卧在天地间，登台,望远,高歌，唱一曲，一首客家山歌，美名扬天下.爬上这座南台山，南台茶飘香呦，世界大佛在平远，在平远。

    -

    一座南台山.一首歌，一首歌，总是让我感叹他的来龙去脉。

    -

    一座南台山，一段情，一段情。谱写着我华夏从古致今，前所未有世界南台的神话。

    -

    南台缘图片

    -

    http://blog.sina.com.cn/s/blog_507f2d450102epmb.html?tj=1

    -

    杂

    -

    https://www.doc88.com/p-1012128061388.html

    -

    优酷搜南台缘：https://so.youku.com/search_video/q_%E5%8D%97%E5%8F%B0%E7%BC%98?f=1&kb=020200000000000__%E5%8D%97%E5%8F%B0%E7%BC%98&aaid=5a73090cd5758861d0b320701ff5584b

    -

    地名中国——平远·南台缘https://v.qq.com/x/page/j03257yl6c7.html?spm=a2h0k.11417342.soresults.dtitle

    -

    南台缘-歌曲https://v.qq.com/x/page/l03736h245z.html

    -

    有啥想说的？

    -

    -

    王者荣耀

    -

    虞姬-云霓雀翎

    -

    pp

    -

    -

    交换友链

    -

    我的友链：

    -
    1
    2
    3
    博客地址：
    博客图标：
    title：
    -

    可留言（格式）：

    -
    1
    2


    -

    相遇即是有缘💗

    -

    🤔既然来了，过来踩一下可好？😝😘

    -

    虞姬-云霓雀翎

    -

    南台缘🌹

    -

    献上一首《南台缘》，词曲：陈小奇老师。

    -
    -
    -
    -
    -
    -

    南台缘

    -

    前生应该和你有过一段缘，
    -晨钟暮鼓依稀敲了千百年。
    -清风中你静静卧在天地间，
    -心静如水，你我相看两不厌。

    -

    今生注定和你会有一段缘，
    -白云深处叩访了你千百遍，
    -夕阳下你静静留下一个梦，
    -鸟静山幽，你我相对两忘言。

    -

    我是不是你脚下的那朵莲，
    -等待者你含笑拈花的指尖，
    -你是不是我许下的那个愿，
    -飘飘渺渺总萦绕在我心间。

    - - - - - - - - - - - - - - - - - - - -
    - -
    - - 赏 - - - - -

    谢谢你请我吃糖果

    -
    - - -
    -     -     -     -
    -     -
    - -
    - -
    - - - - - - - - - - -
    - -

    扫一扫，分享到微信

    -
    - 微信分享二维码 -
    -
    - -
    - -
    -
    -
    -
    - - - - - - - - - - - -
    - - -
    - - - - - -
    - -
    - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -
    -
    - -
    - - - -
    - - 粤ICP备19131798号 -
    - - - - - - - - 本站总访问量次 - - | - - - - - - - - - -
    - -
    - - - - - - - - - - - - - - -
    -
    - - - - - - - - - - - - - - - - - -
    -
    - -
    -
    - - - -
    -
    -

    tag:

    - - -
    -
      -

      - 缺失模块。
      1、请确保node版本大于6.2
      2、在博客根目录（注意不是yilia根目录）执行以下命令：
      npm i hexo-generator-json-content --save

      - 3、在根目录_config.yml里添加配置： -

      -  jsonContent:
-    meta: false
-    pages: false
-    posts:
-      title: true
-      date: true
-      path: true
-      text: false
-      raw: false
-      content: false
-      slug: false
-      updated: false
-      comments: false
-      link: false
-      permalink: false
-      excerpt: false
-      categories: false
-      tags: true
-
      -

      -
    • - -

      - - -

      -

      - - -

      -
      • -
    -
    - - - - - -
    - -
    看书<br>打码<br>锻炼<br>躺草地，看天空
    - -
    - -
    - -
    - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/message-wall/index-\345\211\257\346\234\254-\350\247\206\351\242\221.html" "b/message-wall/index-\345\211\257\346\234\254-\350\247\206\351\242\221.html" deleted file mode 100644 index eaa15762c..000000000 --- "a/message-wall/index-\345\211\257\346\234\254-\350\247\206\351\242\221.html" +++ /dev/null @@ -1,1189 +0,0 @@ - - - - - - - - - 留言墙 | 荷塘月色的博客 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    -
    -
    -
    -
    - - -
    - - - -
    - - - -
    - - - - - -
    -
    - -
    - -
    - -
    - - - - -
    -
    -
    - -
    -
    -
    - -
    - - -
    - - -

    - 留言墙 -

    - - - - - - - - - - - - - - - - - - - -
    - - - - - 字数统计: - 705字 - - - - -   |   - - - - 阅读时长≈ - 3分 - - -
    - - - - - -
    - - - -
    - -

    南台缘–陈小奇老师

    -

    图片链接：

    -

    http://s2.sinaimg.cn/orignal/001toBQFgy6JyqJNdO961

    -

    前生应该和你有过一段缘，

    -

    晨钟暮鼓依稀敲了千百年。

    -

    清风中你静静卧在天地间，

    -

    心静如水，你我相看两不厌。

    -

    今生注定和你会有一段缘，

    -

    白云深处叩访了你千百遍，

    -

    夕阳下你静静留下一个梦，

    -

    鸟静山幽，你我相对两忘言。

    -

    我是不是你脚下的那朵莲，

    -

    等待你含笑拈花的指尖，

    -

    你是不是我许下的那个愿，

    -

    飘飘渺渺总萦绕在我心间。

    -

    嵌入视屏

    -

    来源：

    -

    https://m.v.qq.com/play.html?&vid=l03736h245z&ptag=v_qq_com%23v.play.adaptor%233

    -

    https://v.youku.com/v_show/id_XMjUwMzI5ODMyOA==.html?spm=a2h0k.11417342.soresults.dtitle

    -

    2.第二种

    - -
    -

    指弹_女儿情

    -
    -
    -
    -
    - -
    -
    -
    -

    3.第三种

    -
    -

    指弹_女儿情

    -
    -
    -
    -
    - -
    -
    -
    -

    3.

    - -

    4.

    - -

    5.HTML <video> 标签

    -

    https://www.w3school.com.cn/tags/tag_video.asp

    -
    -

    指弹_女儿情

    -
    -
    -
    -
    - -
    -
    -
    -

    6.

    -

    dploy

    -

    https://github.com/MoePlayer/hexo-tag-dplayer

    -
    -

    7.

    -

    dploy

    -

    https://github.com/MoePlayer/hexo-tag-dplayer

    -
    -
    -
    -
    -
    -

    9.

    -

    dploy

    -

    无效

    -
    -
    -
    -
    -
    -

    10.

    -

    dploy

    -

    地名中国——平远·南台缘https://v.qq.com/x/page/j03257yl6c7.html?spm=a2h0k.11417342.soresults.dtitle

    -

    南台缘-歌曲https://v.qq.com/x/page/l03736h245z.html

    -

    有啥想说的？

    -

    -

    王者荣耀

    -

    虞姬-云霓雀翎

    -

    pp

    -

    -

    交换友链

    -

    我的友链：

    -
    1
    2
    3
    博客地址：
    博客图标：
    title：
    -

    可留言（格式）：

    -
    1
    2


    -

    相遇即是有缘💗

    -

    🤔既然来了，过来踩一下可好？😝😘

    -

    虞姬-云霓雀翎

    -

    南台缘🌹

    -

    献上一首《南台缘》，词曲：陈小奇老师。

    -
    -
    -
    -
    -
    -

    南台缘

    -

    前生应该和你有过一段缘，
    -晨钟暮鼓依稀敲了千百年。
    -清风中你静静卧在天地间，
    -心静如水，你我相看两不厌。

    -

    今生注定和你会有一段缘，
    -白云深处叩访了你千百遍，
    -夕阳下你静静留下一个梦，
    -鸟静山幽，你我相对两忘言。

    -

    我是不是你脚下的那朵莲，
    -等待者你含笑拈花的指尖，
    -你是不是我许下的那个愿，
    -飘飘渺渺总萦绕在我心间。

    - - - - - - - - - - - - - - - - - - - -
    - -
    - - 赏 - - - - -

    谢谢你请我吃糖果

    -
    - - -
    -     -     -     -
    -     -
    - -
    - -
    - - - - - - - - - - -
    - -

    扫一扫，分享到微信

    -
    - 微信分享二维码 -
    -
    - -
    - -
    -
    -
    -
    - - - - - - - - - - - -
    - - -
    - - - - - -
    - -
    - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -
    -
    - -
    - - - -
    - - 粤ICP备19131798号 -
    - - - - - - - - 本站总访问量次 - - | - - - - - - - - - -
    - -
    - - - - - - - - - - - - - - -
    -
    - - - - - - - - - - - - - - - - - -
    -
    - -
    -
    - - - -
    -
    -

    tag:

    - - -
    -
      -

      - 缺失模块。
      1、请确保node版本大于6.2
      2、在博客根目录（注意不是yilia根目录）执行以下命令：
      npm i hexo-generator-json-content --save

      - 3、在根目录_config.yml里添加配置： -

      -  jsonContent:
-    meta: false
-    pages: false
-    posts:
-      title: true
-      date: true
-      path: true
-      text: false
-      raw: false
-      content: false
-      slug: false
-      updated: false
-      comments: false
-      link: false
-      permalink: false
-      excerpt: false
-      categories: false
-      tags: true
-
      -

      -
    • - -

      - - -

      -

      - - -

      -
      • -
    -
    - - - - - -
    - -
    看书<br>打码<br>锻炼<br>躺草地，看天空
    - -
    - -
    - -
    - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/message-wall/index-\345\211\257\346\234\254-\350\257\227.html" "b/message-wall/index-\345\211\257\346\234\254-\350\257\227.html" deleted file mode 100644 index cc3d2a928..000000000 --- "a/message-wall/index-\345\211\257\346\234\254-\350\257\227.html" +++ /dev/null @@ -1,1169 +0,0 @@ - - - - - - - - - 留言墙 | 荷塘月色的博客 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    -
    -
    -
    -
    - - -
    - - - -
    - - - -
    - - - - - -
    -
    - -
    - -
    - -
    - - - - -
    -
    -
    - -
    -
    -
    - -
    - - -
    - - -

    - 留言墙 -

    - - - - - - - - - - - - - - - - - - - -
    - - - - - 字数统计: - 627字 - - - - -   |   - - - - 阅读时长≈ - 3分 - - -
    - - - - - -
    - - - -
    - -

    相遇即是有缘💗

    -

    🤔既然来了，过来踩一下可好？😝😘

    -

    虞姬-云霓雀翎

    -

    南台缘🌹

    -

    献上一首《南台缘》，词曲：陈小奇老师。

    -
    -
    -
    -
    -
    -

    http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1580748229861.png

    -

    南台缘

    - -
    -前生应该和你有过一段缘， -晨钟暮鼓依稀敲了千百年。 -清风中你静静卧在天地间， -心静如水，你我相看两不厌。 -

    今生注定和你会有一段缘，
    -白云深处叩访了你千百遍，
    -夕阳下你静静留下一个梦，
    -鸟静山幽，你我相对两忘言。

    -

    我是不是你脚下的那朵莲，
    -等待者你含笑拈花的指尖，
    -你是不是我许下的那个愿，
    -飘飘渺渺总萦绕在我心间。

    -
    -

    CSS3字体发光效果

    - -
    -

    xinpureZhu

    -
    -

    -前生应该和你有过一段缘， -晨钟暮鼓依稀敲了千百年。 -清风中你静静卧在天地间， -心静如水，你我相看两不厌。 -

    -

    -今生注定和你会有一段缘， -白云深处叩访了你千百遍， -夕阳下你静静留下一个梦， -鸟静山幽，你我相对两忘言。 -

    -

    -我是不是你脚下的那朵莲， -等待者你含笑拈花的指尖， -你是不是我许下的那个愿， -飘飘渺渺总萦绕在我心间。 -

    -
    -
    - - - - - - - - - - - - - - - - - - -
    - -
    - - 赏 - - - - -

    谢谢你请我吃糖果

    -
    - - -
    -     -     -     -
    -     -
    - -
    - -
    - - - - - - - - - - -
    - -

    扫一扫，分享到微信

    -
    - 微信分享二维码 -
    -
    - -
    - -
    -
    -
    -
    - - - - - - - - - - - -
    - - -
    - - - - - -
    - -
    - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -
    -
    - -
    - - - -
    - - 粤ICP备19131798号 -
    - - - - - - - - 本站总访问量次 - - | - - - - - - - - - -
    - -
    - - - - - - - - - - - - - - -
    -
    - - - - - - - - - - - - - - - - - -
    -
    - -
    -
    - - - -
    -
    -

    tag:

    - - -
    -
      -

      - 缺失模块。
      1、请确保node版本大于6.2
      2、在博客根目录（注意不是yilia根目录）执行以下命令：
      npm i hexo-generator-json-content --save

      - 3、在根目录_config.yml里添加配置： -

      -  jsonContent:
-    meta: false
-    pages: false
-    posts:
-      title: true
-      date: true
-      path: true
-      text: false
-      raw: false
-      content: false
-      slug: false
-      updated: false
-      comments: false
-      link: false
-      permalink: false
-      excerpt: false
-      categories: false
-      tags: true
-
      -

      -
    • - -

      - - -

      -

      - - -

      -
      • -
    -
    - - - - - -
    - -
    看书<br>打码<br>锻炼<br>躺草地，看天空
    - -
    - -
    - -
    - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git "a/message-wall/index-\345\211\257\346\234\254-\350\257\2272.html" "b/message-wall/index-\345\211\257\346\234\254-\350\257\2272.html" deleted file mode 100644 index a550fa754..000000000 --- "a/message-wall/index-\345\211\257\346\234\254-\350\257\2272.html" +++ /dev/null @@ -1,1159 +0,0 @@ - - - - - - - - - 留言墙 | 荷塘月色的博客 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    -
    -
    -
    -
    - - -
    - - - -
    - - - -
    - - - - - -
    -
    - -
    - -
    - -
    - - - - -
    -
    -
    - -
    -
    -
    - -
    - - -
    - - -

    - 留言墙 -

    - - - - - - - - - - - - - - - - - - - -
    - - - - - 字数统计: - 509字 - - - - -   |   - - - - 阅读时长≈ - 2分 - - -
    - - - - - -
    - - - -
    - -

    相遇即是有缘💗

    -

    🤔既然来了，过来踩一下可好？😝😘

    -

    虞姬-云霓雀翎

    -

    南台缘🌹

    -

    献上一首《南台缘》，词曲：陈小奇老师。

    - -
    -
    -
    -
    -
    -

    http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1580748229861.png

    -

    南台缘

    -

    CSS3字体发光效果

    - -
    -

    南台缘

    -
    -

    -前生应该和你有过一段缘，
    -晨钟暮鼓依稀敲了千百年。
    -清风中你静静卧在天地间，
    -心静如水，你我相看两不厌。 -

    -

    -今生注定和你会有一段缘，
    -白云深处叩访了你千百遍。
    -夕阳下你静静留下一个梦，
    -鸟静山幽，你我相对两忘言。 -

    -

    -我是不是你脚下的那朵莲，
    -等待者你含笑拈花的指尖，
    -你是不是我许下的那个愿，
    -飘飘渺渺总萦绕在我心间。
    -

    -
    -
    - - - - - - - - - - - - - - - - - - - -
    - -
    - - 赏 - - - - -

    谢谢你请我吃糖果

    -
    - - -
    -     -     -     -
    -     -
    - -
    - -
    - - - - - - - - - - -
    - -

    扫一扫，分享到微信

    -
    - 微信分享二维码 -
    -
    - -
    - -
    -
    -
    -
    - - - - - - - - - - - -
    - - -
    - - - - - -
    - -
    - - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -
    -
    - -
    - - - -
    - - 粤ICP备19131798号 -
    - - - - - - - - 本站总访问量次 - - | - - - - - - - - - -
    - -
    - - - - - - - - - - - - - - -
    -
    - - - - - - - - - - - - - - - - - -
    -
    - -
    -
    - - - -
    -
    -

    tag:

    - - -
    -
      -

      - 缺失模块。
      1、请确保node版本大于6.2
      2、在博客根目录（注意不是yilia根目录）执行以下命令：
      npm i hexo-generator-json-content --save

      - 3、在根目录_config.yml里添加配置： -

      -  jsonContent:
-    meta: false
-    pages: false
-    posts:
-      title: true
-      date: true
-      path: true
-      text: false
-      raw: false
-      content: false
-      slug: false
-      updated: false
-      comments: false
-      link: false
-      permalink: false
-      excerpt: false
-      categories: false
-      tags: true
-
      -

      -
    • - -

      - - -

      -

      - - -

      -
      • -
    -
    - - - - - -
    - -
    看书<br>打码<br>锻炼<br>躺草地，看天空
    - -
    - -
    - -
    - - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/message-wall/index.html b/message-wall/index.html index 225fc40b4..95d4ae10b 100644 --- a/message-wall/index.html +++ b/message-wall/index.html @@ -5,29 +5,32 @@ + 留言墙 | 荷塘月色的博客 - + - + - + + + + + + +
    + + + + + + + + + + +
    @@ -180,7 +213,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -235,7 +268,7 @@

    荷塘月色

    - + @@ -248,31 +281,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -323,7 +332,7 @@

    荷塘月色

    - + @@ -351,6 +360,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -428,7 +493,7 @@

    南台缘🌹

    -
    +
    @@ -894,19 +959,19 @@

    南台缘🌹

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1037,7 +1102,7 @@

    南台缘🌹

    • - + diff --git a/music/index.html b/music/index.html index 2fde3dbe7..5c7a520bf 100644 --- a/music/index.html +++ b/music/index.html @@ -5,6 +5,7 @@ + Music | 荷塘月色的博客 @@ -25,6 +26,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -177,7 +210,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -232,7 +265,7 @@

    荷塘月色

    - + @@ -245,31 +278,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -320,7 +329,7 @@

    荷塘月色

    - + @@ -348,6 +357,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -782,19 +847,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -925,7 +990,7 @@

    • - + diff --git a/page/2/index.html b/page/2/index.html index 1d619051e..4b1c05c22 100644 --- a/page/2/index.html +++ b/page/2/index.html @@ -5,6 +5,7 @@ + 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -355,7 +420,7 @@

    荷塘月色

    -
    +
    @@ -364,7 +429,7 @@

    荷塘月色

    - Ubuntu升级Ruby + 抑郁症

    @@ -373,8 +438,8 @@

    - - + + @@ -392,10 +457,12 @@

    -

    Ubuntu服务器最近扫描出很多漏洞，发现很多是Ruby的问题，而且有一些年代久远，想着应该是老版本的问题。于是去查了下更新问题，记录下更新过程。

    -

    file

    +

    抑郁症，一种心病。这是我的定义，但是有时候我甚至怀疑这能不能被称作一种病、怀疑它是否真的存在……然而，现实如此残酷，这种病真实存在，而且发病时间和后果可能让人无法预料。我们不时听到某某明星因为抑郁而自杀的新闻，在叹息的同时，却又不禁在想：又有多少普通人抑郁而终？

    +

    抑郁，亦有轻重，诱发因素或大或小。艾滋病患者多死于肿瘤，艾滋病毒破坏病人的免疫系统，也许一个小小的炎症，可能就会致命；在我看来，抑郁是类似的，它破坏病人的“心情系统”，也许一点点的不愉快可能就会变成诱因，让人走向极端。

    +

    ​ ——记于2019年国考（2019年11月24日）的后一天

    +

    - more >> + more >> @@ -425,11 +492,7 @@

    @@ -439,7 +502,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -470,7 +533,7 @@

    -
    +
    @@ -479,7 +542,7 @@

    - hexo+yilia添加复制代码块的功能 + Ubuntu升级Ruby

    @@ -488,8 +551,8 @@

    - - + + @@ -507,10 +570,10 @@

    -

    实现复制代码块的功能，效果：
    -file

    +

    Ubuntu服务器最近扫描出很多漏洞，发现很多是Ruby的问题，而且有一些年代久远，想着应该是老版本的问题。于是去查了下更新问题，记录下更新过程。

    +

    file

    - more >> + more >> @@ -540,11 +603,11 @@

    @@ -554,7 +617,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -585,7 +648,7 @@

    -
    +
    @@ -594,7 +657,7 @@

    - hexo+yilia测试代码块样式 + hexo+yilia添加复制代码块的功能

    @@ -603,8 +666,8 @@

    - - + + @@ -622,20 +685,10 @@

    -

    测试代码块、引用块、（文章内）超链接的样式以及高亮问题。

    -

    高亮说明

    -

    经测试，发现有以下几个问题：

    -
      -
    1. 引用块里面的代码块样式有问题。
      2. -
    2. 如果语言不支持高亮，默认使用plain（简单的，无格式的）。
      3. -
    3. MySQL等SQL需要统一设置为SQL，不然不高亮。
      4. -
    4. shell脚本使用bash，不然不高亮。
      5. -
    5. cmd命令/Linux命令使用bash，可以部分高亮。
      6. -
    6. markdown代码块不支持高亮。
      7. -
    7. ejs使用HTML进行高亮。
      8. -
    +

    实现复制代码块的功能，效果：
    +file

    - more >> + more >> @@ -679,7 +732,7 @@

    高亮说明

    - 展开全文 >> + 展开全文 >>

    @@ -710,7 +763,7 @@

    高亮说明

    -
    +
    @@ -719,7 +772,7 @@

    高亮说明

    - hexo+yilia修改代码块等样式 + hexo+yilia测试代码块样式

    @@ -728,8 +781,8 @@

    - - + + @@ -747,10 +800,20 @@

    -

    代码块的样式真的很重要，毕竟咱好歹是一个技术博客，难免会贴一些代码的。因此参考https://cqh-i.github.io的样式进行了调整，下面是HTML的例子，更多具体效果可以参考这篇博客的样式：test-codestyle。

    -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>html代码块样本</title>
    </head>
    <body>
        <h1>这个样式可还行？</h1>
        <p class="p1" style="font-size:20px;">我的第一个段落。</p>
    </body>
    </html>
    +

    测试代码块、引用块、（文章内）超链接的样式以及高亮问题。

    +

    高亮说明

    +

    经测试，发现有以下几个问题：

    +
      +
    1. 引用块里面的代码块样式有问题。
      2. +
    2. 如果语言不支持高亮，默认使用plain（简单的，无格式的）。
      3. +
    3. MySQL等SQL需要统一设置为SQL，不然不高亮。
      4. +
    4. shell脚本使用bash，不然不高亮。
      5. +
    5. cmd命令/Linux命令使用bash，可以部分高亮。
      6. +
    6. markdown代码块不支持高亮。
      7. +
    7. ejs使用HTML进行高亮。
      8. +
    - more >> + more >> @@ -794,7 +857,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -825,7 +888,7 @@

    -
    +
    @@ -834,7 +897,7 @@

    - hexo+yilia添加live2d看板娘 + hexo+yilia修改代码块等样式

    @@ -843,8 +906,8 @@

    - - + + @@ -862,11 +925,10 @@

    -

    添加live2d看板娘，插件：hexo-helper-live2d，github仓库：https://github.com/EYHN/hexo-helper-live2d

    -

    右下角：可爱小黑猫🐱

    -

    file

    +

    代码块的样式真的很重要，毕竟咱好歹是一个技术博客，难免会贴一些代码的。因此参考https://cqh-i.github.io的样式进行了调整，下面是HTML的例子，更多具体效果可以参考这篇博客的样式：test-codestyle。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>html代码块样本</title>
    </head>
    <body>
        <h1>这个样式可还行？</h1>
        <p class="p1" style="font-size:20px;">我的第一个段落。</p>
    </body>
    </html>
    - more >> + more >> @@ -910,7 +972,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -941,7 +1003,7 @@

    -
    +
    @@ -950,7 +1012,7 @@

    - hexo+yilia添加背景特效 + hexo+yilia添加live2d看板娘

    @@ -959,8 +1021,8 @@

    - - + + @@ -978,21 +1040,11 @@

    -

    添加多种页面背景特效，参考：Hexo 博客优化之博客美化系列（持续更新），需要注意的是：添加背景特效是很消耗浏览器内容的，建议只选择其中的一两个。

    -

    特效目录

    - +

    添加live2d看板娘，插件：hexo-helper-live2d，github仓库：https://github.com/EYHN/hexo-helper-live2d

    +

    右下角：可爱小黑猫🐱

    +

    file

    - more >> + more >> @@ -1036,7 +1088,7 @@

    特效目录

    - 展开全文 >> + 展开全文 >>

    @@ -1067,7 +1119,7 @@

    特效目录

    -
    +
    @@ -1076,7 +1128,7 @@

    特效目录

    - hexo+yilia添加背景图片 + hexo+yilia添加背景特效

    @@ -1085,8 +1137,8 @@

    - - + + @@ -1104,10 +1156,21 @@

    -

    添加背景图片，效果图：

    -

    file

    +

    添加多种页面背景特效，参考：Hexo 博客优化之博客美化系列（持续更新），需要注意的是：添加背景特效是很消耗浏览器内容的，建议只选择其中的一两个。

    +

    特效目录

    + - more >> + more >> @@ -1151,7 +1214,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -1182,7 +1245,7 @@

    -
    +
    @@ -1191,7 +1254,7 @@

    - hexo+yilia添加隐藏左边栏目按钮 + hexo+yilia添加背景图片

    @@ -1200,8 +1263,8 @@

    - - + + @@ -1219,11 +1282,10 @@

    -

    效果图：
    -file

    -

    点击按钮时，缩进左侧边栏，再次点击再弹出来。

    +

    添加背景图片，效果图：

    +

    file

    - more >> + more >> @@ -1267,7 +1329,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -1298,7 +1360,7 @@

    -
    +
    @@ -1307,7 +1369,7 @@

    - hexo+yilia添加“心知天气” + hexo+yilia添加隐藏左边栏目按钮

    @@ -1316,8 +1378,8 @@

    - - + + @@ -1335,10 +1397,11 @@

    -

    添加“心知天气”
    -file

    +

    效果图：
    +file

    +

    点击按钮时，缩进左侧边栏，再次点击再弹出来。

    - more >> + more >> @@ -1382,7 +1445,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -1413,7 +1476,7 @@

    -
    +
    @@ -1422,7 +1485,7 @@

    - hexo+yilia测试新的渲染引擎和表情 + hexo+yilia添加“心知天气”

    @@ -1431,8 +1494,8 @@

    - - + + @@ -1450,9 +1513,10 @@

    -

    测试表情（emoji）🤔和hexo渲染器（hexo-renderer-markdown-it）。

    +

    添加“心知天气”
    +file

    - more >> + more >> @@ -1496,7 +1560,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -1709,19 +1773,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1852,7 +1916,7 @@

    • - + diff --git a/page/3/index.html b/page/3/index.html index 8e6c2eeff..6779041b9 100644 --- a/page/3/index.html +++ b/page/3/index.html @@ -5,6 +5,7 @@ + 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -355,7 +420,7 @@

    荷塘月色

    -
    +
    @@ -364,7 +429,7 @@

    荷塘月色

    - hexo+yilia替换渲染引擎，支持emoji表情 + hexo+yilia测试新的渲染引擎和表情

    @@ -373,8 +438,8 @@

    - - + + @@ -392,10 +457,9 @@

    -

    Hexo默认是采用hexo-renderer-marked渲染器将markdown渲染成HTML，这个渲染器不支持插件扩展，因此不能支持表情；还有一个支持插件扩展的是 hexo-renderer-markdown-it，所以我们可以使用这个渲染引擎来支持emoji表情。

    -

    就比如这样的表情：😁😂🤣🍱，更多可参考：测试新的渲染引擎和表情

    +

    测试表情（emoji）🤔和hexo渲染器（hexo-renderer-markdown-it）。

    - more >> + more >> @@ -439,7 +503,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -470,7 +534,7 @@

    -
    +
    @@ -479,7 +543,7 @@

    - hexo+yilia添加添加robots配置 + hexo+yilia替换渲染引擎，支持emoji表情

    @@ -488,8 +552,8 @@

    - - + + @@ -507,10 +571,10 @@

    -

    介绍

    -

    robots是网站跟爬虫间的协议，用简单直接的txt格式文本方式告诉对应的爬虫被允许的权限，也就是说robots.txt是搜索引擎中访问网站的时候要查看的第一个文件。当一个搜索蜘蛛访问一个站点时，它会首先检查该站点根目录下是否存在robots.txt，如果存在，搜索机器人就会按照该文件中的内容来确定访问的范围；如果该文件不存在，所有的搜索蜘蛛将能够访问网站上所有没有被口令保护的页面。

    +

    Hexo默认是采用hexo-renderer-marked渲染器将markdown渲染成HTML，这个渲染器不支持插件扩展，因此不能支持表情；还有一个支持插件扩展的是 hexo-renderer-markdown-it，所以我们可以使用这个渲染引擎来支持emoji表情。

    +

    就比如这样的表情：😁😂🤣🍱，更多可参考：测试新的渲染引擎和表情

    - more >> + more >> @@ -554,7 +618,7 @@

    介绍

    - 展开全文 >> + 展开全文 >>

    @@ -585,7 +649,7 @@

    介绍

    -
    +
    @@ -594,7 +658,7 @@

    介绍

    - hexo+yilia添加网站运行时间，ICP备案信息，设定站点建立时间 + hexo+yilia添加添加robots配置

    @@ -603,8 +667,8 @@

    - - + + @@ -622,14 +686,10 @@

    -

    hexo+yilia（在底部）添加

    -
      -
    • 网站运行时间：本站已安全运行 101 天 12 小时 13 分 41 秒
      • -
    • ICP备案信息：粤ICP备00000000号
      • -
    • 设定站点建立时间（年份）：@ 2018 - 2019
      • -
    +

    介绍

    +

    robots是网站跟爬虫间的协议，用简单直接的txt格式文本方式告诉对应的爬虫被允许的权限，也就是说robots.txt是搜索引擎中访问网站的时候要查看的第一个文件。当一个搜索蜘蛛访问一个站点时，它会首先检查该站点根目录下是否存在robots.txt，如果存在，搜索机器人就会按照该文件中的内容来确定访问的范围；如果该文件不存在，所有的搜索蜘蛛将能够访问网站上所有没有被口令保护的页面。

    - more >> + more >> @@ -673,7 +733,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -704,7 +764,7 @@

    -
    +
    @@ -713,7 +773,7 @@

    - hexo+yilia添加RSS订阅功能 + hexo+yilia添加网站运行时间，ICP备案信息，设定站点建立时间

    @@ -722,8 +782,8 @@

    - - + + @@ -741,11 +801,14 @@

    -

    使用hexo-generator-feed插件生成RSS文件atom.xml，实现RSS订阅功能。
    -插件github网址：https://github.com/hexojs/hexo-generator-feed。
    -使用详见：https://www.jianshu.com/p/2aaac7a19736，https://wxnacy.com/2018/12/12/hexo-add-rss/

    +

    hexo+yilia（在底部）添加

    +
      +
    • 网站运行时间：本站已安全运行 101 天 12 小时 13 分 41 秒
      • +
    • ICP备案信息：粤ICP备00000000号
      • +
    • 设定站点建立时间（年份）：@ 2018 - 2019
      • +
    - more >> + more >> @@ -789,7 +852,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -820,7 +883,7 @@

    -
    +
    @@ -829,7 +892,7 @@

    - hexo+yilia添加版权声明 + hexo+yilia添加RSS订阅功能

    @@ -838,8 +901,8 @@

    - - + + @@ -857,10 +920,11 @@

    -

    添加版权声明，效果图：
    -file

    +

    使用hexo-generator-feed插件生成RSS文件atom.xml，实现RSS订阅功能。
    +插件github网址：https://github.com/hexojs/hexo-generator-feed。
    +使用详见：https://www.jianshu.com/p/2aaac7a19736，https://wxnacy.com/2018/12/12/hexo-add-rss/

    - more >> + more >> @@ -904,7 +968,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -935,7 +999,7 @@

    -
    +
    @@ -944,7 +1008,7 @@

    - hexo+yilia添加背景音乐 + hexo+yilia添加版权声明

    @@ -953,8 +1017,8 @@

    - - + + @@ -972,10 +1036,10 @@

    -

    添加背景音乐（截图为APlayer播放器）
    -file

    +

    添加版权声明，效果图：
    +file

    - more >> + more >> @@ -1019,7 +1083,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -1050,7 +1114,7 @@

    -
    +
    @@ -1059,7 +1123,7 @@

    - hexo+yilia添加相册视屏功能 + hexo+yilia添加背景音乐

    @@ -1068,8 +1132,8 @@

    - - + + @@ -1087,11 +1151,10 @@

    -

    主要是添加相册和视频功能，参考Hexo-Github实现相册功能 ，csdn博客：Hexo+Github实现相册功能，我看到网上好多人都是按照这个模板来实现的。
    -效果图：
    -mV0P56.jpg

    +

    添加背景音乐（截图为APlayer播放器）
    +file

    - more >> + more >> @@ -1135,7 +1198,7 @@

    - 展开全文 >> + 展开全文 >>

    @@ -1166,7 +1229,7 @@

    -
    +
    @@ -1175,7 +1238,7 @@

    - hexo+yilia添加百度统计和Google统计 + hexo+yilia添加相册视屏功能

    @@ -1184,8 +1247,8 @@

    - - + + @@ -1203,16 +1266,11 @@

    -

    简介

    -

    百度统计和Google统计主要用于分析网站数据：流量、访客量等。
    -file

    -

    需要注册账号，然后将代码（脚本）嵌入到网站中，然后在后台就会生成对应数据，然后进行分析。

    - +

    主要是添加相册和视频功能，参考Hexo-Github实现相册功能 ，csdn博客：Hexo+Github实现相册功能，我看到网上好多人都是按照这个模板来实现的。
    +效果图：
    +mV0P56.jpg

    - more >> + more >> @@ -1256,7 +1314,7 @@

    简介

    - 展开全文 >> + 展开全文 >>

    @@ -1287,7 +1345,7 @@

    简介

    -
    +
    @@ -1296,7 +1354,7 @@

    简介

    - hexo+yilia进行SEO优化 + hexo+yilia添加百度统计和Google统计

    @@ -1305,8 +1363,8 @@

    - - + + @@ -1324,14 +1382,16 @@

    -

    介绍

    -

    SEO优化

    -

    推广是一个烦人的事情，特别是对于我们搞技术的来说，可能就不擅长推广，那么怎么才能让别人知道我们呢，我们就要想办法让别人通过搜索就可以搜索到你博客的内容，给我们带来自然流量，这就需要seo优化,让我们的站点变得对搜索引擎友好。

    -
    -

    SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。

    -
    +

    简介

    +

    百度统计和Google统计主要用于分析网站数据：流量、访客量等。
    +file

    +

    需要注册账号，然后将代码（脚本）嵌入到网站中，然后在后台就会生成对应数据，然后进行分析。

    + - more >> + more >> @@ -1375,7 +1435,7 @@

    SEO优化

    - 展开全文 >> + 展开全文 >>

    @@ -1406,7 +1466,7 @@

    SEO优化

    -
    +
    @@ -1415,7 +1475,7 @@

    SEO优化

    - hexo+yilia添加URL持久化 + hexo+yilia进行SEO优化

    @@ -1424,8 +1484,8 @@

    - - + + @@ -1443,14 +1503,14 @@

    -

    URL持久化

    -

    参考：你的Hexo博客SEO优化了吗？

    -

    我们可以发现hexo默认生成的文章地址路径是 【网站名称／年／月／日／文章名称】。比如这篇博客：
    -http://localhost:4000/2019/11/10/hexo+yilia添加URL持久化
    -这种链接对搜索爬虫是很不友好的，第一它的url结构超过了三层，太深了。第二使用了中文路径。这样会导致一个问题，在某些聊天工具或分享链接的时候会造成url转码变成很长一串难以读写的链接。而且如果你的页面之前被收录或被转载后，当你再次编辑过后可能会造成之前的url失效带来不必要的404, 比如下面这样：
    -http://localhost:4000/article/faa5d14。别担心，我们有好办法来解决它。

    +

    介绍

    +

    SEO优化

    +

    推广是一个烦人的事情，特别是对于我们搞技术的来说，可能就不擅长推广，那么怎么才能让别人知道我们呢，我们就要想办法让别人通过搜索就可以搜索到你博客的内容，给我们带来自然流量，这就需要seo优化,让我们的站点变得对搜索引擎友好。

    +
    +

    SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。

    +
    - more >> + more >> @@ -1494,7 +1554,7 @@

    URL持久化

    - 展开全文 >> + 展开全文 >>

    @@ -1707,19 +1767,19 @@

    URL持久化

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1850,7 +1910,7 @@

    URL持久化

    • - + diff --git a/page/4/index.html b/page/4/index.html index 5a3929e82..d1418fda9 100644 --- a/page/4/index.html +++ b/page/4/index.html @@ -5,6 +5,7 @@ + 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -355,6 +420,124 @@

    荷塘月色

    +
    + +
    + + +
    + + +

    + hexo+yilia添加URL持久化 +

    + + + + + + + + + + + + + + + + + + + + +
    + + + +
    + +

    URL持久化

    +

    参考：你的Hexo博客SEO优化了吗？

    +

    我们可以发现hexo默认生成的文章地址路径是 【网站名称／年／月／日／文章名称】。比如这篇博客原来的测试页面链接：http://localhost:4000/2019/11/10/hexo+yilia添加URL持久化
    +这种链接对搜索爬虫是很不友好的，第一它的url结构超过了三层，太深了。第二使用了中文路径。这样会导致一个问题，在某些聊天工具或分享链接的时候会造成url转码变成很长一串难以读写的链接。而且如果你的页面之前被收录或被转载后，当你再次编辑过后可能会造成之前的url失效带来不必要的404, 比如下面这样：
    +http://localhost:4000/article/faa5d14。别担心，我们有好办法来解决它。

    + + more >> + + + + + + + + + + + + + + + + + + + +
    + +
    + + +
    + + +
    + + + + +

    + 展开全文 >> +

    + + + +
    +
    +
    +
    + + + + + + + +
    @@ -1414,122 +1597,6 @@

    - - - - - - - - -

    - + diff --git a/page/5/index.html b/page/5/index.html index da2d84cd3..bff087876 100644 --- a/page/5/index.html +++ b/page/5/index.html @@ -5,6 +5,7 @@ + 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -355,6 +420,122 @@

    荷塘月色

    + + + + + + + + +
    @@ -898,19 +1079,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1041,7 +1222,7 @@

    • - + diff --git a/photos/index.html b/photos/index.html index c82f5cd4d..26fae2b5a 100644 --- a/photos/index.html +++ b/photos/index.html @@ -5,6 +5,7 @@ + 相册 | 荷塘月色的博客 @@ -25,6 +26,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -177,7 +210,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -232,7 +265,7 @@

    荷塘月色

    - + @@ -245,31 +278,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -320,7 +329,7 @@

    荷塘月色

    - + @@ -348,6 +357,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -719,19 +784,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -862,7 +927,7 @@

    • - + diff --git a/photos/videos.html b/photos/videos.html index 934e97ee1..fdcaf7484 100644 --- a/photos/videos.html +++ b/photos/videos.html @@ -5,6 +5,7 @@ + 相册 | 荷塘月色的博客 @@ -25,6 +26,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -177,7 +210,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -232,7 +265,7 @@

    荷塘月色

    - + @@ -245,31 +278,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -320,7 +329,7 @@

    荷塘月色

    - + @@ -348,6 +357,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -824,19 +889,19 @@

    指弹_Always with me

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -967,7 +1032,7 @@

    指弹_Always with me

    • - + diff --git a/rss2.xml b/rss2.xml new file mode 100644 index 000000000..f26cf6218 --- /dev/null +++ b/rss2.xml @@ -0,0 +1,408 @@ + + + + + 荷塘月色的博客 + https://www.yansheng.xyz/ + + + + 生活不止漫无天日的代码和bug，还有诗和远方。 + Sun, 05 Apr 2020 16:34:06 GMT + http://hexo.io/ + + + hexo+yilia添加APlayer音乐播放器 + https://www.yansheng.xyz/article/bf60dd05.html + https://www.yansheng.xyz/article/bf60dd05.html + Sun, 05 Apr 2020 15:26:34 GMT + + + <p>之前写过一篇文章，是将APlayer音乐播放器放到左侧的（详见：<a href="/article/5c52aefe.html">hexo+yilia添加背景音乐</a>），但是在手机端时，因为左侧边栏会被隐藏，因此也就会将播放器给隐藏掉。也就会是说手机端不能显示该播放器。</p> +<p>这里换一种方式，直接添加到整个页面中，使其在手机端也能使用。<br> +<img src="https://myblog12.qiniu.yansheng.xyz/picgo/20200406000912.jpg" alt></p> + + + + + 之前写过一篇文章，是将APlayer音乐播放器放到左侧的（详见：hexo+yilia添加背景音乐），但是在手机端时，因为左侧边栏会被隐藏，因此也就会将播放器给隐藏掉。也就会是说手机端不能显示该播放器。

    这里换一种方式，直接添加到整个页面中，使其在手机端也能使用。

    说明

    1. 如果你第一次安装APlayer音乐播放器，我建议你先看一下上面的那篇文章（如果你不介意手机端不能使用，按照那篇文章来也是OK的😬），这里不再详细介绍APlayer。
    2. 如果你之前有按照我上面的文章进行配置，建议先删除之前的配置，不然可能会有冲突。

    安装步骤

    1.添加插件

    找到对应H:\Hexo\themes\yilia\layout\layout.ejs的文件，在<body>和 <div id="container"之间添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!-- 《添加--APlayer音乐播放器,详见: https://aplayer.js.org/#/zh-Hans/ -->
    <% if(theme.aplayer.enable) { %>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">

        <div id="aplayer" style="text-align:left;z-index: 10;"></div>
        <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>

        <!-- 为方便修改，添加一个配置文件，修改时直接修改配置文件即可。 -->
        <script type="text/javascript" src="<%- url_for('js/APlayer_config.js') %>"></script>

        <!-- 根据封面自适应主题色，主要是作用于进度条 -->
        <script type="text/javascript">
              const colorThief = new ColorThief();
              const setTheme = (index) => {
                if (!ap.list.audios[index].theme) {
                  colorThief.getColorAsync(ap.list.audios[index].cover, function(color) {
                    ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
                  });
                }
              };
              setTheme(ap.list.index);
              ap.on('listswitch', (data) => {
                setTheme(data.index);
              });
        </script>
    <% } %>
    <!-- 添加--APlayer音乐播放器》 -->

    注意

    1. js/APlayer_config.js文件是APlayer的配置文件，需要自己新建，位置为：themes\yilia\source\js\APlayer_config.js，如果不懂参考之前的文章。
    2. 这里的<div id="aplayer"id需要与js/APlayer_config.js中container: document.getElementById('aplayer')的id一致。

    2.添加样式

    在H:\Hexo\themes\yilia\source\main.0cf68a.css任意位置添加如下代码：

    1
    2
    3
    4
    5
    @media screen and (max-width: 800px) {
        .aplayer {
            opacity:0.8;
        }
    }

    效果图

    PC端：见上

    手机端

    参考：为hexo博客yilia模版添加aplayer音乐播放器

    ]]>     + + https://www.yansheng.xyz/article/bf60dd05.html#disqus_thread +     + + + 2020年清明节 + https://www.yansheng.xyz/article/b75f4e3a.html + https://www.yansheng.xyz/article/b75f4e3a.html + Sat, 04 Apr 2020 01:26:45 GMT + + + <p>2020年4月4日清明节</p> +<p><img src="https://myblog12.qiniu.yansheng.xyz/picgo/%E8%9C%A1%E7%83%9B.jpg" alt></p> + + + + + 2020年4月4日清明节

    国务院发布公告：2020年4月4日举行全国性哀悼活动

    为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院今天（4月3日）发布公告，决定2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。

    《只要平凡》

    歌词

    只要平凡（电影《我不是药神》主题曲）

    演唱：张杰，张碧晨

    张杰：也许很远或是昨天 在这里或在对岸
    长路辗转离合悲欢 人聚又人散
    放过对错才知答案 活着的勇敢
    没有神的光环 你我生而平凡

    张碧晨：在心碎中认清遗憾 生命漫长也短暂
    跳动心脏长出藤蔓 愿为险而战
    跌入灰暗坠入深渊 沾满泥土的脸
    没有神的光环 握紧手中的平凡
    此心此生无憾 生命的火已点燃

    张杰：有一天也许会走远 也许还能再相见
    无论在人群在天边 让我再看清你的脸
    任泪水铺满了双眼 虽无言泪满面
    不要神的光环 只要你的平凡

    张碧晨：在心碎中认清遗憾 生命漫长也短暂
    跳动心脏长出藤蔓 愿为险而战
    跌入灰暗坠入深渊 沾满泥土的脸
    没有神的光环 握紧手中的平凡

    张杰：有一天也许会走远 也许还能再相见

    张碧晨：无论在人群在天边 让我再看清你的脸

    张杰：任泪水铺满了双眼 虽无言泪满面

    合：不要神的光环 只要你的平凡
    此心此生无憾 生命的火已点燃

    多灾多难的一年

    2019年非洲猪瘟肆意，猪价疯涨，至今仍未跌回原价。

    2019年3月30日17时，四川省凉山州木里县境内发生森林火灾，27名森林消防支队战士牺牲。我们的伤痛还未抚平，2020年3月30日凌晨3点，四川省凉山州西昌市突发山火，19位救火英雄牺牲。哪有什么岁月静好，只不过有人在替你负重前行。

    2019年年底至今，突如其来的新型冠状病毒肺炎让我们如临大敌，由武汉蔓延至全国，乃至全球。一场没有没有硝烟的战争悄然打响，武汉封城，一大批医护人员自愿请战，赶往第一线。全国人民众志成城，捐款捐物。

    祝愿：明天会更好！

    参考：

    ]]>     + + https://www.yansheng.xyz/article/b75f4e3a.html#disqus_thread +     + + + 冠状病毒2019-nCoV实时统计 + https://www.yansheng.xyz/article/ef6b6c25.html + https://www.yansheng.xyz/article/ef6b6c25.html + Wed, 25 Mar 2020 10:07:49 GMT + + + <p>介绍两个两个有实时数据的网站，方便我们关注新冠肺炎的情况。</p> +<p><img src="https://myblog12.qiniu.yansheng.xyz/picgo/20200325234333.png" alt></p> + + + + + 介绍两个两个有实时数据的网站，方便我们关注新冠肺炎的情况。

    中文网站（数据以国内为主）

    全球新冠病毒最新实时疫情地图_丁香园

    丁香园、丁香医生整合各权威渠道发布的官方数据，通过疫情地图直观展示，持续更新最新的新型冠状病毒肺炎的实时疫情动态。
    网址：https://ncov.dxy.cn/ncovh5/view/pneumonia

    全球新冠病毒最新实时疫情地图_丁香园

    英文网站（数据以国外为主）

    Coronavirus Map

    See the Coronavirus (COVID-19) cases on the map. Latest stats, information on new cases.
    网址：https://clustrmaps.com/coronavirus/

    Coronavirus Map

    ]]>     + + https://www.yansheng.xyz/article/ef6b6c25.html#disqus_thread +     + + + Hexo文章保存为草稿 + https://www.yansheng.xyz/article/ab5d2a72.html + https://www.yansheng.xyz/article/ab5d2a72.html + Tue, 17 Mar 2020 09:39:14 GMT + + + <img src="https://api.uixsj.cn/bing/bing.php" width="auto" height="auto" alt="bing每日壁纸" title="bing每日壁纸"> + + + + +

    Version

    Hexo 3.3.8

    传统建立文章方式

    一般我们都会使用 hexo new <title> 来建立文章（该命令其实是hexo new post <title>命令的简写形式），这种建立方法会将新文章建立在 source/_posts 目录下，当使用 hexo generate 编译 markdown 文件时，会将其 HTML 结果编译在 public 目录下，之后 hexo deploy 将会把 public 目录下所有文章部署到 GitHub，这是我们熟悉的 Hexo 流程。

    这种建立文章方式的缺点是：若我们同时编辑多篇文章，只要其中一篇文章尚未编辑完成，也会随着 hexo deploy 一起部署到 GitHub，也就是 GitHub 可能会看到我们尚未完成的文章。

    建立文章草稿

    1
    $ hexo new draft <title>

    Hexo 另外提供 draft 机制，它的原理是新文章将建立在 source/_drafts 目录下，因此 hexo generate 并不会将其编译到 public 目录下，所以 hexo deploy 也不会将其部署到 GitHub。

    本机预览草稿

    1
    $ hexo s --draft

    虽然 hexo generate 不会编译 source/_drafts 目录下的文章，但 Hexo 的 Hexo server 另外提供 --draft 参数，这让我们只要搭配 hexo-browsersync plugins，就可以达到一边编辑 markdown 文章，一边使用浏览器预览的目的。

    将草稿发布为正式文章

    1
    $ hexo p <filename>

    其中 <filename> 为不包含 md 后缀的文章名称。它的原理只是将文章从 source/_drafts 移动到 source/_posts 而已。

    之后的 hexo generate 与 hexo deploy 的用法就完全一样了。

    若日后想将正式文章转为为草稿，只需手动将文章从 source/_posts 目录移动到 source/_drafts 目录即可。

    ]]>     + + https://www.yansheng.xyz/article/ab5d2a72.html#disqus_thread +     + + + 中国加油，武汉加油！ + https://www.yansheng.xyz/article/a07aa35d.html + https://www.yansheng.xyz/article/a07aa35d.html + Sat, 29 Feb 2020 17:17:01 GMT + + + <p><img src="https://oss.yansheng.xyz/img/%E4%B8%AD%E5%9B%BD%E5%8A%A0%E6%B2%B9-%E6%AD%A6%E6%B1%89%E5%8A%A0%E6%B2%B9.jpg" alt="1月31日，武汉市江汉区西北湖附近高层建筑外墙打出“武汉加油”等字样（无人机照片）。 新华社记者 肖艺九 摄"></p> + + + + + 1月31日，武汉市江汉区西北湖附近高层建筑外墙打出“武汉加油”等字样（无人机照片）。 新华社记者 肖艺九 摄

    愿《黎明的编钟声》响起，一切疾病都已远去！

    以下内容转自：https://baijiahao.baidu.com/s?id=1658231454062945935&wfr=spider&for=pc

    夜走了

    天亮了

    天空和钟声一同醒来了

    樱花在温暖的春风中飞扬

    武汉，我们在等你

    近日，享誉世界盛名的国际流行钢琴家尚·马龙（Jean -Franois Maljean），在他的家乡比利时，特别为中国、为武汉创作的一首“战疫防疫”国际公益曲《CHIME OF THE DAWN BELLS》（中文名：《黎明的编钟声》）。他通过这首歌从地球的另一端为武汉送来遥远的祝福，致敬那些勇敢抗疫的前线人员，为中国人民、中国医护工作者加油鼓气。这也是新冠肺炎疫情爆发以来，首位外国艺术家创作的公益歌曲。

    尚·马龙是比利时知名的乐坛诗人，与雅尼、班得瑞、理查德·克莱德曼、喜多郎齐名，并称为新世纪十大音乐大师。他对中国的感情很深远，对中国的文化情有独钟，2010年与中国知名歌手共同演唱上海世博会比利时馆主题歌《我们的歌》 ，2018年创作的侗族大歌《尽情欢歌》曾登上央视春节联欢晚会。

    此次创作的《CHIME OF THE DAWN BELLS》（黎明的编钟声），尚·马龙特别加入了湖北编钟的元素，结合他本人的钢琴演奏，东西方乐器交融回旋，谱写了一曲“中国与世界命运与共”的华章。歌曲饱含深情，处处流露着中国传统文化和武汉城市元素。尚·马龙特别加了一段自己的中文独白：“夜走了，天亮了，天空和钟声一同醒来了，樱花在温暖的春风中飞扬，武汉，我们在等你。”以此来表达他对武汉，对中国深切的关怀与期待。

    尚·马龙在采访中表示：“我想告诉西方人民，他们不必害怕，应与目前陷入困境的中国人民友好相处。在我职业生涯的最近二十年里，中国给了我很大帮助，我真诚的愿意为中国的朋友们做些事来帮助他们。”（译）没有一个冬天不可逾越，没有一个春天不会来临，武汉和整个中国一定会战胜疫情，全世界人民都在期盼这一刻的到来。

    歌曲MV的制作也得到了全球各地人们以及武汉大学中南医院、世界银行华人职工协会、湖北省外商投资企业协会等众多机构的帮助，同时也邀请到了世界音乐大师Silvano Macaluso一起参与创作，这是他们的再次合作，Silvano Macaluso和尚·马龙曾经共同担任尚雯婕专辑《Nightmare》制作人。

    《CHIME OF THE DAWN BELLS》（黎明的编钟声）

    曲名：《CHIME BELLS OF DAWN》黎明的编钟声
    作词：Kelvin Ho（何浏）、Jean-Franois Maljean（尚·马龙）、ROBERT MURRAY
    作曲：Jean-Franois Maljean（尚·马龙）
    主唱：Noémie Maljean

    SUFFERING,SUFFERING
    疾病，苦难

    IS LIKE A DARK CLOUD.
    有如乌云

    LOOKING, LOOKING FAR AWAY
    远远望去

    YOU WILL SEE A DARK SKY
    你会看到天空墨黑一片

    BUT WHEN YOU’RE UNDER IT
    但是身临其下

    YOU ARE, YOU ARE ONLY GREY
    不过是灰色而已

    DON’T GIVE UP
    永不言弃

    WHEN YOU HEAR THE MUSIC OF CHIME BELLS
    听到编钟声响起

    STANDING ON THE YELLOW CRANE TOWER
    站在黄鹤楼上

    YOU MAY FEEL ALONE NOW
    此时你可能会感到孤单

    BUT THE WORLD STANDS WITH YOU
    但要相信世界人民与你们同在

    UNITED, UNITED PROUD AND BRAVE
    齐心协力、自强不息、勇往直前

    YOU WILL HEAR THE CHIME BELLS
    编钟响起时

    MUSIC LIFTS THE DARKNESS
    音乐终将会驱散黑暗

    SHINING, SHINING ON THE WAVES
    阳光照耀在江面上

    DON’T GIVE UP
    永不言弃

    WHEN YOU HEAR THE MUSIC OF CHIME BELLS
    听到编钟声响起

    STANDING ON THE YELLOW CRANE TOWER
    站在黄鹤楼上

    独白：夜走了
    天亮了
    天空和钟声一同醒来了
    樱花在温暖的春风中飞扬
    武汉，我们在等你

    THE DAWN WILL BREAK
    黎明总会到来

    TO END YOUR DARKEST HOUR
    黑夜终将过去

    STANDING ON THE YELLOW CRANE TOWER.
    站在黄鹤楼上

    THE DAWN WILL BREAK
    黎明总会到来

    TO END YOUR DARKEST HOUR
    黑夜终将过去

    STANDING ON THE YELLOW CRANE TOWER
    站在黄鹤楼上

    相关链接

    ]]>     + + https://www.yansheng.xyz/article/a07aa35d.html#disqus_thread +     + + + hexo+yilia添加分类页面 + https://www.yansheng.xyz/article/521a17ae.html + https://www.yansheng.xyz/article/521a17ae.html + Fri, 21 Feb 2020 14:44:00 GMT + + + <h2 id="效果图">效果图</h2> +<p>PC端：<br> +<img src="https://myblog12.qiniu.yansheng.xyz/picgo/20200221224830.png" alt></p> +<p>手机端：<br> +<img src="https://myblog12.qiniu.yansheng.xyz/picgo/20200221225116.png" alt></p> + + + + + 效果图

    PC端：

    手机端：

    一般情况下

    只需要新建一个页面，并且指定页面的类型即可生成对应的分类和归档页面，因为很多hexo的主题都集成了分类和标签的功能。

    具体可参考：Hexo新建标签、分类、归档等页面

    针对yilia主题

    虽然这个主题好像有集成，但是好像不管用！！！

    主要参考：https://github.com/litten/hexo-theme-yilia/issues/835

    步骤

    1.新建页面

    在hexo根目录运行命令hexo new page categories，新建一个分类页面。会在生成\source\categories\index.md文件，编辑的内容为：

    1
    2
    3
    4
    5
    6
    7
    ---
    title: 文章分类
    date: 2019-08-19 11:48:35
    toc: false
    comments: false
    layout: categories
    ---

    2.新建一个布局文件

    在你的博客路径下（如\themes\yilia\layout\目录)新建一个categories.ejs文件(用原来的category.ejs生成静态文件时会报错)，内容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <article class="article">
      <h3 class="category-count">共计 <%= site.categories.length %> 个分类, <%= site.tags.length %> 个标签</h3>
      <% if (site.categories.length){ %>
      <ul class="category-list">
        <% site.categories.sort('name').each(function(item){ %>
          <% if(item.posts.length){ %>
            <li class="category-list-item">
              <a href="<%- config.root %><%- item.path %>" class="category-list-link" title="<%= item.name %>">
                <%= item.name %>
                <span class="category-list-count"><%= item.posts.length %></span>
              </a>
            </li>
          <% } %>
        <% }) %>
      </ul>
      <% } %>
      <div class="tag-cloud">
        <%- tagcloud({
          min_font: 20, 
          max_font: 35, 
          amount: 999
        }) %>
      </div>
    </article>

    部署即可。

    3.添加样式

    你可以根据需要更改它的样式。可以参考这个，在\themes\yilia\source\main.0cf68a.css中添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    .category-count {
    text-align:center;
    line-height:3;
    font-size:18px;
    font-weight:bold;
    }
    .category-list {
    text-align:center;
    padding:20px
    }
    .category-list li.category-list-item {
    display:inline-block;
    margin:0 1em .5em 0;
    padding:4px;
    border:1px solid #aaaaaa;
    font-size:1.2rem
    }
    .category-list li.category-list-item:hover {
    background:rgba(204,204,204,0.3)
    }
    .tag-cloud {
    text-align:center;
    padding:20px
    }
    .tag-cloud a {
    margin:0 20px;
    word-break:keep-all;
    position:relative
    }
    .tag-cloud a:hover::before {
    width:100%;
    left:0;
    right:auto
    }
    .tag-cloud a::before {
    content:"";
    position:absolute;
    width:0;
    right:0;
    bottom:0;
    height:2px;
    background:#08c;
    -webkit-transition:width .3s ease;
    transition:width .3s ease
    }

    4.效果

    默认样式的效果：

    手机端

    修改样式

    这主要是修改标题和超链接的样式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    /*《分类页面，标签页面样式*/
    /*标题*/
    .category-count {
        text-align:center;
        line-height:3;
        font-size:50px;
        font-weight: bold;
        font-family: STCaiyun, STXingkai;
        display: block;
        /*渐变背景*/
        background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
        color: transparent;
        /*文字填充色为透明*/
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        /*背景剪裁为文字，只将文字显示为背景*/
        background-size: 200% 100%;
        /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
        /* 动画 */
        animation: masked-animation 4s infinite linear;
    }
    @keyframes masked-animation {
        0% {
            background-position: 0 0;
            /*background-position 属性设置背景图像的起始位置。*/
        }
        100% {
            background-position: -100% 0;
        }
    }
    /* 手机端CSS代码 */
     @media screen and (max-width: 960px) {
        .category-count {
            text-align:center;
            line-height:3;
            font-size:27px;
        }
    }
    /* 分类 */
    .category-list {
        text-align:center;
        padding:20px
    }
    .category-list li.category-list-item {
        display:inline-block;
        margin:0 1em .5em 0;
        padding:4px;
        /* border:1px solid #aaaaaa; */
        font-size:1.2rem
    }
    .category-list li.category-list-item a{
        text-decoration: none;
    }
    .category-list li.category-list-item:hover {
        color:#ffffff;
    }
    /* .category-list li.category-list-item:hover {
        background:rgba(204, 204, 204, 0.3)
    } */

    /* https://github.com/IanLunn/Hover,
    https://ianlunn.github.io/Hover/ */
    /* Rectangle In */
    .hvr-rectangle-in {
      display: inline-block;
      vertical-align: middle;
      padding: 0.5em;
      -webkit-transform: perspective(1px) translateZ(0);
      transform: perspective(1px) translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      position: relative;
      background: #2098D1;
      border-radius: 10px;
      -webkit-transition-property: color;
      transition-property: color;
      -webkit-transition-duration: 0.5s;
      transition-duration: 0.5s;
    }
    .hvr-rectangle-in:before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #e1e1e1;
      border-radius: 10px;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transition-property: transform;
      transition-property: transform;
      -webkit-transition-duration: 0.5s;
      transition-duration: 0.5s;
      -webkit-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
    }
    .hvr-rectangle-in:hover, .hvr-rectangle-in:focus, .hvr-rectangle-in:active {
      color: white;
    }
    .hvr-rectangle-in:hover:before, .hvr-rectangle-in:focus:before, .hvr-rectangle-in:active:before {
      -webkit-transform: scale(0);
      transform: scale(0);
    }

    /* 分类和标签的分界面 */
    .category-hr-tag {
    }

    /* 标签 */
    .tag-cloud {
        text-align:center;
        padding:20px
    }
    .tag-cloud a {
        margin:0 20px;
        word-break:keep-all;
        position:relative
    }
    .tag-cloud a:hover::before {
        width:100%;
        left:0;
        right:auto
    }
    .tag-cloud a::before {
        content:"";
        position:absolute;
        width:0;
        right:0;
        bottom:0;
        height:2px;
        background:#08c;
        -webkit-transition:width .3s ease;
        transition:width .3s ease
    }
    /*分类页面，标签页面样式》*/

    /*《版权声明的样式*/
     .declare {
        background-color: #eaeaea;
        margin-top: 2em;
        border-left: 3px solid #ff1700;
        padding: .5em 1em;
    }
    /*版权声明的样式》*/

    新增分界线

    修改H:\Hexo\themes\yilia\layout\categories.ejs，在<div class="tag-cloud">前面新增：

    1
    <hr class="category-hr-tag" width="90%" color="#987cb9" size="3">

    效果图

    见上

    ]]> + + https://www.yansheng.xyz/article/521a17ae.html#disqus_thread + + + + hexo-yilia添加Dplayer视频播放插件 + https://www.yansheng.xyz/article/252051e3.html + https://www.yansheng.xyz/article/252051e3.html + Tue, 04 Feb 2020 05:06:21 GMT + + + <h2 id="引言">引言</h2> +<p>如何在博客中插入视频是件麻烦事，视频来源多种多样，优酷、爱奇艺、云空间；视频的相关控件也需要考虑。如果有插件就很方便了。Dplayer就是为这种需求而产生的！</p> +<h2 id="使用dplayer插件">使用Dplayer插件</h2> +<p>github: <a href="https://github.com/MoePlayer/hexo-tag-dplayer" target="_blank" rel="noopener">https://github.com/MoePlayer/hexo-tag-dplayer</a></p> +<p><img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1580801312951.png" alt="file"></p> + + + + + 引言

    如何在博客中插入视频是件麻烦事，视频来源多种多样，优酷、爱奇艺、云空间；视频的相关控件也需要考虑。如果有插件就很方便了。Dplayer就是为这种需求而产生的！

    使用Dplayer插件

    github: https://github.com/MoePlayer/hexo-tag-dplayer

    file

    引用

    npm install

    1
    npm install hexo-tag-dplayer --save

    Usage

    1
    {% dplayer key=value ... %}

    key can be

    1
    2
    3
    4
    5
    6
    7
    8
    dplayer options:
        'autoplay', 'loop', 'screenshot', 'hotkey', 'mutex', 'dmunlimited' : bool options, use "yes" "y" "true" "1" "on" or just without value to enable
        'preload', 'theme', 'lang', 'logo', 'url', 'pic', 'thumbnails', 'vidtype', 'suburl', 'subtype', 'subbottom', 'subcolor', 'subcolor', 'id', 'api', 'token', 'addition', 'dmuser' : string arguments
        'volume', 'maximum' : number arguments
    container options:
        'width', 'height' : string, used in container element style
    other:
        'code' : value of this key will be append to script tag

    arguments to DPlayer options mapping:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    {
        container: "you needn't set this",
        autoplay: 'autoplay',
        theme: 'theme',
        loop: 'loop',
        lang: 'lang',
        screenshot: 'screenshot',
        hotkey: 'hotkey',
        preload: 'preload',
        logo: 'logo',
        volume: 'volume',
        mutex: 'mutex',
        video: {
            url: 'url',
            pic: 'pic',
            thumbnails: 'thumbnails',
            type: 'vidtype',
        },
        subtitle: {
            url: 'suburl',
            type: 'subtype',
            fontSize: 'subsize',
            bottom: 'subbottom',
            color: 'subcolor',
        },
        danmaku: {
            id: 'id',
            api: 'api',
            token: 'token',
            maximum: 'maximum',
            addition: ['addition'],
            user: 'dmuser',
            unlimited: 'dmunlimited',
        },
        icons: 'icons',
        contextmenu: 'menu',
    }

    see dplayer documents for more infomation.

    for example:

    1
    2
    {% dplayer "url=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4" "addition=https://dplayer.daoapp.io/bilibili?aid=4157142" "api=https://api.prprpr.me/dplayer/" "pic=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.jpg" "id=9E2E3368B56CDBB4" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}
    {% dplayer 'url=some.mp4' "id=someid" "api=https://api.prprpr.me/dplayer/" "addition=/some.json" 'code=player.on("loadstart",function(){console.log("loadstart")})' "autoplay" %}

    引用结束

    测试

    注：以下可能有部分视频链接已失效，详见bug:2.视频链接会失效。

    1.简单模式

    【J.Fla】J.Fla最新翻唱《Let Her Go》（中英字幕）

    1
    2
    {% dplayer "url=https://oss.yansheng.xyz/video/Let%20Her%20Go-J.Fla.mp4" 
    "loop=yes" "theme=#FADFA3" "autoplay=false"%}

    2.设置大小

    1
    2
    {% dplayer "url=https://oss.yansheng.xyz/video/Let%20Her%20Go-J.Fla.mp4" 
    "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

    3.各视频网站测试

    注：获取网站视频链接的方法

    1. 直接F12审查网页元素可以获取大部分视频链接。
    2. blob:http开头的链接，在调试模式下，切换成手机端，一般都可以获取视频链接。当然也可以尝试使用下面的几种方法（不敢保证肯定可以）。

    相关链接：

    优酷-blob:http

    测试地址：播放量破60亿的神曲就是不一样，Jfla翻唱播放量都能破亿：https://v.youku.com/v_show/id_XNDEzMTQ2Mzc2OA==.html?spm=a2h0k.11417342.soresults.dtitle

    1
    2
    {% dplayer "url=https://ip3909677239.mobgslb.tbcache.com/697527F075E4271B3854E35FD/03000801005D16BE6A7657C5ACCC9273FC634F-4FE4-42BD-9058-BDD737033AD6.mp4?ccode=0501&duration=209&expire=18000&psid=d4651e02fe8648bae7ba5eb90e634aee&ups_client_netip=78efecb2&ups_ts=1580803578&ups_userid=&utid=5dEkFu7TTAoCAaOOg8%2Fdh%2Bzg&vid=XNDEzMTQ2Mzc2OA&vkey=Ae25465c34a3e1d5a0008c52dbd954ac2&bc=2&dre=u21&si=42&ali_redirect_domain=ykugc.cp31.ott.cibntv.net&ali_redirect_ex_ftag=6bb8c51a31829f123b81d2f8f31d62ad1de1e72da5be49b4&ali_redirect_ex_tmining_ts=1580803613&ali_redirect_ex_tmining_expire=3600&ali_redirect_ex_hot=100"
    "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

    爱奇艺-blob:http

    好像找不到链接！！

    测试地址：JFla最新翻唱视频 《Havana》中英文字幕版：http://www.iqiyi.com/w_19rye3lv79.html

    腾讯视频

    测试地址：开口跪！JFla小姐姐逆天翻唱《英雄联盟》主题曲《Legends Never die》(传奇永不熄)，也就听了100遍：https://v.qq.com/x/page/r07217dqdps.html

    1
    2
    {% dplayer "url=https://apd-269733cd84807e39d1c4e3453c172928.v.smtcdns.com/om.tc.qq.com/AUBPmiNNTAT3He9k_05J1HRAM1yZVGlQ-hDZtg0epZFQ/uwMROfz2r57IIaQXGdGnC2ddDmZUA-P9pUvDyp7Vcj06VB05/shg_57576174_50001_208137e9f2843cf7850adcc2052bdd4a.f622.mp4?sdtfrom=v1010&guid=7ae1df42357b9bcea3195ca549ce5531&vkey=4B6DB7E072CA38A41C053A938FA7D1B91D1783ACF46A1356E88C71B8160881DEC88D761C281209C12C1DAB9772F55FB572EA0D675ACA209A621B3BC4789A2D91FEA05680B9EA477C282FC1B4A32BCB1E5EEF5DFCC65AA2A4B2BCB2AB51E54FABD0E1122171184A171FFE7C84CFB1295C720E320BFCE4648EF92358A0BFDAC7FB"
    "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

    B站-blob:http

    测试地址：【J.Fla】J.Fla最新翻唱《Let Her Go》（中英字幕）:https://www.bilibili.com/medialist/play/ml445525356/

    1
    2
    {% dplayer "url=https://cn-jxnc-cmcc-bcache-07.bilivideo.com/upgcxcode/97/06/37010697/37010697-1-6.mp4?e=ig8euxZM2rNcNbdlhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1580811360&gen=playurl&os=bcache&oi=2028989618&trid=49761c7626084b8b8b97074e119e8a41h&platform=html5&upsig=d5272df25514a59fbdb296cefefcb96c&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=91203456&origin_cdn=ks3" 
    "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

    酷狗音乐MV

    好像找不到

    测试地址：https://www.kugou.com/mvweb/html/mv_1298B160E162FD8DD62176860AC07B0B.html

    网易云音乐MV-blob:http

    测试地址：J.Fla不插电演唱原创新单《Good Vibe》:https://music.163.com/#/mv?id=10893889

    1
    2
    {% dplayer "url=http://vodkgeyttp8.vod.126.net/cloudmusic/1182/core/91d9/071e7736fb284fe4d7d020a3cf693362.mp4?wsSecret=ff87443a41aebf38eaafd4385b736940&wsTime=1580818343" 
    "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

    bug🐛

    1.设置宽高参数后，手机端不能自适应

    额外添加样式控制手机端样式H:\Hexo\themes\yilia\source\main.0cf68a.css

    1
    2
    3
    4
    5
    6
    @media screen and (max-width: 800px) {
       .dplayer {
    max-width:394.4px;
    max-height:221.6px;
        }
    }

    2.视频链接会失效

    虽然上面提到的方式大部分可以获取视频链接，但是可以发现，这个链接都很长，是“防盗链”（?后面的是查询串，包含各种参数。比如设置时间参数，超时就失效。这是为了防止被频繁访问，造成服务器负担而考虑的）。那怎么解决呢？推荐下面几种方法：

    1. 研究防盗链，看能不能让他不失效。好像有点复杂……
    2. 自建云空间：根据视频链接下载该视频，然后上传到自己的云空间☁️（七牛云、阿里云等的OSS空间），然后使用自己的链接。（推荐，第一个视频就是我下载后，上传到阿里云OSS的。）
    3. 使用视频网站自己的分享渠道：

    如：

    1
    <iframe height=498 width=510 src='https://player.youku.com/embed/XNDEzMTQ2Mzc2OA==' frameborder=0 'allowfullscreen'></iframe>

    效果：

    ]]> + + https://www.yansheng.xyz/article/252051e3.html#disqus_thread + + + + 2019再见，2020你好 + https://www.yansheng.xyz/article/94a46e7b.html + https://www.yansheng.xyz/article/94a46e7b.html + Wed, 01 Jan 2020 14:05:47 GMT + + + <p><strong>Happy New Year！</strong></p> +<p><img src="https://myblog12.qiniu.yansheng.xyz/picgo/wallhaven-83jmq2.png" alt></p> + + + + + Happy New Year！

    习近平主席2020新年贺词

    2019年12月31日晚7时，国家主席习近平通过中央广播电视总台和互联网，发表二〇二〇年新年贺词。全文如下：(转自：http://news.ifeng.com/c/7srLqMlTqMR)

    ​ 2020年就要到了，我在首都北京向大家送上新年的美好祝福！

    ​2019年，我们用汗水浇灌收获，以实干笃定前行。高质量发展平稳推进，我国国内生产总值预计将接近100万亿元人民币、人均将迈上1万美元的台阶。三大攻坚战取得关键进展。京津冀协同发展、长江经济带发展、粤港澳大湾区建设、长三角一体化发展按下快进键，黄河流域生态保护和高质量发展成为国家战略。全国将有340个左右贫困县摘帽、1000多万人实现脱贫。嫦娥四号在人类历史上第一次登陆月球背面，长征五号遥三运载火箭成功发射，雪龙2号首航南极，北斗导航全球组网进入冲刺期，5G商用加速推出，北京大兴国际机场“凤凰展翅”……这些成就凝结着新时代奋斗者的心血和汗水，彰显了不同凡响的中国风采、中国力量。

    ​一年来，改革开放不断催生发展活力。党和国家机构改革圆满完成。增设一批自由贸易试验区和上海自由贸易试验区新片区。科创板顺利启动推进。减税降费总额超过2万亿元。个人所得税起征点提高了，老百姓常用的许多药品降价了，网络提速降费使刷屏更快了，垃圾分类引领着低碳生活新时尚。“基层减负年”让基层干部轻装上阵。放眼神州大地，处处都有新变化新气象。

    ​一年来，国防和军队改革扎实推进，人民军队展现出新时代强军风貌。我们进行国庆大阅兵，举行海军、空军成立70周年庆祝活动，举办第七届世界军人运动会。首艘国产航母正式列装。人民子弟兵永远是保卫祖国的钢铁长城，让我们向守护家园的忠诚卫士们致敬！

    ​2019年，最难忘的是隆重庆祝新中国成立70周年。我们为共和国70年的辉煌成就喝彩，被爱国主义的硬核力量震撼。阅兵方阵威武雄壮，群众游行激情飞扬，天安门广场成了欢乐的海洋。大江南北披上红色盛装，人们脸上洋溢着自豪的笑容，《我和我的祖国》在大街小巷传唱。爱国主义情感让我们热泪盈眶，爱国主义精神构筑起民族的脊梁。这一切，汇聚成礼赞新中国、奋斗新时代的前进洪流，给我们增添了无穷力量。

    ​一年来，我去了不少地方。雄安新区画卷徐徐铺展，天津港蓬勃兴盛，北京城市副中心生机勃发，内蒙古大草原壮美亮丽，河西走廊穿越千年、历久弥新，九曲黄河天高水阔、雄浑安澜，黄浦江两岸物阜民丰、流光溢彩……祖国各地一派欣欣向荣的景象。我沿着中国革命的征程砥砺初心。从江西于都红军长征集结出发地到河南新县鄂豫皖苏区首府革命博物馆，从甘肃高台西路军纪念碑到北京香山革命纪念地，每个地方都让我思绪万千，初心和使命是我们走好新时代长征路的不竭动力。

    ​同往常一样，我无论多忙，都要抽时间到乡亲们中走一走看一看。大家跟我说了很多心里话，我一直记在心上。云南贡山独龙族群众、福建寿宁县下党乡的乡亲、“王杰班”全体战士、北京体育大学研究生冠军班同学、澳门小朋友和义工老人，给我写了信。我在回信中肯定了大家取得的成绩，也表达了良好祝愿。

    ​一年来，许多人和事感动着我们。一辈子深藏功名、初心不改的张富清，把青春和生命献给脱贫事业的黄文秀，为救火而捐躯的四川木里31名勇士，用自己身体保护战友的杜富国，以十一连胜夺取世界杯冠军的中国女排……许许多多无怨无悔、倾情奉献的无名英雄，他们以普通人的平凡书写了不平凡的人生。

    ​2019年，中国继续张开双臂拥抱世界。我们主办了第二届“一带一路”国际合作高峰论坛、北京世界园艺博览会、亚洲文明对话大会、第二届中国国际进口博览会，向世界展示了一个文明、开放、包容的中国。我同很多国家元首和政府首脑会晤，分享了中国主张，增进了友谊，深化了共识。世界上又有一些国家同我国建交，我国建交国达到180个。我们的朋友遍天下！

    ​2020年是具有里程碑意义的一年。我们将全面建成小康社会，实现第一个百年奋斗目标。2020年也是脱贫攻坚决战决胜之年。冲锋号已经吹响。我们要万众一心加油干，越是艰险越向前，把短板补得再扎实一些，把基础打得再牢靠一些，坚决打赢脱贫攻坚战，如期实现现行标准下农村贫困人口全部脱贫、贫困县全部摘帽。

    ​前几天，我出席了澳门回归祖国20周年庆祝活动，我为澳门繁荣稳定感到欣慰。澳门的成功实践表明，“一国两制”完全行得通、办得到、得人心。近几个月来，香港局势牵动着大家的心。没有和谐稳定的环境，怎会有安居乐业的家园！真诚希望香港好、香港同胞好。香港繁荣稳定是香港同胞的心愿，也是祖国人民的期盼。

    ​历史长河奔腾不息，有风平浪静，也有波涛汹涌。我们不惧风雨，也不畏险阻。中国将坚定不移走和平发展道路，坚定不移维护世界和平、促进共同发展。我们愿同世界各国人民携起手来，积极共建“一带一路”，推动构建人类命运共同体，为创造人类美好未来而不懈努力。

    ​此时此刻，还有许多人在坚守岗位，许多人在守护平安，许多人在辛勤劳作。大家辛苦了！

    ​让我们只争朝夕，不负韶华，共同迎接2020年的到来。

    ​祝大家新年快乐！

    ]]>     + + https://www.yansheng.xyz/article/94a46e7b.html#disqus_thread +     + + + Commit message 和 Change log 编写指南 + https://www.yansheng.xyz/article/ad81da89.html + https://www.yansheng.xyz/article/ad81da89.html + Mon, 09 Dec 2019 12:46:12 GMT + + + <p>如何写好Commit message 和 Change log</p> +<p><img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1575910523037.png" alt="常规的changelog，conventional-changelog"></p> + + + + + 如何写好Commit message 和 Change log

    常规的changelog，conventional-changelog

    以下内容转自：Commit message 和 Change log 编写指南

    链接：http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html

    作者： 阮一峰

    日期： 2016年1月 6日

    Commit message 和 Change log 编写指南

    Git 每次提交代码，都要写 Commit message（提交说明），否则就不允许提交。

    1
    $ git commit -m "hello world"

    上面代码的-m参数，就是用来指定 commit mesage 的。

    如果一行不够，可以只执行git commit，就会跳出文本编辑器，让你写多行。

    1
    $ git commit

    基本上，你写什么都行（这里，这里和这里）。

    但是，一般来说，commit message 应该清晰明了，说明本次提交的目的。

    目前，社区有多种 Commit message 的写法规范。本文介绍Angular 规范（见上图），这是目前使用最广的写法，比较合理和系统化，并且有配套的工具。

    一、Commit message 的作用

    格式化的Commit message，有几个好处。

    （1）提供更多的历史信息，方便快速浏览。

    比如，下面的命令显示上次发布后的变动，每个commit占据一行。你只看行首，就知道某次 commit 的目的。

    1
    $ git log <last tag> HEAD --pretty=format:%s

    （2）可以过滤某些commit（比如文档改动），便于快速查找信息。

    比如，下面的命令仅仅显示本次发布新增加的功能。

    1
    $ git log <last release> HEAD --grep feature

    （3）可以直接从commit生成Change log。

    Change Log 是发布新版本时，用来说明与上一个版本差异的文档，详见后文。

    二、Commit message 的格式

    每次提交，Commit message 都包括三个部分：Header，Body 和 Footer。

    1
    2
    3
    4
    5
    <type>(<scope>): <subject>
    // 空一行
    <body>
    // 空一行
    <footer>

    其中，Header 是必需的，Body 和 Footer 可以省略。

    不管是哪一个部分，任何一行都不得超过72个字符（或100个字符）。这是为了避免自动换行影响美观。

    2.1 Header

    Header部分只有一行，包括三个字段：type（必需）、scope（可选）和subject（必需）。

    （1）type

    type用于说明 commit 的类别，只允许使用下面7个标识。

    • feat：新功能（feature）
    • fix：修补bug
    • docs：文档（documentation）
    • style： 格式（不影响代码运行的变动）
    • refactor：重构（即不是新增功能，也不是修改bug的代码变动）
    • test：增加测试
    • chore：构建过程或辅助工具的变动

    如果type为feat和fix，则该 commit 将肯定出现在 Change log 之中。其他情况（docs、chore、style、refactor、test）由你决定，要不要放入 Change log，建议是不要。

    （2）scope

    scope用于说明 commit 影响的范围，比如数据层、控制层、视图层等等，视项目不同而不同。

    （3）subject

    subject是 commit 目的的简短描述，不超过50个字符。

    • 以动词开头，使用第一人称现在时，比如change，而不是changed或changes
    • 第一个字母小写
    • 结尾不加句号（.）

    2.2 Body

    Body 部分是对本次 commit 的详细描述，可以分成多行。下面是一个范例。

    1
    2
    3
    4
    5
    6
    7
    More detailed explanatory text, if necessary.  Wrap it to 
    about 72 characters or so. 

    Further paragraphs come after blank lines.

    - Bullet points are okay, too
    - Use a hanging indent

    有两个注意点。

    （1）使用第一人称现在时，比如使用change而不是changed或changes。

    （2）应该说明代码变动的动机，以及与以前行为的对比。

    Footer 部分只用于两种情况。

    （1）不兼容变动

    如果当前代码与上一个版本不兼容，则 Footer 部分以BREAKING CHANGE开头，后面是对变动的描述、以及变动理由和迁移方法。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    BREAKING CHANGE: isolate scope bindings definition has changed.

        To migrate the code follow the example below:

        Before:

        scope: {
          myAttr: 'attribute',
        }

        After:

        scope: {
          myAttr: '@',
        }

        The removed `inject` wasn't generaly useful for directives so there should be no code using it.

    （2）关闭 Issue

    如果当前 commit 针对某个issue，那么可以在 Footer 部分关闭这个 issue 。

    1
    Closes #234

    也可以一次关闭多个 issue 。

    1
    Closes #123, #245, #992

    2.4 Revert

    还有一种特殊情况，如果当前 commit 用于撤销以前的 commit，则必须以revert:开头，后面跟着被撤销 Commit 的 Header。

    1
    2
    3
    revert: feat(pencil): add 'graphiteWidth' option

    This reverts commit 667ecc1654a317a13331b17617d973392f415f02.

    Body部分的格式是固定的，必须写成This reverts commit &lt;hash>.，其中的hash是被撤销 commit 的 SHA 标识符。

    如果当前 commit 与被撤销的 commit，在同一个发布（release）里面，那么它们都不会出现在 Change log 里面。如果两者在不同的发布，那么当前 commit，会出现在 Change log 的Reverts小标题下面。

    三、Commitizen

    Commitizen是一个撰写合格 Commit message 的工具。

    安装命令如下。

    1
    $ npm install -g commitizen

    然后，在项目目录里，运行下面的命令，使其支持 Angular 的 Commit message 格式。

    1
    $ commitizen init cz-conventional-changelog --save --save-exact

    以后，凡是用到git commit命令，一律改为使用git cz。这时，就会出现选项，用来生成符合格式的 Commit message。

    四、validate-commit-msg

    validate-commit-msg 用于检查 Node 项目的 Commit message 是否符合格式。

    它的安装是手动的。首先，拷贝下面这个JS文件，放入你的代码库。文件名可以取为validate-commit-msg.js。

    接着，把这个脚本加入 Git 的 hook。下面是在package.json里面使用 ghooks，把这个脚本加为commit-msg时运行。

    1
    2
    3
    4
    5
    "config": {
        "ghooks": {
          "commit-msg": "./validate-commit-msg.js"
        }
      }

    然后，每次git commit的时候，这个脚本就会自动检查 Commit message 是否合格。如果不合格，就会报错。

    1
    2
    3
    $ git add -A 
    $ git commit -m "edit markdown" 
    INVALID COMMIT MSG: does not match "<type>(<scope>): <subject>" ! was: edit markdown

    五、生成 Change log

    如果你的所有 Commit 都符合 Angular 格式，那么发布新版本时， Change log 就可以用脚本自动生成（例1，例2，例3）。

    生成的文档包括以下三个部分。

    • New features
    • Bug fixes
    • Breaking changes.

    每个部分都会罗列相关的 commit ，并且有指向这些 commit 的链接。当然，生成的文档允许手动修改，所以发布前，你还可以添加其他内容。

    conventional-changelog 就是生成 Change log 的工具，运行下面的命令即可。

    1
    2
    3
    $ npm install -g conventional-changelog
    $ cd my-project
    $ conventional-changelog -p angular -i CHANGELOG.md -w

    上面命令不会覆盖以前的 Change log，只会在CHANGELOG.md的头部加上自从上次发布以来的变动。

    如果你想生成所有发布的 Change log，要改为运行下面的命令。

    1
    $ conventional-changelog -p angular -i CHANGELOG.md -w -r 0

    为了方便使用，可以将其写入package.json的scripts字段。

    1
    2
    3
    4
    5
    {
      "scripts": {
        "changelog": "conventional-changelog -p angular -i CHANGELOG.md -w -r 0"
      }
    }

    以后，直接运行下面的命令即可。

    1
    $ npm run changelog

    （完）

    文档信息

    • 版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
    • 发表日期：2016年1月 6日

    转载结束

    相关链接

    https://github.com/conventional-changelog/conventional-changelog

    Git commit message和工作流规范]https://www.cnblogs.com/qcloud1001/p/6640787.html

    ［译］AngularJS Git提交信息规范:https://segmentfault.com/a/1190000004282514

    Git-Commit-Log规范（Angular 规范）https://www.jianshu.com/p/c7e40dab5b05

    ]]>     + + https://www.yansheng.xyz/article/ad81da89.html#disqus_thread +     + + + 记一次Spring项目的MySQL乱码问题 + https://www.yansheng.xyz/article/dbd84c59.html + https://www.yansheng.xyz/article/dbd84c59.html + Sun, 08 Dec 2019 14:39:29 GMT + + + <p>项目：Spring+Mybatis++SpringMVC+MySQL。</p> +<p>首先要明确发生乱码的原因是字符编码不一致，抓住这一个进行分析。出现问题的出处常常是中文、小表情（测试时要有针对性）。</p> +<p><img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1575912638971.png" alt="file"></p> + + + + + 项目：Spring+Mybatis++SpringMVC+MySQL。

    首先要明确发生乱码的原因是字符编码不一致，抓住这一个进行分析。出现问题的出处常常是中文、小表情（测试时要有针对性）。

    file

    排查过程可参考一下几点：

    1.硬要去–统一文件的编码

    假设都一utf-8为编码。

    1. 数据库统一设置为utf8编码。数据库编码设置为utf8，表、字段如果不进行设置，默认继承上级设置。
    2. 项目编码设置为utf8，主要是java、html、jsp、css、js等文件的编码。

    2.传输过程编码

    前台–>后台

    措施

    在springMVC中设置编码过滤器，统一设置成utf8

    测试

    后台控制台打印前台传输的数据，参看数据与输入数据是否一致。（如果设置到js，也可能前端控制台打印输入数据）。

    后台–>数据库

    措施

    数据库连接的URL，添加字符集参数：

    1.字符集参数

    jdbc:mysql://192.168.0.105:3306/shgb_fz?useUnicode=true&characterEncoding=UTF8&autoReconnect=true&zeroDateTimeBehavior=convertToNull

    参数名称 参数说明
    user 数据库用户名（用于连接数据库）
    password 用户密码（用于连接数据库）
    useUnicode 是否使用Unicode字符集，如果参数characterEncoding设置为gb2312或gbk，本参数值必须设置为true
    characterEncoding 当useUnicode设置为true时，指定字符编码。比如可设置为gb2312或gbk
    autoReconnect 当数据库连接异常中断时，是否自动重新连接？
    autoReconnectForPools 是否使用针对数据库连接池的重连策略
    failOverReadOnly 自动重连成功后，连接是否设置为只读？
    maxReconnects autoReconnect设置为true时，重试连接的次数
    initialTimeout autoReconnect设置为true时，两次重连之间的时间间隔，单位：秒
    connectTimeout 和数据库服务器建立socket连接时的超时，单位：毫秒。 0表示永不超时，适用于JDK 1.4及更高版本
    socketTimeout socket操作（读写）超时，单位：毫秒。 0表示永不超时

    ————————————————
    版权声明：本文为CSDN博主「哈唬咯」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
    原文链接：https://blog.csdn.net/qq_36793179/article/details/78719592

    jdbc URL中的各个参数详解

    https://blog.csdn.net/weixin_34220963/article/details/86463924

    1
    String url = "jdbc:mysql://localhost:3306/DATABASES-NAME?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true&allowPublicKeyRetrieval=true";

    https://dev.mysql.com/doc/connectors/en/connector-j-reference-configuration-properties.html

    2.连接名

    云服务器：jdbc:mysql://192.168.0.105:3306/shgb_fz

    本地：jdbc:mysql://localhost:3306/shgb_fz，简写形式：jdbc:mysql:///shgb_fz

    3.jdbc8

    1
    2
    3
    4
    5
    6
    Class.forName("com.mysql.cj.jdbc.Driver");
    String url = "jdbc:mysql://localhost:3306/DATABASES-NAME?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true&allowPublicKeyRetrieval=true";

    ————————————————
    版权声明：本文为CSDN博主「溜溜的小胖」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
    原文链接：https://blog.csdn.net/aliuxina/article/details/91358010

    3.xml文件需要转义

    1
    2
    3
    &
    转义为
    &amp;

    测试

    利用junit进行测试，直接模拟数据，从控制台插入到数据库，查看是否乱码。

    涉及到的问题

    1.基于spring的句junit测试：junit测试Dao层：https://blog.csdn.net/lovelease/article/details/70155788

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    package com.project.dao;
     
    import org.junit.Assert;
    import org.junit.Test;
    import org.junit.runner.RunWith;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.test.context.ContextConfiguration;
    import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
     
     
    @RunWith(SpringJUnit4ClassRunner.class)// 不能是PowerMock等别的class，否则无法识别spring的配置文件
    @ContextConfiguration("file:conf/applicationContext.xml")// 读取spring配置文件
    public class userDAOTest {

    @Autowired//检索applicationContext.xml，自动注入指定的bean
    UserDAO userDAO;
     
    @Test
    public void testGetUser() {
    int userId = 1;
    String nickname = "昵称1";

    Assert.assertEquals(userId, userDAO.getUser( userId ).getUserId());
    Assert.assertEquals(nickname, userDAO.getUser( userId ).getNickname());
    }
    }
    1.@RunWith和@ContextConfiguration的作用解析

    https://blog.csdn.net/H838071332/article/details/89916490

    1
    2
    @RunWith(SpringJUnit4ClassRunner.class)
    @ContextConfiguration( locations = {"classpath:applicationContext.xml"} )

    @RunWith(SpringJUnit4ClassRunner.class)：
    @Runwith的作用是让测试的实例在spring容器的环境下运行，那么什么是spring容器的环境，这个容器环境就是如:service, controller等包的使用就是spring容器。
    @ContextConfiguration：
    1、 他的作用是引入配置文件applicationContext.xml，如果没有写配置文件名的话则会根据测试的名字去匹配

    @ContextConfigurationpublic void test{}

    2、可以写多个配置文件
    用，隔开如下：

    1
    @ContextConfiguration( locations = {"classpath:applicationContext.xml","classpath:applicationContext2.xml"}
    2.spring的@ContextConfiguration注解

    https://blog.csdn.net/fanbaodan/article/details/100121551

    1
    2
    3
    4
    @ContextConfiguration(value="/applicationContext.xml")  //方法一
    @ContextConfiguration(locations="/applicationContext.xml")   //方法二
    @ContextConfiguration("classpath:/applicationContext.xml")   //方法三
    @ContextConfiguration("/applicationContext.xml")       //方法四

    切记前边要加一个 “/” 代表根目录（不带双引号）
    这是我亲测的几种都可以正常运行junit。

    其实也不用去死记， 这个分开也就是两块;

    一个是属性名（value、locations）
    一个是 属性值（双引号里边的，就是文件路径）
    单个文件一般直接在双引号里边写路径或者用value属性（切记要加“ / ” ！！！）
    如果有多个文件要加载可以使用多个文件时，可用{}括起来，并用逗号分隔，以下示例

    @ContextConfiguration(locations = { “classpath*:/spring1.xml”, “classpath*:/spring2.xml” })

    或者用value

    @ContextConfiguration(value = { “/spring1.xml”, “/spring2.xml” })

    或者不写属性名，（加不加"classpath:" 都可以）

    @ContextConfiguration({ “classpath:/spring1.xml”, “classpath:/spring2.xml” })

    当然单个文件也可以用locations 如上述方法二。

    根据上述源码可以看到， 该属性可以使用 locations 、value 或者直接写值（不写属性名），重点是值（路径）一定要写对。
    根据返回值可以得出以上三种方式都可以配置多个文件

    3.聊聊单元测试（三）——Spring Test+JUnit完美组合

    https://blog.csdn.net/shan9liang/article/details/40452469

    4.Spring系列——@ContextConfiguration注解的使用

    https://blog.csdn.net/m0_37941483/article/details/90727830

    1
    2
    3
    4
    5
    @RunWith(SpringJUnit4ClassRunner.class)
    @ContextConfiguration(locations = {"classpath*:/*.xml"})
    public class CDPlayerTest {

    }

    @ContextConfiguration括号里的locations = {“classpath*😕*.xml”}就表示将class路径里的所有.xml文件都包括进来，那么刚刚创建的那么XML文件就会包括进来，那么里面自动扫描的bean就都可以拿到了，此时就可以在测试类中使用@Autowired注解来获取之前自动扫描包下的所有bean

    classpath和classpath*区别:

    classpath：只会到你的class路径中查找找文件。

    classpath*：不仅包含class路径，还包括jar文件中（class路径）进行查找。

    5.默认不写

    https://blog.csdn.net/u012260238/article/details/87462366

    可以根据测试的类名，去找到与之对应的配置文件。

    3.mybatis问题

    Mybatis 开启控制台打印sql语句：https://blog.csdn.net/qq_37495786/article/details/82799910

    完整SQL是否会乱码。

    ]]>     + + https://www.yansheng.xyz/article/dbd84c59.html#disqus_thread +     + + + 抑郁症 + https://www.yansheng.xyz/article/57f89578.html + https://www.yansheng.xyz/article/57f89578.html + Mon, 25 Nov 2019 15:43:01 GMT + + + <p>抑郁症，一种心病。这是我的定义，但是有时候我甚至怀疑这能不能被称作一种病、怀疑它是否真的存在……然而，现实如此残酷，这种病真实存在，而且发病时间和后果可能让人无法预料。我们不时听到某某明星因为抑郁而自杀的新闻，在叹息的同时，却又不禁在想：又有多少普通人抑郁而终？</p> +<p>抑郁，亦有轻重，诱发因素或大或小。艾滋病患者多死于肿瘤，艾滋病毒破坏病人的免疫系统，也许一个小小的炎症，可能就会致命；在我看来，抑郁是类似的，它破坏病人的“心情系统”，也许一点点的不愉快可能就会变成诱因，让人走向极端。</p> +<p>​ ——记于2019年国考（2019年11月24日）的后一天</p> +<p><img src="http://5b0988e595225.cdn.sohucs.com/images/20190503/5b2a4ecc0a724b25967493c34d0a4f7f.jpeg" alt></p> + + + + + 抑郁症，一种心病。这是我的定义，但是有时候我甚至怀疑这能不能被称作一种病、怀疑它是否真的存在……然而，现实如此残酷，这种病真实存在，而且发病时间和后果可能让人无法预料。我们不时听到某某明星因为抑郁而自杀的新闻，在叹息的同时，却又不禁在想：又有多少普通人抑郁而终？

    抑郁，亦有轻重，诱发因素或大或小。艾滋病患者多死于肿瘤，艾滋病毒破坏病人的免疫系统，也许一个小小的炎症，可能就会致命；在我看来，抑郁是类似的，它破坏病人的“心情系统”，也许一点点的不愉快可能就会变成诱因，让人走向极端。

    ​——记于2019年国考（2019年11月24日）的后一天

    以下内容转自百度百科：抑郁症.

    抑郁症的定义

    本词条由国家卫健委权威医学科普项目传播网络平台/百科名医网 提供内容 。

    抑郁症又称抑郁障碍，以显著而持久的心境低落为主要临床特征，是心境障碍的主要类型。临床可见心境低落与其处境不相称，情绪的消沉可以从闷闷不乐到悲痛欲绝，自卑抑郁，甚至悲观厌世，可有自杀企图或行为；甚至发生木僵；部分病例有明显的焦虑和运动性激越；严重者可出现幻觉、妄想等精神病性症状。每次发作持续至少2周以上、长者甚或数年，多数病例有反复发作的倾向，每次发作大多数可以缓解，部分可有残留症状或转为慢性。

    抑郁症有多可怕

    基本信息

    file

    发展概况

    我国与世界的抑郁症患病率比较情况如下：

    世界我国
    抑郁症患者人数3.22亿 [1]（无精确数据）
    患病率4.4% [1](4.2±1.9)% [1-2]

    注：

    1.大多数报道将我国抑郁症患病率确定在3%~5%的区间，但有报道称达到了6.1%。

    2.我国抑郁症发病率地区差异较大。

    3.30年间，报告的抑郁症发病率暴增10~20倍，现在仍然呈上升趋势；不排除有的以“世界卫生组织数据表明”的字眼作了错误（虚假）报道，故本数据可能不准确。

    病因

    迄今，抑郁症的病因并不非常清楚，但可以肯定的是，生物、心理与社会环境诸多方面因素参与了抑郁症的发病过程。生物学因素主要涉及遗传、神经生化、神经内分泌、神经再生等方面；与抑郁症关系密切的心理学易患素质是病前性格特征，如抑郁气质。成年期遭遇应激性的生活事件，是导致出现具有临床意义的抑郁发作的重要触发条件。然而，以上这些因素并不是单独起作用的，强调遗传与环境或应激因素之间的交互作用、以及这种交互作用的出现时点在抑郁症发生过程中具有重要的影响。

    临床表现

    抑郁症可以表现为单次或反复多次的抑郁发作，以下是抑郁发作的主要表现。

    1.心境低落

    主要表现为显著而持久的情感低落，抑郁悲观。轻者闷闷不乐、无愉快感、兴趣减退，重者痛不欲生、悲观绝望、度日如年、生不如死。典型患者的抑郁心境有晨重夜轻的节律变化。在心境低落的基础上，患者会出现自我评价降低，产生无用感、无望感、无助感和无价值感，常伴有自责自罪，严重者出现罪恶妄想和疑病妄想，部分患者可出现幻觉。

    2.思维迟缓

    患者思维联想速度缓慢，反应迟钝，思路闭塞，自觉“脑子好像是生了锈的机器”，“脑子像涂了一层糨糊一样”。临床上可见主动言语减少，语速明显减慢，声音低沉，对答困难，严重者交流无法顺利进行。

    3.意志活动减退

    患者意志活动呈显著持久的抑制。临床表现行为缓慢，生活被动、疏懒，不想做事，不愿和周围人接触交往，常独坐一旁，或整日卧床，闭门独居、疏远亲友、回避社交。严重时连吃、喝等生理需要和个人卫生都不顾，蓬头垢面、不修边幅，甚至发展为不语、不动、不食，称为“抑郁性木僵”，但仔细精神检查，患者仍流露痛苦抑郁情绪。伴有焦虑的患者，可有坐立不安、手指抓握、搓手顿足或踱来踱去等症状。严重的患者常伴有消极自杀的观念或行为。调查显示，我国每年有28.7万人死于自杀，其中63%有精神障碍，40%患有抑郁症。 [3] 因抑郁症而自杀的不乏名人，包括梵高、海明威、三毛、张国荣、 [3] 徐行、李晓、罗宾·威廉姆斯、乔任梁等 [4] 。消极悲观的思想及自责自罪、缺乏自信心可萌发绝望的念头，认为“结束自己的生命是一种解脱”，“自己活在世上是多余的人”，并会使自杀企图发展成自杀行为。这是抑郁症最危险的症状，应提高警惕。

    4.认知功能损害

    研究认为抑郁症患者存在认知功能损害。主要表现为近事记忆力下降、注意力障碍、反应时间延长、警觉性增高、抽象思维能力差、学习困难、语言流畅性差、空间知觉、眼手协调及思维灵活性等能力减退。认知功能损害导致患者社会功能障碍，而且影响患者远期预后。

    5.躯体症状

    主要有睡眠障碍、乏力、食欲减退、体重下降、便秘、身体任何部位的疼痛、性欲减退、阳痿、闭经等。躯体不适的体诉可涉及各脏器，如恶心、呕吐、心慌、胸闷、出汗等。自主神经功能失调的症状也较常见。病前躯体疾病的主诉通常加重。睡眠障碍主要表现为早醒，一般比平时早醒2～3小时，醒后不能再入睡，这对抑郁发作具有特征性意义。有的表现为入睡困难，睡眠不深；少数患者表现为睡眠过多。体重减轻与食欲减退不一定成比例，少数患者可出现食欲增强、体重增加。

    检查

    对疑为抑郁症的患者，除进行全面的躯体检查及神经系统检查外，还要注意辅助检查及实验室检查。迄今为止，尚无针对抑郁障碍的特异性检查项目。因此，目前的实验室检查主要是为了排除物质及躯体疾病所致的抑郁症。有2种实验室检查具有一定的意义，包括地塞米松抑制试验（DST）和促甲状腺素释放激素抑制试验（TRHST）。

    诊断

    抑郁症的诊断主要应根据病史、临床症状、病程及体格检查和实验室检查，典型病例诊断一般不困难。国际上通用的诊断标准一般有ICD-10和DSM-IV。国内主要采用ICD-10，是指首次发作的抑郁症和复发的抑郁症，不包括双相抑郁。患者通常具有心境低落、兴趣和愉快感丧失、精力不济或疲劳感等典型症状。其他常见的症状是①集中注意和注意的能力降低；②自我评价降低；③自罪观念和无价值感（即使在轻度发作中也有）；④认为前途暗淡悲观；⑤自伤或自杀的观念或行为；⑥睡眠障碍；⑦食欲下降。病程持续至少2周。

    治疗

    1.治疗目标

    抑郁发作的治疗要达到三个目标：①提高临床治愈率，最大限度减少病残率和自杀率，关键在于彻底消除临床症状；②提高生存质量，恢复社会功能；③预防复发。

    2.治疗原则

    ①个体化治疗；②剂量逐步递增，尽可能采用最小有效量，使不良反应减至最少，以提高服药依从性；③足量足疗程治疗；④尽可能单一用药，如疗效不佳可考虑转换治疗、增效治疗或联合治疗，但需要注意药物相互作用；⑤治疗前知情告知；⑥治疗期间密切观察病情变化和不良反应并及时处理；⑦可联合心理治疗增加疗效；⑧积极治疗与抑郁共病的其他躯体疾病、物质依赖、焦虑障碍等。

    3.药物治疗

    药物治疗是中度以上抑郁发作的主要治疗措施。目前临床上一线的抗抑郁药主要包括选择性5-羟色胺再摄取抑制剂（SSRI，代表药物氟西汀、帕罗西汀、舍曲林、氟伏沙明、西酞普兰和艾司西酞普兰）、5-羟色胺和去甲肾上腺素再摄取抑制剂（SNRI，代表药物文拉法辛和度洛西汀）、去甲肾上腺素和特异性5-羟色胺能抗抑郁药（NaSSA，代表药物米氮平）等。传统的三环类、四环类抗抑郁药和单胺氧化酶抑制剂由于不良反应较大，应用明显减少。

    4.心理治疗

    对有明显心理社会因素作用的抑郁发作患者，在药物治疗的同时常需合并心理治疗。常用的心理治疗方法包括支持性心理治疗、认知行为治疗、人际治疗、婚姻和家庭治疗、精神动力学治疗等，其中认知行为治疗对抑郁发作的疗效已经得到公认。

    5.物理治疗

    近年来出现了一种新的物理治疗手段——重复经颅磁刺激（rTMS）治疗，主要适用于轻中度的抑郁发作。

    预防

    有人对抑郁症患者追踪10年的研究发现，有75%～80%的患者多次复发，故抑郁症患者需要进行预防性治疗。发作3次以上应长期治疗，甚至终身服药。维持治疗药物的剂量多数学者认为应与治疗剂量相同，还应定期门诊随访观察。心理治疗和社会支持系统对预防本病复发也有非常重要的作用，应尽可能解除或减轻患者过重的心理负担和压力，帮助患者解决生活和工作中的实际困难及问题，提高患者应对能力，并积极为其创造良好的环境，以防复发。

    ]]>     + + https://www.yansheng.xyz/article/57f89578.html#disqus_thread +     + + + Ubuntu升级Ruby + https://www.yansheng.xyz/article/6bb10e64.html + https://www.yansheng.xyz/article/6bb10e64.html + Thu, 14 Nov 2019 14:39:29 GMT + + + <p>Ubuntu服务器最近扫描出很多漏洞，发现很多是Ruby的问题，而且有一些年代久远，想着应该是老版本的问题。于是去查了下更新问题，记录下更新过程。</p> +<p><img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1575912501635.png" alt="file"></p> + + + + + Ubuntu服务器最近扫描出很多漏洞，发现很多是Ruby的问题，而且有一些年代久远，想着应该是老版本的问题。于是去查了下更新问题，记录下更新过程。

    file

    当前的版本是 2.3，打算升级到最新的 2.6。可以使用下面的命令查看 Ruby 版本：

    1
    2
    $ ruby -v
    ruby 2.3.1p112 (2016-04-26) [x86_64-linux-gnu]

    添加 PPA 源：

    1
    2
    sudo add-apt-repository ppa:brightbox/ruby-ng
    sudo apt-get update

    Launchpad PPA Repositories是很有用的非ubuntu官方的第三方个人资源库，可以很方便地安装第三方软件。
    但是在运行add-apt-repository命令时，有时会提示命令不存在，这个时候直接apt-get
    add-apt-repository是不可以的！ 解决的方法是安装software-properties-common。
    输入命令：apt-get install software-properties-common

    先删除旧版本：

    1
    $ sudo apt-get purge --auto-remove ruby

    然后安装新版本：

    1
    $ sudo apt-get install ruby2.6 ruby2.6-dev

    安装后查看版本号：

    1
    2
    $ ruby -v
    ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-linux-gnu]

    更新成功后，重新扫描，漏洞少了20个……

    相关链接：

    ]]>     + + https://www.yansheng.xyz/article/6bb10e64.html#disqus_thread +     + + + hexo+yilia添加复制代码块的功能 + https://www.yansheng.xyz/article/e9d1b881.html + https://www.yansheng.xyz/article/e9d1b881.html + Sun, 10 Nov 2019 09:08:42 GMT + + + <p>实现复制代码块的功能，效果：<br> +<img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1573012450293.png" alt="file"></p> + + + + + 实现复制代码块的功能，效果：
    file

    我的提问

    我在hexo-theme-yilia-plus主题上的提问：https://github.com/JoeyBling/hexo-theme-yilia-plus/issues/29

    初级版

    支持复制代码块的功能，如下图（截自csdn）：
    image

    个人觉得这个功能还是挺重要的。

    加强版

    如果文章中有原创版权声明，复制时，会携带相关信息。

    🙋Others

    我自己也去查了下，找到的好像都是next主题的，没有yilia主题的，但是不太会转化……

    参考链接：

    自己动手

    因为回复比较慢，就自己动手去尝试了。

    参考：[clipboard.js]代码块复制

    该文章也是基于next主题，迁移过来有些问题：

    1. next主题可能自带jQuery，故没有引入，但是yilia没有，需要引入。
    2. 会报错ClipboardJS is not defined，我这里直接改成了Clipboard就可以了，后面找到原因了：是版本问题，https://github.com/zenorocha/clipboard.js/releases/v2.0.0，v2.0.0的变化：Changes constructor from new Clipboard() to new ClipboardJS() #468。相关问题：

    0.原理

    在页面加载完毕后，使用js动态地为每一个代码块添加一个按钮，使用这个按钮复制代码块内容。

    1.新建实现复制功能的js

    H:\Hexo\themes\yilia\source\js\clipboard_use.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /*页面载入完成后，创建复制按钮*/
    !function (e, t, a) { 
    /* code */
    var initCopyCode = function(){
        var copyHtml = '';
        copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
        copyHtml += '  <i class="fa fa-globe"></i><span>copy</span>';
        copyHtml += '</button>';
        $(".highlight .code").before(copyHtml);
        new Clipboard('.btn-copy', {
            target: function(trigger) {
                return trigger.nextElementSibling;
            }
        });
    }
    initCopyCode();
    }(window, document);

    2.引入js

    在H:\Hexo\themes\yilia\layout\layout.ejs文件的</body>前引入：（作用：页面加载完再执行js）

    1
    2
    3
    4
    5
    <!-- 代码块复制功能 -->
    <script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- <script type="text/javascript" src="/js/clipboard.js"></script>  -->
    <script type="text/javascript" src="/js/clipboard_use.js"></script>

    需要注意的问题：

    • 前面提到：因为：clipboard_use.js中需要用到jQuery，而yilia没有引入jQuery，故需要引入。
    • 对于clipboard.js的引入问题：根据github社区反馈，引入本地文件好像会出现问题（我本地测试就引入不了），故使用CDN引入。（有人反映CDN好像也会有问题，反正我没有遇到……）
    • 注意引入顺序：jquery和clipboard.js需要在clipboard_use.js之前引入。
    • <script>标签问题，虽然HTML5标准里面没有严格要求标签一定要关闭，但是建议要关闭，不然可能会出现问题。这里我一开始没有关闭标签，就出现问题了，后面研究了很久才发现原来是这个问题。

    3.添加样式

    修改：H:\Hexo\themes\yilia\source\main.0cf68a.css，在末尾添加下面代码（最好是pre .css~* .id, pre .id下面，即代码块样式附近）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    /*  这是原代码块 */
    pre .css~* .id, pre .id {
        color:#fd971f
    }

    /* 代码块复制按钮 */
     .highlight {
        /* 方便copy代码按钮（btn-copy）的定位 */
        position: relative;
    }
    .btn-copy {
        display: inline-block;
        cursor: pointer;
        background-color: #eee;
        background-image: linear-gradient(#fcfcfc, #eee);
        border: 1px solid #d5d5d5;
        border-radius: 3px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
        font-size: 13px;
        font-weight: 700;
        line-height: 20px;
        color: #333;
        -webkit-transition: opacity .3s ease-in-out;
        -o-transition: opacity .3s ease-in-out;
        transition: opacity .3s ease-in-out;
        padding: 2px 6px;
        position: absolute;
        right: 5px;
        top: 5px;
        opacity: 0;
    }
    .btn-copy span {
        margin-left: 5px;
    }
    .highlight:hover .btn-copy {
        opacity: 1;
    }
    /* 代码块复制按钮 */

    成果

    点击按钮后，会全选代码块，就复制成功了。
    效果图：
    file

    file

    动图：
    file

    问题讨论

    乍一看效果还不错，但是还是存在问题：

    1. 如果代码块超出，会出现问题。虽然图标样式使用绝对定位，但是该按钮没有“固定”在代码块页面的右上角，仅仅是固定在当前页面的右上角，可能不好理解，截个图：
      file
      然后我去研究了下CSDN的样式，发现好像差不多，但是效果明显不一样啊。后面有空再研究吧。
    2. 虽然复制成功会全选代码块，但是不成功呢？不晓得？好像没反应。后期可能会添加对应设置（模仿CSDN）：默认时“复制”，复制成功显示“复制成功”，几秒后再次显示“复制”，失败给出对应提示。

    依赖升级

    使用最新版本的clipboard.js–v2.0.4，CDN：https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/，替换之前的，需要修改的地方：

    1.改变引入源

    1
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.js"></script>

    2.改变函数名

    Clipboard to ClipboardJS

    1
    2
    3
    4
    5
    new Clipboard('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });

    改为：

    1
    2
    3
    4
    5
    new ClipboardJS('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });

    bug修复

    更新时间：2020-3-27 23:25:54

    感谢：辛猿毅码的这篇文章https://code-ape.gitee.io/article/5bc9f198.html。

    1.修改js

    在highlight元素外围加一个父元素，方便定位复制按钮。
    H:\Hexo\themes\yilia\source\js\clipboard_use2.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    $(".highlight").wrap("<div class='code-wrapper' style='position:relative'></div>");
    /*页面载入完成后，创建复制按钮*/
    !function (e, t, a) {
        /* code */
        var initCopyCode = function () {
            var copyHtml = '';
            copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
            copyHtml += '  <i class="fa fa-clipboard"></i><span>复制</span>';
            copyHtml += '</button>';
            $(".highlight .code").before(copyHtml);
            var clipboard = new ClipboardJS('.btn-copy', {
                target: function (trigger) {
                    return trigger.nextElementSibling;
                }
            });
            clipboard.on('success', function (e) {
                e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制成功</span>"
                setTimeout(function () {
                    e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
                }, 1000)
                e.clearSelection();
            });
            clipboard.on('error', function (e) {
                e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制失败</span>"
                setTimeout(function () {
                    e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
                }, 1000)
                e.clearSelection();
            });
        }
        initCopyCode();
    }(window, document);

    2.修改复制按钮样式

    H:\Hexo\themes\yilia\source\main.0cf68a.css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    .btn-copy {
        display: inline-block;
        cursor: pointer;
        background-color: #eee;
        background-image: linear-gradient(#fcfcfc, #eee);
        border: 1px solid #d5d5d5;
        border-radius: 3px;
        . -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
        font-size: 13px;
        font-weight: 700;
        line-height: 20px;
        color: #333;
        -webkit-transition: opacity .3s ease-in-out;
        -o-transition: opacity .3s ease-in-out;
        transition: opacity .3s ease-in-out;
        padding: 2px 6px;
        position: absolute;
        right: 5px;
        top: 5px;
        opacity: 0;
    }
    .btn-copy span {
        margin-left: 5px;
    }
    .highlight:hover .btn-copy {
        opacity: 1;
    }

    3.添加复制按钮图标

    需要引入font-awesome，在H:\Hexo\themes\yilia\layout\_partial\head.ejs的</head>前添加：

    1
    <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">

    效果图

    有滚动条时：

    复制成功显示：

    微调图标样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    clipboard.on('success', function (e) {
        e.trigger.innerHTML = "<i class='fa fa-check' style='color:green'></i><span style='color:green'>复制成功</span>"
        setTimeout(function () {
            e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
        }, 1000)
        e.clearSelection();
    });
    clipboard.on('error', function (e) {
        e.trigger.innerHTML = "<i class='fa fa-exclamation' style='color:red'></i><span style='color:red'>复制失败</span>"
        setTimeout(function () {
            e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
        }, 1000)
        e.clearSelection();
    });

    复制成功效果：

    复制失败效果：

    收工！

    修复前后对比

    前

    后

    ]]>     + + https://www.yansheng.xyz/article/e9d1b881.html#disqus_thread +     + + + hexo+yilia测试代码块样式 + https://www.yansheng.xyz/article/285260df.html + https://www.yansheng.xyz/article/285260df.html + Sun, 10 Nov 2019 09:07:49 GMT + + + <p>测试代码块、引用块、（文章内）超链接的样式以及高亮问题。</p> +<h2 id="高亮说明">高亮说明</h2> +<p>经测试，发现有以下几个问题：</p> +<ol> +<li>引用块里面的代码块样式有问题。</li> +<li>如果语言不支持高亮，默认使用plain（简单的，无格式的）。</li> +<li>MySQL等SQL需要统一设置为SQL，不然不高亮。</li> +<li>shell脚本使用bash，不然不高亮。</li> +<li>cmd命令/Linux命令使用bash，可以部分高亮。</li> +<li>markdown代码块不支持高亮。</li> +<li>ejs使用HTML进行高亮。</li> +</ol> + + + + + 测试代码块、引用块、（文章内）超链接的样式以及高亮问题。

    高亮说明

    经测试，发现有以下几个问题：

    1. 引用块里面的代码块样式有问题。
    2. 如果语言不支持高亮，默认使用plain（简单的，无格式的）。
    3. MySQL等SQL需要统一设置为SQL，不然不高亮。
    4. shell脚本使用bash，不然不高亮。
    5. cmd命令/Linux命令使用bash，可以部分高亮。
    6. markdown代码块不支持高亮。
    7. ejs使用HTML进行高亮。

    引用块

    引用的三级目录

    这是引用

    下面是引用中的代码块：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    > <!DOCTYPE html>
    > <html>
    > <head>
    > <meta charset="utf-8">
    > <title>菜鸟教程(runoob.com)</title>
    > </head>
    > <body>
    >     <h1>我的第一个标题</h1>
    >     <p class="p1" style="font-size:20px;">我的第一个段落。</p>
    > </body>
    > </html>
    >

    行内代码块

    这是行内代码块：git clone url。

    标题中的行内代码块git clone url

    超链接

    超链接样式：

    1. [文字](url):我的博客仓库，如果url含有中文，建议加<>，不然可能会被截断，导致连接失效。
    2. <url>:https://yansheng836.github.io/。
    3. url:https://yansheng836.github.io/，不推荐适用这种，不规范。

    HTML

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p class="p1" style="font-size:20px;">我的第一个段落。</p>
    </body>
    </html>

    XML

    1
    2
    3
    4
    5
    6
    7
    8
    <?xml version="1.0" encoding="UTF-8"?>
    <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.10</version>
        <scope>provided</scope>
    </dependency>

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @charset"utf-8";
    .bar2 {
    width:35px;
    height:3px;
    background-color:#333;
    margin:6px 0;
    transition:0.4s;
    opacity:0;
    }

    JavaScript

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var hide = false;

    function myFunction(x) {
        x.classList.toggle("change");
        if (hide == false) {
            console.log("hide == false");
            hide = true;
        } else {
            $(".left-col").css('display', '')
            hide = false;
        }
    }

    Json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    {
        "sites": [
            {
                "name": "菜鸟教程",
                "url": "www.runoob.com"
            },
            {
                "name": "google",
                "url": "www.google.com"
            },
            {
                "name": "微博",
                "url": "www.weibo.com"
            }
        ]
    }

    Java

    1
    2
    3
    4
    5
    6
    public class HelloWorld {
        public static void main(String[] args) {
             // 单行注释
            System.out.println("Hello World");
        }
    }

    Python3

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    #!/usr/bin/python3

    class MyClass:
        """一个简单的类实例"""
        i = 12345
        def f(self):
            return 'hello world'
     
    # 实例化类
    x = MyClass()
     
    # 访问类的属性和方法
    print("MyClass 类的属性 i 为：", x.i)
    print("MyClass 类的方法 f 输出为：", x.f())

    SQL

    1
    2
    INSERT INTO table_name
    VALUES (value1,value2,value3,...);

    MySQL

    1
    SELECT * from runoob_tbl ORDER BY submission_date ASC;

    MySQL–>SQL

    1
    SELECT * from runoob_tbl ORDER BY submission_date ASC;

    Shell

    1
    2
    3
    4
    for loop in 1 2 3 4 5
    do
        echo "The value is: $loop"
    done

    Shell–>BASH

    1
    2
    3
    4
    for loop in 1 2 3 4 5
    do
        echo "The value is: $loop"
    done

    Bash/Git

    1
    2
    3
    4
    5
    6
    7
    8
    # cmd
    cd dir
    mkdir new_dir

    # 注释
    $ git add *.c
    $ git add README
    $ git commit -m '初始化项目版本'

    C

    1
    2
    3
    4
    5
    6
    7
    8
    #include <stdio.h>
     
    int main()
    {
        /* 我的第一个 C 程序 */
        printf("Hello, World! \n");
        return 0;
    }

    C++

    1
    2
    3
    4
    5
    6
    7
    8
    #include <iostream>
    using namespace std;
    int main()
    {
        // 注释
        cout << "Hello, world!" << endl;
        return 0;
    }

    Markdown

    1
    2
    3
    4
    这是超链接：<https://github.com/yansheng836/>
    下面的是列表：
    - 列表
    - 列表

    EJS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
        <section id="comments" class="comments">
          <style>
            .comments{margin:30px;padding:10px;background:#fff}
            @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
          </style>
          <%- partial('post/valine', {
            key: post.slug,
            title: post.title,
            url: config.url+url_for(post.path)
            }) %>
      </section>
    <% } %>

    EJS–>HTML

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
        <section id="comments" class="comments">
          <style>
            .comments{margin:30px;padding:10px;background:#fff}
            @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
          </style>
          <%- partial('post/valine', {
            key: post.slug,
            title: post.title,
            url: config.url+url_for(post.path)
            }) %>
      </section>
    <% } %>

    YML

    1
    2
    3
    #hexo g 会默认将所有md文件转换成（渲染成）HTML文件放到public文件夹中；加上这句话的意思就是告诉hexo的解析器，跳过渲染(skip_render)README.md文件
    skip_render: 
     - 'README.md'
    ]]>     + + https://www.yansheng.xyz/article/285260df.html#disqus_thread +     + + + hexo+yilia修改代码块等样式 + https://www.yansheng.xyz/article/c344994.html + https://www.yansheng.xyz/article/c344994.html + Sun, 10 Nov 2019 09:06:49 GMT + + + <p>代码块的样式真的很重要，毕竟咱好歹是一个技术博客，难免会贴一些代码的。因此参考<a href="https://cqh-i.github.io/" target="_blank" rel="noopener">https://cqh-i.github.io</a>的样式进行了调整，下面是HTML的例子，更多具体效果可以参考这篇博客的样式：<a href="/article/285260df.html">test-codestyle</a>。</p> +<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>html代码块样本<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这个样式可还行？<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"p1"</span> <span class="attr">style</span>=<span class="string">"font-size:20px;"</span>&gt;</span>我的第一个段落。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure> + + + + + 代码块的样式真的很重要，毕竟咱好歹是一个技术博客，难免会贴一些代码的。因此参考https://cqh-i.github.io的样式进行了调整，下面是HTML的例子，更多具体效果可以参考这篇博客的样式：test-codestyle。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>html代码块样本</title>
    </head>
    <body>
        <h1>这个样式可还行？</h1>
        <p class="p1" style="font-size:20px;">我的第一个段落。</p>
    </body>
    </html>

    说明

    1. 由于每个人可能都修改过样式文件，所以每个人的样式可能都会有所不同。建议修改之前做好备份，防止出现错误难于恢复，可以使用git进行版本管理（备份博客的源码和配置）。
    2. 我的备份文件，详见代码块样式调整备份文件，cqh-i.github.io.css为博客https://cqh-i.github.io的代码块样式。main.0cf68a.css为我之前的css文件的备份。

    文中超链接样式

    默认：

    1
    2
    3
    4
    5
    a {
        background: 0 0;
        text-decoration: none;
        color: #08c;
    }

    修改（添加内容）后：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 文章中的超链接,鼠标悬浮特效 */
    .article-entry li a:hover, .article-entry p a:hover {
        background: 0 0;
        text-decoration: underline;
        color: #08c;
        /* font-size:18px; */
        font-weight:bold;
        transition:.8s;
    }

    再次修改：

    参考：https://css.30secondsofcode.org/snippet/hover-underline-animation

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    /* 文章中的超链接,鼠标悬浮特效*/
    .article-entry a{
        display: inline-block;
        position: relative;
        color: #0087ca;
        font-family: lucida console;/* 这种字体的英文比较好看（像代码样式） */
    }
    /* 鼠标悬浮时，变色 */
    .article-entry a:hover{
        color: #d7191a;
        transition:.8s;
    }
    /* 鼠标悬浮时，下划线从中间向两边延伸 */
    .article-entry a:hover::after{
      transform: scaleX(1);
      /* 旋转，与transform连用；这里作用：鼠标悬浮时，底部的下划线从中间扩散到两边。
       bottom right :左到右出现，左到右消失（需配合上面的::after）
      */
      transform-origin: bottom center;
    }
    /* 鼠标移开后，下划线从两边向中间消失 */
    .article-entry a::after{
      content: '';
      position: absolute;
      width: 100%;
      transform: scaleX(0);
      height: 1.5px;
      bottom: 0;
      left: 0;
      background-color: #0087ca;
      /* 详见：https://www.w3school.com.cn/cssref/pr_transform-origin.asp,
      旋转，与transform连用；这里作用：鼠标移开后，底部的下划线从中间开始消失 */
      transform-origin: bottom center;
      transition: transform 0.5s ease-out;
    }

    2019年11月8日调整将article-entry换成mid-col，原来只是文章中文的超链接，现在改为右边栏都进行设置。（可能会出现很多负面影响，请自行决定是否更改）。

    行内代码块样式

    默认：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .article-entry li code,.article-entry p code {
        padding: 1px 3px;
        margin: 0 3px;
        background: #ddd;
        border: 1px solid #ccc;
        font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
        word-wrap: break-word;
        font-size: 14px
    }

    参考csdn代码块样式：主要是调整颜色为红色

    1
    2
    3
    4
    5
    .markdown_views code {
        color: #c7254e;
        background-color: #f9f2f4;
        border-radius: -9px;
    }

    修改后：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /* 行内代码块``的样式，参考csdn的
        color: #c7254e;
        background-color: #f9f2f4;
        border-radius: 2px;
        padding: 2px 4px;
    */
    .article-entry li code, .article-entry p code {
    color: #c7254e;
        background-color: #f9f2f4;
        border-radius: 2px;
        padding:2px 4px;
        margin:0 3px;
        /* background:#ddd; */
        /* border:2px solid #ccc; */
        font-family:Menlo, Monaco, Andale Mono, lucida console, Courier New, monospace;
        word-wrap:break-word;
        /* font-size:14px */
    }

    补充：一开始没注意到原来该样式不包含标题中的代码块，添加:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* 标题中的代码块样式 */
    .article-entry code {
        /* background:#eee;
        padding:0 .3em;
        border:none */
        color: #c7254e;
        background-color: rgba(249,242,244,.7);
        border-radius: 2px;
        padding: 2px 4px;
        margin: 0 3px;
        font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
        word-wrap: break-word
    }

    代码块主要样式文件

    代码块简单设置

    参考：Hexo 基于yilia主题及其它插件优化

    1.修改代码块的样式

    直接修改编译好的文件。路径为： theme/yilia/source/main.0cf68a.css:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    (1)修改代码背景色，
    搜索 .article-entry .highlight, 修改background后面的颜色
    将 pre{background:#272822;
    改为 pre{background:#1a0139;

    (2)修改行号颜色，
    搜索 .article-entry .highlight .gutter pre .line
    将.article-entry .highlight .gutter pre .line{color:#666
    改为.article-entry .highlight .gutter pre .line{color:#fc0000

    (3)修改代码字体颜色 
    搜索 .article-entry .highlight .line
    将.article-entry .highlight .line{color:#fff;
    修改为.article-entry .highlight .line{color:#00ff0d;

    效果图：

    个人感觉还不是很满意，有待优化。

    2.代码块行号显示错乱

    修改yilia/source/main.0cf68a.css的内容：将white-space:pre-wrap; 删除，这个问题是自动换行造成的，使用不自动换行的white-space:pre;样式代码块部分会自动出现底部滚动条，行号错乱问题就没有了。

    3.重点调整

    不知道是hexo还是yilia主题自带的是使用highlight.js进行代码高亮的，但是好像是内置的，因为我不会写源码，只能更改生成的文件：yilia/source/main.0cf68a.css，按照识别的关键字自定义颜色，这里是我的一些配置，你也可以自己使用F12进行调试。（当然网上也有许多替换自指定的highlight.js进行代码高亮的教程）。

    特别注意：高亮的前提是语言要写对，不然只能当做普通文本进行识别。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    /* 代码块样式之评论：黄色 */
    pre .comment {
        color:#ffec8b
    }
    /* 代码块样式之类的参数、函数的关键字、关键字：蓝色 */
    pre .class .params, pre .function .keyword, pre .keyword, pre .literal {
        color:#66d9ef
    }
    /* 代码块样式之css的属性值、函数名、参数、标签：白色 */
    pre .css .value, pre .doctype, pre .function, pre .params, pre .tag {
        color:#fff
    /* color:#66d9ef; */
    }
    /* 代码块样式之HTML或者xml的头部元素：红色(颜色较浅) */
    pre .meta{
        color:#f78da1;
    }
    /* 代码块样式之HTML的标签：红色 */
    pre .tag .name {
        /* color:#dc3958; */
     color:#ff6481;
    }
    /* 代码块样式之：色 */
    pre .at_rule, pre .at_rule .keyword, pre .css~* .tag, pre .preprocessor, pre .preprocessor .keyword, pre .title{
        color:#fa9400
    }
    /* 代码块样式之属性、类、函数的title：绿色 */
    pre .attr,pre .attribute, pre .built_in, pre .class, pre .css~* .class, pre .function .title {
        color:#a6e22e
    }
    /* 代码块样式之字符串、属性值：猪肝色 */
    pre .string, pre .value {
        color:#e6db74
    }
    /* 代码块样式之数字：粉红色 */
    pre .number {
        color:#ffe4b5
    }
    pre .css~* .id, pre .id {
        color:#fd971f
    }

    文章内的超链接和引用块超出页面的问题

    参考：css自动换行如何设置?url太长会撑开页面

    当页面进行缩放时，说明这两个区域可能会超出页面。

    使用下面这两个属性进行截断：

    1
    2
    3
    /* 如果超长，自动截断 */
    word-wrap:break-word;
    word-break:break-all;

    具体如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    a {
        background:transparent;
        text-decoration:none;
        color:#08c;
    /* 如果超长，自动截断 */
        word-wrap:break-word;
        word-break:break-all;
    }
    .article-entry blockquote {
        background:#ddd;
        border-left:5px solid #ccc;
        padding:15px 20px;
        margin-top:10px;
        border-left:5px solid #657b83;
        background:#f6f6f6;
        /* 如果超长，自动截断 */
        word-wrap:break-word;
        word-break:break-all;
    }

    左侧边栏的菜单

    导航超链接样式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* 这个字体不错font-family: STCaiyun,STXingkai; */
    .left-col #header .header-menu {
        font-family: STCaiyun,STXingkai;
        line-height: 31px;
        text-transform: uppercase;
        float: none;
        min-height: 150px;
        margin-left: -12px;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    主页‘展开全文’按钮样式

    样式参考：http://ianlunn.github.io/Hover/的hvr-shutter-in-horizontal按钮，示例：https://codepen.io/yansheng836/pen/QWWmEro。

    1.添加class

    修改H:\Hexo\themes\yilia\layout\_partial\article.ejs，查找index && theme.show_all_link，找到如下内容

    1
    2
    3
    4
    5
    <% if (index && theme.show_all_link){ %>
      <p class="article-more-link">
        <a class="article-more-a" href="<%- url_for(post.path) %>"><%= theme.show_all_link %> >></a>
      </p>
    <% } %>

    在class="article-more-a中添加hvr-shutter-in-horizontal

    1
    2
    3
    4
    5
    <% if (index && theme.show_all_link){ %>
      <p class="article-more-link">
        <a class="article-more-a  hvr-shutter-in-horizontal" href="<%- url_for(post.path) %>"><%= theme.show_all_link %> >></a>
      </p>
    <% } %>

    2.修改样式

    修改H:\Hexo\themes\yilia\source\main.0cf68a.css，查找.article-more-link a

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .article-more-link a {
        background:#4d4d4d;
        color:#fff;
        font-size:12px;
        padding:5px 8px;
        line-height:16px;
        border-radius:2px;
        transition:background .3s
    }
    .article-more-link a:hover {
        background:#3c3c3c
    }

    修改为：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    /* 《展开全文按钮 */
     .article-more-link a {
        color:#fff;
        font-size:12px;
        padding:5px 8px;
        line-height:16px;
        border-radius:2px;
        /* Prevent highlight colour when element is tapped */
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        /* Smooth fonts */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    /* Shutter In Horizontal ,from : http://ianlunn.github.io/Hover/ */
     .hvr-shutter-in-horizontal {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        position: relative;
    /* 在鼠标悬浮时为：蓝色 */
        background: #2098D1;
        -webkit-transition-property: color;
        transition-property: color;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
    }
    .hvr-shutter-in-horizontal:before {
        content:"";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    /* 在默认情况下为：灰褐色 */
        background: #4d4d4d;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    .hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active {
        color: white;
    }
    .hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }
    /* 展开全文按钮》 */
    ]]>     + + https://www.yansheng.xyz/article/c344994.html#disqus_thread +     + + + hexo+yilia添加live2d看板娘 + https://www.yansheng.xyz/article/e239dc63.html + https://www.yansheng.xyz/article/e239dc63.html + Sun, 10 Nov 2019 09:06:30 GMT + + + <p>添加live2d看板娘，插件：hexo-helper-live2d，github仓库：<a href="https://github.com/EYHN/hexo-helper-live2d" target="_blank" rel="noopener">https://github.com/EYHN/hexo-helper-live2d</a></p> +<p>右下角：可爱小黑猫🐱</p> +<p><img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1573481131575.png" alt="file"></p> + + + + + 添加live2d看板娘，插件：hexo-helper-live2d，github仓库：https://github.com/EYHN/hexo-helper-live2d

    右下角：可爱小黑猫🐱

    file

    安装

    1.安装插件

    运行命令npm install --save hexo-helper-live2d

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    $ npm install --save hexo-helper-live2d

    > core-js@2.6.10 postinstall H:\Hexo\node_modules\babel-polyfill\node_modules\core-js
    > node postinstall || echo "ignore"

    Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

    The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
    > https://opencollective.com/core-js
    > https://www.patreon.com/zloirock

    Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


    > core-js@2.6.10 postinstall H:\Hexo\node_modules\babel-runtime\node_modules\core-js
    > node postinstall || echo "ignore"


    > live2d-widget@3.1.4 postinstall H:\Hexo\node_modules\live2d-widget
    > opencollective-postinstall

    Thank you for using live2d-widget!
    If you rely on this package, please consider supporting our open collective:
    > https://opencollective.com/live2d-widgetjs/donate


    > hexo-helper-live2d@3.1.1 postinstall H:\Hexo\node_modules\hexo-helper-live2d
    > opencollective-postinstall

    Thank you for using hexo-helper-live2d!
    If you rely on this package, please consider supporting our open collective:
    > https://opencollective.com/hexo-helper-live2d/donate

    npm WARN babel-eslint@10.0.2 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    + hexo-helper-live2d@3.1.1
    added 277 packages from 109 contributors and audited 25235 packages in 255.268s
    found 20 vulnerabilities (7 low, 6 moderate, 6 high, 1 critical)
      run `npm audit fix` to fix them, or `npm audit` for details

    2.选择模型

    可到https://huaji8.top/post/live2d-plugin-2.0/预览效果。

    命令为:npm install live2d-widget-model-模型名，模型为可参考上面的预览内容。

    安装模型:

    1
    2
    3
    4
    5
    6
    7
    $ npm install live2d-widget-model-hijiki
    npm WARN babel-eslint@10.0.2 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    + live2d-widget-model-hijiki@1.0.5
    added 1 package in 52.155s

    3.配置

    站点的配置文件\_config.yml或者是主题的配置文件中添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    # Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    live2d:
      enable: true
      scriptFrom: local
      pluginRootPath: live2dw/
      pluginJsPath: lib/
      pluginModelPath: assets/
      tagMode: false
      debug: false
      model:
        use: live2d-widget-model-hijiki # 模型：https://huaji8.top/post/live2d-plugin-2.0/
      display:
        position: right
        width: 150
        height: 300
      mobile:
        show: true

    注意这里的use参数是上面安装的那个模型全名。

    4.效果图

    可爱的小黑猫已上线（见封面）。如果不起效，一般需要重新生成hexo clean & hexo g。

    补充

    取消看板娘

    暂时不用

    将配置中的enable设置成false即可。

    卸载插件

    运行命令下载插件，删除配置信息：

    1. 卸载模型：npm install live2d-widget-model-模型名
    2. 卸载live2d插件：npm uninstall hexo-helper-live2d
    3. 去掉站点_config.yml下的配置信息即可。
    ]]>     + + https://www.yansheng.xyz/article/e239dc63.html#disqus_thread +     + + + hexo+yilia添加背景特效 + https://www.yansheng.xyz/article/cf9c6a5e.html + https://www.yansheng.xyz/article/cf9c6a5e.html + Sun, 10 Nov 2019 09:06:25 GMT + + + <p>添加多种页面背景特效，参考：<a href="https://blog.csdn.net/qq_36759224/article/details/85420403" target="_blank" rel="noopener">Hexo 博客优化之博客美化系列（持续更新）</a>，需要注意的是：添加背景特效是很消耗浏览器内容的，建议只选择其中的一两个。</p> +<h2 id="特效目录">特效目录</h2> +<ul> +<li><a href="#%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E5%87%BA%E7%8E%B0%E7%88%B1%E5%BF%83%E7%89%B9%E6%95%88">鼠标点击出现爱心特效</a></li> +<li><a href="#%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E6%98%BE%E7%A4%BA%E6%96%87%E5%AD%97--%E9%9C%80%E8%A6%81%E5%BC%95%E5%85%A5jquery">鼠标点击显示文字–需要引入jQuery</a></li> +<li><a href="#%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E7%83%9F%E8%8A%B1%E7%88%86%E7%82%B8%E6%95%88%E6%9E%9C">鼠标点击烟花爆炸效果</a></li> +<li><a href="#%E5%8A%A8%E6%80%81%E7%BA%BF%E6%9D%A1%E8%83%8C%E6%99%AF">动态线条背景</a></li> +<li><a href="#%E9%9B%AA%E8%8A%B1%E7%89%B9%E6%95%882%E5%A4%A7%E9%9B%AA%E8%8A%B1%E6%9C%89%E9%BD%BF%E8%BD%AE">雪花特效2.大雪花(有齿轮)</a></li> +<li><a href="#%E9%9B%AA%E8%8A%B1%E7%89%B9%E6%95%883%E5%B0%8F%E9%9B%AA%E8%8A%B1%E6%97%A0%E9%BD%BF%E8%BD%AE">雪花特效3.小雪花(无齿轮)</a></li> +<li><a href="#%E5%BD%A9%E5%B8%A61%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E8%87%AA%E5%8A%A8%E6%9B%BF%E6%8D%A2%E5%BD%A9%E5%B8%A6">彩带1.鼠标点击自动替换彩带</a></li> +<li><a href="#%E5%BD%A9%E5%B8%A62%E8%87%AA%E5%8A%A8%E9%A3%98%E5%8A%A8">彩带2.自动飘动</a></li> +<li><a href="#%E4%BB%A3%E7%A0%81%E9%9B%A8">代码雨</a></li> +</ul> + + + + + 添加多种页面背景特效，参考：Hexo 博客优化之博客美化系列（持续更新），需要注意的是：添加背景特效是很消耗浏览器内容的，建议只选择其中的一两个。

    特效目录

    套路说明

    为防止后面的代码遗漏了什么东西，在这里统一说明：添加背景动画的套路（适用于各种hexo主题）：

    1. 新建生成动画的JS文件，或者引入现成的JS文件的CDN文件（我这里为了备份，基本是新建文件；比较有名的特效一般都会上传到GitHub，而且有引入CDN的相关介绍）。我的文件放再H:\Hexo\themes\yilia\source\js\目录下。
    2. 因为背景特效属于陪衬类，也就是说不是很重要的，所以一般都是在加载完页面之后再引入的。因此我们在页面的</body>标签前引入即可。yilia主题是在H:\Hexo\themes\yilia\layout\layout.ejs中，其他主题类似。
    3. 在2中引入需要设置成配置时，即当配置文件中开启设置时，才会开启这个特效。因此最后一步是在主题的配置文件中开启配置。yilia主题是在H:\Hexo\themes\yilia\_config.yml中，其他主题类似。

    鼠标点击出现爱心特效

    新建H:\Hexo\themes\yilia\source\js\love.js:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    (function (window, document, undefined) {
        var hearts = [];
        window.requestAnimationFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback) {
                    setTimeout(callback, 1000 / 60);
                }
        })();
        init();

        function init() {
            css(
                ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
            );
            attachEvent();
            gameloop();
        }

        function gameloop() {
            for (var i = 0; i < hearts.length; i++) {
                if (hearts[i].alpha <= 0) {
                    document.body.removeChild(hearts[i].el);
                    hearts.splice(i, 1);
                    continue;
                }
                hearts[i].y--;
                hearts[i].scale += 0.004;
                hearts[i].alpha -= 0.013;
                hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i]
                    .alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale +
                    ") rotate(45deg);background:" + hearts[i].color;
            }
            requestAnimationFrame(gameloop);
        }

        function attachEvent() {
            var old = typeof window.onclick === "function" && window.onclick;
            window.onclick = function (event) {
                old && old();
                createHeart(event);
            }
        }

        function createHeart(event) {
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push({
                el: d,
                x: event.clientX - 5,
                y: event.clientY - 5,
                scale: 1,
                alpha: 1,
                color: randomColor()
            });
            document.body.appendChild(d);
        }

        function css(css) {
            var style = document.createElement("style");
            style.type = "text/css";
            try {
                style.appendChild(document.createTextNode(css));
            } catch (ex) {
                style.styleSheet.cssText = css;
            }
            document.getElementsByTagName('head')[0].appendChild(style);
        }

        function randomColor() {
            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) +
                ")";
        }
    })(window, document);

    添加到H:\Hexo\themes\yilia\layout\layout.ejs的</body>前

    1
    2
    3
    4
    5
    <!-- 《页面点击小红心 -->
    <% if (theme.love){ %>
        <script type="text/javascript" src="/js/love.js"></script>
    <% } %>
    <!-- 页面点击小红心》 -->

    开启配置H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 页面点击小红心
    love: true

    file

    鼠标点击显示文字–需要引入jQuery

    H:\Hexo\themes\yilia\source\js\click_show_text.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array
            ("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
            var $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
            y = e.pageY;
            $i.css({
                "z-index": 5,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "#FF0000"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
    3000,
    function() {
        $i.remove();
    });
        });
        setTimeout('delay()', 2000);
    });

    function delay() {
        $(".buryit").removeAttr("onclick");
    }

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    <!--单击显示文字-->
    <% if (theme.click_show_text){ %>
        <script type="text/javascript" src="/js/click_show_text.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 鼠标点击显示文字
    click_show_text: true

    file

    鼠标点击烟花爆炸效果

    H:\Hexo\themes\yilia\source\js\fireworks.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    "use strict";

    function updateCoords(e) {
        pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[
            0].clientY - canvasEl.getBoundingClientRect().top
    }

    function setParticuleDirection(e) {
        var t = anime.random(0, 360) * Math.PI / 180,
            a = anime.random(50, 180),
            n = [-1, 1][anime.random(0, 1)] * a;
        return {
            x: e.x + n * Math.cos(t),
            y: e.y + n * Math.sin(t)
        }
    }

    function createParticule(e, t) {
        var a = {};
        return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos =
            setParticuleDirection(a), a.draw = function () {
                ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill()
            }, a
    }

    function createCircle(e, t) {
        var a = {};
        return a.x = e, a.y = t, a.color = "#F00", a.radius = 0.1, a.alpha = 0.5, a.lineWidth = 6, a.draw = function () {
            ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth =
                a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1
        }, a
    }

    function renderParticule(e) {
        for (var t = 0; t < e.animatables.length; t++) {
            e.animatables[t].target.draw()
        }
    }

    function animateParticules(e, t) {
        for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) {
            n.push(createParticule(e, t))
        }
        anime.timeline().add({
            targets: n,
            x: function (e) {
                return e.endPos.x
            },
            y: function (e) {
                return e.endPos.y
            },
            radius: 0.1,
            duration: anime.random(1200, 1800),
            easing: "easeOutExpo",
            update: renderParticule
        }).add({
            targets: a,
            radius: anime.random(80, 160),
            lineWidth: 0,
            alpha: {
                value: 0,
                easing: "linear",
                duration: anime.random(600, 800)
            },
            duration: anime.random(1200, 1800),
            easing: "easeOutExpo",
            update: renderParticule,
            offset: 0
        })
    }

    function debounce(e, t) {
        var a;
        return function () {
            var n = this,
                i = arguments;
            clearTimeout(a), a = setTimeout(function () {
                e.apply(n, i)
            }, t)
        }
    }
    var canvasEl = document.querySelector(".fireworks");
    if (canvasEl) {
        var ctx = canvasEl.getContext("2d"),
            numberOfParticules = 30,
            pointerX = 0,
            pointerY = 0,
            tap = "mousedown",
            colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"],
            setCanvasSize = debounce(function () {
                canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width =
                    window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext(
                        "2d").scale(2, 2)
            }, 500),
            render = anime({
                duration: 1 / 0,
                update: function () {
                    ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
                }
            });
        document.addEventListener(tap, function (e) {
            "sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !==
                e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY))
        }, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1)
    }
    "use strict";

    function updateCoords(e) {
        pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[
            0].clientY - canvasEl.getBoundingClientRect().top
    }

    function setParticuleDirection(e) {
        var t = anime.random(0, 360) * Math.PI / 180,
            a = anime.random(50, 180),
            n = [-1, 1][anime.random(0, 1)] * a;
        return {
            x: e.x + n * Math.cos(t),
            y: e.y + n * Math.sin(t)
        }
    }

    function createParticule(e, t) {
        var a = {};
        return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos =
            setParticuleDirection(a), a.draw = function () {
                ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill()
            }, a
    }

    function createCircle(e, t) {
        var a = {};
        return a.x = e, a.y = t, a.color = "#F00", a.radius = 0.1, a.alpha = 0.5, a.lineWidth = 6, a.draw = function () {
            ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth =
                a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1
        }, a
    }

    function renderParticule(e) {
        for (var t = 0; t < e.animatables.length; t++) {
            e.animatables[t].target.draw()
        }
    }

    function animateParticules(e, t) {
        for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) {
            n.push(createParticule(e, t))
        }
        anime.timeline().add({
            targets: n,
            x: function (e) {
                return e.endPos.x
            },
            y: function (e) {
                return e.endPos.y
            },
            radius: 0.1,
            duration: anime.random(1200, 1800),
            easing: "easeOutExpo",
            update: renderParticule
        }).add({
            targets: a,
            radius: anime.random(80, 160),
            lineWidth: 0,
            alpha: {
                value: 0,
                easing: "linear",
                duration: anime.random(600, 800)
            },
            duration: anime.random(1200, 1800),
            easing: "easeOutExpo",
            update: renderParticule,
            offset: 0
        })
    }

    function debounce(e, t) {
        var a;
        return function () {
            var n = this,
                i = arguments;
            clearTimeout(a), a = setTimeout(function () {
                e.apply(n, i)
            }, t)
        }
    }
    var canvasEl = document.querySelector(".fireworks");
    if (canvasEl) {
        var ctx = canvasEl.getContext("2d"),
            numberOfParticules = 30,
            pointerX = 0,
            pointerY = 0,
            tap = "mousedown",
            colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"],
            setCanvasSize = debounce(function () {
                canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width =
                    window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext(
                        "2d").scale(2, 2)
            }, 500),
            render = anime({
                duration: 1 / 0,
                update: function () {
                    ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
                }
            });
        document.addEventListener(tap, function (e) {
            "sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !==
                e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY))
        }, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1)
    };

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    5
    6
    <!--鼠标点击烟花爆炸效果，需要引入jQuery-->
    <% if (theme.fireworks){ %>
        <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
        <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
        <script type="text/javascript" src="/js/fireworks.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 鼠标点击烟花爆炸效果
    fireworks: true

    file

    动态线条背景

    https://github.com/hustcc/canvas-nest.js

    H:\Hexo\themes\yilia\layout\layout.ejs

    直接方法

    1
    2
    3
    4
    <!--动态线条背景-->
    <script type="text/javascript"
    color="220,220,220" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
    </script>

    配置式：

    1
    2
    3
    4
    5
    6
    7
    <!--动态线条背景-->
    <% if (theme.canvas_nest.enable){ %>
        <script type="text/javascript" color="<%=theme.canvas_nest.color %>" opacity="<%=theme.canvas_nest.opacity %>" 
            zIndex="<%=theme.canvas_nest.zIndex %>" count="<%=theme.canvas_nest.count %>" 
            src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
        </script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # https://github.com/hustcc/canvas-nest.js
    # 配置详见： https://github.com/hustcc/canvas-nest.js#configuration
    # 动态线条效果，会向鼠标集中
    canvas_nest:
      enable: true
      color: '255, 235, 59'        # color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
      pointColor: '156,39,176'     # color of points, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
      opacity: '0.8'               # the opacity of line (0~1), default: 0.5.
      count: '99'                  # the number of lines, default: 99.
      zIndex: '-1'                 # z-index property of the background, default: -1.

    file

    雪花特效2.大雪花(有齿轮)

    H:\Hexo\themes\yilia\source\js\snow2.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    /*样式一*/
    (function ($) {
        $.fn.snow = function (options) {
            var $flake = $('<div id="snowbox" />').css({
                    'position': 'absolute',
                    'z-index': '9999',
                    'top': '-50px'
                }).html('❄'),
                documentHeight = $(document).height(),
                documentWidth = $(document).width(),
                defaults = {
                    minSize: 10,
                    maxSize: 20,
                    newOn: 1000,
                    flakeColor: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
                },
                options = $.extend({}, defaults, options);
            var interval = setInterval(function () {
                var startPositionLeft = Math.random() * documentWidth - 100,
                    startOpacity = 0.5 + Math.random(),
                    sizeFlake = options.minSize + Math.random() * options.maxSize,
                    endPositionTop = documentHeight - 200,
                    endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
                    durationFall = documentHeight * 10 + Math.random() * 5000;
                $flake.clone().appendTo('body').css({
                    left: startPositionLeft,
                    opacity: startOpacity,
                    'font-size': sizeFlake,
                    color: options.flakeColor
                }).animate({
                    top: endPositionTop,
                    left: endPositionLeft,
                    opacity: 0.2
                }, durationFall, 'linear', function () {
                    $(this).remove()
                });
            }, options.newOn);
        };
    })(jQuery);
    $(function () {
        $.fn.snow({
            minSize: 5,
            /* 定义雪花最小尺寸 */
            maxSize: 50,
            /* 定义雪花最大尺寸 */
            newOn: 300 /* 定义密集程度，数字越小越密集 */
        });
    });

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    <!-- 雪花特效2 -->
    <% if (theme.snow2){ %>
      <script type="text/javascript" src="/js/snow2.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 雪花特效2
    snow2: true

    file

    雪花特效3.小雪花(无齿轮)

    H:\Hexo\themes\yilia\source\js\snow3.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    /*样式二*/
    /* 控制下雪 */
    function snowFall(snow) {
        /* 可配置属性 */
        snow = snow || {};
        this.maxFlake = snow.maxFlake || 200; /* 最多片数 */
        this.flakeSize = snow.flakeSize || 10; /* 雪花形状 */
        this.fallSpeed = snow.fallSpeed || 1; /* 坠落速度 */
    }
    /* 兼容写法 */
    requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        function (callback) {
            setTimeout(callback, 1000 / 60);
        };

    cancelAnimationFrame = window.cancelAnimationFrame ||
        window.mozCancelAnimationFrame ||
        window.webkitCancelAnimationFrame ||
        window.msCancelAnimationFrame ||
        window.oCancelAnimationFrame;
    /* 开始下雪 */
    snowFall.prototype.start = function () {
        /* 创建画布 */
        snowCanvas.apply(this);
        /* 创建雪花形状 */
        createFlakes.apply(this);
        /* 画雪 */
        drawSnow.apply(this)
    }
    /* 创建画布 */
    function snowCanvas() {
        /* 添加Dom结点 */
        var snowcanvas = document.createElement("canvas");
        snowcanvas.id = "snowfall";
        snowcanvas.width = window.innerWidth;
        snowcanvas.height = document.body.clientHeight;
        snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
        document.getElementsByTagName("body")[0].appendChild(snowcanvas);
        this.canvas = snowcanvas;
        this.ctx = snowcanvas.getContext("2d");
        /* 窗口大小改变的处理 */
        window.onresize = function () {
            snowcanvas.width = window.innerWidth;
            /* snowcanvas.height = window.innerHeight */
        }
    }
    /* 雪运动对象 */
    function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
        this.x = Math.floor(Math.random() * canvasWidth); /* x坐标 */
        this.y = Math.floor(Math.random() * canvasHeight); /* y坐标 */
        this.size = Math.random() * flakeSize + 2; /* 形状 */
        this.maxSize = flakeSize; /* 最大形状 */
        this.speed = Math.random() * 1 + fallSpeed; /* 坠落速度 */
        this.fallSpeed = fallSpeed; /* 坠落速度 */
        this.velY = this.speed; /* Y方向速度 */
        this.velX = 0; /* X方向速度 */
        this.stepSize = Math.random() / 30; /* 步长 */
        this.step = 0 /* 步数 */
    }
    flakeMove.prototype.update = function () {
        var x = this.x,
            y = this.y;
        /* 左右摆动(余弦) */
        this.velX *= 0.98;
        if (this.velY <= this.speed) {
            this.velY = this.speed
        }
        this.velX += Math.cos(this.step += .05) * this.stepSize;

        this.y += this.velY;
        this.x += this.velX;
        /* 飞出边界的处理 */
        if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
            this.reset(canvas.width, canvas.height)
        }
    };
    /* 飞出边界-放置最顶端继续坠落 */
    flakeMove.prototype.reset = function (width, height) {
        this.x = Math.floor(Math.random() * width);
        this.y = 0;
        this.size = Math.random() * this.maxSize + 2;
        this.speed = Math.random() * 1 + this.fallSpeed;
        this.velY = this.speed;
        this.velX = 0;
    };
    // 渲染雪花-随机形状（此处可修改雪花颜色！！！）
    flakeMove.prototype.render = function (ctx) {
        var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
        snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此处是雪花颜色，默认是白色 */
        snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
        snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16进制的RGB 颜色代码。 */
        ctx.save();
        ctx.fillStyle = snowFlake;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    };
    /* 创建雪花-定义形状 */
    function createFlakes() {
        var maxFlake = this.maxFlake,
            flakes = this.flakes = [],
            canvas = this.canvas;
        for (var i = 0; i < maxFlake; i++) {
            flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
        }
    }
    /* 画雪 */
    function drawSnow() {
        var maxFlake = this.maxFlake,
            flakes = this.flakes;
        ctx = this.ctx, canvas = this.canvas, that = this;
        /* 清空雪花 */
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (var e = 0; e < maxFlake; e++) {
            flakes[e].update();
            flakes[e].render(ctx);
        }
        /*  一帧一帧的画 */
        this.loop = requestAnimationFrame(function () {
            drawSnow.apply(that);
        });
    }
    /* 调用及控制方法 */
    var snow = new snowFall({
        maxFlake: 60
    });
    snow.start();

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    <!-- 雪花特效3 -->
    <% if (theme.snow3){ %>
      <script type="text/javascript" src="/js/snow3.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 雪花特效3
    snow3: false

    file

    彩带1.鼠标点击自动替换彩带

    H:\Hexo\themes\yilia\source\js\ribbon.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    /**
     * Copyright (c) 2016 hustcc
     * License: MIT
     * Version: v1.0.1
     * GitHub: https://github.com/hustcc/ribbon.js
    **/
    /*jshint -W030 */
    ! function() {
      function attr(node, attr, default_value) {
        return Number(node.getAttribute(attr)) || default_value;
      }

      // get user config
      var scripts = document.getElementsByTagName('script'),
        script = scripts[scripts.length - 1]; // 当前加载的script
      config = {
        z: attr(script, "zIndex", -1), // z-index
        a: attr(script, "alpha", 0.6), // alpha
        s: attr(script, "size", 90), // size
      };

      var canvas = document.createElement('canvas'),
        g2d = canvas.getContext('2d'),
        pr = window.devicePixelRatio || 1,
        width = window.innerWidth,
        height = window.innerHeight,
        f = config.s,
        q, t,
        m = Math,
        r = 0,
        pi = m.PI*2,
        cos = m.cos,
        random = m.random;
      canvas.width = width * pr;
      canvas.height = height * pr;
      g2d.scale(pr, pr);
      g2d.globalAlpha = config.a;
      canvas.style.cssText = 'opacity: ' + config.a + ';position:fixed;top:0;left:0;z-index: ' + config.z + ';width:100%;height:100%;pointer-events:none;';
      // create canvas
      document.getElementsByTagName('body')[0].appendChild(canvas);

      function redraw() {
        g2d.clearRect(0, 0, width, height);
        q = [{x: 0, y: height * 0.7 + f}, {x: 0, y: height * 0.7 - f}];
        while(q[1].x < width + f) draw(q[0], q[1]);
      }
      function draw(i, j) {
        g2d.beginPath();
        g2d.moveTo(i.x, i.y);
        g2d.lineTo(j.x, j.y);
        var k = j.x + (random()*2-0.25)*f, n = line(j.y);
        g2d.lineTo(k, n);
        g2d.closePath();
        r -= pi / -50;
        g2d.fillStyle = '#'+(cos(r)*127+128<<16 | cos(r+pi/3)*127+128<<8 | cos(r+pi/3*2)*127+128).toString(16);
        g2d.fill();
        q[0] = q[1];
        q[1] = {x: k, y: n};
      }
      function line(p){
        t = p + (random() * 2 - 1.1) * f;
        return (t > height || t < 0) ? line(p) : t;
      }

      document.onclick = redraw;
      document.ontouchstart = redraw;
      redraw();
    }();

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    5
    <!--彩带1.点击自动替换彩带-->
    <% if (theme.ribbon){ %>
        <!-- <script src="https://g.joyinshare.com/hc/ribbon.min.js" type="text/javascript"></script> -->
        <script type="text/javascript" src="/js/ribbon.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    3
    # https://github.com/hustcc/ribbon.js
    # 彩带1.点击自动替换彩带
    ribbon: false

    file

    彩带2.自动飘动

    H:\Hexo\themes\yilia\source\js\ribbon_flow.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    (function (name, factory) {
        if (typeof window === "object") {
            window[name] = factory()
        }
    })("Ribbons", function () {
        var _w = window,
            _b = document.body,
            _d = document.documentElement;
        var random = function () {
            if (arguments.length === 1) {
                if (Array.isArray(arguments[0])) {
                    var index = Math.round(random(0, arguments[0].length - 1));
                    return arguments[0][index]
                }
                return random(0, arguments[0])
            } else if (arguments.length === 2) {
                return Math.random() * (arguments[1] - arguments[0]) + arguments[0]
            }
            return 0
        };
        var screenInfo = function (e) {
            var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0),
                height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0),
                scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0),
                scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0);
            return {
                width: width,
                height: height,
                ratio: width / height,
                centerx: width / 2,
                centery: height / 2,
                scrollx: scrollx,
                scrolly: scrolly
            }
        };
        var mouseInfo = function (e) {
            var screen = screenInfo(e),
                mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0,
                mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0;
            return {
                mousex: mousex,
                mousey: mousey,
                centerx: mousex - screen.width / 2,
                centery: mousey - screen.height / 2
            }
        };
        var Point = function (x, y) {
            this.x = 0;
            this.y = 0;
            this.set(x, y)
        };
        Point.prototype = {
            constructor: Point,
            set: function (x, y) {
                this.x = x || 0;
                this.y = y || 0
            },
            copy: function (point) {
                this.x = point.x || 0;
                this.y = point.y || 0;
                return this
            },
            multiply: function (x, y) {
                this.x *= x || 1;
                this.y *= y || 1;
                return this
            },
            divide: function (x, y) {
                this.x /= x || 1;
                this.y /= y || 1;
                return this
            },
            add: function (x, y) {
                this.x += x || 0;
                this.y += y || 0;
                return this
            },
            subtract: function (x, y) {
                this.x -= x || 0;
                this.y -= y || 0;
                return this
            },
            clampX: function (min, max) {
                this.x = Math.max(min, Math.min(this.x, max));
                return this
            },
            clampY: function (min, max) {
                this.y = Math.max(min, Math.min(this.y, max));
                return this
            },
            flipX: function () {
                this.x *= -1;
                return this
            },
            flipY: function () {
                this.y *= -1;
                return this
            }
        };
        var Factory = function (options) {
            this._canvas = null;
            this._context = null;
            this._sto = null;
            this._width = 0;
            this._height = 0;
            this._scroll = 0;
            this._ribbons = [];
            this._options = {
                colorSaturation: "80%",
                colorBrightness: "60%",
                colorAlpha: 0.65,
                colorCycleSpeed: 6,
                verticalPosition: "center",
                horizontalSpeed: 150,
                ribbonCount: 5,
                strokeSize: 5,
                parallaxAmount: -0.5,
                animateSections: true
            };
            this._onDraw = this._onDraw.bind(this);
            this._onResize = this._onResize.bind(this);
            this._onScroll = this._onScroll.bind(this);
            this.setOptions(options);
            this.init()
        };
        Factory.prototype = {
            constructor: Factory,
            setOptions: function (options) {
                if (typeof options === "object") {
                    for (var key in options) {
                        if (options.hasOwnProperty(key)) {
                            this._options[key] = options[key]
                        }
                    }
                }
            },
            init: function () {
                try {
                    this._canvas = document.createElement("canvas");
                    this._canvas.style["display"] = "block";
                    this._canvas.style["position"] = "fixed";
                    this._canvas.style["margin"] = "0";
                    this._canvas.style["padding"] = "0";
                    this._canvas.style["border"] = "0";
                    this._canvas.style["outline"] = "0";
                    this._canvas.style["left"] = "0";
                    this._canvas.style["top"] = "0";
                    this._canvas.style["width"] = "100%";
                    this._canvas.style["height"] = "100%";
                    this._canvas.style["z-index"] = "-1";
                    this._onResize();
                    this._context = this._canvas.getContext("2d");
                    this._context.clearRect(0, 0, this._width, this._height);
                    this._context.globalAlpha = this._options.colorAlpha;
                    window.addEventListener("resize", this._onResize);
                    window.addEventListener("scroll", this._onScroll);
                    document.body.appendChild(this._canvas)
                } catch (e) {
                    console.warn("Canvas Context Error: " + e.toString());
                    return
                }
                this._onDraw()
            },
            addRibbon: function () {
                var dir = Math.round(random(1, 9)) > 5 ? "right" : "left",
                    stop = 1000,
                    hide = 200,
                    min = 0 - hide,
                    max = this._width + hide,
                    movex = 0,
                    movey = 0,
                    startx = dir === "right" ? min : max,
                    starty = Math.round(random(0, this._height));
                if (/^(top|min)$/i.test(this._options.verticalPosition)) {
                    starty = 0 + hide
                } else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
                    starty = this._height / 2
                } else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
                    starty = this._height - hide
                }
                var ribbon = [],
                    point1 = new Point(startx, starty),
                    point2 = new Point(startx, starty),
                    point3 = null,
                    color = Math.round(random(0, 360)),
                    delay = 0;
                while (true) {
                    if (stop <= 0) break;
                    stop--;
                    movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed);
                    movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25));
                    point3 = new Point();
                    point3.copy(point2);
                    if (dir === "right") {
                        point3.add(movex, movey);
                        if (point2.x >= max) break
                    } else if (dir === "left") {
                        point3.subtract(movex, movey);
                        if (point2.x <= min) break
                    }
                    ribbon.push({
                        point1: new Point(point1.x, point1.y),
                        point2: new Point(point2.x, point2.y),
                        point3: point3,
                        color: color,
                        delay: delay,
                        dir: dir,
                        alpha: 0,
                        phase: 0
                    });
                    point1.copy(point2);
                    point2.copy(point3);
                    delay += 4;
                    color += this._options.colorCycleSpeed
                }
                this._ribbons.push(ribbon)
            },
            _drawRibbonSection: function (section) {
                if (section) {
                    if (section.phase >= 1 && section.alpha <= 0) {
                        return true
                    }
                    if (section.delay <= 0) {
                        section.phase += 0.02;
                        section.alpha = Math.sin(section.phase) * 1;
                        section.alpha = section.alpha <= 0 ? 0 : section.alpha;
                        section.alpha = section.alpha >= 1 ? 1 : section.alpha;
                        if (this._options.animateSections) {
                            var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1;
                            if (section.dir === "right") {
                                section.point1.add(mod, 0);
                                section.point2.add(mod, 0);
                                section.point3.add(mod, 0)
                            } else {
                                section.point1.subtract(mod, 0);
                                section.point2.subtract(mod, 0);
                                section.point3.subtract(mod, 0)
                            }
                            section.point1.add(0, mod);
                            section.point2.add(0, mod);
                            section.point3.add(0, mod)
                        }
                    } else {
                        section.delay -= 0.5
                    }
                    var s = this._options.colorSaturation,
                        l = this._options.colorBrightness,
                        c = "hsla(" + section.color + ", " + s + ", " + l + ", " + section.alpha + " )";
                    this._context.save();
                    if (this._options.parallaxAmount !== 0) {
                        this._context.translate(0, this._scroll * this._options.parallaxAmount)
                    }
                    this._context.beginPath();
                    this._context.moveTo(section.point1.x, section.point1.y);
                    this._context.lineTo(section.point2.x, section.point2.y);
                    this._context.lineTo(section.point3.x, section.point3.y);
                    this._context.fillStyle = c;
                    this._context.fill();
                    if (this._options.strokeSize > 0) {
                        this._context.lineWidth = this._options.strokeSize;
                        this._context.strokeStyle = c;
                        this._context.lineCap = "round";
                        this._context.stroke()
                    }
                    this._context.restore()
                }
                return false
            },
            _onDraw: function () {
                for (var i = 0, t = this._ribbons.length; i < t; ++i) {
                    if (!this._ribbons[i]) {
                        this._ribbons.splice(i, 1)
                    }
                }
                this._context.clearRect(0, 0, this._width, this._height);
                for (var a = 0; a < this._ribbons.length; ++a) {
                    var ribbon = this._ribbons[a],
                        numSections = ribbon.length,
                        numDone = 0;
                    for (var b = 0; b < numSections; ++b) {
                        if (this._drawRibbonSection(ribbon[b])) {
                            numDone++
                        }
                    }
                    if (numDone >= numSections) {
                        this._ribbons[a] = null
                    }
                }
                if (this._ribbons.length < this._options.ribbonCount) {
                    this.addRibbon()
                }
                requestAnimationFrame(this._onDraw)
            },
            _onResize: function (e) {
                var screen = screenInfo(e);
                this._width = screen.width;
                this._height = screen.height;
                if (this._canvas) {
                    this._canvas.width = this._width;
                    this._canvas.height = this._height;
                    if (this._context) {
                        this._context.globalAlpha = this._options.colorAlpha
                    }
                }
            },
            _onScroll: function (e) {
                var screen = screenInfo(e);
                this._scroll = screen.scrolly
            }
        };
        return Factory
    });
    new Ribbons({
        colorSaturation: "60%",
        colorBrightness: "50%",
        colorAlpha: 0.5,
        colorCycleSpeed: 5,
        verticalPosition: "random",
        horizontalSpeed: 200,
        ribbonCount: 3,
        strokeSize: 0,
        parallaxAmount: -0.2,
        animateSections: true
    });

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    5
    <!--彩带2.自动飘动-->
    <% if (theme.ribbon_flow){ %>
        <!-- <script src="https://g.joyinshare.com/hc/piao.js" type="text/javascript"></script> -->
        <script type="text/javascript" src="/js/ribbon_flow.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 彩带2.自动飘动
    ribbon_flow: false

    代码雨

    存在问题：位置不对

    H:\Hexo\themes\yilia\source\js\code_rain.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    window.onload = function(){
        //获取画布对象
        var canvas = document.getElementById("code_rain_canvas");
        //获取画布的上下文
        var context =canvas.getContext("2d");
        var s = window.screen;
        var W = canvas.width = s.width;
        var H = canvas.height;
        //获取浏览器屏幕的宽度和高度
        //var W = window.innerWidth;
        //var H = window.innerHeight;
        //设置canvas的宽度和高度
        canvas.width = W;
        canvas.height = H;
        //每个文字的字体大小
        var fontSize = 12;
        //计算列
        var colunms = Math.floor(W /fontSize);
        //记录每列文字的y轴坐标
        var drops = [];
        //给每一个文字初始化一个起始点的位置
        for(var i=0;i<colunms;i++){
            drops.push(0);
        }
        //运动的文字
        var str ="WELCOME TO WWW.ITRHX.COM";
        //4:fillText(str,x,y);原理就是去更改y的坐标位置
        //绘画的函数
        function draw(){
            context.fillStyle = "rgba(238,238,238,.08)";//遮盖层
            context.fillRect(0,0,W,H);
            //给字体设置样式
            context.font = "600 "+fontSize+"px  Georgia";
            //给字体添加颜色
            context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)];//randColor();可以rgb,hsl, 标准色，十六进制颜色
            //写入画布中
            for(var i=0;i<colunms;i++){
                var index = Math.floor(Math.random() * str.length);
                var x = i*fontSize;
                var y = drops[i] *fontSize;
                context.fillText(str[index],x,y);
                //如果要改变时间，肯定就是改变每次他的起点
                if(y >= canvas.height && Math.random() > 0.99){
                    drops[i] = 0;
                }
                drops[i]++;
            }
        };
        function randColor(){//随机颜色
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb("+r+","+g+","+b+")";
        }
        draw();
        setInterval(draw,35);
    };

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!--代码雨-->
    <% if (theme.code_rain){ %>
          <!-- 数字雨 -->
          <canvas id="code_rain_canvas" width="1440" height="900"></canvas>
          <script type="text/javascript" src="/js/code_rain.js">
            <style>
                #code_rain_canvas {
                  position: fixed;
                  right: 0px;
                  bottom: 0px;
                  min-width: 100%;
                  min-height: 100%;
                  height: auto;
                  width: auto;
                  z-index: 4;
                }
            </style>
        </script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 代码雨
    code_rain: true

    file

    ]]>     + + https://www.yansheng.xyz/article/cf9c6a5e.html#disqus_thread +     + + + hexo+yilia添加背景图片 + https://www.yansheng.xyz/article/72a91df5.html + https://www.yansheng.xyz/article/72a91df5.html + Sun, 10 Nov 2019 09:06:21 GMT + + + <p>添加背景图片，效果图：</p> +<p><img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1573200205240.png" alt="file"></p> + + + + + 添加背景图片，效果图：

    file

    注：因为有博客不是修改时写的，部分代码没有进行备份，所以有些只能从git中获取代码，有些可能有点乱。

    同时因为每个人选的背景图片可能有所不同，主体颜色可能差异很大，需要调整的颜色可能比较多，这篇博客仅供参考，请自行选择是否替换背景。

    1.左侧边栏

    取消上半部分的背景颜色

    ：themes/yilia/layout/_partial/left-col.ejs，如下：这是掉上面的一行代码，使用下面的

    1
    2
    3
    <!-- <div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"> -->
    <!-- 左侧边栏（上半部分）不设置背景颜色 -->
    <div class="overlay" >

    添加背景图片

    H:\Hexo\themes\yilia\source\main.0cf68a.css，注释掉原有的背景颜色，添加照片：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .left-col {
        /* background:#fff; */
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url('http://bucket836.oss-cn-shenzhen.aliyuncs.com/wallpaper/381535373.jpeg') no-repeat 0% 20%/ cover;
        width:300px;
        position:fixed;
        opacity:1;
        transition:all .3s ease-in;
        -ms-transition: all .3s ease-in;
        height:100%;
        z-index:999
    }

    根据背景图片修改字体颜色（这步可以自定义），我是将color:#696969改成color:#673ab7:git

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     .left-col #header a {
    -    color:#696969
    +    color:#673ab7^M
     }
     .left-col #header a:hover {
    -    color:#b0a0aa
    +    color: #03A9F4^M
     }
     .left-col #header .header-subtitle {
         text-align:center;
    -    color:#999;
    +    color:#673ab7;
         font-size:18px;

    2.右边的文章

    调整背景颜色为透明

    主要是将白色背景变成透明的，background:#fff;–>background: rgba(255,255,255,.5);调整后Git

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     .article {
    -    margin:30px;
    -    position:relative;
    -    border:1px solid #ddd;
    -    border-top:1px solid #fff;
    -    border-bottom:1px solid #fff;
    -    background:#fff;
    -    /* background: rgba(255,255,255,.5); */
    -    transition:all .2s ease-in
    +    margin: 30px;^M
    +    border: 1px solid #ddd;^M
    +    border-top: 1px solid #fff;^M
    +    border-bottom: 1px solid #fff;^M
    +    background: rgba(255,255,255,.5);^M
    +    transition: all .2s ease-in^M
     }

    即：

    1
    2
    3
    4
    5
    6
    7
    8
    .article {
        margin: 30px;
        border: 1px solid #ddd;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        background: rgba(255,255,255,.5);
        transition: all .2s ease-in
    }

    3.添加背景图片

    将白色background-color:#fff;替换为照片：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    body {
        margin:0;
        font-size:14px;
        font-family:Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
        line-height:1.5;
        color:#333;
        /* background-color:#fff; */
        min-height:100%;
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
        url('https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/00/ChMkJlbKw6KIXhXnAA4L-_oxRzUAALG6QBUSg8ADgwT181.jpg') no-repeat 0% 0%/ cover;
    }

    /* 手机端换用一张背景图片，可以不使用 */
    @media screen and (max-width:800px) {
        body {
    background: url('https://oss.yansheng.xyz/your-name-phone2ys.jpg') no-repeat fixed top;
        }

    效果：

    file

    4.微调

    4.1调整评论区背景

    原来为白色，现在改为透明。

    file

    先将之前定义在H:\Hexo\themes\yilia\layout\_partial\article.ejs的样式统一放到H:\Hexo\themes\yilia\source\main.0cf68a.css，如下git diff

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     <!-- 《valine评论 -->
     <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
         <section id="comments" class="comments">
    -      <style>
    -        .comments{margin:30px;padding:10px;background:#fff}
    -        @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
    -      </style>
    +
           <%- partial('post/valine', {
             key: post.slug,
             title: post.title,

    在最后面添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    /* 《评论框 */
    .comments {
        margin:30px;
        padding:10px;
        /* background:#fff */
        background: rgba(255,255,255,.5);
    }
    @media screen and (max-width:800px) {
        .comments {
            margin:auto;
            padding:10px;
            /* background:#fff */
            background: rgba(255,255,255,.5);
        }
    }

    /* valine的背景颜色 */
    #vcomment{
    /* background:#fff */
        background: rgba(255,255,255,.9);
    }

    /* 设置valine占位符的颜色 */
    #vcomment :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #979292; 
    }
    #vcomment ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #979292;
    }
    #vcomment input:-ms-input-placeholder, #vcomment textarea:-ms-input-placeholder {
        color: #979292;
    }
    #vcomment input::-webkit-input-placeholder,#vcomment textarea::-webkit-input-placeholder {
        color: #979292;
    }
    /* 评论框》 */

    效果：

    file

    参考：html中怎么设定input的占位符字体颜色

    4.2调整归档背景

    之前调整的文章背景透明好像没有影响到这个：

    file

    进行调整：

    1
    2
    3
    4
    5
    6
    7
    8
    .archives-wrap {
        position:relative;
        margin:0 30px;
        padding-right:60px;
        border-bottom:1px solid #eee;
        /* background:#fff */
        background: rgba(255,255,255,.5);
    }

    调整日期颜色

    1
    2
    3
    4
    .article-meta time {
        /* color:#aaa */
        color: #2f2d2a;
    }

    日期时间大小

    1
    2
    3
    4
    5
    6
    7
    .archive-article-inner .article-meta .archive-article-date {
        cursor:default;
        font-size:15px;
        margin-bottom:5px;
        margin-top:-10px;
        margin-right:0
    }

    微调归档页面的标题样式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /* 丢弃之前的 */
    .archives .archive-article-title {
        font-size: 16px;
        color: #333;
        transition: color .3s
    }
    /* 修改： */
    /* 分类页面的标题 */
    .archives .archive-article-title {
        font-size:20px;
        /* color:#333; */
        transition:color .3s
    }
    .archives .archive-article-title:hover {
        /* color:#657b83 */
    }

    因为将右边栏的超链接都统一进行了设置，如果不需要特效，可以通过下面的代码取消超链接的下划线样式：

    1
    2
    3
     a.share-outer:hover::after {
        transform: scaleX(0);
    }

    4.3主页的文章块的日期取消超链接样式

    日期和文章统计数样式

    原：

    1
    2
    3
    4
    5
    .archive-article-date {
        color:#999;
        margin-right:7.6923%;
        float:right
    }

    修改后：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /* 日期栏（如果是文章还包含卜算子的页面访问量） */
    .archive-article-date {
        /* color:#0087ca; */
        color:#4b4949;
        margin-right:7.6923%;
        float:right
    }
    /* 日期 */
    .archive-article-date time{
        color:#4b4949;
    }
    /* 日期同一行的文章阅读数量 */
    .archive-article-date[id=busuanzi_container_page_pv] {
        color:#4b4949;
    }

    主页的“展开全文”按钮样式：受全局超链接样式影响，悬浮后，会变成红色。处理：提前加一个悬浮，掩盖全局的：

    1
    2
    3
    4
    /* 防止鼠标悬浮时，变色，因为会被全局的超链接样式影响 */
     .article-more-link a:hover{
        color:#fff;
    }

    前一页后一页：去掉悬浮的样式，可以直接注释掉：

    1
    2
    3
    #article-nav .article-nav-link-wrap:hover .article-nav-title, #article-nav .article-nav-link-wrap:hover i {
        /* color:#4d4d4d */
    }

    标签按钮：受全局超链接样式影响，悬浮后，会变成红色。处理：提前加一个悬浮，掩盖全局的：

    1
    2
    3
    4
     .tagcloud a:hover {
    +    color:#fff;^M
         opacity:.8
     }

    4.4手机端头部背景颜色

    H:\Hexo\themes\yilia\layout\_partial\mobile-nav.ejs取消内嵌样式，在全局css中进行设置：

    1
    2
    <!--<div class="overlay js-overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"></div>-->
    <div class="overlay js-overlay"></div>

    H:\Hexo\themes\yilia\source\main.0cf68a.css设置成渐变：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #mobile-nav .overlay {
        height:110px;
        position:absolute;
        width:100%;
        z-index:2;
         /* 渐变：浅绿色变淡蓝色 */
        background-image: linear-gradient(#8fecc5,#0badf7);
        /* 浏览器不支持渐变时显示默认颜色 */
        background-color: #4d4d4d;
    }

    效果图：

    file

    4.5鼠标图片

    去网上找一种鼠标指针的图片，用图片替换默认的鼠标样式：cursor:url('url'), default;，default表示：如果图片不起效，就是用默认的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    body {
        margin:0;
        font-size:14px;
        font-family:Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
        line-height:1.5;
        color:#333;
        /* background-color:#fff; */
        min-height:100%;
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
            url('https://oss.yansheng.xyz/wallpaper/qinshimingyue.jpg') no-repeat 0% 0%/ cover;
        cursor:url('https://oss.yansheng.xyz/ico/favicon-2019110906554413.ico'), default;
    }

    /* 因为超链接默认情况下是：cursor: pointer; 显示为手，这里进行设置 */
    a {
        cursor:url('https://oss.yansheng.xyz/ico/favicon-2019110906554413.ico'), default;
    }

    4.6行内代码、引用块的背景颜色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
     .article-entry li code, .article-entry p code {
        color: #c7254e;
        /* background-color: #f9f2f4; */
        background-color: rgba(249, 242, 244, .7);
        border-radius: 2px;
        padding:2px 4px;
        margin:0 3px;
        /* background:#ddd; */
        /* border:2px solid #ccc; */
        font-family:Menlo, Monaco, Andale Mono, lucida console, Courier New, monospace;
        word-wrap:break-word;
        /* font-size:14px */
    }
    .article-entry blockquote {
        background:#ddd;
        border-left:5px solid #ccc;
        padding:15px 20px;
        margin-top:10px;
        border-left:5px solid #657b83;
        /* background:#f6f6f6; */
        background: rgba(246, 246, 246, .7);
        /* 如果超长，自动截断 */
        word-wrap:break-word;
        word-break:break-all;
    }
    ]]>     + + https://www.yansheng.xyz/article/72a91df5.html#disqus_thread +     + + + hexo+yilia添加隐藏左边栏目按钮 + https://www.yansheng.xyz/article/31bbdc67.html + https://www.yansheng.xyz/article/31bbdc67.html + Sun, 10 Nov 2019 09:06:17 GMT + + + <p>效果图：<br> +<img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1573145229532.png" alt="file"></p> +<p>点击按钮时，缩进左侧边栏，再次点击再弹出来。</p> + + + + + 效果图：
    file

    点击按钮时，缩进左侧边栏，再次点击再弹出来。

    添加隐藏左边栏目按钮

    参考：添加隐藏左边栏目按钮

    下面为引用内容：

    折腾了一个下午,终于把隐藏左边侧边栏目的效果实现了. 实现了点击按钮隐藏侧边栏, 查找和修改源码实在是太麻烦了.

    制作按钮样式

    先找一款你喜欢的CSS菜单按钮切换,或者自己实现一个,我在网上找到一款比较简单的样式,稍微做了下修改.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    .mymenucontainer {
    display:block;
    cursor:pointer;
    left:0;
    top:0;
    width:35px;
    height:35px;
    z-index:9999;
    position:fixed;
    }
    .bar1 {
    width:35px;
    height:3px;
    background-color:#333;
    margin:6px 0;
    transition:0.4s;
    -webkit-transform:rotate(-45deg) translate(-8px,8px);
    transform:rotate(-45deg) translate(-8px,8px);
    }
    .bar2 {
    width:35px;
    height:3px;
    background-color:#333;
    margin:6px 0;
    transition:0.4s;
    opacity:0;
    }
    .bar3 {
    width:35px;
    height:3px;
    background-color:#333;
    margin:6px 0;
    transition:0.4s;
    -webkit-transform:rotate(45deg) translate(-4px,-6px);
    transform:rotate(45deg) translate(-4px,-6px);
    }
    .change .bar1 {
    -webkit-transform:rotate(0deg) translate(0px,0px);
    transform:rotate(0deg) translate(0px,0px);
    }
    .change .bar2 {
    opacity:1;
    }
    .change .bar3 {
    -webkit-transform:rotate(0deg) translate(0px,0px);
    transform:rotate(0deg) translate(0px,0px);
    }

    样式制作完成后,压缩,然后添加进\themes\yilia\source\main.0cf68a.css文件中,添加在最前面即可

    添加按钮到相应的位置

    打开\themes\yilia\layout\layout.ejs文件, 找到<div class="left-col",在其上面添加如下代码:

    1
    2
    3
    4
    5
    <div class="mymenucontainer" onclick="myFunction(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>

    在</body>之后, </html>前添加如下Js代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <script>
        var hide = false;
        function myFunction(x) {
            x.classList.toggle("change");
            if(hide == false){
                $(".left-col").css('display', 'none');
                $(".mid-col").css("left", 6);
                $(".tools-col").css('display', 'none');
                $(".tools-col.hide").css('display', 'none');
                hide = true;
            }else{
                $(".left-col").css('display', '');
                $(".mid-col").css("left", 300);
                $(".tools-col").css('display', '');
                $(".tools-col.hide").css('display', '');
                hide = false;
            }
        }
    </script>

    重新生成文件,部署即可看到效果, 可以看看我的博客效果

    效果图：
    file

    引用结束

    结合我的配置进行修改

    因为我的左侧边栏添加了心知天气（如下图），所以按钮不能放在一起，因此进行了修改：
    file

    修改位置

    主要变化：修改按钮位置，移到右边：left: 260px;，修改bar1,bar2,bar3的颜色：background-color: #0087ca;：修改文件：H:\Hexo\themes\yilia\source\main.0cf68a.css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .mymenucontainer {
      display: block;
      cursor: pointer;
      left: 260px;  /*原来： left:0; */
      top: 0;
      width: 35px;
      height: 35px;
      z-index: 9999;
      position: fixed;
    }
    .bar1 {
      width: 35px;
      height: 3px;
      background-color: #0087ca;  /*原来： background-color:#333; */
      margin: 6px 0;
      transition: 0.4s;
      -webkit-transform: rotate(-45deg) translate(-8px, 8px);
      transform: rotate(-45deg) translate(-8px, 8px);
    }

    事件响应

    因为修改了图标位置，事件响应时也要对应修改位置：缩小后设置为$(".mymenucontainer").css('left', '0');,展开：$(".mymenucontainer").css('left', '260px');。
    修改文件：H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    </body>

    <!-- 《添加折叠按钮脚本 -->
    <script>
        var hide = false;
        function myFunction(x) {
            x.classList.toggle("change");
            if(hide == false){
                $(".left-col").css('display', 'none');
                $(".mid-col").css("left", 6);
                $(".tools-col").css('display', 'none');
                $(".tools-col.hide").css('display', 'none');
                hide = true;

                $(".mymenucontainer").css('left', '0');

            }else{
                $(".left-col").css('display', '');
                $(".mid-col").css("left", 300);
                $(".tools-col").css('display', '');
                $(".tools-col.hide").css('display', '');
                hide = false;

                $(".mymenucontainer").css('left', '260px');
            }
        }
    </script>
    <!-- 添加折叠按钮脚本》 -->

    </html>

    响应式：手机端隐藏按钮

    手机端(当页面变小时)隐藏按钮：修改文件：H:\Hexo\themes\yilia\source\main.0cf68a.css，找到@media screen and (max-width:800px)下面的内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    @media screen and (max-width:800px) {
        #container, body, html {
            height:auto;
            overflow-x:hidden;
            overflow-y:auto
        }
        #mobile-nav {
            display:block
        }
        .body-wrap {
            margin-bottom:0
        }
        .left-col{
            display:none
        }
    }

    在.left-col中添加一个按钮的标签：

    1
    2
    3
    .left-col,.mymenucontainer {
        display:none
    }

    效果图：
    file

    🐛

    有个小问题：在PC端进行测试时，如果先尝试缩放，然后返回再展开，直接测试手机端，就会出现问题：按钮仍然撑开界面；但是如果进到页面直接测试手机端就不会这种问题（或者是在缩放后进行测试也不会影响）。
    因为这个问题好像影响不是很大，就不深入了。

    ]]>     + + https://www.yansheng.xyz/article/31bbdc67.html#disqus_thread +     + + + hexo+yilia添加“心知天气” + https://www.yansheng.xyz/article/cd4e4c1.html + https://www.yansheng.xyz/article/cd4e4c1.html + Sun, 10 Nov 2019 09:06:16 GMT + + + <p>添加“心知天气”<br> +<img src="http://bucket836.oss-cn-shenzhen.aliyuncs.com/image-1573378054017.png" alt="file"></p> + + + + + 添加“心知天气”
    file

    參考：https://letmequadrakill.github.io/post/843b0170.html#more

    1.注册账号，设置天气样式：

    官网：https://www.seniverse.com/widgetv3，需要先注册账号，然后选择样式，如下：

    file

    生成js代码，复制代码，如下（我的免费版的代码）:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <div id="tp-weather-widget"></div>
    <script>
        (function(a, h, g, f, e, d, c, b) {
            b = function() {
                d = h.createElement(g);
                c = h.getElementsByTagName(g)[0];
                d.src = e;
                d.charset = "utf-8";
                d.async = 1;
                c.parentNode.insertBefore(d, c)
            };
            a["SeniverseWeatherWidgetObject"] = f;
            a[f] || (a[f] = function() {
                (a[f].q = a[f].q || []).push(arguments)
            });
            a[f].l = +new Date();
            if (a.attachEvent) {
                a.attachEvent("onload", b)
            } else {
                a.addEventListener("load", b, false)
            }
        }(window, document, "script", "SeniverseWeatherWidget", "//cdn.sencdn.com/widget2/static/js/bundle.js"));
        window.SeniverseWeatherWidget('show', {
            flavor: "slim",
            location: "WS06YNEMPP18",
            geolocation: true,
            language: "zh-Hans",
            unit: "c",
            theme: "auto",
            token: "a579c7ea-507d-41d7-b578-3537882d20c2",
            hover: "enabled",
            container: "tp-weather-widget"
        })
    </script>

    以下是复制的另一个人的代码，可能是升级版的(感觉效果很不错，就用了这个，可能会出现问题，因为应该是用他的秘钥，要是他修改你就会变)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <!-- 《添加“心知天气”-->
    <div id="tp-weather-widget"></div>
    <script>
            (function(T, h, i, n, k, P, a, g, e) {
                g = function() {
                    P = h.createElement(i);
                    a = h.getElementsByTagName(i)[0];
                    P.src = k;
                    P.charset = "utf-8";
                    P.async = 1;
                    a.parentNode.insertBefore(P, a)
                };
                T["ThinkPageWeatherWidgetObject"] = n;
                T[n] || (T[n] = function() {
                    (T[n].q = T[n].q || []).push(arguments)
                });
                T[n].l = +new Date();
                if (T.attachEvent) {
                    T.attachEvent("onload", g)
                } else {
                    T.addEventListener("load", g, false)
                }
            }(window, document, "script", "tpwidget", "//widget.thinkpage.cn/widget/chameleon.js"))
        </script>
        <script>
            tpwidget("init", {
                "flavor": "slim",
                "location": "WM6N2PM3WY2K",
                "geolocation": "enabled",
                "language": "zh-chs",
                "unit": "c",
                "theme": "chameleon",
                "container": "tp-weather-widget",
                "bubble": "enabled",
                "alarmType": "badge",
                "color": "#FFFFFF",
                "uid": "U88B4B2797",
                "hash": "c9d7cb43b80ffece52c9a1ebbfbca65f"
            });
            tpwidget("show");
        </script>
    <!-- 添加“心知天气”》-->

    2.添加到左侧边栏

    修改themes/yilia/layout/_partial/left-col.ejs，将上面的js代码添加到指定位置，位置如下：

    1
    2
    3
    4
    5
    6
    <div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>">

    <!-- 添加“心知天气”-->

    </div>
    <div class="intrude-less">

    3.设置成方便开启和关闭的形式

    如果主题中开启了这个设置，才开启这个功能：

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- 《添加“心知天气”-->
    <% if(theme.xinzhi_weather){ %>
    <div id="tp-weather-widget"></div>
    ……
            tpwidget("show");
        </script>
    <% } %>
    <!-- 添加“心知天气”》-->

    themes/yilia/_config.yml中添加如下配置：

    1
    2
    # 心知天气(如果不用为false):https://www.seniverse.com
    xinzhi_weather: true
    ]]>     + + https://www.yansheng.xyz/article/cd4e4c1.html#disqus_thread +     + + + diff --git a/search.css b/search.css new file mode 100644 index 000000000..cf7f263dd --- /dev/null +++ b/search.css @@ -0,0 +1,155 @@ +.local-search { + position: absolute; + text-align: left; + display:inline-block; + margin-bottom: 0px; + right:10%; +} +.local-search-input-cls { + width: 200px; + /* margin: 10px 0; */ + padding: 8px 12px; + border-radius: 4px; + border: 2px solid #5ad1ed; + color: #666; + font-size: 14px +} +.local-search-input-cls::-webkit-input-placeholder { + color: #2d2626; +} +.local-search-input-cls::-moz-input-placeholder { + color: #2d2626; +} +.local-search-input-cls::-ms-input-placeholder { + color: #2d2626; +} +#local-search-close { + content:'x'; + position: absolute; + right: 10px; + top: 10px; + background: #fff; + color: #888; + border-radius: 100%; + line-height: 16px; + text-align: center; + font-size: 16px; + font-family: consolas; + border: 1px solid #ccc; + display: block; + width: 20px; + height: 20px; + cursor: pointer; + font-style: normal; + font-weight: 400; + transform: rotateZ(0); + transition: all .3s +} +#local-search-close:hover { + border-color: #666; + color: #222; + transform: rotateZ(180deg); + transition: all .3s +} +.local-search-result-cls { + position: absolute; + z-index: 99; + width: 400px; + /* top: 50px; */ + right: -16px; +} +.local-search-result-cls .local-search-empty { + color: #888; + line-height: 44px; + text-align: center; + display: block; + font-size: 16px; + font-weight: 400 +} +.local-search-result-cls ul { + width: 360px; + max-height: 450px; + min-height: 0; + height: auto; + overflow-y: auto; + border: 1px solid #ccc; + padding: 10px 20px; + background: rgba(255, 255, 255, 0.9); + box-shadow: 3px 4px 10px #7dc3d8; + margin-top: 20px; +} +.local-search-result-cls ul li { + text-align: left; + border-bottom: 1px solid #bdb7b7; + padding-bottom: 20px; + margin-bottom: 20px; + line-height: 30px; + font-weight: 400 +} +.local-search-result-cls ul li:last-child { + border-bottom: none; + margin-bottom: 0 +} +.local-search-result-cls ul li a { + margin-top: 20px; + font-size: 16px; + text-decoration:none; + transition: all .3s +} +.local-search-result-cls ul li a:hover { + text-decoration:underline; +} +.local-search-result-cls ul li p { + margin-top: 10px; + font-size: 14px; + max-height: 124px; + overflow: hidden +} +.local-search-result-cls ul li em.search-keyword { + color: #e58c7c; + font-weight:bold; +} +.local-search-plugin .local-search-input-cls { + opacity: .6; + width: 160px; + transition: all .3s +} +.local-search-plugin .local-search-input-cls:hover { + opacity: 1; + width: 200px; + transition: all .3s +} +.local-search-plugin .icon { + position: relative; + left: -30px; + color: #999; + cursor: pointer +} + +/* 手机端 */ +@media screen and (max-width:800px) { +.local-search { + display:none; + /* right: -5%; */ +} +.local-search-plugin .local-search-input-cls { + opacity: .6; + width: 100px; + transition: all .3s; +} +.local-search-result-cls { + right: 2px; +} +.local-search-result-cls ul { + width: 360px; + max-height: 400px; + min-height: 0; + height: auto; + overflow-y: auto; + border: 1px solid #ccc; + padding: 10px 20px; + background: rgba(255, 255, 255, 0.9); + box-shadow: 3px 4px 10px #7dc3d8; + margin-top: 20px; +} +} \ No newline at end of file diff --git a/search.xml b/search.xml new file mode 100644 index 000000000..1d1a60e55 --- /dev/null +++ b/search.xml @@ -0,0 +1,1125 @@ + + + + + + + hexo+yilia添加APlayer音乐播放器 + + /article/bf60dd05.html + + 之前写过一篇文章，是将APlayer音乐播放器放到左侧的（详见：hexo+yilia添加背景音乐），但是在手机端时，因为左侧边栏会被隐藏，因此也就会将播放器给隐藏掉。也就会是说手机端不能显示该播放器。

    这里换一种方式，直接添加到整个页面中，使其在手机端也能使用。

    说明

    1. 如果你第一次安装APlayer音乐播放器，我建议你先看一下上面的那篇文章（如果你不介意手机端不能使用，按照那篇文章来也是OK的😬），这里不再详细介绍APlayer。
    2. 如果你之前有按照我上面的文章进行配置，建议先删除之前的配置，不然可能会有冲突。

    安装步骤

    1.添加插件

    找到对应H:\Hexo\themes\yilia\layout\layout.ejs的文件，在<body>和 <div id="container"之间添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!-- 《添加--APlayer音乐播放器,详见: https://aplayer.js.org/#/zh-Hans/ -->
    <% if(theme.aplayer.enable) { %>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">

        <div id="aplayer" style="text-align:left;z-index: 10;"></div>
        <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>

        <!-- 为方便修改，添加一个配置文件，修改时直接修改配置文件即可。 -->
        <script type="text/javascript" src="<%- url_for('js/APlayer_config.js') %>"></script>

        <!-- 根据封面自适应主题色，主要是作用于进度条 -->
        <script type="text/javascript">
              const colorThief = new ColorThief();
              const setTheme = (index) => {
                if (!ap.list.audios[index].theme) {
                  colorThief.getColorAsync(ap.list.audios[index].cover, function(color) {
                    ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
                  });
                }
              };
              setTheme(ap.list.index);
              ap.on('listswitch', (data) => {
                setTheme(data.index);
              });
        </script>
    <% } %>
    <!-- 添加--APlayer音乐播放器》 -->

    注意

    1. js/APlayer_config.js文件是APlayer的配置文件，需要自己新建，位置为：themes\yilia\source\js\APlayer_config.js，如果不懂参考之前的文章。
    2. 这里的<div id="aplayer"id需要与js/APlayer_config.js中container: document.getElementById('aplayer')的id一致。

    2.添加样式

    在H:\Hexo\themes\yilia\source\main.0cf68a.css任意位置添加如下代码：

    1
    2
    3
    4
    5
    @media screen and (max-width: 800px) {
        .aplayer {
            opacity:0.8;
        }
    }

    效果图

    PC端：见上

    手机端

    参考：为hexo博客yilia模版添加aplayer音乐播放器

    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + 2020年清明节 + + /article/b75f4e3a.html + + 2020年4月4日清明节

    国务院发布公告：2020年4月4日举行全国性哀悼活动

    为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院今天（4月3日）发布公告，决定2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。

    《只要平凡》

    歌词

    只要平凡（电影《我不是药神》主题曲）

    演唱：张杰，张碧晨

    张杰：也许很远或是昨天 在这里或在对岸
    长路辗转离合悲欢 人聚又人散
    放过对错才知答案 活着的勇敢
    没有神的光环 你我生而平凡

    张碧晨：在心碎中认清遗憾 生命漫长也短暂
    跳动心脏长出藤蔓 愿为险而战
    跌入灰暗坠入深渊 沾满泥土的脸
    没有神的光环 握紧手中的平凡
    此心此生无憾 生命的火已点燃

    张杰：有一天也许会走远 也许还能再相见
    无论在人群在天边 让我再看清你的脸
    任泪水铺满了双眼 虽无言泪满面
    不要神的光环 只要你的平凡

    张碧晨：在心碎中认清遗憾 生命漫长也短暂
    跳动心脏长出藤蔓 愿为险而战
    跌入灰暗坠入深渊 沾满泥土的脸
    没有神的光环 握紧手中的平凡

    张杰：有一天也许会走远 也许还能再相见

    张碧晨：无论在人群在天边 让我再看清你的脸

    张杰：任泪水铺满了双眼 虽无言泪满面

    合：不要神的光环 只要你的平凡
    此心此生无憾 生命的火已点燃

    多灾多难的一年

    2019年非洲猪瘟肆意，猪价疯涨，至今仍未跌回原价。

    2019年3月30日17时，四川省凉山州木里县境内发生森林火灾，27名森林消防支队战士牺牲。我们的伤痛还未抚平，2020年3月30日凌晨3点，四川省凉山州西昌市突发山火，19位救火英雄牺牲。哪有什么岁月静好，只不过有人在替你负重前行。

    2019年年底至今，突如其来的新型冠状病毒肺炎让我们如临大敌，由武汉蔓延至全国，乃至全球。一场没有没有硝烟的战争悄然打响，武汉封城，一大批医护人员自愿请战，赶往第一线。全国人民众志成城，捐款捐物。

    祝愿：明天会更好！

    参考：

    ]]>     + + + + + + 生活 + + 随笔 + + 新冠肺炎 + + + +     + + + + + 冠状病毒2019-nCoV实时统计 + + /article/ef6b6c25.html + + 介绍两个两个有实时数据的网站，方便我们关注新冠肺炎的情况。

    中文网站（数据以国内为主）

    全球新冠病毒最新实时疫情地图_丁香园

    丁香园、丁香医生整合各权威渠道发布的官方数据，通过疫情地图直观展示，持续更新最新的新型冠状病毒肺炎的实时疫情动态。
    网址：https://ncov.dxy.cn/ncovh5/view/pneumonia

    全球新冠病毒最新实时疫情地图_丁香园

    英文网站（数据以国外为主）

    Coronavirus Map

    See the Coronavirus (COVID-19) cases on the map. Latest stats, information on new cases.
    网址：https://clustrmaps.com/coronavirus/

    Coronavirus Map

    ]]>     + + + + + + 生活 + + 随笔 + + 新冠肺炎 + + + +     + + + + + Hexo文章保存为草稿 + + /article/ab5d2a72.html + +

    Version

    Hexo 3.3.8

    传统建立文章方式

    一般我们都会使用 hexo new <title> 来建立文章（该命令其实是hexo new post <title>命令的简写形式），这种建立方法会将新文章建立在 source/_posts 目录下，当使用 hexo generate 编译 markdown 文件时，会将其 HTML 结果编译在 public 目录下，之后 hexo deploy 将会把 public 目录下所有文章部署到 GitHub，这是我们熟悉的 Hexo 流程。

    这种建立文章方式的缺点是：若我们同时编辑多篇文章，只要其中一篇文章尚未编辑完成，也会随着 hexo deploy 一起部署到 GitHub，也就是 GitHub 可能会看到我们尚未完成的文章。

    建立文章草稿

    1
    $ hexo new draft <title>

    Hexo 另外提供 draft 机制，它的原理是新文章将建立在 source/_drafts 目录下，因此 hexo generate 并不会将其编译到 public 目录下，所以 hexo deploy 也不会将其部署到 GitHub。

    本机预览草稿

    1
    $ hexo s --draft

    虽然 hexo generate 不会编译 source/_drafts 目录下的文章，但 Hexo 的 Hexo server 另外提供 --draft 参数，这让我们只要搭配 hexo-browsersync plugins，就可以达到一边编辑 markdown 文章，一边使用浏览器预览的目的。

    将草稿发布为正式文章

    1
    $ hexo p <filename>

    其中 <filename> 为不包含 md 后缀的文章名称。它的原理只是将文章从 source/_drafts 移动到 source/_posts 而已。

    之后的 hexo generate 与 hexo deploy 的用法就完全一样了。

    若日后想将正式文章转为为草稿，只需手动将文章从 source/_posts 目录移动到 source/_drafts 目录即可。

    ]]>     + + + + + + hexo + + + +     + + + + + 中国加油，武汉加油！ + + /article/a07aa35d.html + + 1月31日，武汉市江汉区西北湖附近高层建筑外墙打出“武汉加油”等字样（无人机照片）。 新华社记者 肖艺九 摄

    愿《黎明的编钟声》响起，一切疾病都已远去！

    以下内容转自：https://baijiahao.baidu.com/s?id=1658231454062945935&wfr=spider&for=pc

    夜走了

    天亮了

    天空和钟声一同醒来了

    樱花在温暖的春风中飞扬

    武汉，我们在等你

    近日，享誉世界盛名的国际流行钢琴家尚·马龙（Jean -Franois Maljean），在他的家乡比利时，特别为中国、为武汉创作的一首“战疫防疫”国际公益曲《CHIME OF THE DAWN BELLS》（中文名：《黎明的编钟声》）。他通过这首歌从地球的另一端为武汉送来遥远的祝福，致敬那些勇敢抗疫的前线人员，为中国人民、中国医护工作者加油鼓气。这也是新冠肺炎疫情爆发以来，首位外国艺术家创作的公益歌曲。

    尚·马龙是比利时知名的乐坛诗人，与雅尼、班得瑞、理查德·克莱德曼、喜多郎齐名，并称为新世纪十大音乐大师。他对中国的感情很深远，对中国的文化情有独钟，2010年与中国知名歌手共同演唱上海世博会比利时馆主题歌《我们的歌》 ，2018年创作的侗族大歌《尽情欢歌》曾登上央视春节联欢晚会。

    此次创作的《CHIME OF THE DAWN BELLS》（黎明的编钟声），尚·马龙特别加入了湖北编钟的元素，结合他本人的钢琴演奏，东西方乐器交融回旋，谱写了一曲“中国与世界命运与共”的华章。歌曲饱含深情，处处流露着中国传统文化和武汉城市元素。尚·马龙特别加了一段自己的中文独白：“夜走了，天亮了，天空和钟声一同醒来了，樱花在温暖的春风中飞扬，武汉，我们在等你。”以此来表达他对武汉，对中国深切的关怀与期待。

    尚·马龙在采访中表示：“我想告诉西方人民，他们不必害怕，应与目前陷入困境的中国人民友好相处。在我职业生涯的最近二十年里，中国给了我很大帮助，我真诚的愿意为中国的朋友们做些事来帮助他们。”（译）没有一个冬天不可逾越，没有一个春天不会来临，武汉和整个中国一定会战胜疫情，全世界人民都在期盼这一刻的到来。

    歌曲MV的制作也得到了全球各地人们以及武汉大学中南医院、世界银行华人职工协会、湖北省外商投资企业协会等众多机构的帮助，同时也邀请到了世界音乐大师Silvano Macaluso一起参与创作，这是他们的再次合作，Silvano Macaluso和尚·马龙曾经共同担任尚雯婕专辑《Nightmare》制作人。

    《CHIME OF THE DAWN BELLS》（黎明的编钟声）

    曲名：《CHIME BELLS OF DAWN》黎明的编钟声
    作词：Kelvin Ho（何浏）、Jean-Franois Maljean（尚·马龙）、ROBERT MURRAY
    作曲：Jean-Franois Maljean（尚·马龙）
    主唱：Noémie Maljean

    SUFFERING,SUFFERING
    疾病，苦难

    IS LIKE A DARK CLOUD.
    有如乌云

    LOOKING, LOOKING FAR AWAY
    远远望去

    YOU WILL SEE A DARK SKY
    你会看到天空墨黑一片

    BUT WHEN YOU’RE UNDER IT
    但是身临其下

    YOU ARE, YOU ARE ONLY GREY
    不过是灰色而已

    DON’T GIVE UP
    永不言弃

    WHEN YOU HEAR THE MUSIC OF CHIME BELLS
    听到编钟声响起

    STANDING ON THE YELLOW CRANE TOWER
    站在黄鹤楼上

    YOU MAY FEEL ALONE NOW
    此时你可能会感到孤单

    BUT THE WORLD STANDS WITH YOU
    但要相信世界人民与你们同在

    UNITED, UNITED PROUD AND BRAVE
    齐心协力、自强不息、勇往直前

    YOU WILL HEAR THE CHIME BELLS
    编钟响起时

    MUSIC LIFTS THE DARKNESS
    音乐终将会驱散黑暗

    SHINING, SHINING ON THE WAVES
    阳光照耀在江面上

    DON’T GIVE UP
    永不言弃

    WHEN YOU HEAR THE MUSIC OF CHIME BELLS
    听到编钟声响起

    STANDING ON THE YELLOW CRANE TOWER
    站在黄鹤楼上

    独白：夜走了
    天亮了
    天空和钟声一同醒来了
    樱花在温暖的春风中飞扬
    武汉，我们在等你

    THE DAWN WILL BREAK
    黎明总会到来

    TO END YOUR DARKEST HOUR
    黑夜终将过去

    STANDING ON THE YELLOW CRANE TOWER.
    站在黄鹤楼上

    THE DAWN WILL BREAK
    黎明总会到来

    TO END YOUR DARKEST HOUR
    黑夜终将过去

    STANDING ON THE YELLOW CRANE TOWER
    站在黄鹤楼上

    相关链接

    ]]>     + + + + + + 生活 + + 随笔 + + 新冠肺炎 + + + +     + + + + + hexo+yilia添加分类页面 + + /article/521a17ae.html + + 效果图

    PC端：

    手机端：

    一般情况下

    只需要新建一个页面，并且指定页面的类型即可生成对应的分类和归档页面，因为很多hexo的主题都集成了分类和标签的功能。

    具体可参考：Hexo新建标签、分类、归档等页面

    针对yilia主题

    虽然这个主题好像有集成，但是好像不管用！！！

    主要参考：https://github.com/litten/hexo-theme-yilia/issues/835

    步骤

    1.新建页面

    在hexo根目录运行命令hexo new page categories，新建一个分类页面。会在生成\source\categories\index.md文件，编辑的内容为：

    1
    2
    3
    4
    5
    6
    7
    ---
    title: 文章分类
    date: 2019-08-19 11:48:35
    toc: false
    comments: false
    layout: categories
    ---

    2.新建一个布局文件

    在你的博客路径下（如\themes\yilia\layout\目录)新建一个categories.ejs文件(用原来的category.ejs生成静态文件时会报错)，内容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <article class="article">
      <h3 class="category-count">共计 <%= site.categories.length %> 个分类, <%= site.tags.length %> 个标签</h3>
      <% if (site.categories.length){ %>
      <ul class="category-list">
        <% site.categories.sort('name').each(function(item){ %>
          <% if(item.posts.length){ %>
            <li class="category-list-item">
              <a href="<%- config.root %><%- item.path %>" class="category-list-link" title="<%= item.name %>">
                <%= item.name %>
                <span class="category-list-count"><%= item.posts.length %></span>
              </a>
            </li>
          <% } %>
        <% }) %>
      </ul>
      <% } %>
      <div class="tag-cloud">
        <%- tagcloud({
          min_font: 20, 
          max_font: 35, 
          amount: 999
        }) %>
      </div>
    </article>

    部署即可。

    3.添加样式

    你可以根据需要更改它的样式。可以参考这个，在\themes\yilia\source\main.0cf68a.css中添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    .category-count {
    text-align:center;
    line-height:3;
    font-size:18px;
    font-weight:bold;
    }
    .category-list {
    text-align:center;
    padding:20px
    }
    .category-list li.category-list-item {
    display:inline-block;
    margin:0 1em .5em 0;
    padding:4px;
    border:1px solid #aaaaaa;
    font-size:1.2rem
    }
    .category-list li.category-list-item:hover {
    background:rgba(204,204,204,0.3)
    }
    .tag-cloud {
    text-align:center;
    padding:20px
    }
    .tag-cloud a {
    margin:0 20px;
    word-break:keep-all;
    position:relative
    }
    .tag-cloud a:hover::before {
    width:100%;
    left:0;
    right:auto
    }
    .tag-cloud a::before {
    content:"";
    position:absolute;
    width:0;
    right:0;
    bottom:0;
    height:2px;
    background:#08c;
    -webkit-transition:width .3s ease;
    transition:width .3s ease
    }

    4.效果

    默认样式的效果：

    手机端

    修改样式

    这主要是修改标题和超链接的样式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    /*《分类页面，标签页面样式*/
    /*标题*/
    .category-count {
        text-align:center;
        line-height:3;
        font-size:50px;
        font-weight: bold;
        font-family: STCaiyun, STXingkai;
        display: block;
        /*渐变背景*/
        background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
        color: transparent;
        /*文字填充色为透明*/
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        /*背景剪裁为文字，只将文字显示为背景*/
        background-size: 200% 100%;
        /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
        /* 动画 */
        animation: masked-animation 4s infinite linear;
    }
    @keyframes masked-animation {
        0% {
            background-position: 0 0;
            /*background-position 属性设置背景图像的起始位置。*/
        }
        100% {
            background-position: -100% 0;
        }
    }
    /* 手机端CSS代码 */
     @media screen and (max-width: 960px) {
        .category-count {
            text-align:center;
            line-height:3;
            font-size:27px;
        }
    }
    /* 分类 */
    .category-list {
        text-align:center;
        padding:20px
    }
    .category-list li.category-list-item {
        display:inline-block;
        margin:0 1em .5em 0;
        padding:4px;
        /* border:1px solid #aaaaaa; */
        font-size:1.2rem
    }
    .category-list li.category-list-item a{
        text-decoration: none;
    }
    .category-list li.category-list-item:hover {
        color:#ffffff;
    }
    /* .category-list li.category-list-item:hover {
        background:rgba(204, 204, 204, 0.3)
    } */

    /* https://github.com/IanLunn/Hover,
    https://ianlunn.github.io/Hover/ */
    /* Rectangle In */
    .hvr-rectangle-in {
      display: inline-block;
      vertical-align: middle;
      padding: 0.5em;
      -webkit-transform: perspective(1px) translateZ(0);
      transform: perspective(1px) translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      position: relative;
      background: #2098D1;
      border-radius: 10px;
      -webkit-transition-property: color;
      transition-property: color;
      -webkit-transition-duration: 0.5s;
      transition-duration: 0.5s;
    }
    .hvr-rectangle-in:before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #e1e1e1;
      border-radius: 10px;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transition-property: transform;
      transition-property: transform;
      -webkit-transition-duration: 0.5s;
      transition-duration: 0.5s;
      -webkit-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
    }
    .hvr-rectangle-in:hover, .hvr-rectangle-in:focus, .hvr-rectangle-in:active {
      color: white;
    }
    .hvr-rectangle-in:hover:before, .hvr-rectangle-in:focus:before, .hvr-rectangle-in:active:before {
      -webkit-transform: scale(0);
      transform: scale(0);
    }

    /* 分类和标签的分界面 */
    .category-hr-tag {
    }

    /* 标签 */
    .tag-cloud {
        text-align:center;
        padding:20px
    }
    .tag-cloud a {
        margin:0 20px;
        word-break:keep-all;
        position:relative
    }
    .tag-cloud a:hover::before {
        width:100%;
        left:0;
        right:auto
    }
    .tag-cloud a::before {
        content:"";
        position:absolute;
        width:0;
        right:0;
        bottom:0;
        height:2px;
        background:#08c;
        -webkit-transition:width .3s ease;
        transition:width .3s ease
    }
    /*分类页面，标签页面样式》*/

    /*《版权声明的样式*/
     .declare {
        background-color: #eaeaea;
        margin-top: 2em;
        border-left: 3px solid #ff1700;
        padding: .5em 1em;
    }
    /*版权声明的样式》*/

    新增分界线

    修改H:\Hexo\themes\yilia\layout\categories.ejs，在<div class="tag-cloud">前面新增：

    1
    <hr class="category-hr-tag" width="90%" color="#987cb9" size="3">

    效果图

    见上

    ]]> + + + + + + hexo + + yilia + + + + + + + + + hexo-yilia添加Dplayer视频播放插件 + + /article/252051e3.html + + 引言

    如何在博客中插入视频是件麻烦事，视频来源多种多样，优酷、爱奇艺、云空间；视频的相关控件也需要考虑。如果有插件就很方便了。Dplayer就是为这种需求而产生的！

    使用Dplayer插件

    github: https://github.com/MoePlayer/hexo-tag-dplayer

    file

    引用

    npm install

    1
    npm install hexo-tag-dplayer --save

    Usage

    1
    {% dplayer key=value ... %}

    key can be

    1
    2
    3
    4
    5
    6
    7
    8
    dplayer options:
        'autoplay', 'loop', 'screenshot', 'hotkey', 'mutex', 'dmunlimited' : bool options, use "yes" "y" "true" "1" "on" or just without value to enable
        'preload', 'theme', 'lang', 'logo', 'url', 'pic', 'thumbnails', 'vidtype', 'suburl', 'subtype', 'subbottom', 'subcolor', 'subcolor', 'id', 'api', 'token', 'addition', 'dmuser' : string arguments
        'volume', 'maximum' : number arguments
    container options:
        'width', 'height' : string, used in container element style
    other:
        'code' : value of this key will be append to script tag

    arguments to DPlayer options mapping:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    {
        container: "you needn't set this",
        autoplay: 'autoplay',
        theme: 'theme',
        loop: 'loop',
        lang: 'lang',
        screenshot: 'screenshot',
        hotkey: 'hotkey',
        preload: 'preload',
        logo: 'logo',
        volume: 'volume',
        mutex: 'mutex',
        video: {
            url: 'url',
            pic: 'pic',
            thumbnails: 'thumbnails',
            type: 'vidtype',
        },
        subtitle: {
            url: 'suburl',
            type: 'subtype',
            fontSize: 'subsize',
            bottom: 'subbottom',
            color: 'subcolor',
        },
        danmaku: {
            id: 'id',
            api: 'api',
            token: 'token',
            maximum: 'maximum',
            addition: ['addition'],
            user: 'dmuser',
            unlimited: 'dmunlimited',
        },
        icons: 'icons',
        contextmenu: 'menu',
    }

    see dplayer documents for more infomation.

    for example:

    1
    2
    {% dplayer "url=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4" "addition=https://dplayer.daoapp.io/bilibili?aid=4157142" "api=https://api.prprpr.me/dplayer/" "pic=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.jpg" "id=9E2E3368B56CDBB4" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}
    {% dplayer 'url=some.mp4' "id=someid" "api=https://api.prprpr.me/dplayer/" "addition=/some.json" 'code=player.on("loadstart",function(){console.log("loadstart")})' "autoplay" %}

    引用结束

    测试

    注：以下可能有部分视频链接已失效，详见bug:2.视频链接会失效。

    1.简单模式

    【J.Fla】J.Fla最新翻唱《Let Her Go》（中英字幕）

    1
    2
    {% dplayer "url=https://oss.yansheng.xyz/video/Let%20Her%20Go-J.Fla.mp4" 
    "loop=yes" "theme=#FADFA3" "autoplay=false"%}

    2.设置大小

    1
    2
    {% dplayer "url=https://oss.yansheng.xyz/video/Let%20Her%20Go-J.Fla.mp4" 
    "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

    3.各视频网站测试

    注：获取网站视频链接的方法

    1. 直接F12审查网页元素可以获取大部分视频链接。
    2. blob:http开头的链接，在调试模式下，切换成手机端，一般都可以获取视频链接。当然也可以尝试使用下面的几种方法（不敢保证肯定可以）。

    相关链接：

    优酷-blob:http

    测试地址：播放量破60亿的神曲就是不一样，Jfla翻唱播放量都能破亿：https://v.youku.com/v_show/id_XNDEzMTQ2Mzc2OA==.html?spm=a2h0k.11417342.soresults.dtitle

    1
    2
    {% dplayer "url=https://ip3909677239.mobgslb.tbcache.com/697527F075E4271B3854E35FD/03000801005D16BE6A7657C5ACCC9273FC634F-4FE4-42BD-9058-BDD737033AD6.mp4?ccode=0501&duration=209&expire=18000&psid=d4651e02fe8648bae7ba5eb90e634aee&ups_client_netip=78efecb2&ups_ts=1580803578&ups_userid=&utid=5dEkFu7TTAoCAaOOg8%2Fdh%2Bzg&vid=XNDEzMTQ2Mzc2OA&vkey=Ae25465c34a3e1d5a0008c52dbd954ac2&bc=2&dre=u21&si=42&ali_redirect_domain=ykugc.cp31.ott.cibntv.net&ali_redirect_ex_ftag=6bb8c51a31829f123b81d2f8f31d62ad1de1e72da5be49b4&ali_redirect_ex_tmining_ts=1580803613&ali_redirect_ex_tmining_expire=3600&ali_redirect_ex_hot=100"
    "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

    爱奇艺-blob:http

    好像找不到链接！！

    测试地址：JFla最新翻唱视频 《Havana》中英文字幕版：http://www.iqiyi.com/w_19rye3lv79.html

    腾讯视频

    测试地址：开口跪！JFla小姐姐逆天翻唱《英雄联盟》主题曲《Legends Never die》(传奇永不熄)，也就听了100遍：https://v.qq.com/x/page/r07217dqdps.html

    1
    2
    {% dplayer "url=https://apd-269733cd84807e39d1c4e3453c172928.v.smtcdns.com/om.tc.qq.com/AUBPmiNNTAT3He9k_05J1HRAM1yZVGlQ-hDZtg0epZFQ/uwMROfz2r57IIaQXGdGnC2ddDmZUA-P9pUvDyp7Vcj06VB05/shg_57576174_50001_208137e9f2843cf7850adcc2052bdd4a.f622.mp4?sdtfrom=v1010&guid=7ae1df42357b9bcea3195ca549ce5531&vkey=4B6DB7E072CA38A41C053A938FA7D1B91D1783ACF46A1356E88C71B8160881DEC88D761C281209C12C1DAB9772F55FB572EA0D675ACA209A621B3BC4789A2D91FEA05680B9EA477C282FC1B4A32BCB1E5EEF5DFCC65AA2A4B2BCB2AB51E54FABD0E1122171184A171FFE7C84CFB1295C720E320BFCE4648EF92358A0BFDAC7FB"
    "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

    B站-blob:http

    测试地址：【J.Fla】J.Fla最新翻唱《Let Her Go》（中英字幕）:https://www.bilibili.com/medialist/play/ml445525356/

    1
    2
    {% dplayer "url=https://cn-jxnc-cmcc-bcache-07.bilivideo.com/upgcxcode/97/06/37010697/37010697-1-6.mp4?e=ig8euxZM2rNcNbdlhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1580811360&gen=playurl&os=bcache&oi=2028989618&trid=49761c7626084b8b8b97074e119e8a41h&platform=html5&upsig=d5272df25514a59fbdb296cefefcb96c&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=91203456&origin_cdn=ks3" 
    "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

    酷狗音乐MV

    好像找不到

    测试地址：https://www.kugou.com/mvweb/html/mv_1298B160E162FD8DD62176860AC07B0B.html

    网易云音乐MV-blob:http

    测试地址：J.Fla不插电演唱原创新单《Good Vibe》:https://music.163.com/#/mv?id=10893889

    1
    2
    {% dplayer "url=http://vodkgeyttp8.vod.126.net/cloudmusic/1182/core/91d9/071e7736fb284fe4d7d020a3cf693362.mp4?wsSecret=ff87443a41aebf38eaafd4385b736940&wsTime=1580818343" 
    "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

    bug🐛

    1.设置宽高参数后，手机端不能自适应

    额外添加样式控制手机端样式H:\Hexo\themes\yilia\source\main.0cf68a.css

    1
    2
    3
    4
    5
    6
    @media screen and (max-width: 800px) {
       .dplayer {
    max-width:394.4px;
    max-height:221.6px;
        }
    }

    2.视频链接会失效

    虽然上面提到的方式大部分可以获取视频链接，但是可以发现，这个链接都很长，是“防盗链”（?后面的是查询串，包含各种参数。比如设置时间参数，超时就失效。这是为了防止被频繁访问，造成服务器负担而考虑的）。那怎么解决呢？推荐下面几种方法：

    1. 研究防盗链，看能不能让他不失效。好像有点复杂……
    2. 自建云空间：根据视频链接下载该视频，然后上传到自己的云空间☁️（七牛云、阿里云等的OSS空间），然后使用自己的链接。（推荐，第一个视频就是我下载后，上传到阿里云OSS的。）
    3. 使用视频网站自己的分享渠道：

    如：

    1
    <iframe height=498 width=510 src='https://player.youku.com/embed/XNDEzMTQ2Mzc2OA==' frameborder=0 'allowfullscreen'></iframe>

    效果：

    ]]> + + + + + + hexo + + yilia + + + + + + + + + 2019再见，2020你好 + + /article/94a46e7b.html + + Happy New Year！

    习近平主席2020新年贺词

    2019年12月31日晚7时，国家主席习近平通过中央广播电视总台和互联网，发表二〇二〇年新年贺词。全文如下：(转自：http://news.ifeng.com/c/7srLqMlTqMR)

    ​ 2020年就要到了，我在首都北京向大家送上新年的美好祝福！

    ​2019年，我们用汗水浇灌收获，以实干笃定前行。高质量发展平稳推进，我国国内生产总值预计将接近100万亿元人民币、人均将迈上1万美元的台阶。三大攻坚战取得关键进展。京津冀协同发展、长江经济带发展、粤港澳大湾区建设、长三角一体化发展按下快进键，黄河流域生态保护和高质量发展成为国家战略。全国将有340个左右贫困县摘帽、1000多万人实现脱贫。嫦娥四号在人类历史上第一次登陆月球背面，长征五号遥三运载火箭成功发射，雪龙2号首航南极，北斗导航全球组网进入冲刺期，5G商用加速推出，北京大兴国际机场“凤凰展翅”……这些成就凝结着新时代奋斗者的心血和汗水，彰显了不同凡响的中国风采、中国力量。

    ​一年来，改革开放不断催生发展活力。党和国家机构改革圆满完成。增设一批自由贸易试验区和上海自由贸易试验区新片区。科创板顺利启动推进。减税降费总额超过2万亿元。个人所得税起征点提高了，老百姓常用的许多药品降价了，网络提速降费使刷屏更快了，垃圾分类引领着低碳生活新时尚。“基层减负年”让基层干部轻装上阵。放眼神州大地，处处都有新变化新气象。

    ​一年来，国防和军队改革扎实推进，人民军队展现出新时代强军风貌。我们进行国庆大阅兵，举行海军、空军成立70周年庆祝活动，举办第七届世界军人运动会。首艘国产航母正式列装。人民子弟兵永远是保卫祖国的钢铁长城，让我们向守护家园的忠诚卫士们致敬！

    ​2019年，最难忘的是隆重庆祝新中国成立70周年。我们为共和国70年的辉煌成就喝彩，被爱国主义的硬核力量震撼。阅兵方阵威武雄壮，群众游行激情飞扬，天安门广场成了欢乐的海洋。大江南北披上红色盛装，人们脸上洋溢着自豪的笑容，《我和我的祖国》在大街小巷传唱。爱国主义情感让我们热泪盈眶，爱国主义精神构筑起民族的脊梁。这一切，汇聚成礼赞新中国、奋斗新时代的前进洪流，给我们增添了无穷力量。

    ​一年来，我去了不少地方。雄安新区画卷徐徐铺展，天津港蓬勃兴盛，北京城市副中心生机勃发，内蒙古大草原壮美亮丽，河西走廊穿越千年、历久弥新，九曲黄河天高水阔、雄浑安澜，黄浦江两岸物阜民丰、流光溢彩……祖国各地一派欣欣向荣的景象。我沿着中国革命的征程砥砺初心。从江西于都红军长征集结出发地到河南新县鄂豫皖苏区首府革命博物馆，从甘肃高台西路军纪念碑到北京香山革命纪念地，每个地方都让我思绪万千，初心和使命是我们走好新时代长征路的不竭动力。

    ​同往常一样，我无论多忙，都要抽时间到乡亲们中走一走看一看。大家跟我说了很多心里话，我一直记在心上。云南贡山独龙族群众、福建寿宁县下党乡的乡亲、“王杰班”全体战士、北京体育大学研究生冠军班同学、澳门小朋友和义工老人，给我写了信。我在回信中肯定了大家取得的成绩，也表达了良好祝愿。

    ​一年来，许多人和事感动着我们。一辈子深藏功名、初心不改的张富清，把青春和生命献给脱贫事业的黄文秀，为救火而捐躯的四川木里31名勇士，用自己身体保护战友的杜富国，以十一连胜夺取世界杯冠军的中国女排……许许多多无怨无悔、倾情奉献的无名英雄，他们以普通人的平凡书写了不平凡的人生。

    ​2019年，中国继续张开双臂拥抱世界。我们主办了第二届“一带一路”国际合作高峰论坛、北京世界园艺博览会、亚洲文明对话大会、第二届中国国际进口博览会，向世界展示了一个文明、开放、包容的中国。我同很多国家元首和政府首脑会晤，分享了中国主张，增进了友谊，深化了共识。世界上又有一些国家同我国建交，我国建交国达到180个。我们的朋友遍天下！

    ​2020年是具有里程碑意义的一年。我们将全面建成小康社会，实现第一个百年奋斗目标。2020年也是脱贫攻坚决战决胜之年。冲锋号已经吹响。我们要万众一心加油干，越是艰险越向前，把短板补得再扎实一些，把基础打得再牢靠一些，坚决打赢脱贫攻坚战，如期实现现行标准下农村贫困人口全部脱贫、贫困县全部摘帽。

    ​前几天，我出席了澳门回归祖国20周年庆祝活动，我为澳门繁荣稳定感到欣慰。澳门的成功实践表明，“一国两制”完全行得通、办得到、得人心。近几个月来，香港局势牵动着大家的心。没有和谐稳定的环境，怎会有安居乐业的家园！真诚希望香港好、香港同胞好。香港繁荣稳定是香港同胞的心愿，也是祖国人民的期盼。

    ​历史长河奔腾不息，有风平浪静，也有波涛汹涌。我们不惧风雨，也不畏险阻。中国将坚定不移走和平发展道路，坚定不移维护世界和平、促进共同发展。我们愿同世界各国人民携起手来，积极共建“一带一路”，推动构建人类命运共同体，为创造人类美好未来而不懈努力。

    ​此时此刻，还有许多人在坚守岗位，许多人在守护平安，许多人在辛勤劳作。大家辛苦了！

    ​让我们只争朝夕，不负韶华，共同迎接2020年的到来。

    ​祝大家新年快乐！

    ]]>     + + + + + + 生活 + + 随笔 + + + +     + + + + + Commit message 和 Change log 编写指南 + + /article/ad81da89.html + + 如何写好Commit message 和 Change log

    常规的changelog，conventional-changelog

    以下内容转自：Commit message 和 Change log 编写指南

    链接：http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html

    作者： 阮一峰

    日期： 2016年1月 6日

    Commit message 和 Change log 编写指南

    Git 每次提交代码，都要写 Commit message（提交说明），否则就不允许提交。

    1
    $ git commit -m "hello world"

    上面代码的-m参数，就是用来指定 commit mesage 的。

    如果一行不够，可以只执行git commit，就会跳出文本编辑器，让你写多行。

    1
    $ git commit

    基本上，你写什么都行（这里，这里和这里）。

    但是，一般来说，commit message 应该清晰明了，说明本次提交的目的。

    目前，社区有多种 Commit message 的写法规范。本文介绍Angular 规范（见上图），这是目前使用最广的写法，比较合理和系统化，并且有配套的工具。

    一、Commit message 的作用

    格式化的Commit message，有几个好处。

    （1）提供更多的历史信息，方便快速浏览。

    比如，下面的命令显示上次发布后的变动，每个commit占据一行。你只看行首，就知道某次 commit 的目的。

    1
    $ git log <last tag> HEAD --pretty=format:%s

    （2）可以过滤某些commit（比如文档改动），便于快速查找信息。

    比如，下面的命令仅仅显示本次发布新增加的功能。

    1
    $ git log <last release> HEAD --grep feature

    （3）可以直接从commit生成Change log。

    Change Log 是发布新版本时，用来说明与上一个版本差异的文档，详见后文。

    二、Commit message 的格式

    每次提交，Commit message 都包括三个部分：Header，Body 和 Footer。

    1
    2
    3
    4
    5
    <type>(<scope>): <subject>
    // 空一行
    <body>
    // 空一行
    <footer>

    其中，Header 是必需的，Body 和 Footer 可以省略。

    不管是哪一个部分，任何一行都不得超过72个字符（或100个字符）。这是为了避免自动换行影响美观。

    2.1 Header

    Header部分只有一行，包括三个字段：type（必需）、scope（可选）和subject（必需）。

    （1）type

    type用于说明 commit 的类别，只允许使用下面7个标识。

    • feat：新功能（feature）
    • fix：修补bug
    • docs：文档（documentation）
    • style： 格式（不影响代码运行的变动）
    • refactor：重构（即不是新增功能，也不是修改bug的代码变动）
    • test：增加测试
    • chore：构建过程或辅助工具的变动

    如果type为feat和fix，则该 commit 将肯定出现在 Change log 之中。其他情况（docs、chore、style、refactor、test）由你决定，要不要放入 Change log，建议是不要。

    （2）scope

    scope用于说明 commit 影响的范围，比如数据层、控制层、视图层等等，视项目不同而不同。

    （3）subject

    subject是 commit 目的的简短描述，不超过50个字符。

    • 以动词开头，使用第一人称现在时，比如change，而不是changed或changes
    • 第一个字母小写
    • 结尾不加句号（.）

    2.2 Body

    Body 部分是对本次 commit 的详细描述，可以分成多行。下面是一个范例。

    1
    2
    3
    4
    5
    6
    7
    More detailed explanatory text, if necessary.  Wrap it to 
    about 72 characters or so. 

    Further paragraphs come after blank lines.

    - Bullet points are okay, too
    - Use a hanging indent

    有两个注意点。

    （1）使用第一人称现在时，比如使用change而不是changed或changes。

    （2）应该说明代码变动的动机，以及与以前行为的对比。

    Footer 部分只用于两种情况。

    （1）不兼容变动

    如果当前代码与上一个版本不兼容，则 Footer 部分以BREAKING CHANGE开头，后面是对变动的描述、以及变动理由和迁移方法。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    BREAKING CHANGE: isolate scope bindings definition has changed.

        To migrate the code follow the example below:

        Before:

        scope: {
          myAttr: 'attribute',
        }

        After:

        scope: {
          myAttr: '@',
        }

        The removed `inject` wasn't generaly useful for directives so there should be no code using it.

    （2）关闭 Issue

    如果当前 commit 针对某个issue，那么可以在 Footer 部分关闭这个 issue 。

    1
    Closes #234

    也可以一次关闭多个 issue 。

    1
    Closes #123, #245, #992

    2.4 Revert

    还有一种特殊情况，如果当前 commit 用于撤销以前的 commit，则必须以revert:开头，后面跟着被撤销 Commit 的 Header。

    1
    2
    3
    revert: feat(pencil): add 'graphiteWidth' option

    This reverts commit 667ecc1654a317a13331b17617d973392f415f02.

    Body部分的格式是固定的，必须写成This reverts commit &lt;hash>.，其中的hash是被撤销 commit 的 SHA 标识符。

    如果当前 commit 与被撤销的 commit，在同一个发布（release）里面，那么它们都不会出现在 Change log 里面。如果两者在不同的发布，那么当前 commit，会出现在 Change log 的Reverts小标题下面。

    三、Commitizen

    Commitizen是一个撰写合格 Commit message 的工具。

    安装命令如下。

    1
    $ npm install -g commitizen

    然后，在项目目录里，运行下面的命令，使其支持 Angular 的 Commit message 格式。

    1
    $ commitizen init cz-conventional-changelog --save --save-exact

    以后，凡是用到git commit命令，一律改为使用git cz。这时，就会出现选项，用来生成符合格式的 Commit message。

    四、validate-commit-msg

    validate-commit-msg 用于检查 Node 项目的 Commit message 是否符合格式。

    它的安装是手动的。首先，拷贝下面这个JS文件，放入你的代码库。文件名可以取为validate-commit-msg.js。

    接着，把这个脚本加入 Git 的 hook。下面是在package.json里面使用 ghooks，把这个脚本加为commit-msg时运行。

    1
    2
    3
    4
    5
    "config": {
        "ghooks": {
          "commit-msg": "./validate-commit-msg.js"
        }
      }

    然后，每次git commit的时候，这个脚本就会自动检查 Commit message 是否合格。如果不合格，就会报错。

    1
    2
    3
    $ git add -A 
    $ git commit -m "edit markdown" 
    INVALID COMMIT MSG: does not match "<type>(<scope>): <subject>" ! was: edit markdown

    五、生成 Change log

    如果你的所有 Commit 都符合 Angular 格式，那么发布新版本时， Change log 就可以用脚本自动生成（例1，例2，例3）。

    生成的文档包括以下三个部分。

    • New features
    • Bug fixes
    • Breaking changes.

    每个部分都会罗列相关的 commit ，并且有指向这些 commit 的链接。当然，生成的文档允许手动修改，所以发布前，你还可以添加其他内容。

    conventional-changelog 就是生成 Change log 的工具，运行下面的命令即可。

    1
    2
    3
    $ npm install -g conventional-changelog
    $ cd my-project
    $ conventional-changelog -p angular -i CHANGELOG.md -w

    上面命令不会覆盖以前的 Change log，只会在CHANGELOG.md的头部加上自从上次发布以来的变动。

    如果你想生成所有发布的 Change log，要改为运行下面的命令。

    1
    $ conventional-changelog -p angular -i CHANGELOG.md -w -r 0

    为了方便使用，可以将其写入package.json的scripts字段。

    1
    2
    3
    4
    5
    {
      "scripts": {
        "changelog": "conventional-changelog -p angular -i CHANGELOG.md -w -r 0"
      }
    }

    以后，直接运行下面的命令即可。

    1
    $ npm run changelog

    （完）

    文档信息

    • 版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
    • 发表日期：2016年1月 6日

    转载结束

    相关链接

    https://github.com/conventional-changelog/conventional-changelog

    Git commit message和工作流规范]https://www.cnblogs.com/qcloud1001/p/6640787.html

    ［译］AngularJS Git提交信息规范:https://segmentfault.com/a/1190000004282514

    Git-Commit-Log规范（Angular 规范）https://www.jianshu.com/p/c7e40dab5b05

    ]]>     + + + + + + Git + + GitHub + + + +     + + + + + 记一次Spring项目的MySQL乱码问题 + + /article/dbd84c59.html + + 项目：Spring+Mybatis++SpringMVC+MySQL。

    首先要明确发生乱码的原因是字符编码不一致，抓住这一个进行分析。出现问题的出处常常是中文、小表情（测试时要有针对性）。

    file

    排查过程可参考一下几点：

    1.硬要去–统一文件的编码

    假设都一utf-8为编码。

    1. 数据库统一设置为utf8编码。数据库编码设置为utf8，表、字段如果不进行设置，默认继承上级设置。
    2. 项目编码设置为utf8，主要是java、html、jsp、css、js等文件的编码。

    2.传输过程编码

    前台–>后台

    措施

    在springMVC中设置编码过滤器，统一设置成utf8

    测试

    后台控制台打印前台传输的数据，参看数据与输入数据是否一致。（如果设置到js，也可能前端控制台打印输入数据）。

    后台–>数据库

    措施

    数据库连接的URL，添加字符集参数：

    1.字符集参数

    jdbc:mysql://192.168.0.105:3306/shgb_fz?useUnicode=true&characterEncoding=UTF8&autoReconnect=true&zeroDateTimeBehavior=convertToNull

    参数名称 参数说明
    user 数据库用户名（用于连接数据库）
    password 用户密码（用于连接数据库）
    useUnicode 是否使用Unicode字符集，如果参数characterEncoding设置为gb2312或gbk，本参数值必须设置为true
    characterEncoding 当useUnicode设置为true时，指定字符编码。比如可设置为gb2312或gbk
    autoReconnect 当数据库连接异常中断时，是否自动重新连接？
    autoReconnectForPools 是否使用针对数据库连接池的重连策略
    failOverReadOnly 自动重连成功后，连接是否设置为只读？
    maxReconnects autoReconnect设置为true时，重试连接的次数
    initialTimeout autoReconnect设置为true时，两次重连之间的时间间隔，单位：秒
    connectTimeout 和数据库服务器建立socket连接时的超时，单位：毫秒。 0表示永不超时，适用于JDK 1.4及更高版本
    socketTimeout socket操作（读写）超时，单位：毫秒。 0表示永不超时

    ————————————————
    版权声明：本文为CSDN博主「哈唬咯」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
    原文链接：https://blog.csdn.net/qq_36793179/article/details/78719592

    jdbc URL中的各个参数详解

    https://blog.csdn.net/weixin_34220963/article/details/86463924

    1
    String url = "jdbc:mysql://localhost:3306/DATABASES-NAME?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true&allowPublicKeyRetrieval=true";

    https://dev.mysql.com/doc/connectors/en/connector-j-reference-configuration-properties.html

    2.连接名

    云服务器：jdbc:mysql://192.168.0.105:3306/shgb_fz

    本地：jdbc:mysql://localhost:3306/shgb_fz，简写形式：jdbc:mysql:///shgb_fz

    3.jdbc8

    1
    2
    3
    4
    5
    6
    Class.forName("com.mysql.cj.jdbc.Driver");
    String url = "jdbc:mysql://localhost:3306/DATABASES-NAME?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true&allowPublicKeyRetrieval=true";

    ————————————————
    版权声明：本文为CSDN博主「溜溜的小胖」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
    原文链接：https://blog.csdn.net/aliuxina/article/details/91358010

    3.xml文件需要转义

    1
    2
    3
    &
    转义为
    &amp;

    测试

    利用junit进行测试，直接模拟数据，从控制台插入到数据库，查看是否乱码。

    涉及到的问题

    1.基于spring的句junit测试：junit测试Dao层：https://blog.csdn.net/lovelease/article/details/70155788

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    package com.project.dao;
     
    import org.junit.Assert;
    import org.junit.Test;
    import org.junit.runner.RunWith;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.test.context.ContextConfiguration;
    import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
     
     
    @RunWith(SpringJUnit4ClassRunner.class)// 不能是PowerMock等别的class，否则无法识别spring的配置文件
    @ContextConfiguration("file:conf/applicationContext.xml")// 读取spring配置文件
    public class userDAOTest {

    @Autowired//检索applicationContext.xml，自动注入指定的bean
    UserDAO userDAO;
     
    @Test
    public void testGetUser() {
    int userId = 1;
    String nickname = "昵称1";

    Assert.assertEquals(userId, userDAO.getUser( userId ).getUserId());
    Assert.assertEquals(nickname, userDAO.getUser( userId ).getNickname());
    }
    }
    1.@RunWith和@ContextConfiguration的作用解析

    https://blog.csdn.net/H838071332/article/details/89916490

    1
    2
    @RunWith(SpringJUnit4ClassRunner.class)
    @ContextConfiguration( locations = {"classpath:applicationContext.xml"} )

    @RunWith(SpringJUnit4ClassRunner.class)：
    @Runwith的作用是让测试的实例在spring容器的环境下运行，那么什么是spring容器的环境，这个容器环境就是如:service, controller等包的使用就是spring容器。
    @ContextConfiguration：
    1、 他的作用是引入配置文件applicationContext.xml，如果没有写配置文件名的话则会根据测试的名字去匹配

    @ContextConfigurationpublic void test{}

    2、可以写多个配置文件
    用，隔开如下：

    1
    @ContextConfiguration( locations = {"classpath:applicationContext.xml","classpath:applicationContext2.xml"}
    2.spring的@ContextConfiguration注解

    https://blog.csdn.net/fanbaodan/article/details/100121551

    1
    2
    3
    4
    @ContextConfiguration(value="/applicationContext.xml")  //方法一
    @ContextConfiguration(locations="/applicationContext.xml")   //方法二
    @ContextConfiguration("classpath:/applicationContext.xml")   //方法三
    @ContextConfiguration("/applicationContext.xml")       //方法四

    切记前边要加一个 “/” 代表根目录（不带双引号）
    这是我亲测的几种都可以正常运行junit。

    其实也不用去死记， 这个分开也就是两块;

    一个是属性名（value、locations）
    一个是 属性值（双引号里边的，就是文件路径）
    单个文件一般直接在双引号里边写路径或者用value属性（切记要加“ / ” ！！！）
    如果有多个文件要加载可以使用多个文件时，可用{}括起来，并用逗号分隔，以下示例

    @ContextConfiguration(locations = { “classpath*:/spring1.xml”, “classpath*:/spring2.xml” })

    或者用value

    @ContextConfiguration(value = { “/spring1.xml”, “/spring2.xml” })

    或者不写属性名，（加不加"classpath:" 都可以）

    @ContextConfiguration({ “classpath:/spring1.xml”, “classpath:/spring2.xml” })

    当然单个文件也可以用locations 如上述方法二。

    根据上述源码可以看到， 该属性可以使用 locations 、value 或者直接写值（不写属性名），重点是值（路径）一定要写对。
    根据返回值可以得出以上三种方式都可以配置多个文件

    3.聊聊单元测试（三）——Spring Test+JUnit完美组合

    https://blog.csdn.net/shan9liang/article/details/40452469

    4.Spring系列——@ContextConfiguration注解的使用

    https://blog.csdn.net/m0_37941483/article/details/90727830

    1
    2
    3
    4
    5
    @RunWith(SpringJUnit4ClassRunner.class)
    @ContextConfiguration(locations = {"classpath*:/*.xml"})
    public class CDPlayerTest {

    }

    @ContextConfiguration括号里的locations = {“classpath*😕*.xml”}就表示将class路径里的所有.xml文件都包括进来，那么刚刚创建的那么XML文件就会包括进来，那么里面自动扫描的bean就都可以拿到了，此时就可以在测试类中使用@Autowired注解来获取之前自动扫描包下的所有bean

    classpath和classpath*区别:

    classpath：只会到你的class路径中查找找文件。

    classpath*：不仅包含class路径，还包括jar文件中（class路径）进行查找。

    5.默认不写

    https://blog.csdn.net/u012260238/article/details/87462366

    可以根据测试的类名，去找到与之对应的配置文件。

    3.mybatis问题

    Mybatis 开启控制台打印sql语句：https://blog.csdn.net/qq_37495786/article/details/82799910

    完整SQL是否会乱码。

    ]]>     + + + + + + MySQL + + + +     + + + + + 抑郁症 + + /article/57f89578.html + + 抑郁症，一种心病。这是我的定义，但是有时候我甚至怀疑这能不能被称作一种病、怀疑它是否真的存在……然而，现实如此残酷，这种病真实存在，而且发病时间和后果可能让人无法预料。我们不时听到某某明星因为抑郁而自杀的新闻，在叹息的同时，却又不禁在想：又有多少普通人抑郁而终？

    抑郁，亦有轻重，诱发因素或大或小。艾滋病患者多死于肿瘤，艾滋病毒破坏病人的免疫系统，也许一个小小的炎症，可能就会致命；在我看来，抑郁是类似的，它破坏病人的“心情系统”，也许一点点的不愉快可能就会变成诱因，让人走向极端。

    ​——记于2019年国考（2019年11月24日）的后一天

    以下内容转自百度百科：抑郁症.

    抑郁症的定义

    本词条由国家卫健委权威医学科普项目传播网络平台/百科名医网 提供内容 。

    抑郁症又称抑郁障碍，以显著而持久的心境低落为主要临床特征，是心境障碍的主要类型。临床可见心境低落与其处境不相称，情绪的消沉可以从闷闷不乐到悲痛欲绝，自卑抑郁，甚至悲观厌世，可有自杀企图或行为；甚至发生木僵；部分病例有明显的焦虑和运动性激越；严重者可出现幻觉、妄想等精神病性症状。每次发作持续至少2周以上、长者甚或数年，多数病例有反复发作的倾向，每次发作大多数可以缓解，部分可有残留症状或转为慢性。

    抑郁症有多可怕

    基本信息

    file

    发展概况

    我国与世界的抑郁症患病率比较情况如下：

    世界我国
    抑郁症患者人数3.22亿 [1]（无精确数据）
    患病率4.4% [1](4.2±1.9)% [1-2]

    注：

    1.大多数报道将我国抑郁症患病率确定在3%~5%的区间，但有报道称达到了6.1%。

    2.我国抑郁症发病率地区差异较大。

    3.30年间，报告的抑郁症发病率暴增10~20倍，现在仍然呈上升趋势；不排除有的以“世界卫生组织数据表明”的字眼作了错误（虚假）报道，故本数据可能不准确。

    病因

    迄今，抑郁症的病因并不非常清楚，但可以肯定的是，生物、心理与社会环境诸多方面因素参与了抑郁症的发病过程。生物学因素主要涉及遗传、神经生化、神经内分泌、神经再生等方面；与抑郁症关系密切的心理学易患素质是病前性格特征，如抑郁气质。成年期遭遇应激性的生活事件，是导致出现具有临床意义的抑郁发作的重要触发条件。然而，以上这些因素并不是单独起作用的，强调遗传与环境或应激因素之间的交互作用、以及这种交互作用的出现时点在抑郁症发生过程中具有重要的影响。

    临床表现

    抑郁症可以表现为单次或反复多次的抑郁发作，以下是抑郁发作的主要表现。

    1.心境低落

    主要表现为显著而持久的情感低落，抑郁悲观。轻者闷闷不乐、无愉快感、兴趣减退，重者痛不欲生、悲观绝望、度日如年、生不如死。典型患者的抑郁心境有晨重夜轻的节律变化。在心境低落的基础上，患者会出现自我评价降低，产生无用感、无望感、无助感和无价值感，常伴有自责自罪，严重者出现罪恶妄想和疑病妄想，部分患者可出现幻觉。

    2.思维迟缓

    患者思维联想速度缓慢，反应迟钝，思路闭塞，自觉“脑子好像是生了锈的机器”，“脑子像涂了一层糨糊一样”。临床上可见主动言语减少，语速明显减慢，声音低沉，对答困难，严重者交流无法顺利进行。

    3.意志活动减退

    患者意志活动呈显著持久的抑制。临床表现行为缓慢，生活被动、疏懒，不想做事，不愿和周围人接触交往，常独坐一旁，或整日卧床，闭门独居、疏远亲友、回避社交。严重时连吃、喝等生理需要和个人卫生都不顾，蓬头垢面、不修边幅，甚至发展为不语、不动、不食，称为“抑郁性木僵”，但仔细精神检查，患者仍流露痛苦抑郁情绪。伴有焦虑的患者，可有坐立不安、手指抓握、搓手顿足或踱来踱去等症状。严重的患者常伴有消极自杀的观念或行为。调查显示，我国每年有28.7万人死于自杀，其中63%有精神障碍，40%患有抑郁症。 [3] 因抑郁症而自杀的不乏名人，包括梵高、海明威、三毛、张国荣、 [3] 徐行、李晓、罗宾·威廉姆斯、乔任梁等 [4] 。消极悲观的思想及自责自罪、缺乏自信心可萌发绝望的念头，认为“结束自己的生命是一种解脱”，“自己活在世上是多余的人”，并会使自杀企图发展成自杀行为。这是抑郁症最危险的症状，应提高警惕。

    4.认知功能损害

    研究认为抑郁症患者存在认知功能损害。主要表现为近事记忆力下降、注意力障碍、反应时间延长、警觉性增高、抽象思维能力差、学习困难、语言流畅性差、空间知觉、眼手协调及思维灵活性等能力减退。认知功能损害导致患者社会功能障碍，而且影响患者远期预后。

    5.躯体症状

    主要有睡眠障碍、乏力、食欲减退、体重下降、便秘、身体任何部位的疼痛、性欲减退、阳痿、闭经等。躯体不适的体诉可涉及各脏器，如恶心、呕吐、心慌、胸闷、出汗等。自主神经功能失调的症状也较常见。病前躯体疾病的主诉通常加重。睡眠障碍主要表现为早醒，一般比平时早醒2～3小时，醒后不能再入睡，这对抑郁发作具有特征性意义。有的表现为入睡困难，睡眠不深；少数患者表现为睡眠过多。体重减轻与食欲减退不一定成比例，少数患者可出现食欲增强、体重增加。

    检查

    对疑为抑郁症的患者，除进行全面的躯体检查及神经系统检查外，还要注意辅助检查及实验室检查。迄今为止，尚无针对抑郁障碍的特异性检查项目。因此，目前的实验室检查主要是为了排除物质及躯体疾病所致的抑郁症。有2种实验室检查具有一定的意义，包括地塞米松抑制试验（DST）和促甲状腺素释放激素抑制试验（TRHST）。

    诊断

    抑郁症的诊断主要应根据病史、临床症状、病程及体格检查和实验室检查，典型病例诊断一般不困难。国际上通用的诊断标准一般有ICD-10和DSM-IV。国内主要采用ICD-10，是指首次发作的抑郁症和复发的抑郁症，不包括双相抑郁。患者通常具有心境低落、兴趣和愉快感丧失、精力不济或疲劳感等典型症状。其他常见的症状是①集中注意和注意的能力降低；②自我评价降低；③自罪观念和无价值感（即使在轻度发作中也有）；④认为前途暗淡悲观；⑤自伤或自杀的观念或行为；⑥睡眠障碍；⑦食欲下降。病程持续至少2周。

    治疗

    1.治疗目标

    抑郁发作的治疗要达到三个目标：①提高临床治愈率，最大限度减少病残率和自杀率，关键在于彻底消除临床症状；②提高生存质量，恢复社会功能；③预防复发。

    2.治疗原则

    ①个体化治疗；②剂量逐步递增，尽可能采用最小有效量，使不良反应减至最少，以提高服药依从性；③足量足疗程治疗；④尽可能单一用药，如疗效不佳可考虑转换治疗、增效治疗或联合治疗，但需要注意药物相互作用；⑤治疗前知情告知；⑥治疗期间密切观察病情变化和不良反应并及时处理；⑦可联合心理治疗增加疗效；⑧积极治疗与抑郁共病的其他躯体疾病、物质依赖、焦虑障碍等。

    3.药物治疗

    药物治疗是中度以上抑郁发作的主要治疗措施。目前临床上一线的抗抑郁药主要包括选择性5-羟色胺再摄取抑制剂（SSRI，代表药物氟西汀、帕罗西汀、舍曲林、氟伏沙明、西酞普兰和艾司西酞普兰）、5-羟色胺和去甲肾上腺素再摄取抑制剂（SNRI，代表药物文拉法辛和度洛西汀）、去甲肾上腺素和特异性5-羟色胺能抗抑郁药（NaSSA，代表药物米氮平）等。传统的三环类、四环类抗抑郁药和单胺氧化酶抑制剂由于不良反应较大，应用明显减少。

    4.心理治疗

    对有明显心理社会因素作用的抑郁发作患者，在药物治疗的同时常需合并心理治疗。常用的心理治疗方法包括支持性心理治疗、认知行为治疗、人际治疗、婚姻和家庭治疗、精神动力学治疗等，其中认知行为治疗对抑郁发作的疗效已经得到公认。

    5.物理治疗

    近年来出现了一种新的物理治疗手段——重复经颅磁刺激（rTMS）治疗，主要适用于轻中度的抑郁发作。

    预防

    有人对抑郁症患者追踪10年的研究发现，有75%～80%的患者多次复发，故抑郁症患者需要进行预防性治疗。发作3次以上应长期治疗，甚至终身服药。维持治疗药物的剂量多数学者认为应与治疗剂量相同，还应定期门诊随访观察。心理治疗和社会支持系统对预防本病复发也有非常重要的作用，应尽可能解除或减轻患者过重的心理负担和压力，帮助患者解决生活和工作中的实际困难及问题，提高患者应对能力，并积极为其创造良好的环境，以防复发。

    ]]>     + + + + + + 生活 + + + +     + + + + + Ubuntu升级Ruby + + /article/6bb10e64.html + + Ubuntu服务器最近扫描出很多漏洞，发现很多是Ruby的问题，而且有一些年代久远，想着应该是老版本的问题。于是去查了下更新问题，记录下更新过程。

    file

    当前的版本是 2.3，打算升级到最新的 2.6。可以使用下面的命令查看 Ruby 版本：

    1
    2
    $ ruby -v
    ruby 2.3.1p112 (2016-04-26) [x86_64-linux-gnu]

    添加 PPA 源：

    1
    2
    sudo add-apt-repository ppa:brightbox/ruby-ng
    sudo apt-get update

    Launchpad PPA Repositories是很有用的非ubuntu官方的第三方个人资源库，可以很方便地安装第三方软件。
    但是在运行add-apt-repository命令时，有时会提示命令不存在，这个时候直接apt-get
    add-apt-repository是不可以的！ 解决的方法是安装software-properties-common。
    输入命令：apt-get install software-properties-common

    先删除旧版本：

    1
    $ sudo apt-get purge --auto-remove ruby

    然后安装新版本：

    1
    $ sudo apt-get install ruby2.6 ruby2.6-dev

    安装后查看版本号：

    1
    2
    $ ruby -v
    ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-linux-gnu]

    更新成功后，重新扫描，漏洞少了20个……

    相关链接：

    ]]>     + + + + + + Ubuntu + + Ruby + + + +     + + + + + hexo+yilia添加复制代码块的功能 + + /article/e9d1b881.html + + 实现复制代码块的功能，效果：
    file

    我的提问

    我在hexo-theme-yilia-plus主题上的提问：https://github.com/JoeyBling/hexo-theme-yilia-plus/issues/29

    初级版

    支持复制代码块的功能，如下图（截自csdn）：
    image

    个人觉得这个功能还是挺重要的。

    加强版

    如果文章中有原创版权声明，复制时，会携带相关信息。

    🙋Others

    我自己也去查了下，找到的好像都是next主题的，没有yilia主题的，但是不太会转化……

    参考链接：

    自己动手

    因为回复比较慢，就自己动手去尝试了。

    参考：[clipboard.js]代码块复制

    该文章也是基于next主题，迁移过来有些问题：

    1. next主题可能自带jQuery，故没有引入，但是yilia没有，需要引入。
    2. 会报错ClipboardJS is not defined，我这里直接改成了Clipboard就可以了，后面找到原因了：是版本问题，https://github.com/zenorocha/clipboard.js/releases/v2.0.0，v2.0.0的变化：Changes constructor from new Clipboard() to new ClipboardJS() #468。相关问题：

    0.原理

    在页面加载完毕后，使用js动态地为每一个代码块添加一个按钮，使用这个按钮复制代码块内容。

    1.新建实现复制功能的js

    H:\Hexo\themes\yilia\source\js\clipboard_use.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /*页面载入完成后，创建复制按钮*/
    !function (e, t, a) { 
    /* code */
    var initCopyCode = function(){
        var copyHtml = '';
        copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
        copyHtml += '  <i class="fa fa-globe"></i><span>copy</span>';
        copyHtml += '</button>';
        $(".highlight .code").before(copyHtml);
        new Clipboard('.btn-copy', {
            target: function(trigger) {
                return trigger.nextElementSibling;
            }
        });
    }
    initCopyCode();
    }(window, document);

    2.引入js

    在H:\Hexo\themes\yilia\layout\layout.ejs文件的</body>前引入：（作用：页面加载完再执行js）

    1
    2
    3
    4
    5
    <!-- 代码块复制功能 -->
    <script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- <script type="text/javascript" src="/js/clipboard.js"></script>  -->
    <script type="text/javascript" src="/js/clipboard_use.js"></script>

    需要注意的问题：

    • 前面提到：因为：clipboard_use.js中需要用到jQuery，而yilia没有引入jQuery，故需要引入。
    • 对于clipboard.js的引入问题：根据github社区反馈，引入本地文件好像会出现问题（我本地测试就引入不了），故使用CDN引入。（有人反映CDN好像也会有问题，反正我没有遇到……）
    • 注意引入顺序：jquery和clipboard.js需要在clipboard_use.js之前引入。
    • <script>标签问题，虽然HTML5标准里面没有严格要求标签一定要关闭，但是建议要关闭，不然可能会出现问题。这里我一开始没有关闭标签，就出现问题了，后面研究了很久才发现原来是这个问题。

    3.添加样式

    修改：H:\Hexo\themes\yilia\source\main.0cf68a.css，在末尾添加下面代码（最好是pre .css~* .id, pre .id下面，即代码块样式附近）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    /*  这是原代码块 */
    pre .css~* .id, pre .id {
        color:#fd971f
    }

    /* 代码块复制按钮 */
     .highlight {
        /* 方便copy代码按钮（btn-copy）的定位 */
        position: relative;
    }
    .btn-copy {
        display: inline-block;
        cursor: pointer;
        background-color: #eee;
        background-image: linear-gradient(#fcfcfc, #eee);
        border: 1px solid #d5d5d5;
        border-radius: 3px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
        font-size: 13px;
        font-weight: 700;
        line-height: 20px;
        color: #333;
        -webkit-transition: opacity .3s ease-in-out;
        -o-transition: opacity .3s ease-in-out;
        transition: opacity .3s ease-in-out;
        padding: 2px 6px;
        position: absolute;
        right: 5px;
        top: 5px;
        opacity: 0;
    }
    .btn-copy span {
        margin-left: 5px;
    }
    .highlight:hover .btn-copy {
        opacity: 1;
    }
    /* 代码块复制按钮 */

    成果

    点击按钮后，会全选代码块，就复制成功了。
    效果图：
    file

    file

    动图：
    file

    问题讨论

    乍一看效果还不错，但是还是存在问题：

    1. 如果代码块超出，会出现问题。虽然图标样式使用绝对定位，但是该按钮没有“固定”在代码块页面的右上角，仅仅是固定在当前页面的右上角，可能不好理解，截个图：
      file
      然后我去研究了下CSDN的样式，发现好像差不多，但是效果明显不一样啊。后面有空再研究吧。
    2. 虽然复制成功会全选代码块，但是不成功呢？不晓得？好像没反应。后期可能会添加对应设置（模仿CSDN）：默认时“复制”，复制成功显示“复制成功”，几秒后再次显示“复制”，失败给出对应提示。

    依赖升级

    使用最新版本的clipboard.js–v2.0.4，CDN：https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/，替换之前的，需要修改的地方：

    1.改变引入源

    1
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.js"></script>

    2.改变函数名

    Clipboard to ClipboardJS

    1
    2
    3
    4
    5
    new Clipboard('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });

    改为：

    1
    2
    3
    4
    5
    new ClipboardJS('.btn-copy', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });

    bug修复

    更新时间：2020-3-27 23:25:54

    感谢：辛猿毅码的这篇文章https://code-ape.gitee.io/article/5bc9f198.html。

    1.修改js

    在highlight元素外围加一个父元素，方便定位复制按钮。
    H:\Hexo\themes\yilia\source\js\clipboard_use2.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    $(".highlight").wrap("<div class='code-wrapper' style='position:relative'></div>");
    /*页面载入完成后，创建复制按钮*/
    !function (e, t, a) {
        /* code */
        var initCopyCode = function () {
            var copyHtml = '';
            copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
            copyHtml += '  <i class="fa fa-clipboard"></i><span>复制</span>';
            copyHtml += '</button>';
            $(".highlight .code").before(copyHtml);
            var clipboard = new ClipboardJS('.btn-copy', {
                target: function (trigger) {
                    return trigger.nextElementSibling;
                }
            });
            clipboard.on('success', function (e) {
                e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制成功</span>"
                setTimeout(function () {
                    e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
                }, 1000)
                e.clearSelection();
            });
            clipboard.on('error', function (e) {
                e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制失败</span>"
                setTimeout(function () {
                    e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
                }, 1000)
                e.clearSelection();
            });
        }
        initCopyCode();
    }(window, document);

    2.修改复制按钮样式

    H:\Hexo\themes\yilia\source\main.0cf68a.css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    .btn-copy {
        display: inline-block;
        cursor: pointer;
        background-color: #eee;
        background-image: linear-gradient(#fcfcfc, #eee);
        border: 1px solid #d5d5d5;
        border-radius: 3px;
        . -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
        font-size: 13px;
        font-weight: 700;
        line-height: 20px;
        color: #333;
        -webkit-transition: opacity .3s ease-in-out;
        -o-transition: opacity .3s ease-in-out;
        transition: opacity .3s ease-in-out;
        padding: 2px 6px;
        position: absolute;
        right: 5px;
        top: 5px;
        opacity: 0;
    }
    .btn-copy span {
        margin-left: 5px;
    }
    .highlight:hover .btn-copy {
        opacity: 1;
    }

    3.添加复制按钮图标

    需要引入font-awesome，在H:\Hexo\themes\yilia\layout\_partial\head.ejs的</head>前添加：

    1
    <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">

    效果图

    有滚动条时：

    复制成功显示：

    微调图标样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    clipboard.on('success', function (e) {
        e.trigger.innerHTML = "<i class='fa fa-check' style='color:green'></i><span style='color:green'>复制成功</span>"
        setTimeout(function () {
            e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
        }, 1000)
        e.clearSelection();
    });
    clipboard.on('error', function (e) {
        e.trigger.innerHTML = "<i class='fa fa-exclamation' style='color:red'></i><span style='color:red'>复制失败</span>"
        setTimeout(function () {
            e.trigger.innerHTML = "<i class='fa fa-clipboard'></i><span>复制</span>"
        }, 1000)
        e.clearSelection();
    });

    复制成功效果：

    复制失败效果：

    收工！

    修复前后对比

    前

    后

    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia测试代码块样式 + + /article/285260df.html + + 测试代码块、引用块、（文章内）超链接的样式以及高亮问题。

    高亮说明

    经测试，发现有以下几个问题：

    1. 引用块里面的代码块样式有问题。
    2. 如果语言不支持高亮，默认使用plain（简单的，无格式的）。
    3. MySQL等SQL需要统一设置为SQL，不然不高亮。
    4. shell脚本使用bash，不然不高亮。
    5. cmd命令/Linux命令使用bash，可以部分高亮。
    6. markdown代码块不支持高亮。
    7. ejs使用HTML进行高亮。

    引用块

    引用的三级目录

    这是引用

    下面是引用中的代码块：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    > <!DOCTYPE html>
    > <html>
    > <head>
    > <meta charset="utf-8">
    > <title>菜鸟教程(runoob.com)</title>
    > </head>
    > <body>
    >     <h1>我的第一个标题</h1>
    >     <p class="p1" style="font-size:20px;">我的第一个段落。</p>
    > </body>
    > </html>
    >

    行内代码块

    这是行内代码块：git clone url。

    标题中的行内代码块git clone url

    超链接

    超链接样式：

    1. [文字](url):我的博客仓库，如果url含有中文，建议加<>，不然可能会被截断，导致连接失效。
    2. <url>:https://yansheng836.github.io/。
    3. url:https://yansheng836.github.io/，不推荐适用这种，不规范。

    HTML

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p class="p1" style="font-size:20px;">我的第一个段落。</p>
    </body>
    </html>

    XML

    1
    2
    3
    4
    5
    6
    7
    8
    <?xml version="1.0" encoding="UTF-8"?>
    <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.10</version>
        <scope>provided</scope>
    </dependency>

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @charset"utf-8";
    .bar2 {
    width:35px;
    height:3px;
    background-color:#333;
    margin:6px 0;
    transition:0.4s;
    opacity:0;
    }

    JavaScript

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var hide = false;

    function myFunction(x) {
        x.classList.toggle("change");
        if (hide == false) {
            console.log("hide == false");
            hide = true;
        } else {
            $(".left-col").css('display', '')
            hide = false;
        }
    }

    Json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    {
        "sites": [
            {
                "name": "菜鸟教程",
                "url": "www.runoob.com"
            },
            {
                "name": "google",
                "url": "www.google.com"
            },
            {
                "name": "微博",
                "url": "www.weibo.com"
            }
        ]
    }

    Java

    1
    2
    3
    4
    5
    6
    public class HelloWorld {
        public static void main(String[] args) {
             // 单行注释
            System.out.println("Hello World");
        }
    }

    Python3

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    #!/usr/bin/python3

    class MyClass:
        """一个简单的类实例"""
        i = 12345
        def f(self):
            return 'hello world'
     
    # 实例化类
    x = MyClass()
     
    # 访问类的属性和方法
    print("MyClass 类的属性 i 为：", x.i)
    print("MyClass 类的方法 f 输出为：", x.f())

    SQL

    1
    2
    INSERT INTO table_name
    VALUES (value1,value2,value3,...);

    MySQL

    1
    SELECT * from runoob_tbl ORDER BY submission_date ASC;

    MySQL–>SQL

    1
    SELECT * from runoob_tbl ORDER BY submission_date ASC;

    Shell

    1
    2
    3
    4
    for loop in 1 2 3 4 5
    do
        echo "The value is: $loop"
    done

    Shell–>BASH

    1
    2
    3
    4
    for loop in 1 2 3 4 5
    do
        echo "The value is: $loop"
    done

    Bash/Git

    1
    2
    3
    4
    5
    6
    7
    8
    # cmd
    cd dir
    mkdir new_dir

    # 注释
    $ git add *.c
    $ git add README
    $ git commit -m '初始化项目版本'

    C

    1
    2
    3
    4
    5
    6
    7
    8
    #include <stdio.h>
     
    int main()
    {
        /* 我的第一个 C 程序 */
        printf("Hello, World! \n");
        return 0;
    }

    C++

    1
    2
    3
    4
    5
    6
    7
    8
    #include <iostream>
    using namespace std;
    int main()
    {
        // 注释
        cout << "Hello, world!" << endl;
        return 0;
    }

    Markdown

    1
    2
    3
    4
    这是超链接：<https://github.com/yansheng836/>
    下面的是列表：
    - 列表
    - 列表

    EJS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
        <section id="comments" class="comments">
          <style>
            .comments{margin:30px;padding:10px;background:#fff}
            @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
          </style>
          <%- partial('post/valine', {
            key: post.slug,
            title: post.title,
            url: config.url+url_for(post.path)
            }) %>
      </section>
    <% } %>

    EJS–>HTML

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
        <section id="comments" class="comments">
          <style>
            .comments{margin:30px;padding:10px;background:#fff}
            @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
          </style>
          <%- partial('post/valine', {
            key: post.slug,
            title: post.title,
            url: config.url+url_for(post.path)
            }) %>
      </section>
    <% } %>

    YML

    1
    2
    3
    #hexo g 会默认将所有md文件转换成（渲染成）HTML文件放到public文件夹中；加上这句话的意思就是告诉hexo的解析器，跳过渲染(skip_render)README.md文件
    skip_render: 
     - 'README.md'
    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia修改代码块等样式 + + /article/c344994.html + + 代码块的样式真的很重要，毕竟咱好歹是一个技术博客，难免会贴一些代码的。因此参考https://cqh-i.github.io的样式进行了调整，下面是HTML的例子，更多具体效果可以参考这篇博客的样式：test-codestyle。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>html代码块样本</title>
    </head>
    <body>
        <h1>这个样式可还行？</h1>
        <p class="p1" style="font-size:20px;">我的第一个段落。</p>
    </body>
    </html>

    说明

    1. 由于每个人可能都修改过样式文件，所以每个人的样式可能都会有所不同。建议修改之前做好备份，防止出现错误难于恢复，可以使用git进行版本管理（备份博客的源码和配置）。
    2. 我的备份文件，详见代码块样式调整备份文件，cqh-i.github.io.css为博客https://cqh-i.github.io的代码块样式。main.0cf68a.css为我之前的css文件的备份。

    文中超链接样式

    默认：

    1
    2
    3
    4
    5
    a {
        background: 0 0;
        text-decoration: none;
        color: #08c;
    }

    修改（添加内容）后：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 文章中的超链接,鼠标悬浮特效 */
    .article-entry li a:hover, .article-entry p a:hover {
        background: 0 0;
        text-decoration: underline;
        color: #08c;
        /* font-size:18px; */
        font-weight:bold;
        transition:.8s;
    }

    再次修改：

    参考：https://css.30secondsofcode.org/snippet/hover-underline-animation

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    /* 文章中的超链接,鼠标悬浮特效*/
    .article-entry a{
        display: inline-block;
        position: relative;
        color: #0087ca;
        font-family: lucida console;/* 这种字体的英文比较好看（像代码样式） */
    }
    /* 鼠标悬浮时，变色 */
    .article-entry a:hover{
        color: #d7191a;
        transition:.8s;
    }
    /* 鼠标悬浮时，下划线从中间向两边延伸 */
    .article-entry a:hover::after{
      transform: scaleX(1);
      /* 旋转，与transform连用；这里作用：鼠标悬浮时，底部的下划线从中间扩散到两边。
       bottom right :左到右出现，左到右消失（需配合上面的::after）
      */
      transform-origin: bottom center;
    }
    /* 鼠标移开后，下划线从两边向中间消失 */
    .article-entry a::after{
      content: '';
      position: absolute;
      width: 100%;
      transform: scaleX(0);
      height: 1.5px;
      bottom: 0;
      left: 0;
      background-color: #0087ca;
      /* 详见：https://www.w3school.com.cn/cssref/pr_transform-origin.asp,
      旋转，与transform连用；这里作用：鼠标移开后，底部的下划线从中间开始消失 */
      transform-origin: bottom center;
      transition: transform 0.5s ease-out;
    }

    2019年11月8日调整将article-entry换成mid-col，原来只是文章中文的超链接，现在改为右边栏都进行设置。（可能会出现很多负面影响，请自行决定是否更改）。

    行内代码块样式

    默认：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .article-entry li code,.article-entry p code {
        padding: 1px 3px;
        margin: 0 3px;
        background: #ddd;
        border: 1px solid #ccc;
        font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
        word-wrap: break-word;
        font-size: 14px
    }

    参考csdn代码块样式：主要是调整颜色为红色

    1
    2
    3
    4
    5
    .markdown_views code {
        color: #c7254e;
        background-color: #f9f2f4;
        border-radius: -9px;
    }

    修改后：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /* 行内代码块``的样式，参考csdn的
        color: #c7254e;
        background-color: #f9f2f4;
        border-radius: 2px;
        padding: 2px 4px;
    */
    .article-entry li code, .article-entry p code {
    color: #c7254e;
        background-color: #f9f2f4;
        border-radius: 2px;
        padding:2px 4px;
        margin:0 3px;
        /* background:#ddd; */
        /* border:2px solid #ccc; */
        font-family:Menlo, Monaco, Andale Mono, lucida console, Courier New, monospace;
        word-wrap:break-word;
        /* font-size:14px */
    }

    补充：一开始没注意到原来该样式不包含标题中的代码块，添加:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* 标题中的代码块样式 */
    .article-entry code {
        /* background:#eee;
        padding:0 .3em;
        border:none */
        color: #c7254e;
        background-color: rgba(249,242,244,.7);
        border-radius: 2px;
        padding: 2px 4px;
        margin: 0 3px;
        font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
        word-wrap: break-word
    }

    代码块主要样式文件

    代码块简单设置

    参考：Hexo 基于yilia主题及其它插件优化

    1.修改代码块的样式

    直接修改编译好的文件。路径为： theme/yilia/source/main.0cf68a.css:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    (1)修改代码背景色，
    搜索 .article-entry .highlight, 修改background后面的颜色
    将 pre{background:#272822;
    改为 pre{background:#1a0139;

    (2)修改行号颜色，
    搜索 .article-entry .highlight .gutter pre .line
    将.article-entry .highlight .gutter pre .line{color:#666
    改为.article-entry .highlight .gutter pre .line{color:#fc0000

    (3)修改代码字体颜色 
    搜索 .article-entry .highlight .line
    将.article-entry .highlight .line{color:#fff;
    修改为.article-entry .highlight .line{color:#00ff0d;

    效果图：

    个人感觉还不是很满意，有待优化。

    2.代码块行号显示错乱

    修改yilia/source/main.0cf68a.css的内容：将white-space:pre-wrap; 删除，这个问题是自动换行造成的，使用不自动换行的white-space:pre;样式代码块部分会自动出现底部滚动条，行号错乱问题就没有了。

    3.重点调整

    不知道是hexo还是yilia主题自带的是使用highlight.js进行代码高亮的，但是好像是内置的，因为我不会写源码，只能更改生成的文件：yilia/source/main.0cf68a.css，按照识别的关键字自定义颜色，这里是我的一些配置，你也可以自己使用F12进行调试。（当然网上也有许多替换自指定的highlight.js进行代码高亮的教程）。

    特别注意：高亮的前提是语言要写对，不然只能当做普通文本进行识别。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    /* 代码块样式之评论：黄色 */
    pre .comment {
        color:#ffec8b
    }
    /* 代码块样式之类的参数、函数的关键字、关键字：蓝色 */
    pre .class .params, pre .function .keyword, pre .keyword, pre .literal {
        color:#66d9ef
    }
    /* 代码块样式之css的属性值、函数名、参数、标签：白色 */
    pre .css .value, pre .doctype, pre .function, pre .params, pre .tag {
        color:#fff
    /* color:#66d9ef; */
    }
    /* 代码块样式之HTML或者xml的头部元素：红色(颜色较浅) */
    pre .meta{
        color:#f78da1;
    }
    /* 代码块样式之HTML的标签：红色 */
    pre .tag .name {
        /* color:#dc3958; */
     color:#ff6481;
    }
    /* 代码块样式之：色 */
    pre .at_rule, pre .at_rule .keyword, pre .css~* .tag, pre .preprocessor, pre .preprocessor .keyword, pre .title{
        color:#fa9400
    }
    /* 代码块样式之属性、类、函数的title：绿色 */
    pre .attr,pre .attribute, pre .built_in, pre .class, pre .css~* .class, pre .function .title {
        color:#a6e22e
    }
    /* 代码块样式之字符串、属性值：猪肝色 */
    pre .string, pre .value {
        color:#e6db74
    }
    /* 代码块样式之数字：粉红色 */
    pre .number {
        color:#ffe4b5
    }
    pre .css~* .id, pre .id {
        color:#fd971f
    }

    文章内的超链接和引用块超出页面的问题

    参考：css自动换行如何设置?url太长会撑开页面

    当页面进行缩放时，说明这两个区域可能会超出页面。

    使用下面这两个属性进行截断：

    1
    2
    3
    /* 如果超长，自动截断 */
    word-wrap:break-word;
    word-break:break-all;

    具体如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    a {
        background:transparent;
        text-decoration:none;
        color:#08c;
    /* 如果超长，自动截断 */
        word-wrap:break-word;
        word-break:break-all;
    }
    .article-entry blockquote {
        background:#ddd;
        border-left:5px solid #ccc;
        padding:15px 20px;
        margin-top:10px;
        border-left:5px solid #657b83;
        background:#f6f6f6;
        /* 如果超长，自动截断 */
        word-wrap:break-word;
        word-break:break-all;
    }

    左侧边栏的菜单

    导航超链接样式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* 这个字体不错font-family: STCaiyun,STXingkai; */
    .left-col #header .header-menu {
        font-family: STCaiyun,STXingkai;
        line-height: 31px;
        text-transform: uppercase;
        float: none;
        min-height: 150px;
        margin-left: -12px;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    主页‘展开全文’按钮样式

    样式参考：http://ianlunn.github.io/Hover/的hvr-shutter-in-horizontal按钮，示例：https://codepen.io/yansheng836/pen/QWWmEro。

    1.添加class

    修改H:\Hexo\themes\yilia\layout\_partial\article.ejs，查找index && theme.show_all_link，找到如下内容

    1
    2
    3
    4
    5
    <% if (index && theme.show_all_link){ %>
      <p class="article-more-link">
        <a class="article-more-a" href="<%- url_for(post.path) %>"><%= theme.show_all_link %> >></a>
      </p>
    <% } %>

    在class="article-more-a中添加hvr-shutter-in-horizontal

    1
    2
    3
    4
    5
    <% if (index && theme.show_all_link){ %>
      <p class="article-more-link">
        <a class="article-more-a  hvr-shutter-in-horizontal" href="<%- url_for(post.path) %>"><%= theme.show_all_link %> >></a>
      </p>
    <% } %>

    2.修改样式

    修改H:\Hexo\themes\yilia\source\main.0cf68a.css，查找.article-more-link a

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .article-more-link a {
        background:#4d4d4d;
        color:#fff;
        font-size:12px;
        padding:5px 8px;
        line-height:16px;
        border-radius:2px;
        transition:background .3s
    }
    .article-more-link a:hover {
        background:#3c3c3c
    }

    修改为：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    /* 《展开全文按钮 */
     .article-more-link a {
        color:#fff;
        font-size:12px;
        padding:5px 8px;
        line-height:16px;
        border-radius:2px;
        /* Prevent highlight colour when element is tapped */
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        /* Smooth fonts */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    /* Shutter In Horizontal ,from : http://ianlunn.github.io/Hover/ */
     .hvr-shutter-in-horizontal {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        position: relative;
    /* 在鼠标悬浮时为：蓝色 */
        background: #2098D1;
        -webkit-transition-property: color;
        transition-property: color;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
    }
    .hvr-shutter-in-horizontal:before {
        content:"";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    /* 在默认情况下为：灰褐色 */
        background: #4d4d4d;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    .hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active {
        color: white;
    }
    .hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }
    /* 展开全文按钮》 */
    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia添加live2d看板娘 + + /article/e239dc63.html + + 添加live2d看板娘，插件：hexo-helper-live2d，github仓库：https://github.com/EYHN/hexo-helper-live2d

    右下角：可爱小黑猫🐱

    file

    安装

    1.安装插件

    运行命令npm install --save hexo-helper-live2d

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    $ npm install --save hexo-helper-live2d

    > core-js@2.6.10 postinstall H:\Hexo\node_modules\babel-polyfill\node_modules\core-js
    > node postinstall || echo "ignore"

    Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

    The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
    > https://opencollective.com/core-js
    > https://www.patreon.com/zloirock

    Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


    > core-js@2.6.10 postinstall H:\Hexo\node_modules\babel-runtime\node_modules\core-js
    > node postinstall || echo "ignore"


    > live2d-widget@3.1.4 postinstall H:\Hexo\node_modules\live2d-widget
    > opencollective-postinstall

    Thank you for using live2d-widget!
    If you rely on this package, please consider supporting our open collective:
    > https://opencollective.com/live2d-widgetjs/donate


    > hexo-helper-live2d@3.1.1 postinstall H:\Hexo\node_modules\hexo-helper-live2d
    > opencollective-postinstall

    Thank you for using hexo-helper-live2d!
    If you rely on this package, please consider supporting our open collective:
    > https://opencollective.com/hexo-helper-live2d/donate

    npm WARN babel-eslint@10.0.2 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    + hexo-helper-live2d@3.1.1
    added 277 packages from 109 contributors and audited 25235 packages in 255.268s
    found 20 vulnerabilities (7 low, 6 moderate, 6 high, 1 critical)
      run `npm audit fix` to fix them, or `npm audit` for details

    2.选择模型

    可到https://huaji8.top/post/live2d-plugin-2.0/预览效果。

    命令为:npm install live2d-widget-model-模型名，模型为可参考上面的预览内容。

    安装模型:

    1
    2
    3
    4
    5
    6
    7
    $ npm install live2d-widget-model-hijiki
    npm WARN babel-eslint@10.0.2 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    + live2d-widget-model-hijiki@1.0.5
    added 1 package in 52.155s

    3.配置

    站点的配置文件\_config.yml或者是主题的配置文件中添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    # Live2D
    ## https://github.com/EYHN/hexo-helper-live2d
    live2d:
      enable: true
      scriptFrom: local
      pluginRootPath: live2dw/
      pluginJsPath: lib/
      pluginModelPath: assets/
      tagMode: false
      debug: false
      model:
        use: live2d-widget-model-hijiki # 模型：https://huaji8.top/post/live2d-plugin-2.0/
      display:
        position: right
        width: 150
        height: 300
      mobile:
        show: true

    注意这里的use参数是上面安装的那个模型全名。

    4.效果图

    可爱的小黑猫已上线（见封面）。如果不起效，一般需要重新生成hexo clean & hexo g。

    补充

    取消看板娘

    暂时不用

    将配置中的enable设置成false即可。

    卸载插件

    运行命令下载插件，删除配置信息：

    1. 卸载模型：npm install live2d-widget-model-模型名
    2. 卸载live2d插件：npm uninstall hexo-helper-live2d
    3. 去掉站点_config.yml下的配置信息即可。
    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia添加背景特效 + + /article/cf9c6a5e.html + + 添加多种页面背景特效，参考：Hexo 博客优化之博客美化系列（持续更新），需要注意的是：添加背景特效是很消耗浏览器内容的，建议只选择其中的一两个。

    特效目录

    套路说明

    为防止后面的代码遗漏了什么东西，在这里统一说明：添加背景动画的套路（适用于各种hexo主题）：

    1. 新建生成动画的JS文件，或者引入现成的JS文件的CDN文件（我这里为了备份，基本是新建文件；比较有名的特效一般都会上传到GitHub，而且有引入CDN的相关介绍）。我的文件放再H:\Hexo\themes\yilia\source\js\目录下。
    2. 因为背景特效属于陪衬类，也就是说不是很重要的，所以一般都是在加载完页面之后再引入的。因此我们在页面的</body>标签前引入即可。yilia主题是在H:\Hexo\themes\yilia\layout\layout.ejs中，其他主题类似。
    3. 在2中引入需要设置成配置时，即当配置文件中开启设置时，才会开启这个特效。因此最后一步是在主题的配置文件中开启配置。yilia主题是在H:\Hexo\themes\yilia\_config.yml中，其他主题类似。

    鼠标点击出现爱心特效

    新建H:\Hexo\themes\yilia\source\js\love.js:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    (function (window, document, undefined) {
        var hearts = [];
        window.requestAnimationFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback) {
                    setTimeout(callback, 1000 / 60);
                }
        })();
        init();

        function init() {
            css(
                ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
            );
            attachEvent();
            gameloop();
        }

        function gameloop() {
            for (var i = 0; i < hearts.length; i++) {
                if (hearts[i].alpha <= 0) {
                    document.body.removeChild(hearts[i].el);
                    hearts.splice(i, 1);
                    continue;
                }
                hearts[i].y--;
                hearts[i].scale += 0.004;
                hearts[i].alpha -= 0.013;
                hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i]
                    .alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale +
                    ") rotate(45deg);background:" + hearts[i].color;
            }
            requestAnimationFrame(gameloop);
        }

        function attachEvent() {
            var old = typeof window.onclick === "function" && window.onclick;
            window.onclick = function (event) {
                old && old();
                createHeart(event);
            }
        }

        function createHeart(event) {
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push({
                el: d,
                x: event.clientX - 5,
                y: event.clientY - 5,
                scale: 1,
                alpha: 1,
                color: randomColor()
            });
            document.body.appendChild(d);
        }

        function css(css) {
            var style = document.createElement("style");
            style.type = "text/css";
            try {
                style.appendChild(document.createTextNode(css));
            } catch (ex) {
                style.styleSheet.cssText = css;
            }
            document.getElementsByTagName('head')[0].appendChild(style);
        }

        function randomColor() {
            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) +
                ")";
        }
    })(window, document);

    添加到H:\Hexo\themes\yilia\layout\layout.ejs的</body>前

    1
    2
    3
    4
    5
    <!-- 《页面点击小红心 -->
    <% if (theme.love){ %>
        <script type="text/javascript" src="/js/love.js"></script>
    <% } %>
    <!-- 页面点击小红心》 -->

    开启配置H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 页面点击小红心
    love: true

    file

    鼠标点击显示文字–需要引入jQuery

    H:\Hexo\themes\yilia\source\js\click_show_text.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array
            ("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
            var $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
            y = e.pageY;
            $i.css({
                "z-index": 5,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "#FF0000"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
    3000,
    function() {
        $i.remove();
    });
        });
        setTimeout('delay()', 2000);
    });

    function delay() {
        $(".buryit").removeAttr("onclick");
    }

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    <!--单击显示文字-->
    <% if (theme.click_show_text){ %>
        <script type="text/javascript" src="/js/click_show_text.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 鼠标点击显示文字
    click_show_text: true

    file

    鼠标点击烟花爆炸效果

    H:\Hexo\themes\yilia\source\js\fireworks.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    "use strict";

    function updateCoords(e) {
        pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[
            0].clientY - canvasEl.getBoundingClientRect().top
    }

    function setParticuleDirection(e) {
        var t = anime.random(0, 360) * Math.PI / 180,
            a = anime.random(50, 180),
            n = [-1, 1][anime.random(0, 1)] * a;
        return {
            x: e.x + n * Math.cos(t),
            y: e.y + n * Math.sin(t)
        }
    }

    function createParticule(e, t) {
        var a = {};
        return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos =
            setParticuleDirection(a), a.draw = function () {
                ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill()
            }, a
    }

    function createCircle(e, t) {
        var a = {};
        return a.x = e, a.y = t, a.color = "#F00", a.radius = 0.1, a.alpha = 0.5, a.lineWidth = 6, a.draw = function () {
            ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth =
                a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1
        }, a
    }

    function renderParticule(e) {
        for (var t = 0; t < e.animatables.length; t++) {
            e.animatables[t].target.draw()
        }
    }

    function animateParticules(e, t) {
        for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) {
            n.push(createParticule(e, t))
        }
        anime.timeline().add({
            targets: n,
            x: function (e) {
                return e.endPos.x
            },
            y: function (e) {
                return e.endPos.y
            },
            radius: 0.1,
            duration: anime.random(1200, 1800),
            easing: "easeOutExpo",
            update: renderParticule
        }).add({
            targets: a,
            radius: anime.random(80, 160),
            lineWidth: 0,
            alpha: {
                value: 0,
                easing: "linear",
                duration: anime.random(600, 800)
            },
            duration: anime.random(1200, 1800),
            easing: "easeOutExpo",
            update: renderParticule,
            offset: 0
        })
    }

    function debounce(e, t) {
        var a;
        return function () {
            var n = this,
                i = arguments;
            clearTimeout(a), a = setTimeout(function () {
                e.apply(n, i)
            }, t)
        }
    }
    var canvasEl = document.querySelector(".fireworks");
    if (canvasEl) {
        var ctx = canvasEl.getContext("2d"),
            numberOfParticules = 30,
            pointerX = 0,
            pointerY = 0,
            tap = "mousedown",
            colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"],
            setCanvasSize = debounce(function () {
                canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width =
                    window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext(
                        "2d").scale(2, 2)
            }, 500),
            render = anime({
                duration: 1 / 0,
                update: function () {
                    ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
                }
            });
        document.addEventListener(tap, function (e) {
            "sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !==
                e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY))
        }, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1)
    }
    "use strict";

    function updateCoords(e) {
        pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[
            0].clientY - canvasEl.getBoundingClientRect().top
    }

    function setParticuleDirection(e) {
        var t = anime.random(0, 360) * Math.PI / 180,
            a = anime.random(50, 180),
            n = [-1, 1][anime.random(0, 1)] * a;
        return {
            x: e.x + n * Math.cos(t),
            y: e.y + n * Math.sin(t)
        }
    }

    function createParticule(e, t) {
        var a = {};
        return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos =
            setParticuleDirection(a), a.draw = function () {
                ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill()
            }, a
    }

    function createCircle(e, t) {
        var a = {};
        return a.x = e, a.y = t, a.color = "#F00", a.radius = 0.1, a.alpha = 0.5, a.lineWidth = 6, a.draw = function () {
            ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth =
                a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1
        }, a
    }

    function renderParticule(e) {
        for (var t = 0; t < e.animatables.length; t++) {
            e.animatables[t].target.draw()
        }
    }

    function animateParticules(e, t) {
        for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) {
            n.push(createParticule(e, t))
        }
        anime.timeline().add({
            targets: n,
            x: function (e) {
                return e.endPos.x
            },
            y: function (e) {
                return e.endPos.y
            },
            radius: 0.1,
            duration: anime.random(1200, 1800),
            easing: "easeOutExpo",
            update: renderParticule
        }).add({
            targets: a,
            radius: anime.random(80, 160),
            lineWidth: 0,
            alpha: {
                value: 0,
                easing: "linear",
                duration: anime.random(600, 800)
            },
            duration: anime.random(1200, 1800),
            easing: "easeOutExpo",
            update: renderParticule,
            offset: 0
        })
    }

    function debounce(e, t) {
        var a;
        return function () {
            var n = this,
                i = arguments;
            clearTimeout(a), a = setTimeout(function () {
                e.apply(n, i)
            }, t)
        }
    }
    var canvasEl = document.querySelector(".fireworks");
    if (canvasEl) {
        var ctx = canvasEl.getContext("2d"),
            numberOfParticules = 30,
            pointerX = 0,
            pointerY = 0,
            tap = "mousedown",
            colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"],
            setCanvasSize = debounce(function () {
                canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width =
                    window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext(
                        "2d").scale(2, 2)
            }, 500),
            render = anime({
                duration: 1 / 0,
                update: function () {
                    ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
                }
            });
        document.addEventListener(tap, function (e) {
            "sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !==
                e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY))
        }, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1)
    };

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    5
    6
    <!--鼠标点击烟花爆炸效果，需要引入jQuery-->
    <% if (theme.fireworks){ %>
        <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
        <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
        <script type="text/javascript" src="/js/fireworks.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 鼠标点击烟花爆炸效果
    fireworks: true

    file

    动态线条背景

    https://github.com/hustcc/canvas-nest.js

    H:\Hexo\themes\yilia\layout\layout.ejs

    直接方法

    1
    2
    3
    4
    <!--动态线条背景-->
    <script type="text/javascript"
    color="220,220,220" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
    </script>

    配置式：

    1
    2
    3
    4
    5
    6
    7
    <!--动态线条背景-->
    <% if (theme.canvas_nest.enable){ %>
        <script type="text/javascript" color="<%=theme.canvas_nest.color %>" opacity="<%=theme.canvas_nest.opacity %>" 
            zIndex="<%=theme.canvas_nest.zIndex %>" count="<%=theme.canvas_nest.count %>" 
            src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
        </script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # https://github.com/hustcc/canvas-nest.js
    # 配置详见： https://github.com/hustcc/canvas-nest.js#configuration
    # 动态线条效果，会向鼠标集中
    canvas_nest:
      enable: true
      color: '255, 235, 59'        # color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
      pointColor: '156,39,176'     # color of points, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
      opacity: '0.8'               # the opacity of line (0~1), default: 0.5.
      count: '99'                  # the number of lines, default: 99.
      zIndex: '-1'                 # z-index property of the background, default: -1.

    file

    雪花特效2.大雪花(有齿轮)

    H:\Hexo\themes\yilia\source\js\snow2.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    /*样式一*/
    (function ($) {
        $.fn.snow = function (options) {
            var $flake = $('<div id="snowbox" />').css({
                    'position': 'absolute',
                    'z-index': '9999',
                    'top': '-50px'
                }).html('❄'),
                documentHeight = $(document).height(),
                documentWidth = $(document).width(),
                defaults = {
                    minSize: 10,
                    maxSize: 20,
                    newOn: 1000,
                    flakeColor: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
                },
                options = $.extend({}, defaults, options);
            var interval = setInterval(function () {
                var startPositionLeft = Math.random() * documentWidth - 100,
                    startOpacity = 0.5 + Math.random(),
                    sizeFlake = options.minSize + Math.random() * options.maxSize,
                    endPositionTop = documentHeight - 200,
                    endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
                    durationFall = documentHeight * 10 + Math.random() * 5000;
                $flake.clone().appendTo('body').css({
                    left: startPositionLeft,
                    opacity: startOpacity,
                    'font-size': sizeFlake,
                    color: options.flakeColor
                }).animate({
                    top: endPositionTop,
                    left: endPositionLeft,
                    opacity: 0.2
                }, durationFall, 'linear', function () {
                    $(this).remove()
                });
            }, options.newOn);
        };
    })(jQuery);
    $(function () {
        $.fn.snow({
            minSize: 5,
            /* 定义雪花最小尺寸 */
            maxSize: 50,
            /* 定义雪花最大尺寸 */
            newOn: 300 /* 定义密集程度，数字越小越密集 */
        });
    });

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    <!-- 雪花特效2 -->
    <% if (theme.snow2){ %>
      <script type="text/javascript" src="/js/snow2.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 雪花特效2
    snow2: true

    file

    雪花特效3.小雪花(无齿轮)

    H:\Hexo\themes\yilia\source\js\snow3.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    /*样式二*/
    /* 控制下雪 */
    function snowFall(snow) {
        /* 可配置属性 */
        snow = snow || {};
        this.maxFlake = snow.maxFlake || 200; /* 最多片数 */
        this.flakeSize = snow.flakeSize || 10; /* 雪花形状 */
        this.fallSpeed = snow.fallSpeed || 1; /* 坠落速度 */
    }
    /* 兼容写法 */
    requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        function (callback) {
            setTimeout(callback, 1000 / 60);
        };

    cancelAnimationFrame = window.cancelAnimationFrame ||
        window.mozCancelAnimationFrame ||
        window.webkitCancelAnimationFrame ||
        window.msCancelAnimationFrame ||
        window.oCancelAnimationFrame;
    /* 开始下雪 */
    snowFall.prototype.start = function () {
        /* 创建画布 */
        snowCanvas.apply(this);
        /* 创建雪花形状 */
        createFlakes.apply(this);
        /* 画雪 */
        drawSnow.apply(this)
    }
    /* 创建画布 */
    function snowCanvas() {
        /* 添加Dom结点 */
        var snowcanvas = document.createElement("canvas");
        snowcanvas.id = "snowfall";
        snowcanvas.width = window.innerWidth;
        snowcanvas.height = document.body.clientHeight;
        snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
        document.getElementsByTagName("body")[0].appendChild(snowcanvas);
        this.canvas = snowcanvas;
        this.ctx = snowcanvas.getContext("2d");
        /* 窗口大小改变的处理 */
        window.onresize = function () {
            snowcanvas.width = window.innerWidth;
            /* snowcanvas.height = window.innerHeight */
        }
    }
    /* 雪运动对象 */
    function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
        this.x = Math.floor(Math.random() * canvasWidth); /* x坐标 */
        this.y = Math.floor(Math.random() * canvasHeight); /* y坐标 */
        this.size = Math.random() * flakeSize + 2; /* 形状 */
        this.maxSize = flakeSize; /* 最大形状 */
        this.speed = Math.random() * 1 + fallSpeed; /* 坠落速度 */
        this.fallSpeed = fallSpeed; /* 坠落速度 */
        this.velY = this.speed; /* Y方向速度 */
        this.velX = 0; /* X方向速度 */
        this.stepSize = Math.random() / 30; /* 步长 */
        this.step = 0 /* 步数 */
    }
    flakeMove.prototype.update = function () {
        var x = this.x,
            y = this.y;
        /* 左右摆动(余弦) */
        this.velX *= 0.98;
        if (this.velY <= this.speed) {
            this.velY = this.speed
        }
        this.velX += Math.cos(this.step += .05) * this.stepSize;

        this.y += this.velY;
        this.x += this.velX;
        /* 飞出边界的处理 */
        if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
            this.reset(canvas.width, canvas.height)
        }
    };
    /* 飞出边界-放置最顶端继续坠落 */
    flakeMove.prototype.reset = function (width, height) {
        this.x = Math.floor(Math.random() * width);
        this.y = 0;
        this.size = Math.random() * this.maxSize + 2;
        this.speed = Math.random() * 1 + this.fallSpeed;
        this.velY = this.speed;
        this.velX = 0;
    };
    // 渲染雪花-随机形状（此处可修改雪花颜色！！！）
    flakeMove.prototype.render = function (ctx) {
        var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
        snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此处是雪花颜色，默认是白色 */
        snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
        snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16进制的RGB 颜色代码。 */
        ctx.save();
        ctx.fillStyle = snowFlake;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    };
    /* 创建雪花-定义形状 */
    function createFlakes() {
        var maxFlake = this.maxFlake,
            flakes = this.flakes = [],
            canvas = this.canvas;
        for (var i = 0; i < maxFlake; i++) {
            flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
        }
    }
    /* 画雪 */
    function drawSnow() {
        var maxFlake = this.maxFlake,
            flakes = this.flakes;
        ctx = this.ctx, canvas = this.canvas, that = this;
        /* 清空雪花 */
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (var e = 0; e < maxFlake; e++) {
            flakes[e].update();
            flakes[e].render(ctx);
        }
        /*  一帧一帧的画 */
        this.loop = requestAnimationFrame(function () {
            drawSnow.apply(that);
        });
    }
    /* 调用及控制方法 */
    var snow = new snowFall({
        maxFlake: 60
    });
    snow.start();

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    <!-- 雪花特效3 -->
    <% if (theme.snow3){ %>
      <script type="text/javascript" src="/js/snow3.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 雪花特效3
    snow3: false

    file

    彩带1.鼠标点击自动替换彩带

    H:\Hexo\themes\yilia\source\js\ribbon.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    /**
     * Copyright (c) 2016 hustcc
     * License: MIT
     * Version: v1.0.1
     * GitHub: https://github.com/hustcc/ribbon.js
    **/
    /*jshint -W030 */
    ! function() {
      function attr(node, attr, default_value) {
        return Number(node.getAttribute(attr)) || default_value;
      }

      // get user config
      var scripts = document.getElementsByTagName('script'),
        script = scripts[scripts.length - 1]; // 当前加载的script
      config = {
        z: attr(script, "zIndex", -1), // z-index
        a: attr(script, "alpha", 0.6), // alpha
        s: attr(script, "size", 90), // size
      };

      var canvas = document.createElement('canvas'),
        g2d = canvas.getContext('2d'),
        pr = window.devicePixelRatio || 1,
        width = window.innerWidth,
        height = window.innerHeight,
        f = config.s,
        q, t,
        m = Math,
        r = 0,
        pi = m.PI*2,
        cos = m.cos,
        random = m.random;
      canvas.width = width * pr;
      canvas.height = height * pr;
      g2d.scale(pr, pr);
      g2d.globalAlpha = config.a;
      canvas.style.cssText = 'opacity: ' + config.a + ';position:fixed;top:0;left:0;z-index: ' + config.z + ';width:100%;height:100%;pointer-events:none;';
      // create canvas
      document.getElementsByTagName('body')[0].appendChild(canvas);

      function redraw() {
        g2d.clearRect(0, 0, width, height);
        q = [{x: 0, y: height * 0.7 + f}, {x: 0, y: height * 0.7 - f}];
        while(q[1].x < width + f) draw(q[0], q[1]);
      }
      function draw(i, j) {
        g2d.beginPath();
        g2d.moveTo(i.x, i.y);
        g2d.lineTo(j.x, j.y);
        var k = j.x + (random()*2-0.25)*f, n = line(j.y);
        g2d.lineTo(k, n);
        g2d.closePath();
        r -= pi / -50;
        g2d.fillStyle = '#'+(cos(r)*127+128<<16 | cos(r+pi/3)*127+128<<8 | cos(r+pi/3*2)*127+128).toString(16);
        g2d.fill();
        q[0] = q[1];
        q[1] = {x: k, y: n};
      }
      function line(p){
        t = p + (random() * 2 - 1.1) * f;
        return (t > height || t < 0) ? line(p) : t;
      }

      document.onclick = redraw;
      document.ontouchstart = redraw;
      redraw();
    }();

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    5
    <!--彩带1.点击自动替换彩带-->
    <% if (theme.ribbon){ %>
        <!-- <script src="https://g.joyinshare.com/hc/ribbon.min.js" type="text/javascript"></script> -->
        <script type="text/javascript" src="/js/ribbon.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    3
    # https://github.com/hustcc/ribbon.js
    # 彩带1.点击自动替换彩带
    ribbon: false

    file

    彩带2.自动飘动

    H:\Hexo\themes\yilia\source\js\ribbon_flow.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    (function (name, factory) {
        if (typeof window === "object") {
            window[name] = factory()
        }
    })("Ribbons", function () {
        var _w = window,
            _b = document.body,
            _d = document.documentElement;
        var random = function () {
            if (arguments.length === 1) {
                if (Array.isArray(arguments[0])) {
                    var index = Math.round(random(0, arguments[0].length - 1));
                    return arguments[0][index]
                }
                return random(0, arguments[0])
            } else if (arguments.length === 2) {
                return Math.random() * (arguments[1] - arguments[0]) + arguments[0]
            }
            return 0
        };
        var screenInfo = function (e) {
            var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0),
                height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0),
                scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0),
                scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0);
            return {
                width: width,
                height: height,
                ratio: width / height,
                centerx: width / 2,
                centery: height / 2,
                scrollx: scrollx,
                scrolly: scrolly
            }
        };
        var mouseInfo = function (e) {
            var screen = screenInfo(e),
                mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0,
                mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0;
            return {
                mousex: mousex,
                mousey: mousey,
                centerx: mousex - screen.width / 2,
                centery: mousey - screen.height / 2
            }
        };
        var Point = function (x, y) {
            this.x = 0;
            this.y = 0;
            this.set(x, y)
        };
        Point.prototype = {
            constructor: Point,
            set: function (x, y) {
                this.x = x || 0;
                this.y = y || 0
            },
            copy: function (point) {
                this.x = point.x || 0;
                this.y = point.y || 0;
                return this
            },
            multiply: function (x, y) {
                this.x *= x || 1;
                this.y *= y || 1;
                return this
            },
            divide: function (x, y) {
                this.x /= x || 1;
                this.y /= y || 1;
                return this
            },
            add: function (x, y) {
                this.x += x || 0;
                this.y += y || 0;
                return this
            },
            subtract: function (x, y) {
                this.x -= x || 0;
                this.y -= y || 0;
                return this
            },
            clampX: function (min, max) {
                this.x = Math.max(min, Math.min(this.x, max));
                return this
            },
            clampY: function (min, max) {
                this.y = Math.max(min, Math.min(this.y, max));
                return this
            },
            flipX: function () {
                this.x *= -1;
                return this
            },
            flipY: function () {
                this.y *= -1;
                return this
            }
        };
        var Factory = function (options) {
            this._canvas = null;
            this._context = null;
            this._sto = null;
            this._width = 0;
            this._height = 0;
            this._scroll = 0;
            this._ribbons = [];
            this._options = {
                colorSaturation: "80%",
                colorBrightness: "60%",
                colorAlpha: 0.65,
                colorCycleSpeed: 6,
                verticalPosition: "center",
                horizontalSpeed: 150,
                ribbonCount: 5,
                strokeSize: 5,
                parallaxAmount: -0.5,
                animateSections: true
            };
            this._onDraw = this._onDraw.bind(this);
            this._onResize = this._onResize.bind(this);
            this._onScroll = this._onScroll.bind(this);
            this.setOptions(options);
            this.init()
        };
        Factory.prototype = {
            constructor: Factory,
            setOptions: function (options) {
                if (typeof options === "object") {
                    for (var key in options) {
                        if (options.hasOwnProperty(key)) {
                            this._options[key] = options[key]
                        }
                    }
                }
            },
            init: function () {
                try {
                    this._canvas = document.createElement("canvas");
                    this._canvas.style["display"] = "block";
                    this._canvas.style["position"] = "fixed";
                    this._canvas.style["margin"] = "0";
                    this._canvas.style["padding"] = "0";
                    this._canvas.style["border"] = "0";
                    this._canvas.style["outline"] = "0";
                    this._canvas.style["left"] = "0";
                    this._canvas.style["top"] = "0";
                    this._canvas.style["width"] = "100%";
                    this._canvas.style["height"] = "100%";
                    this._canvas.style["z-index"] = "-1";
                    this._onResize();
                    this._context = this._canvas.getContext("2d");
                    this._context.clearRect(0, 0, this._width, this._height);
                    this._context.globalAlpha = this._options.colorAlpha;
                    window.addEventListener("resize", this._onResize);
                    window.addEventListener("scroll", this._onScroll);
                    document.body.appendChild(this._canvas)
                } catch (e) {
                    console.warn("Canvas Context Error: " + e.toString());
                    return
                }
                this._onDraw()
            },
            addRibbon: function () {
                var dir = Math.round(random(1, 9)) > 5 ? "right" : "left",
                    stop = 1000,
                    hide = 200,
                    min = 0 - hide,
                    max = this._width + hide,
                    movex = 0,
                    movey = 0,
                    startx = dir === "right" ? min : max,
                    starty = Math.round(random(0, this._height));
                if (/^(top|min)$/i.test(this._options.verticalPosition)) {
                    starty = 0 + hide
                } else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
                    starty = this._height / 2
                } else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
                    starty = this._height - hide
                }
                var ribbon = [],
                    point1 = new Point(startx, starty),
                    point2 = new Point(startx, starty),
                    point3 = null,
                    color = Math.round(random(0, 360)),
                    delay = 0;
                while (true) {
                    if (stop <= 0) break;
                    stop--;
                    movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed);
                    movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25));
                    point3 = new Point();
                    point3.copy(point2);
                    if (dir === "right") {
                        point3.add(movex, movey);
                        if (point2.x >= max) break
                    } else if (dir === "left") {
                        point3.subtract(movex, movey);
                        if (point2.x <= min) break
                    }
                    ribbon.push({
                        point1: new Point(point1.x, point1.y),
                        point2: new Point(point2.x, point2.y),
                        point3: point3,
                        color: color,
                        delay: delay,
                        dir: dir,
                        alpha: 0,
                        phase: 0
                    });
                    point1.copy(point2);
                    point2.copy(point3);
                    delay += 4;
                    color += this._options.colorCycleSpeed
                }
                this._ribbons.push(ribbon)
            },
            _drawRibbonSection: function (section) {
                if (section) {
                    if (section.phase >= 1 && section.alpha <= 0) {
                        return true
                    }
                    if (section.delay <= 0) {
                        section.phase += 0.02;
                        section.alpha = Math.sin(section.phase) * 1;
                        section.alpha = section.alpha <= 0 ? 0 : section.alpha;
                        section.alpha = section.alpha >= 1 ? 1 : section.alpha;
                        if (this._options.animateSections) {
                            var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1;
                            if (section.dir === "right") {
                                section.point1.add(mod, 0);
                                section.point2.add(mod, 0);
                                section.point3.add(mod, 0)
                            } else {
                                section.point1.subtract(mod, 0);
                                section.point2.subtract(mod, 0);
                                section.point3.subtract(mod, 0)
                            }
                            section.point1.add(0, mod);
                            section.point2.add(0, mod);
                            section.point3.add(0, mod)
                        }
                    } else {
                        section.delay -= 0.5
                    }
                    var s = this._options.colorSaturation,
                        l = this._options.colorBrightness,
                        c = "hsla(" + section.color + ", " + s + ", " + l + ", " + section.alpha + " )";
                    this._context.save();
                    if (this._options.parallaxAmount !== 0) {
                        this._context.translate(0, this._scroll * this._options.parallaxAmount)
                    }
                    this._context.beginPath();
                    this._context.moveTo(section.point1.x, section.point1.y);
                    this._context.lineTo(section.point2.x, section.point2.y);
                    this._context.lineTo(section.point3.x, section.point3.y);
                    this._context.fillStyle = c;
                    this._context.fill();
                    if (this._options.strokeSize > 0) {
                        this._context.lineWidth = this._options.strokeSize;
                        this._context.strokeStyle = c;
                        this._context.lineCap = "round";
                        this._context.stroke()
                    }
                    this._context.restore()
                }
                return false
            },
            _onDraw: function () {
                for (var i = 0, t = this._ribbons.length; i < t; ++i) {
                    if (!this._ribbons[i]) {
                        this._ribbons.splice(i, 1)
                    }
                }
                this._context.clearRect(0, 0, this._width, this._height);
                for (var a = 0; a < this._ribbons.length; ++a) {
                    var ribbon = this._ribbons[a],
                        numSections = ribbon.length,
                        numDone = 0;
                    for (var b = 0; b < numSections; ++b) {
                        if (this._drawRibbonSection(ribbon[b])) {
                            numDone++
                        }
                    }
                    if (numDone >= numSections) {
                        this._ribbons[a] = null
                    }
                }
                if (this._ribbons.length < this._options.ribbonCount) {
                    this.addRibbon()
                }
                requestAnimationFrame(this._onDraw)
            },
            _onResize: function (e) {
                var screen = screenInfo(e);
                this._width = screen.width;
                this._height = screen.height;
                if (this._canvas) {
                    this._canvas.width = this._width;
                    this._canvas.height = this._height;
                    if (this._context) {
                        this._context.globalAlpha = this._options.colorAlpha
                    }
                }
            },
            _onScroll: function (e) {
                var screen = screenInfo(e);
                this._scroll = screen.scrolly
            }
        };
        return Factory
    });
    new Ribbons({
        colorSaturation: "60%",
        colorBrightness: "50%",
        colorAlpha: 0.5,
        colorCycleSpeed: 5,
        verticalPosition: "random",
        horizontalSpeed: 200,
        ribbonCount: 3,
        strokeSize: 0,
        parallaxAmount: -0.2,
        animateSections: true
    });

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    5
    <!--彩带2.自动飘动-->
    <% if (theme.ribbon_flow){ %>
        <!-- <script src="https://g.joyinshare.com/hc/piao.js" type="text/javascript"></script> -->
        <script type="text/javascript" src="/js/ribbon_flow.js"></script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 彩带2.自动飘动
    ribbon_flow: false

    代码雨

    存在问题：位置不对

    H:\Hexo\themes\yilia\source\js\code_rain.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    window.onload = function(){
        //获取画布对象
        var canvas = document.getElementById("code_rain_canvas");
        //获取画布的上下文
        var context =canvas.getContext("2d");
        var s = window.screen;
        var W = canvas.width = s.width;
        var H = canvas.height;
        //获取浏览器屏幕的宽度和高度
        //var W = window.innerWidth;
        //var H = window.innerHeight;
        //设置canvas的宽度和高度
        canvas.width = W;
        canvas.height = H;
        //每个文字的字体大小
        var fontSize = 12;
        //计算列
        var colunms = Math.floor(W /fontSize);
        //记录每列文字的y轴坐标
        var drops = [];
        //给每一个文字初始化一个起始点的位置
        for(var i=0;i<colunms;i++){
            drops.push(0);
        }
        //运动的文字
        var str ="WELCOME TO WWW.ITRHX.COM";
        //4:fillText(str,x,y);原理就是去更改y的坐标位置
        //绘画的函数
        function draw(){
            context.fillStyle = "rgba(238,238,238,.08)";//遮盖层
            context.fillRect(0,0,W,H);
            //给字体设置样式
            context.font = "600 "+fontSize+"px  Georgia";
            //给字体添加颜色
            context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)];//randColor();可以rgb,hsl, 标准色，十六进制颜色
            //写入画布中
            for(var i=0;i<colunms;i++){
                var index = Math.floor(Math.random() * str.length);
                var x = i*fontSize;
                var y = drops[i] *fontSize;
                context.fillText(str[index],x,y);
                //如果要改变时间，肯定就是改变每次他的起点
                if(y >= canvas.height && Math.random() > 0.99){
                    drops[i] = 0;
                }
                drops[i]++;
            }
        };
        function randColor(){//随机颜色
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb("+r+","+g+","+b+")";
        }
        draw();
        setInterval(draw,35);
    };

    H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!--代码雨-->
    <% if (theme.code_rain){ %>
          <!-- 数字雨 -->
          <canvas id="code_rain_canvas" width="1440" height="900"></canvas>
          <script type="text/javascript" src="/js/code_rain.js">
            <style>
                #code_rain_canvas {
                  position: fixed;
                  right: 0px;
                  bottom: 0px;
                  min-width: 100%;
                  min-height: 100%;
                  height: auto;
                  width: auto;
                  z-index: 4;
                }
            </style>
        </script>
    <% } %>

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    # 代码雨
    code_rain: true

    file

    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia添加背景图片 + + /article/72a91df5.html + + 添加背景图片，效果图：

    file

    注：因为有博客不是修改时写的，部分代码没有进行备份，所以有些只能从git中获取代码，有些可能有点乱。

    同时因为每个人选的背景图片可能有所不同，主体颜色可能差异很大，需要调整的颜色可能比较多，这篇博客仅供参考，请自行选择是否替换背景。

    1.左侧边栏

    取消上半部分的背景颜色

    ：themes/yilia/layout/_partial/left-col.ejs，如下：这是掉上面的一行代码，使用下面的

    1
    2
    3
    <!-- <div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"> -->
    <!-- 左侧边栏（上半部分）不设置背景颜色 -->
    <div class="overlay" >

    添加背景图片

    H:\Hexo\themes\yilia\source\main.0cf68a.css，注释掉原有的背景颜色，添加照片：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .left-col {
        /* background:#fff; */
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url('http://bucket836.oss-cn-shenzhen.aliyuncs.com/wallpaper/381535373.jpeg') no-repeat 0% 20%/ cover;
        width:300px;
        position:fixed;
        opacity:1;
        transition:all .3s ease-in;
        -ms-transition: all .3s ease-in;
        height:100%;
        z-index:999
    }

    根据背景图片修改字体颜色（这步可以自定义），我是将color:#696969改成color:#673ab7:git

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     .left-col #header a {
    -    color:#696969
    +    color:#673ab7^M
     }
     .left-col #header a:hover {
    -    color:#b0a0aa
    +    color: #03A9F4^M
     }
     .left-col #header .header-subtitle {
         text-align:center;
    -    color:#999;
    +    color:#673ab7;
         font-size:18px;

    2.右边的文章

    调整背景颜色为透明

    主要是将白色背景变成透明的，background:#fff;–>background: rgba(255,255,255,.5);调整后Git

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     .article {
    -    margin:30px;
    -    position:relative;
    -    border:1px solid #ddd;
    -    border-top:1px solid #fff;
    -    border-bottom:1px solid #fff;
    -    background:#fff;
    -    /* background: rgba(255,255,255,.5); */
    -    transition:all .2s ease-in
    +    margin: 30px;^M
    +    border: 1px solid #ddd;^M
    +    border-top: 1px solid #fff;^M
    +    border-bottom: 1px solid #fff;^M
    +    background: rgba(255,255,255,.5);^M
    +    transition: all .2s ease-in^M
     }

    即：

    1
    2
    3
    4
    5
    6
    7
    8
    .article {
        margin: 30px;
        border: 1px solid #ddd;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        background: rgba(255,255,255,.5);
        transition: all .2s ease-in
    }

    3.添加背景图片

    将白色background-color:#fff;替换为照片：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    body {
        margin:0;
        font-size:14px;
        font-family:Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
        line-height:1.5;
        color:#333;
        /* background-color:#fff; */
        min-height:100%;
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
        url('https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/00/ChMkJlbKw6KIXhXnAA4L-_oxRzUAALG6QBUSg8ADgwT181.jpg') no-repeat 0% 0%/ cover;
    }

    /* 手机端换用一张背景图片，可以不使用 */
    @media screen and (max-width:800px) {
        body {
    background: url('https://oss.yansheng.xyz/your-name-phone2ys.jpg') no-repeat fixed top;
        }

    效果：

    file

    4.微调

    4.1调整评论区背景

    原来为白色，现在改为透明。

    file

    先将之前定义在H:\Hexo\themes\yilia\layout\_partial\article.ejs的样式统一放到H:\Hexo\themes\yilia\source\main.0cf68a.css，如下git diff

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     <!-- 《valine评论 -->
     <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
         <section id="comments" class="comments">
    -      <style>
    -        .comments{margin:30px;padding:10px;background:#fff}
    -        @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
    -      </style>
    +
           <%- partial('post/valine', {
             key: post.slug,
             title: post.title,

    在最后面添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    /* 《评论框 */
    .comments {
        margin:30px;
        padding:10px;
        /* background:#fff */
        background: rgba(255,255,255,.5);
    }
    @media screen and (max-width:800px) {
        .comments {
            margin:auto;
            padding:10px;
            /* background:#fff */
            background: rgba(255,255,255,.5);
        }
    }

    /* valine的背景颜色 */
    #vcomment{
    /* background:#fff */
        background: rgba(255,255,255,.9);
    }

    /* 设置valine占位符的颜色 */
    #vcomment :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #979292; 
    }
    #vcomment ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #979292;
    }
    #vcomment input:-ms-input-placeholder, #vcomment textarea:-ms-input-placeholder {
        color: #979292;
    }
    #vcomment input::-webkit-input-placeholder,#vcomment textarea::-webkit-input-placeholder {
        color: #979292;
    }
    /* 评论框》 */

    效果：

    file

    参考：html中怎么设定input的占位符字体颜色

    4.2调整归档背景

    之前调整的文章背景透明好像没有影响到这个：

    file

    进行调整：

    1
    2
    3
    4
    5
    6
    7
    8
    .archives-wrap {
        position:relative;
        margin:0 30px;
        padding-right:60px;
        border-bottom:1px solid #eee;
        /* background:#fff */
        background: rgba(255,255,255,.5);
    }

    调整日期颜色

    1
    2
    3
    4
    .article-meta time {
        /* color:#aaa */
        color: #2f2d2a;
    }

    日期时间大小

    1
    2
    3
    4
    5
    6
    7
    .archive-article-inner .article-meta .archive-article-date {
        cursor:default;
        font-size:15px;
        margin-bottom:5px;
        margin-top:-10px;
        margin-right:0
    }

    微调归档页面的标题样式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /* 丢弃之前的 */
    .archives .archive-article-title {
        font-size: 16px;
        color: #333;
        transition: color .3s
    }
    /* 修改： */
    /* 分类页面的标题 */
    .archives .archive-article-title {
        font-size:20px;
        /* color:#333; */
        transition:color .3s
    }
    .archives .archive-article-title:hover {
        /* color:#657b83 */
    }

    因为将右边栏的超链接都统一进行了设置，如果不需要特效，可以通过下面的代码取消超链接的下划线样式：

    1
    2
    3
     a.share-outer:hover::after {
        transform: scaleX(0);
    }

    4.3主页的文章块的日期取消超链接样式

    日期和文章统计数样式

    原：

    1
    2
    3
    4
    5
    .archive-article-date {
        color:#999;
        margin-right:7.6923%;
        float:right
    }

    修改后：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /* 日期栏（如果是文章还包含卜算子的页面访问量） */
    .archive-article-date {
        /* color:#0087ca; */
        color:#4b4949;
        margin-right:7.6923%;
        float:right
    }
    /* 日期 */
    .archive-article-date time{
        color:#4b4949;
    }
    /* 日期同一行的文章阅读数量 */
    .archive-article-date[id=busuanzi_container_page_pv] {
        color:#4b4949;
    }

    主页的“展开全文”按钮样式：受全局超链接样式影响，悬浮后，会变成红色。处理：提前加一个悬浮，掩盖全局的：

    1
    2
    3
    4
    /* 防止鼠标悬浮时，变色，因为会被全局的超链接样式影响 */
     .article-more-link a:hover{
        color:#fff;
    }

    前一页后一页：去掉悬浮的样式，可以直接注释掉：

    1
    2
    3
    #article-nav .article-nav-link-wrap:hover .article-nav-title, #article-nav .article-nav-link-wrap:hover i {
        /* color:#4d4d4d */
    }

    标签按钮：受全局超链接样式影响，悬浮后，会变成红色。处理：提前加一个悬浮，掩盖全局的：

    1
    2
    3
    4
     .tagcloud a:hover {
    +    color:#fff;^M
         opacity:.8
     }

    4.4手机端头部背景颜色

    H:\Hexo\themes\yilia\layout\_partial\mobile-nav.ejs取消内嵌样式，在全局css中进行设置：

    1
    2
    <!--<div class="overlay js-overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"></div>-->
    <div class="overlay js-overlay"></div>

    H:\Hexo\themes\yilia\source\main.0cf68a.css设置成渐变：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #mobile-nav .overlay {
        height:110px;
        position:absolute;
        width:100%;
        z-index:2;
         /* 渐变：浅绿色变淡蓝色 */
        background-image: linear-gradient(#8fecc5,#0badf7);
        /* 浏览器不支持渐变时显示默认颜色 */
        background-color: #4d4d4d;
    }

    效果图：

    file

    4.5鼠标图片

    去网上找一种鼠标指针的图片，用图片替换默认的鼠标样式：cursor:url('url'), default;，default表示：如果图片不起效，就是用默认的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    body {
        margin:0;
        font-size:14px;
        font-family:Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
        line-height:1.5;
        color:#333;
        /* background-color:#fff; */
        min-height:100%;
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
            url('https://oss.yansheng.xyz/wallpaper/qinshimingyue.jpg') no-repeat 0% 0%/ cover;
        cursor:url('https://oss.yansheng.xyz/ico/favicon-2019110906554413.ico'), default;
    }

    /* 因为超链接默认情况下是：cursor: pointer; 显示为手，这里进行设置 */
    a {
        cursor:url('https://oss.yansheng.xyz/ico/favicon-2019110906554413.ico'), default;
    }

    4.6行内代码、引用块的背景颜色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
     .article-entry li code, .article-entry p code {
        color: #c7254e;
        /* background-color: #f9f2f4; */
        background-color: rgba(249, 242, 244, .7);
        border-radius: 2px;
        padding:2px 4px;
        margin:0 3px;
        /* background:#ddd; */
        /* border:2px solid #ccc; */
        font-family:Menlo, Monaco, Andale Mono, lucida console, Courier New, monospace;
        word-wrap:break-word;
        /* font-size:14px */
    }
    .article-entry blockquote {
        background:#ddd;
        border-left:5px solid #ccc;
        padding:15px 20px;
        margin-top:10px;
        border-left:5px solid #657b83;
        /* background:#f6f6f6; */
        background: rgba(246, 246, 246, .7);
        /* 如果超长，自动截断 */
        word-wrap:break-word;
        word-break:break-all;
    }
    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia添加隐藏左边栏目按钮 + + /article/31bbdc67.html + + 效果图：
    file

    点击按钮时，缩进左侧边栏，再次点击再弹出来。

    添加隐藏左边栏目按钮

    参考：添加隐藏左边栏目按钮

    下面为引用内容：

    折腾了一个下午,终于把隐藏左边侧边栏目的效果实现了. 实现了点击按钮隐藏侧边栏, 查找和修改源码实在是太麻烦了.

    制作按钮样式

    先找一款你喜欢的CSS菜单按钮切换,或者自己实现一个,我在网上找到一款比较简单的样式,稍微做了下修改.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    .mymenucontainer {
    display:block;
    cursor:pointer;
    left:0;
    top:0;
    width:35px;
    height:35px;
    z-index:9999;
    position:fixed;
    }
    .bar1 {
    width:35px;
    height:3px;
    background-color:#333;
    margin:6px 0;
    transition:0.4s;
    -webkit-transform:rotate(-45deg) translate(-8px,8px);
    transform:rotate(-45deg) translate(-8px,8px);
    }
    .bar2 {
    width:35px;
    height:3px;
    background-color:#333;
    margin:6px 0;
    transition:0.4s;
    opacity:0;
    }
    .bar3 {
    width:35px;
    height:3px;
    background-color:#333;
    margin:6px 0;
    transition:0.4s;
    -webkit-transform:rotate(45deg) translate(-4px,-6px);
    transform:rotate(45deg) translate(-4px,-6px);
    }
    .change .bar1 {
    -webkit-transform:rotate(0deg) translate(0px,0px);
    transform:rotate(0deg) translate(0px,0px);
    }
    .change .bar2 {
    opacity:1;
    }
    .change .bar3 {
    -webkit-transform:rotate(0deg) translate(0px,0px);
    transform:rotate(0deg) translate(0px,0px);
    }

    样式制作完成后,压缩,然后添加进\themes\yilia\source\main.0cf68a.css文件中,添加在最前面即可

    添加按钮到相应的位置

    打开\themes\yilia\layout\layout.ejs文件, 找到<div class="left-col",在其上面添加如下代码:

    1
    2
    3
    4
    5
    <div class="mymenucontainer" onclick="myFunction(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>

    在</body>之后, </html>前添加如下Js代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <script>
        var hide = false;
        function myFunction(x) {
            x.classList.toggle("change");
            if(hide == false){
                $(".left-col").css('display', 'none');
                $(".mid-col").css("left", 6);
                $(".tools-col").css('display', 'none');
                $(".tools-col.hide").css('display', 'none');
                hide = true;
            }else{
                $(".left-col").css('display', '');
                $(".mid-col").css("left", 300);
                $(".tools-col").css('display', '');
                $(".tools-col.hide").css('display', '');
                hide = false;
            }
        }
    </script>

    重新生成文件,部署即可看到效果, 可以看看我的博客效果

    效果图：
    file

    引用结束

    结合我的配置进行修改

    因为我的左侧边栏添加了心知天气（如下图），所以按钮不能放在一起，因此进行了修改：
    file

    修改位置

    主要变化：修改按钮位置，移到右边：left: 260px;，修改bar1,bar2,bar3的颜色：background-color: #0087ca;：修改文件：H:\Hexo\themes\yilia\source\main.0cf68a.css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .mymenucontainer {
      display: block;
      cursor: pointer;
      left: 260px;  /*原来： left:0; */
      top: 0;
      width: 35px;
      height: 35px;
      z-index: 9999;
      position: fixed;
    }
    .bar1 {
      width: 35px;
      height: 3px;
      background-color: #0087ca;  /*原来： background-color:#333; */
      margin: 6px 0;
      transition: 0.4s;
      -webkit-transform: rotate(-45deg) translate(-8px, 8px);
      transform: rotate(-45deg) translate(-8px, 8px);
    }

    事件响应

    因为修改了图标位置，事件响应时也要对应修改位置：缩小后设置为$(".mymenucontainer").css('left', '0');,展开：$(".mymenucontainer").css('left', '260px');。
    修改文件：H:\Hexo\themes\yilia\layout\layout.ejs

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    </body>

    <!-- 《添加折叠按钮脚本 -->
    <script>
        var hide = false;
        function myFunction(x) {
            x.classList.toggle("change");
            if(hide == false){
                $(".left-col").css('display', 'none');
                $(".mid-col").css("left", 6);
                $(".tools-col").css('display', 'none');
                $(".tools-col.hide").css('display', 'none');
                hide = true;

                $(".mymenucontainer").css('left', '0');

            }else{
                $(".left-col").css('display', '');
                $(".mid-col").css("left", 300);
                $(".tools-col").css('display', '');
                $(".tools-col.hide").css('display', '');
                hide = false;

                $(".mymenucontainer").css('left', '260px');
            }
        }
    </script>
    <!-- 添加折叠按钮脚本》 -->

    </html>

    响应式：手机端隐藏按钮

    手机端(当页面变小时)隐藏按钮：修改文件：H:\Hexo\themes\yilia\source\main.0cf68a.css，找到@media screen and (max-width:800px)下面的内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    @media screen and (max-width:800px) {
        #container, body, html {
            height:auto;
            overflow-x:hidden;
            overflow-y:auto
        }
        #mobile-nav {
            display:block
        }
        .body-wrap {
            margin-bottom:0
        }
        .left-col{
            display:none
        }
    }

    在.left-col中添加一个按钮的标签：

    1
    2
    3
    .left-col,.mymenucontainer {
        display:none
    }

    效果图：
    file

    🐛

    有个小问题：在PC端进行测试时，如果先尝试缩放，然后返回再展开，直接测试手机端，就会出现问题：按钮仍然撑开界面；但是如果进到页面直接测试手机端就不会这种问题（或者是在缩放后进行测试也不会影响）。
    因为这个问题好像影响不是很大，就不深入了。

    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia添加“心知天气” + + /article/cd4e4c1.html + + 添加“心知天气”
    file

    參考：https://letmequadrakill.github.io/post/843b0170.html#more

    1.注册账号，设置天气样式：

    官网：https://www.seniverse.com/widgetv3，需要先注册账号，然后选择样式，如下：

    file

    生成js代码，复制代码，如下（我的免费版的代码）:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <div id="tp-weather-widget"></div>
    <script>
        (function(a, h, g, f, e, d, c, b) {
            b = function() {
                d = h.createElement(g);
                c = h.getElementsByTagName(g)[0];
                d.src = e;
                d.charset = "utf-8";
                d.async = 1;
                c.parentNode.insertBefore(d, c)
            };
            a["SeniverseWeatherWidgetObject"] = f;
            a[f] || (a[f] = function() {
                (a[f].q = a[f].q || []).push(arguments)
            });
            a[f].l = +new Date();
            if (a.attachEvent) {
                a.attachEvent("onload", b)
            } else {
                a.addEventListener("load", b, false)
            }
        }(window, document, "script", "SeniverseWeatherWidget", "//cdn.sencdn.com/widget2/static/js/bundle.js"));
        window.SeniverseWeatherWidget('show', {
            flavor: "slim",
            location: "WS06YNEMPP18",
            geolocation: true,
            language: "zh-Hans",
            unit: "c",
            theme: "auto",
            token: "a579c7ea-507d-41d7-b578-3537882d20c2",
            hover: "enabled",
            container: "tp-weather-widget"
        })
    </script>

    以下是复制的另一个人的代码，可能是升级版的(感觉效果很不错，就用了这个，可能会出现问题，因为应该是用他的秘钥，要是他修改你就会变)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <!-- 《添加“心知天气”-->
    <div id="tp-weather-widget"></div>
    <script>
            (function(T, h, i, n, k, P, a, g, e) {
                g = function() {
                    P = h.createElement(i);
                    a = h.getElementsByTagName(i)[0];
                    P.src = k;
                    P.charset = "utf-8";
                    P.async = 1;
                    a.parentNode.insertBefore(P, a)
                };
                T["ThinkPageWeatherWidgetObject"] = n;
                T[n] || (T[n] = function() {
                    (T[n].q = T[n].q || []).push(arguments)
                });
                T[n].l = +new Date();
                if (T.attachEvent) {
                    T.attachEvent("onload", g)
                } else {
                    T.addEventListener("load", g, false)
                }
            }(window, document, "script", "tpwidget", "//widget.thinkpage.cn/widget/chameleon.js"))
        </script>
        <script>
            tpwidget("init", {
                "flavor": "slim",
                "location": "WM6N2PM3WY2K",
                "geolocation": "enabled",
                "language": "zh-chs",
                "unit": "c",
                "theme": "chameleon",
                "container": "tp-weather-widget",
                "bubble": "enabled",
                "alarmType": "badge",
                "color": "#FFFFFF",
                "uid": "U88B4B2797",
                "hash": "c9d7cb43b80ffece52c9a1ebbfbca65f"
            });
            tpwidget("show");
        </script>
    <!-- 添加“心知天气”》-->

    2.添加到左侧边栏

    修改themes/yilia/layout/_partial/left-col.ejs，将上面的js代码添加到指定位置，位置如下：

    1
    2
    3
    4
    5
    6
    <div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>">

    <!-- 添加“心知天气”-->

    </div>
    <div class="intrude-less">

    3.设置成方便开启和关闭的形式

    如果主题中开启了这个设置，才开启这个功能：

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- 《添加“心知天气”-->
    <% if(theme.xinzhi_weather){ %>
    <div id="tp-weather-widget"></div>
    ……
            tpwidget("show");
        </script>
    <% } %>
    <!-- 添加“心知天气”》-->

    themes/yilia/_config.yml中添加如下配置：

    1
    2
    # 心知天气(如果不用为false):https://www.seniverse.com
    xinzhi_weather: true
    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia测试新的渲染引擎和表情 + + /article/47e1ef2d.html + + 测试表情（emoji）🤔和hexo渲染器（hexo-renderer-markdown-it）。

    表情

    正常文本间的表情

    看在文字间的情况🤔看在文字间的情况

    看在文字间的情况🛩看在文字间的情况

    引用块中的表情

    🤒

    📑

    标题中的表情📝

    常用表情网站汇总

    1.速度较快的：https://emoji.muan.co/
    file

    2.较慢的：https://www.webfx.com/tools/emoji-cheat-sheet/
    file

    3.专门用于github的提交的：https://gitmoji.carloscuesta.me/
    file

    hexo渲染器

    测试HTML

    1
    <div>这是div</div>
    这是div

    测试换行

    1
    2
    换行<br>
    换行

    换行

    换行

    测试相同标题

    测试相同标题

    查看相同标题的id是否重复，理论上会添加’-v2’ '-v3’等后缀。

    测试有序列表

    1
    2
    3
    4
    1. 11111
    2. 22222
    3. 33333
    1. 11111 # 这个能够正确处理
    1. 11111
    2. 22222
    3. 33333
    4. 11111

    注意list后面不能有空行，不然会出现问题：序号占一行，然后内容从下一行开始

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 空行的情况
    1. 1111

    2. 2222

    # 处理后
    1.
    1111

    2.
    2222

    测试无序列表

    • 无序列表
    • 无序列表
      • 第二层
      • 第二层
        • 第三层
        • 第三层
      • 第二层

    测试选择框

    • [x] 选择框：好像有问题
    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia替换渲染引擎，支持emoji表情 + + /article/b902694c.html + + Hexo默认是采用hexo-renderer-marked渲染器将markdown渲染成HTML，这个渲染器不支持插件扩展，因此不能支持表情；还有一个支持插件扩展的是 hexo-renderer-markdown-it，所以我们可以使用这个渲染引擎来支持emoji表情。

    就比如这样的表情：😁😂🤣🍱，更多可参考：测试新的渲染引擎和表情

    替换渲染引擎，支持emoji表情

    参考：https://segmentfault.com/a/1190000009478837#articleHeader5

    如何让markdown可以解析emoji呢？实际上我们发现，在编辑器中输入 :blush: 并没有表情出现，是为什么呢？ 这是markdown渲染引擎的问题 。
    Hexo默认是采用hexo-renderer-marked,这个渲染器不支持插件扩展，当然就不行了，还有一个支持插件扩展的是 hexo-renderer-markdown-it（github：https://github.com/hexojs/hexo-renderer-markdown-it），所以我们可以使用这个渲染引擎来支持emoji表情，具体实现过程如下：

    • 更换渲染器
      进入blog跟目录，执行如下命令
    1
    2
    npm un hexo-renderer-marked --save
    npm i hexo-renderer-markdown-it --save
    • 安装emoji插件，执行如下命令
    1
    npm install markdown-it-emoji --save
    • 编辑站点配置文件
      就是编辑根目录的_config.yml文件，添加如下内容

    配置H:\Hexo\_config.yml：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    # Markdown-it config
    ## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
    markdown:
      render:
        html: true          # 是否对HTML标签进行解析，false时HTML将按照原样输出
        xhtmlOut: false     # 是否需要满足严格的XHTML格式，换行为<br />
        breaks: true
        linkify: true
        typographer: true
        quotes: '“”‘’'
      plugins:
        - markdown-it-abbr
        - markdown-it-footnote
        - markdown-it-ins
        - markdown-it-sub
        - markdown-it-sup
        - markdown-it-emoji  # add emoji
      anchors:
        # Minimum level for ID creation. (Ex. h2 to h6)
        level: 2
        # A suffix that is prepended to the number given if the ID is repeated.
        collisionSuffix: 'v'
        # If `true`, creates an anchor tag with a permalink besides the heading.
        permalink: false
        # Class used for the permalink anchor tag.
        permalinkClass: header-anchor
        # The symbol used to make the permalink
        permalinkSymbol:

    更近一步

    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia添加添加robots配置 + + /article/ae673bea.html + + 介绍

    robots是网站跟爬虫间的协议，用简单直接的txt格式文本方式告诉对应的爬虫被允许的权限，也就是说robots.txt是搜索引擎中访问网站的时候要查看的第一个文件。当一个搜索蜘蛛访问一个站点时，它会首先检查该站点根目录下是否存在robots.txt，如果存在，搜索机器人就会按照该文件中的内容来确定访问的范围；如果该文件不存在，所有的搜索蜘蛛将能够访问网站上所有没有被口令保护的页面。

    配置

    该配置可以管理我们想要搜索引擎爬取的内容，Allow表示允许被访问的，Disallow是不允许的意思。注意后面两个Sitemap就是网站地图了。而网站地图前面说了是给爬虫用的。这里配置在robots中。可参考如下配置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    # 允许所有用户代理的浏览器爬虫进行访问（爬起数据）
    User-agent: *

    # 允许访问的内容
    Allow: /
    Allow: /2019/
    Allow: /archives/
    Allow: /categories/
    Allow: /2019/
    Allow: /page/
    Allow: /photos/
    Allow: /tags/

    # 不允许访问的内容
    Disallow: /assets/
    Disallow: /fonts/
    Disallow: /img/
    Disallow: /js/
    Disallow: /music/
    Disallow: /css/

    Disallow: /*.js
    Disallow: /*.css

    # 网站地图Sitemap
    Sitemap: https://www.yansheng.xyz/sitemap.xml
    Sitemap: https://www.yansheng.xyz/baidusitemap.xml

    进入搜索引擎管理平台更新robots

    Google Search Console: https://www.google.com/webmasters/tools/home?hl=zh-CN
    百度站长平台: http://zhanzhang.baidu.com/

    robots.txt 生成器

    配置相关参数，自动生成robots内容的网站：

    ]]> + + + + + + hexo + + yilia + + + + + + + + + hexo+yilia添加网站运行时间，ICP备案信息，设定站点建立时间 + + /article/50902a4.html + + hexo+yilia（在底部）添加

    • 网站运行时间：本站已安全运行 101 天 12 小时 13 分 41 秒
    • ICP备案信息：粤ICP备00000000号
    • 设定站点建立时间（年份）：@ 2018 - 2019

    1.添加网站运行时间

    添加位置建议：如果有统计量（如不蒜子统计量），放在不蒜子后面。没有就按照下面的建议。

    硬性配置

    参考：Hexo主题更改以及小功能的添加–添加网站运行时间

    修改\themes\yilia\layout\_partial\footer.ejs，在</footer>上面添加如下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <!--《添加网站运行时间 -->
    <!--<br/>-->
    <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
    <script>
        var now = new Date();

        function createtime() {
            var grt = new Date("07/25/2019 12:00:00"); //此处修改你的建站时间或者网站上线时间 
            now.setTime(now.getTime() + 250);
            days = (now - grt) / 1000 / 60 / 60 / 24;
            dnum = Math.floor(days);
            hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
            hnum = Math.floor(hours);
            if (String(hnum).length == 1) {
                hnum = "0" + hnum;
            }
            minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
            mnum = Math.floor(minutes);
            if (String(mnum).length == 1) {
                mnum = "0" + mnum;
            }
            seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
            snum = Math.round(seconds);
            if (String(snum).length == 1) {
                snum = "0" + snum;
            }
            document.getElementById("timeDate").innerHTML = " | 本站已安全运行 " + dnum + " 天 ";
            document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
        }
        setInterval("createtime()", 250);
    </script>
    <!-- 添加网站运行时间》 -->

    灵活配置（推荐）

    优化上面的内容，设置成可以直接在配置文件中进行开启和关闭的形式：

    1.修改\themes\yilia\_config.yml，添加如下内容：

    1
    2
    3
    4
    5
    # 网站运行时间，格式形如：“本站已安全运行 101 天 12 小时 13 分 41 秒”
    # Runing Time
    running_time:
     enable: true
     create_time: '07/25/2019 12:00:00' #此处修改你的建站时间或者网站上线时间

    2.修改\themes\yilia\layout\_partial\footer.ejs，在</footer>上面添加如下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!--《添加网站运行时间  <br/>-->
    <% if (theme.running_time && theme.running_time.enable && theme.running_time.create_time){ %>
        <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
        <script>
        var now = new Date();

        function createtime() {
            //此处修改你的建站时间或者网站上线时间
            var create_time = '<%- theme.running_time.create_time %>';
            now.setTime(now.getTime() + 250);
            days = (now - grt) / 1000 / 60 / 60 / 24;
            dnum = Math.floor(days);
            hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
            hnum = Math.floor(hours);
            if (String(hnum).length == 1) {
                hnum = "0" + hnum;
            }
            minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
            mnum = Math.floor(minutes);
            if (String(mnum).length == 1) {
                mnum = "0" + mnum;
            }
            seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
            snum = Math.round(seconds);
            if (String(snum).length == 1) {
                snum = "0" + snum;
            }
            document.getElementById("timeDate").innerHTML = " | 本站已安全运行 " + dnum + " 天 ";
            document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
        }
        setInterval("createtime()", 250);
        </script>
    <% } %>
    <!-- 添加网站运行时间》-->

    效果

    本站已安全运行 101 天 12 小时 13 分 41 秒

    2.添加ICP备案信息

    添加位置建议：底部第首行。如果有统计量、运行时间前面。没有就按照下面的建议。

    参考：Hexo博客页脚添加ICP备案号

    1.修改\themes\yilia\_config.yml，添加如下内容：

    1
    2
    3
    4
    5
    6
    # ICP备案信息（英文全称：Internet Content Provider，中文全称：网络内容提供商。）
    # 参考：https://blog.csdn.net/qq_37449342/article/details/95649140
    # 粤ICP备00000000号
    icp:
     enable: true
     id: '粤ICP备00000000号'  # 备案号

    2.修改\themes\yilia\layout\_partial\footer.ejs，在</footer>上面添加如下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!-- 《网站备案号 -->
    <% if (theme.icp && theme.icp.enable && theme.icp.id){ %>
        <div class="BeiAn-info">
            <img src="https://static.dy208.cn/o_1dfilp8ruo521thr1hvf18ji17soa.png" title="备案管理系统">
            <a href="http://www.beian.miit.gov.cn/" style="color:#f72b07" target="_blank" title="备案号">
                <%- theme.icp.id %>
            </a>
        </div>
    <% } %>
    <!-- 网站备案号》 -->

    图标也可为：http://www.beian.miit.gov.cn/images/top/0.png

    效果

    file

    注意

    域名备案后，一般都需要将备案号添加到网站底部，不然会收到类似信息的！！！

    3.设定站点建立时间

    参考：

    这个时间将在站点的底部显示，如果建站时间小于当前时间（年份），形式为：@ 2018 - 2019；否则默认为当前年份，如：@2019。
    编辑主題的 \themes\yilia\_config.yml（在hexo根目录的配置文件中也可以），新增字段 since。

    1
    2
    3
    # Year of Site Creation | 网站成立年份
    # 设定站点建立时间,这个时间将在站点的底部显示，如果是当年显示为 @ 2019，否则显示为时间段 © 2018 - 2019。
    since: 2019

    对应的配置文件H:\Hexo\themes\yilia\layout\_partial\footer.ejs的原内容（部分内容，主要是<div class="footer-left">标签内容）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <footer id="footer">
      <div class="outer">
        <div id="footer-info">
        <div class="footer-left">
        &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
        </div>
          <div class="footer-right">
          <a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
          </div>
        </div>
      </div>

    存在问题：小于时，不能正常显示（/按照需求显示）。修改后：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <footer id="footer">
      <div class="outer">
        <div id="footer-info">
        <div class="footer-left">
                <!--如果有设置theme.since，并且时间小于当前时间（年份），形式为：@ 2018 - 2019(+作者/标题)；否则默认为当前年份(+作者/标题)。 -->
        <% if (theme.since && !isNaN(theme.since) && theme.since < date(new Date(), 'YYYY')) { %>
                    &copy; <%- theme.since %>-<%= date(new Date(), 'YYYY') %>
                <% } else { %>
                    &copy; <%= date(new Date(), 'YYYY') %>
                <% } %>
                <%= config.author || config.title %>
        </div>

    效果

    如：since: 2018显示为@ 2018 - 2019；否则默认为当前年份，如：@2019。

    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia添加RSS订阅功能 + + /article/91e4f23f.html + + 使用hexo-generator-feed插件生成RSS文件atom.xml，实现RSS订阅功能。
    插件github网址：https://github.com/hexojs/hexo-generator-feed。
    使用详见：https://www.jianshu.com/p/2aaac7a19736，https://wxnacy.com/2018/12/12/hexo-add-rss/

    1.先安装插件：

    1
    npm install hexo-generator-feed

    2.在hexo根目录配置文件_config.yml中配置插件:

    1
    2
    3
    4
    5
    6
    7
    8
    # Extensions
    plugins:
      hexo-generator-feed
    #Feed Atom
    feed:
      type: atom
      path: atom.xml
      limit: 20 # 最新的20篇文章

    3.开启主题的左侧边栏的RSS功能

    在主题的配置文件theme/yilia/_config.yml中进行设置:

    1
    2
    3
    # SubNav
    subnav:
      rss: "atom.xml"

    4.重新生成文件

    hexo clean, hexo g后会在public目录下生成auto.xml订阅文件，到浏览器进行访问，点击图标会跳转到*/auto.xml界面，显示最近的几篇文章的更新。

    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia添加版权声明 + + /article/3d67529f.html + + 添加版权声明，效果图：
    file

    参考：

    1.借鉴修改版

    1.1在文末添加声明

    在themes/yilia/layout/_partial/article.ejs文件的指定位置如下：

    1
    2
    3
    4
    <%- post.content %>
    <% } %>
    <-- 在此处添加代码-->
    <% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>

    添加如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
     <!-- 添加版权声明 -->
        <%
      var sUrl = url.replace(/index\.html$/, '');
      sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
    %>
    <% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %>
      <div class="declare">
        <strong>本文作者：</strong>
        <% if(config.author != undefined){ %>
          <%= config.author%>
        <% }else{%>
          <font color="red">请在博客根目录“_config.yml”中填入正确的“author”</font>
        <%}%>
        <br>
        <strong>本文链接：</strong>
        <a href="<%= config.url %>/<%= post.path %>" title="<%= post.title %>" target="_blank"><%= config.url %>/<%= post.path %></a>
        <br>
        <strong>版权声明：</strong>
        本作品采用
        <a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
        进行许可。转载请注明出处！
        <% if(theme.licensee_img != undefined){ %>
          <br>
          <a rel="license" href="<%= theme.licensee_url%>"><img alt="知识共享许可协议" style="border-width:0" src="<%= theme.licensee_img%>"/></a>
        <% } %>
      </div>
    <% } else {%>
      <div class="declare" hidden="hidden"></div>
    <% } %>
          <!-- 添加版权声明 -->

    1.2添加样式

    在文件yilia/source/main.0cf68a.css中添加:

    1
    2
    3
    4
    5
    6
    7
    /*版权声明的样式*/
    .declare {
      background-color: #eaeaea;
      margin-top: 2em;
      border-left: 3px solid #ff1700;
      padding: .5em 1em; 
    }

    1.3在主题中开启设置

    在文件themes/yilia/_config.yml中添加：

    1
    2
    3
    4
    5
    6
    7
    # 版权声明
    #在需要进行版权声明的文章的md文件头部，设置属性declare: true。
    #版权基础设定：0-关闭声明； 1-文章对应的md文件里有declare: true属性，才有版权声明； 2-所有文章均有版权声明
    declare_type: 1
    licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/        #当前应用的版权协议地址。
    licensee_name: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议'        #版权协议的名称
    licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png    #版权协议的Logo

    效果图：

    file

    2.升级版-配置版

    修改：H:\Hexo\themes\yilia\_config.yml:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 版权声明
    #在需要进行版权声明的文章的md文件头部，设置属性declare: true。
    #版权基础设定：0-关闭声明； 1-文章对应的md文件里有declare: true属性，才有版权声明； 2-所有文章均有版权声明
    declare:
      declare_type: 1
      licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/        #当前应用的版权协议地址。
      licensee_name: 'CC BY-NC-SA 4.0'                                        #版权协议的名称
      licensee_alias: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议'       # alias别名
      licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png    #版权协议的Logo

    新建H:\Hexo\themes\yilia\layout\_partial\post\declare.ejs：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <!-- 《添加版权声明 -->
    <!--添加版权声明https://github.com/JoeyBling/hexo-theme-yilia-plus/commit/c1215e132f6d5621c5fea83d3c4f7ccbcca074a3-->
    <%
      var sUrl = url.replace(/index\.html$/, '');
      sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
    %>

    <!-- #版权基础设定：0-关闭声明； 1-文章对应的md文件里有declare: true属性，才有版权声明； 2-所有文章均有版权声明 -->
    <% if ((theme.declare.declare_type === 2 || (theme.declare.declare_type === 1 && post.declare)) && !index){ %>
      <div class="declare">
        <strong class="author">本文作者：</strong>
        <% if(config.author != undefined){ %>
          <%= config.author%>
        <% }else{%>
          <font color="red">请在博客根目录“_config.yml”中填入正确的“author”</font>
        <%}%>
        <br>
        <strong class="create-time">发布时间：</strong>
        <%- date(post.date, 'YYYY-MM-DD') %>
        <br>
        <strong class="update-time">最后更新：</strong>
        <%- date(post.updated, 'YYYY-MM-DD') %>
        <br>
        <strong class="article-titles">本文标题：</strong>
        <a href="<%= config.url %>/<%= post.path %>" title="<%= post.title %>" target="_blank"><%= post.title %></a>
        <br>
        <strong class="article-url">本文链接：</strong>
        <a href="<%= config.url %>/<%= post.path %>" title="<%= post.title %>" target="_blank"><%= config.url %>/<%= post.path %></a>
        <br>
        <strong class="copyright">版权声明：</strong>
        本作品采用
        <a rel="license" href="<%= theme.declare.licensee_url%>" title="<%= theme.declare.licensee_alias %>"><%= theme.declare.licensee_name%></a>
        许可协议进行许可。转载请注明出处！
        <% if(theme.declare.licensee_img != undefined){ %>
          <br>
          <a rel="license" href="<%= theme.declare.licensee_url%>"><img alt="知识共享许可协议" style="border-width:0" src="<%= theme.declare.licensee_img%>"/></a>
        <% } %>
      </div>
    <% } else {%>
      <div class="declare" hidden="hidden"></div>
    <% } %>
    <!-- 添加版权声明》 -->

    修改H:\Hexo\themes\yilia\layout\_partial\article.ejs

    1
    2
    3
    4
    5
    <!-- 《添加版权声明 -->
    <% if(theme.declare){%>
        <%- partial('post/declare') %>
    <% } %>
    <!-- 添加版权声明》 -->

    效果图：

    file

    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia添加背景音乐 + + /article/5c52aefe.html + + 添加背景音乐（截图为APlayer播放器）
    file

    简单版：网易云外链

    参考：

    步骤：

    1.到网易云官网获取音乐外链：搜索音乐–>生成外链播放器（使用iframe插件形式）–>复制代码

    2.打开路径 themes/yilia/layout/_partial/left-col.ejs，在最后一个</nav>上面添加代码，就像下面这样。注意是否需要自动播放，建议不要设置为自动播放（src中的auto=0表示不自动播放，如果是1就自动播放）。

    1
    2
    3
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=228 height=86 
            src="//music.163.com/outchain/player?type=2&id=1371939273&auto=0&height=66"></iframe>
    </nav>

    3.根据需要设置宽高属性，宽建议228。

    4.为了方便起见，设置成能够在主题的配置文件中开启和关闭的形式：

    1
    2
    3
    4
    5
    6
    <!-- 《左侧边栏添加--网易云音乐插件 -->
    <!-- https://www.writebug.site/2018/04/21/hexo-yilia个性化之-添加背景音乐/ -->
    <% if(theme.simple_163_music && theme.simple_163_music.enable){ %>
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=228 height=86 src="//music.163.com/outchain/player?type=2&id=1371939273&auto=0&height=66"></iframe>
    <% } %>
    <!-- 网易云音乐插件》-->

    同时需要在主题的配置文件themes/yilia/_config.yml中开启：

    1
    2
    3
    4
    # 音乐
    # 简单的网易云音乐
    simple_163_music:
     enable: true

    如需关闭设置为false。

    复杂版：APlayer音乐播放器

    参考：

    安装步骤

    1.打开路径 themes/yilia/layout/_partial/left-col.ejs，在最后一个</nav>上面添加代码，就像下面这样。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <!-- 《左侧边栏添加--APlayer音乐播放器 -->
    <% if(theme.aplayer.enable) { %>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
    <!-- // 这里div的样式是笔者自己修改过的，你可以直接使用APlayer官方的原配置：<div id="aplayer"></div> -->
    <div id="aplayer" style="position:absolute;left;0;bottom:0;"></div>
    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>
    <script>
        const ap = new APlayer({
            container: document.getElementById('aplayer'),
            autoplay: false,
            listFolded: true,
            listMaxHeight: 90,
            order: 'list',
            loop: 'all',
            theme: '#b7daff',
            preload: 'none',
            mutex: true,
            lrcType: 3,
            volume: 0.7,
            fixed: true,
            audio: [{
                    name: '亲爱的旅人啊（Cover：木村弓）',
                    artist: '周深',
                    lrc: '/music/lrc/亲爱的旅人啊（Cover：木村弓）-周深.lrc',
                    cover: 'http://p1.music.126.net/1YrCPOBV314i-mTtlDg8mQ==/109951164148664637.jpg?param=300x300',
                    url: 'http://m10.music.126.net/20191102134206/7c499bc0065a03c980aa04817b2b7b2b/ymusic/555f/525a/5258/b5f91cd86ce0046a6f70e249d0802a1e.mp3'
                },
                {
                    name: '陈情令：无羁',
                    artist: 'Silu Wang',
                    lrc: '',
                    cover: 'http://p2.music.126.net/8eL7nls1F8o48_umy0uqBQ==/109951164361652548.jpg?param=300x300',
                    url: 'http://m10.music.126.net/20191102144314/e85a4a99852144dced7bc7eace047ecc/ymusic/015d/550f/5152/67f6f0756ebe8bd362f5f85c507acf68.mp3'
                }
            ]
        });

        <!-- 根据封面自适应主题色 -->
        const colorThief = new ColorThief();
        const setTheme = (index) => {
            if (!ap.list.audios[index].theme) {
                colorThief.getColorAsync(ap.list.audios[index].cover, function(color) {
                    ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
                });
            }
        };
        setTheme(ap.list.index);
        ap.on('listswitch', (data) => {
            setTheme(data.index);
        });
    </script>
    <% } %>
    <!-- 左侧边栏添加--APlayer音乐播放器》 -->

    2.同时需要在主题的配置文件themes/yilia/_config.yml中开启：

    1
    2
    3
    4
    # 添加APlayer音乐播放器，官网：https://aplayer.js.org
    # github: https://github.com/MoePlayer/APlayer
    aplayer:
      enable: true

    如需关闭设置为false。

    说明

    1.存在问题：fixed: true模式下，歌曲列表高度listMaxHeight好像无效。

    2.使用：音乐直链搜索：https://music.liuzhijin.cn/ 查找的歌曲好像有限制，就是如果使用太频繁，会被拒绝访问（响应码403，有点像禁爬虫）。可以使用七牛云存储对应MP3文件。（歌词好像是没有显示的）

    3.对于有些歌曲没有歌词的情况（如上面的第二首歌），不建议直接置为空lrc: '',，这样会出现问题：一开始可能没有问题，如果设置循环，第二次时就会报错–找不到歌词。建议：添加同名歌词文件，如/music/lrc/无羁 - Silu Wang-陈情令.lrc，歌词内容置为空，如：[00:00.00] 暂无歌词，这样就不会出现类似问题。

    补充🐛

    上面说到的歌曲列表高度listMaxHeight问题，应该是一个bug，详见：listMaxHeight does not work and no scroll in Fixed mode，但是可以不进行设置，因为它有一个默认值250px。

    更新

    将配置分开，方便修改。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!-- 《左侧边栏添加--APlayer音乐播放器：详见：https://aplayer.js.org/#/zh-Hans/ -->
    <% if(theme.aplayer.enable) { %>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">

        <div id="aplayer" style="text-align:left"></div>
        <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>

        <!-- 为方便修改，添加一个配置文件，修改时直接修改配置文件即可。 -->
        <script type="text/javascript" src="<%- url_for('js/APlayer_config.js') %>"></script>

        <!-- 根据封面自适应主题色，主要是作用于进度条 -->
        <script type="text/javascript">
              const colorThief = new ColorThief();
              const setTheme = (index) => {
                if (!ap.list.audios[index].theme) {
                  colorThief.getColorAsync(ap.list.audios[index].cover, function(color) {
                    ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
                  });
                }
              };
              setTheme(ap.list.index);
              ap.on('listswitch', (data) => {
                setTheme(data.index);
              });       
        </script>
    <% } %>
    <!-- 左侧边栏添加--APlayer音乐播放器》 -->

    配置文件H:\Hexo\themes\yilia\source\js\APlayer_config.js:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        fixed: true,
        autoplay: false,
        theme: '#b7daff',
        loop: 'all',
        order: 'list',
        preload: 'auto',
        volume: 0.5,
        lrcType: 3,
        mutex: true,
        listFolded: false,

        audio: [{
                name: '一直很安静',
                artist: '阿桑',
                lrc: '/music/lrc/一直很安静 - 阿桑.lrc',
                cover: 'https://p1.music.126.net/SpovasHBud2A1qXXADXsBg==/109951163167455610.jpg?param=300x300',
                url: 'http://q0fzyzixq.bkt.clouddn.com/audio/mp3/一直很安静 - 阿桑.mp3'
                      },
            {
                name: '亲爱的旅人啊（Cover：木村弓）',
                artist: '周深',
                lrc: '/music/lrc/亲爱的旅人啊（Cover：木村弓）-周深.lrc',
                cover: 'https://p1.music.126.net/1YrCPOBV314i-mTtlDg8mQ==/109951164148664637.jpg?param=300x300',
                url: 'http://q0fzyzixq.bkt.clouddn.com/audio/mp3/亲爱的旅人啊（Cover：木村弓） - 周深.mp3'
                      }
            ]
    });

    分开后，如果需要更新歌曲，只需要更新音乐的配置文件APlayer_config.js就可以了，而不是修改主题的布局文件。

    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia添加相册视屏功能 + + /article/d0ba4c3d.html + + 主要是添加相册和视频功能，参考Hexo-Github实现相册功能 ，csdn博客：Hexo+Github实现相册功能，我看到网上好多人都是按照这个模板来实现的。
    效果图：
    mV0P56.jpg

    注：这个视频加载不出来应该是因为和视频链接有关系.
    mV0CUx.jpg

    一、增加相册功能

    1. 原理

    两个github仓库，一个存放图片，一个存放hexo博客（当然你一个仓库两个分支也可以，我就是这样）。
    mV0Yrj.jpg

    2.修改代码

    源代码到github去下：https://github.com/lawlite19/Blog-Back-Up

    2.1 新建博客的photos页面

    • 在博客的source文件夹下建立一个photos文件夹

    • 将样式文件放到photos文件夹下，样式文件我都放到了github上：https://github.com/lawlite19/Blog-Back-Up/tree/master/blog_photos_copy

      1
      2
      3
      4
      5
      6
      ├─blog_photos_copy
      │      data.json
      │      index.ejs
      │      ins.css
      │      ins.js
      │      lazyload.min.js

    • 修改ins.js文件，主要是里面的render函数

    • 其中的url对应到你的github放图片的地址

    1
    2
    var minSrc = 'https://raw.githubusercontent.com/lawlite19/blog-back-up/master/min_photos/' + data.link[i];
    var src = 'https://raw.githubusercontent.com/lawlite19/blog-back-up/master/photos/' + data.link[i];

    2.2 新建本地图片库

    新建一个文件夹存放图片，我的是photos-source，新建目录photos，min_photos，同时把ImageProcess.py,ImageProcess.pyc， tool.py 这三个文件放到该目录下。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    H:.photos-source
    │  ImageProcess.py
    │  ImageProcess.pyc
    │  tool.py
    │
    ├─blog_photos_copy
    │      data.json
    │      index.ejs
    │      ins.css
    │      ins.js
    │      lazyload.min.js
    │
    ├─min_photos
    │      2014-11-16_鞠婧祎1.jpg
    │
    ├─photos
    │      2014-11-16_鞠婧祎1.jpg
    │      data.json
    │
    └─__pycache__
            ImageProcess.cpython-37.pyc

    2.3 修改tool.py中的路径

    修改这里的下面代码块的路径：

    1
    2
    3
    #路径换成自己的博客的图片文件夹的路径:H:\Hexo\source\photos
        with open("H:\\Hexo\\source\\photos\\data.json","w") as fp:
            json.dump(final_dict, fp)

    注意：如果不是用两个仓库，可以注释git命令部分内容，然后需要自己先将图片上传到github上，要不然显示不了。

    2.4 每次上传照片都需要运行python脚本

    需要安装python环境，在命令行运行py tool.py命令。

    2.5 开启相册功能

    H:\Hexo\themes\yilia\_config.yml取消注册相册行。

    1
    2
    3
    4
    5
    6
    7
    menu:
      主页: /
      #随笔: /tags/随笔/
      #分类: /categories
      归档: /archives
      相册: /photos
      #标签: /tags

    3.存在问题

    众所周知，国内访问GitHub还有比较慢的，所以有时候图片会加载不出来。
    替换方法：使用七牛云作为图库，存放图片，这种方式网上也很常见，可以自行修改。

    二、添加（相册页的）视频功能

    视频功能基于相册功能，相当于在其旁边添加一个导航栏，导航到相册页。

    1、添加视频样式css

    • 打开当前博客source\photos文件夹下的ins.css文件
    • 加入如下内容
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /* ====== video ===== */
     .video-container {
        z-index: 1;
        position: relative;
        padding-bottom: 56.25%;
        margin: 0 auto;
    }
    .video-container iframe, .video-container object, .video-container embed {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 7%;
        width: 85%;
        height: 85%;
        box-shadow: 0px 0px 20px 2px #888888;
    }

    2、添加视频

    • 我这里添加的是优酷上面的视频
    • 在当前博客source\photos文件夹下建立videos.ejs文件
    • 内容如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    ---
    layout: post
    slug: "photos"
    title: "相册"
    noDate: "true"
    comments: "true"
    reward: "true"
    open_in_new: false
    ---
    <link rel="stylesheet" href="./ins.css">
    <div class="photos-btn-wrap"><a class="photos-btn" href="/photos">Photos</a>
    <a class="photos-btn active" href="/photos/videos.html">Videos</a>
    </div>
    <center>
        <h1>指弹_女儿情</h1>
    </center>
    <hr/>
    <center>
        <div class="video-container">
            <iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjUzMzY4OTM3Ng==" frameborder=0 allowfullscreen></iframe>
        </div>
    </center>
    <hr/>
    <center>
        <h1>指弹_友谊地久天长</h1>
    </center>
    <hr/>
    <center>
        <div class="video-container">
            <iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjQ5MDExOTY2MA==" frameborder=0 allowfullscreen></iframe>
        </div>
    </center>
    <hr/>
    <center>
        <h1>指弹_Always with me</h1>
    </center>
    <hr/>
    <center>
        <div class="video-container">
            <iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjQ4MDQyNTQ0MA==" frameborder=0 allowfullscreen></iframe>
        </div>
    </center>

    3、修改\Hexo\source\photos\index.ejs的相册的超链接

    原来是<a class="photos-btn" href="#">Videos</a>，不修改是访问不了的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ---
    layout: post
    slug: "photos"
    title: "相册"
    noDate: "true"
    comments: "false"
    ---
    <link rel="stylesheet" href="./ins.css">
    <div class="photos-btn-wrap">
    <a class="photos-btn active" href="javascript:void(0)">Photos</a>
        <a class="photos-btn" href="/photos/videos.html">Videos</a>
    </div>
    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia添加百度统计和Google统计 + + /article/eda67a25.html + + 简介

    百度统计和Google统计主要用于分析网站数据：流量、访客量等。
    file

    需要注册账号，然后将代码（脚本）嵌入到网站中，然后在后台就会生成对应数据，然后进行分析。

    说明

    yilia主题已集成，位置如下，我们只需要在主题的配置文件中进行配置即可。

    • H:\Hexo\themes\yilia\layout\_partial\baidu-analytics.ejs
    • H:\Hexo\themes\yilia\layout\_partial\google-analytics.ejs

    配置

    H:\Hexo\themes\yilia\_config.yml原内容：

    1
    2
    3
    # Miscellaneous
    baidu_analytics: ''
    google_analytics: ''

    主要是配置对应的id即可（google_analytics的代码好像更新了，建议新建，使用新的代码）。

    百度

    网址生成的原代码（id是一串字符串，这里隐藏了）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?id";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>

    file

    对应的配置文件H:\Hexo\themes\yilia\layout\_partial\baidu-analytics.ejs:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <% if (theme.baidu_analytics){ %>
    <script>
    var _hmt = _hmt || [];
    (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?<%= theme.baidu_analytics %>";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
    })();
    </script>
    <% } %>

    Google全局网站代码 (gtag.js)

    我找了好久才找到代码，因此记录下：

    生成代码：控制台–>（左下角）管理–>管理–>（中间）媒体资源–>（中间）跟踪信息–>跟踪代码

    file

    这是针对此媒体资源的全局网站代码 (gtag.js) 跟踪代码。请复制此代码，并将其作为第一个项目粘贴到您要跟踪的每个网页的<HEAD> 标记中。如果您的网页上已经有全局网站代码，则只需将以下代码段中的 config 行添加到现有的全局网站代码。

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=ID"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'ID');
    </script>

    file

    对应的配置文件H:\Hexo\themes\yilia\layout\_partial\google_analytics.ejs:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <% if (theme.google_analytics){ %>
    <!-- Google Analytics -->
    <script type="text/javascript">
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', '<%= theme.google_analytics %>', 'auto');
    ga('send', 'pageview');

    </script>
    <!-- End Google Analytics -->
    <% } %>

    代码好像更新了，yilia主题自带的代码应该是旧的，更换为下面的：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <% if (theme.google_analytics){ %>
        <script async src="https://www.googletagmanager.com/gtag/js?id=<%= theme.google_analytics %>"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '<%= theme.google_analytics %>');
        </script>
    <% } %>
    <!-- End Google Analytics -->

    配置id

    H:\Hexo\themes\yilia\_config.yml

    1
    2
    3
    # Miscellaneous(杂项):百度统计、Google统计
    baidu_analytics: '百度统计id'
    google_analytics: 'Google统计id'

    成功效果

    本地测试，F12打开控制台，没有报相关错误，而且在Sources-->Page有显示下面两个网站，说明配置成功了。过一段之间再去数据分析控制台查看，应该就会有数据。百度介绍说好像是20分钟就有数据了，我试了下，真有了，很快。google也立刻就有数据了。

    file

    说明

    Google虽然好，但是因为墙的原因，所以有时候可能会出现问题。

    参考：

    ]]> + + + + + + hexo + + yilia + + + + + + + + + hexo+yilia进行SEO优化 + + /article/c1217b1d.html + + 介绍

    SEO优化

    推广是一个烦人的事情，特别是对于我们搞技术的来说，可能就不擅长推广，那么怎么才能让别人知道我们呢，我们就要想办法让别人通过搜索就可以搜索到你博客的内容，给我们带来自然流量，这就需要seo优化,让我们的站点变得对搜索引擎友好。

    SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。

    百度收录

    参考：https://blog.csdn.net/linzhiqiang0316/article/details/89344595
    百度官方介绍：https://ziyuan.baidu.com/college/articleinfo?id=1504

    bug:提交推送链接后，百度好像有延迟，你不能立即看到提交数据的变化，我的是过几天后才有数据的。

    如何选择链接提交方式 ？

    1. 手动提交：一次性提交链接给百度，可以使用此种方式。
    2. 自动提交（虽然这种方式各有千秋，但是百度推荐全用上，全面一点！）：
      2.1 主动推送（实时）：最为快速的提交方式，推荐您将站点当天新产出链接立即通过此方式推送给百度，以保证新链接可以及时被百度收录。
      2.2 自动推送：最为便捷的提交方式，请将自动推送的JS代码部署在站点的每一个页面源代码中，部署代码的页面在每次被浏览时，链接会被自动推送给百度。可以与主动推送配合使用。
      2.3 sitemap：您可以定期将网站链接放到sitemap中，然后将sitemap提交给百度。百度会周期性的抓取检查您提交的sitemap，对其中的链接进行处理，但收录速度慢于主动推送。

    设置推送

    站长平台：https://ziyuan.baidu.com

    前提：注册百度，添加站点、验证站点。

    注意：使用HTML进行验证的话，要保证该文件上传到网站后是一模一样的，即不然被渲染和压缩，跳过渲染可以再HTML文件前面加入下面的内容；跳过压缩因插件而异。跳过该HTML文件。

    1
    2
    3
    ---
    layout: false
    ---

    验证成功就能在百度找到你的网站了,如site:www.yansheng.xyz，不过百度好像没有那么快，可能需要一两天。

    主动推送

    参考：Hexo插件之百度主动提交链接

    前提：获得秘钥

    您得注册百度站长工具，然后在**（标题栏）网站支持->数据引入->链接提交**里找到你的密匙。
    img

    添加插件hexo-baidu-url-submit

    该插件github网址：https://github.com/huiwang/hexo-baidu-url-submit

    首先，在Hexo根目录下，安装本插件：
    npm install hexo-baidu-url-submit --save

    配置“百度主动推送”

    然后，同样在根目录下，把以下内容配置到_config.yml文件中:

    1
    2
    3
    4
    5
    6
    # 百度主动推送
    baidu_url_submit:
      count: 1 ## 提交最新的一个链接
      host: www.hui-wang.info ## 在百度站长平台中注册的域名
      token: your_token ## 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
      path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里

    其次，记得查看_config.yml文件中url的值， 必须包含是百度站长平台注册的域名（一般有www）， 比如:

    1
    2
    # URL
    url: http://www.hui-wang.info

    最后，加入新的deployer:

    1
    2
    3
    4
    deploy:
    - type: s3 ## 这是我原来的deployer
      bucket: hui-wang.info
    - type: baidu_url_submitter ## 这是新加的

    注意：上面是官方的文档，而实际上应该要这样，可参考我的：

    1
    2
    3
    4
    5
    6
    7
    8
    deploy:
    - type: git
      repository: 
         github: https://github.com/yansheng836/yansheng836.github.io.git
         coding: https://git.dev.tencent.com/yansheng836/yansheng836.coding.me.git
      branch: master
      # 发布时，同时进行百度推送
    - type: baidu_url_submitter

    因为不是有两个deploy，要放在一起。

    如何进行推送

    执行hexo deploy的时候，新的连接就会被推送了。如下图

    mnv2AU.jpg

    查看官网信息(如下所示)我们可以知道这是推送成功了。

    补充：官网信息查看方式**(标题栏)网站支持->数据引入->链接提交->自动提交->主动推送**，在下面就有推送成功的信息（如下）。

    1
    2
    3
    4
    5
    6
    7
    #成功返回示例：
    {
        "remain":4999998,
        "success":2,
        "not_same_site":[],
        "not_valid":[]
    }

    重新生成后，我们可以发现在public\目录下生成有baidu_urls.txt里面的就是推送的链接。

    自动推送

    参考：https://purewhite.io/2017/04/29/hexo-baidu-url-submit/

    https://github.com/JoeyBling/hexo-theme-yilia-plus/commit/c1215e132f6d5621c5fea83d3c4f7ccbcca074a3

    1.在配置H:\Hexo\themes\yilia\_config.yml中开启功能：

    1
    2
    3
    # 开启百度站长平台自动推送(https://ziyuan.baidu.com/linksubmit/index)
    # 页面被访问了，就会被推送过去。
    baidu_push: true

    2.新建H:\Hexo\themes\yilia\layout\_partial\baidu-push.ejs：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <% if (theme.baidu_push){ %>
    <!-- 开启百度站长平台自动推送https://ziyuan.baidu.com/linksubmit/index，
    https://ziyuan.baidu.com/college/courseinfo?id=267&page=2#h2_article_title19-->
    <script>
      (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
          bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
          bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
      })();
    </script>
    <% } %>

    3.在H:\Hexo\themes\yilia\layout\_partial\head.ejs的</head>前引入脚本：

    1
    2
    3
    <!--百度自动推送-->
    <%- partial('baidu-push') %>
    </head>

    sitemap

    参考博客:https://purewhite.io/2017/04/29/hexo-baidu-url-submit/

    我们使用 hexo generator-baidu-sitemap这个插件，github：https://github.com/coneycode/hexo-generator-baidu-sitemap

    或者使用这个插件：https://github.com/ludoviclefevre/hexo-generator-seo-friendly-sitemap:它将为页面，帖子，类别，标签和XSL样式表生成单独的站点地图文件。

    安装hexo generator-baidu-sitemap插件
    1
    2
    3
    4
    5
    #if your hexo version is 2.x.x, you should install as follow:
    $ npm install hexo-generator-baidu-sitemap@0.0.8 --save

    #if version is 3.x.x, you should install as follow:
    $ npm install hexo-generator-baidu-sitemap --save
    然后在_config.yml 里面配置一下：
    1
    2
    baidusitemap:
      path: baidusitemap.xml

    hexo g后，会在public\目录下生成站点文件baidusitemap.xml。

    百度站长平台设置

    之后去百度站长平台提交一下 sitemap 的路径就好，一般都是 www.example.com/baidusitemap.xml，一段时间后，去百度搜索相关信息就会出现这些网页。

    效果

    在站长平台可以看到链接提交数量，如：

    file

    Google收录

    和百度类似。

    添加网站、验证

    登录Google账号，打开搜索控制台：https://search.google.com/search-console，添加你的网站，需要验证网站，它那里会提供几种验证方式，我是用HTML，下载它的HTML文件，将它添加到你的网站根目录下，然后点击验证。

    **注意：**使用HTML进行验证的话，要保证该文件上传到网站后是一模一样的，即不然被渲染和压缩，跳过渲染可以再HTML文件前面加入下面的内容，跳过压缩因插件而异。

    1
    2
    3
    ---
    layout: false
    ---

    验证成功很快就能再Google找到你的网站了,如site:www.yansheng.xyz。

    安装hexo-generator-sitemap插件

    提交sitemap，上面使用的是百度特有的sitemap，Google识别不了，所以使用通用sitemap生成器hexo-generator-sitemap：https://github.com/hexojs/hexo-generator-sitemap

    1
    npm install hexo-generator-sitemap --save

    配置_config.yml

    1
    2
    sitemap:
        path: sitemap.xml

    重新生成，会在根目录下生成sitemap.xml文件，发布后，就可以在google控制台提交这个sitemap了。

    效果

    file

    补充

    SEO只负责提交网站的索引量、访问量，具体数据可以通过添加百度分析和google分析来参看。可参考：hexo+yilia添加百度统计和Google统计

    ]]> + + + + + + hexo + + yilia + + + + + + + + + hexo+yilia添加URL持久化 + + /article/faa5d14.html + + URL持久化

    参考：你的Hexo博客SEO优化了吗？

    我们可以发现hexo默认生成的文章地址路径是 【网站名称／年／月／日／文章名称】。比如这篇博客原来的测试页面链接：http://localhost:4000/2019/11/10/hexo+yilia添加URL持久化
    这种链接对搜索爬虫是很不友好的，第一它的url结构超过了三层，太深了。第二使用了中文路径。这样会导致一个问题，在某些聊天工具或分享链接的时候会造成url转码变成很长一串难以读写的链接。而且如果你的页面之前被收录或被转载后，当你再次编辑过后可能会造成之前的url失效带来不必要的404, 比如下面这样：
    http://localhost:4000/article/faa5d14。别担心，我们有好办法来解决它。

    第一种方式：

    打开hexo的配置文件：H:\Hexo\_config.yml，找到permalink

    1
    2
    3
    #permalink: :year/:month/:day/:title/ 
    #注释上行的原配置，改为下面这样
    permalink:   /article/:title.html

    上面这种方式是去掉了年月日，保持网站最多三层。

    第二种方式：(推荐)

    安装 hexo-abbrlink插件：

    1
    npm install hexo-abbrlink --save

    配置H:\Hexo\_config.yml，查找permalink，修改成这样：

    1
    2
    3
    4
    5
    # permalink: :title/  将之前的注释掉
    permalink: article/:abbrlink.html
    abbrlink:
      alg: crc32  # 算法：crc16(default) and crc32
      rep: hex    # 进制：dec(default) and hex

    安装后的网址形如：http://localhost:4000/article/c5f6d65b.html

    注意：配置成功需要重新生成文件hexo clean,hexo g，不然会出现undefined的问题，如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    $ npm install hexo-abbrlink --save
    npm WARN babel-eslint@10.0.2 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    + hexo-abbrlink@2.0.5
    added 15 packages from 13 contributors and audited 26333 packages in 27.509s
    found 21 vulnerabilities (8 low, 6 moderate, 6 high, 1 critical)
      run `npm audit fix` to fix them, or `npm audit` for details

    yansheng@MECHREVO MINGW64 /h/Hexo (blog)
    $ hexo s
    (node:1612) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
    INFO  Start processing
    INFO  Generating Baidu urls for last 100 posts
    INFO  Posts urls generated in baidu_urls.txt
    https://yansheng836.github.io/archives/undefined.html
    https://yansheng836.github.io/archives/undefined.html
    https://yansheng836.github.io/archives/undefined.html
    https://yansheng836.github.io/archives/undefined.html
    https://yansheng836.github.io/archives/undefined.html
    https://yansheng836.github.io/archives/undefined.html

    INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

    弊端

    其实使用这个也有弊端：

    • 按照原格式，发布后，在github仓库中你能很清楚地看到你写博客的日期，因为是按照网址分文件夹的。使用该插件后就看不到了。
      file

    分类和标签路径名英文化

    上面我们已经实现将文章的URL简短化和英文化了，但是如果我们的标签和分类有中文，这个插件是控制不了的，

    比如有个生活的标签，该标签下的所有文章汇总如下：http://localhost:4000/tags/生活/，还是会出现中文，其实这个问题hexo官方自带解决方法，详见：hexo-configuration：分类-amp-标签

    截个图：

    站点的配置文件H:\Hexo\_config.yml有category_map和tag_map配置，即分类和标签的别名（映射），举个例子：

    1
    2
    3
    4
    5
    6
    # Category & Tag
    default_category: uncategorized
    category_map:
        编程: programming
    tag_map:
        生活: life

    这样标签生活的访问网址为：http://localhost:4000/tags/life/，分类同理。

    参考：https://yq.aliyun.com/articles/8607?spm=0.0.0.0.TP5ICj

    ]]> + + + + + + hexo + + yilia + + + + + + + + + 建站日志 + + /article/e62c38c4.html + + 记录hexo+yilia博客建立过程

    博客截图

    特别说明

    该篇博客仅用于记录博客搭建过程。因为这篇文章是后面补的，不是同步进行的，所以有些内容可能有所修改，可能还会存在错误。如需借鉴，仅供参考，如果出现问题可以在文末提问，我知无不言。

    前期添加的功能都使用git进行管理，在文中放了对应提交的链接，所以就没有怎么写博客；后面使用另一个私有仓库存放博客配置和源码，因此后期的功能没有在文章中放链接，但是有写博客，可以到博客中搜索。

    统一说明：在配置文件中，开启配置一般设置为true,关闭为false，因为有些功能我可能暂时不需要可能设置为false了，因此也可能不能在我的博客中预览效果。

    2019年11月10日

    • 添加hexo-yilia系列博客。

    2019年11月9日

    • 修复APlayer播放器的bug。更新音乐。
    • 添加功能标签tag，更新CHANGELOG.md。
    • 添加8个背景特效。
    • 修改背景图片（压缩后生成至阿里云OSS）。

    2019年11月8日

    • 添加按钮，实现缩小左侧边栏的效果。
    • 添加背景图片。（同时可能设置到需要修改很多样式问题）

    2019年11月7日

    • URL持久化，使用简短的URL。
    • 更新关键字和描述。
    • 替换渲染引擎，支持表情。

    2019年11月6日

    • 修改’展开全文’的按钮的样式。
    • 使用clipboard.js实现复制代码块的功能。
    • 添加爬虫协议robots.txt。
    • 添加百度分析和google分析。

    2019年11月5日

    • 修改部分样式。
    • 替换APlayer音乐的音乐外链为自己七牛云的外链。
    • 添加utteranc评论系统。

    2019年11月4日

    • 添加网站运行时间，如：本站已安全运行 101 天 12 小时 13 分 41 秒。
    • 添加ICP备案号，如：粤ICP备00000000号。
    • 修改一些超链接的样式。
    • 添加看板娘：Live2D。

    2019年11月3日

    • 修复底部建站时间（配置关键字’since’）无效的问题：如配置since: 2019，应该显示@2018-2019。

    2019年11月2日

    • 添加 APlayer音乐播放器。
    • 修改超链接和引用块的样式。

    2019年10月30日

    1. 修改代码块的样式。
    2. 修改文章内的超链接的样式。
    3. 修改分类页面的标题的样式。

    https://github.com/yansheng836/yansheng836.github.io/commit/ddbabc0689f66618810e17e8d0d3ac1a885cb815

    2019年10月18日

    2019年10月17日

    2019年8月20日

    2019年8月17日

    2019年8月16日

    • 为博客添加valine评论。v1.0.2

    2019年8月15日

    2019年7月29日

    • 为头像增加旋转效果：当鼠标悬浮到头像时，头像旋转一圈。v0.1.8
    • 安装hexo-admin插件：hexo-admin是一个hexo博客引擎的管理用户界面插件，左边编写博客、右边预览效果。v0.1.9

    2019年7月27日

    • 添加背景音乐：侧边栏添加（网易云链接的）背景音乐。v0.1.6
    • 为博客设置404页面。v0.1.7

    2019年7月26日

    • 添加“不蒜子”访问量统计功能。v0.1.4
    • 设置文章置顶功能：默认的设置是按照时间进行排序，时间越后面顺序越往前；修改后可通过在文章中设置top属性设置文章置顶顺序，top值越大顺序越往前。v0.1.5

    2019年7月25日

    • 建站，配置yilia主题的基本信息。主要是用自己的个人信息替换主题模板的信息，如网站、网址、标签、菜单、子导航栏、网站图标、社交关系SubNav图标等。
    • 处理“标签不能正常显示的问题”。
    • 增加侧边导航栏的SubNav图标。v0.1.1
    • 新增侧边栏归档、分类、标签内容。存在bug（归档可以，但是分类和标签无效）。v0.1.2
    • 设置建站时间（有bug，无效）。
    • 添加字数统计和阅读时长功能。v0.1.3

    2019年7月22日

    初次建站，忘记有个什么东西弄错了，但是没有办法恢复，即使hexo是使用Git进行管理的，只能是重新开始。（不能恢复的原因详见下文的master分支的介绍。）

    研究一番后，得出一个结论：备份，备份，备份！！！

    推荐两种备份方法：

    1. 一个GitHub仓库，两个分支：一个分支存放hexo博客源码和配置，另一分支存放发布后的HTML网页。
    2. 两个GitHub仓库：一个仓库存放hexo博客源码和配置（如果需要(比如有私密信息)，可以将该仓库设置私有仓库），另一仓库存放发布后的HTML网页。

    我采用第一种方式：

    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia的标签和分类的区别 + + /article/5026011a.html + + 测试标签和分类的区别

    重点：分类是有层级关系的，而标签没有。因此如何将分类显示出来也是比较麻烦的，暂时为实现。
    下面主要看分类：

    引用自官方文档：https://hexo.io/zh-cn/docs/front-matter#JSON-Front-matter

    分类方法的分歧

    如果您有过使用 WordPress 的经验，就很容易误解 Hexo 的分类方式。WordPress 支持对一篇文章设置多个分类，而且这些分类可以是同级的，也可以是父子分类。但是 Hexo 不支持指定多个同级分类。下面的指定方法：

    1
    2
    3
    categories:
      - Diary
      - Life

    会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

    如果你需要为文章添加多个分类，可以尝试以下 list 中的方法。

    1
    2
    3
    4
    categories:
    - [Diary, PlayStation]
    - [Diary, Games]
    - [Life]

    此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。

    ]]>     + + + + + categorie1 + + categorie11 + + categorie21 + + categorie22 + + categorie31 + + + + + + + hexo + + yilia + + + +     + + + + + hexo+yilia集成utteranc评论系统 + + /article/c5f6d65b.html + + hexo+yilia集成utteranc评论系统

    utteranc评论系统是基于GitHub issues的，类似Gitment/Git talk。

    file

    前言

    博客的评论系统还是挺多的，但是也死了挺多的，下面就简单介绍下。(注：以下数据多来自网络，可能存在错误。)

    第一类：已暂停服务的

    • 多说：已于2017年6月1日正式关停服务。
    • 网易云跟帖（网易第三方评论系统）：已于2017年8月1日停止服务。
    • 友言：2018年4月30日停止了服务。

    第二类：第三方，还可以使用的

    • 畅言（搜狐）：畅言是需要备案的，不备案会有15天的试用期。
    • Disqus：听说广告有点多。
    • 来比力（韩国）：挺好的，就是国外的，有点慢，可能会加载不出来。
    • Valine ：国内后端云服务提供商 LeanCloud 提供的评论系统。Valine 的特点：
      • 无后端实现
      • 高速，使用国内后端云服务提供商 LeanCloud 提供的存储服务
      • 开源，自定义程度高
      • 支持邮件通知
      • 支持验证码
      • 支持 Markdown
      • 头像可选择

    第三类：GitHub相关的

    • giteement：基于码云的评论系统，详见：https://gitee.com/zhousiwei/giteement。
    • Gitment/Git talk：基于GitHub issue的评论系统，使用Github Application，问题多，好像只能适配一个网站，不适合多网站发布。好像主要是这两个参数的设置：Homepage URL是你的仓库的名字;Authorization callback URL:网站地址，如果你指向了新的域名就填网站主页地址，如我的https://www.yansheng.xyz；否则写仓库的名字应该也可以（不确定，没使用过）。
    • utteranc：基于GitHub issue的评论系统，官网：https://utteranc.es/，详见下文。

    如需了解更多，可参考下面链接：

    utterances

    介绍

    一个机器人utterances bot，好像是2017年开工的，2018开始火（769star）,2019大热了（截止发文，2878star）。

    网址：https://utteranc.es/，下面是官网的介绍：

    A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!

    • Open source. 🙌
    • No tracking, no ads, always free. 📡🚫
    • No lock-in. All data stored in GitHub issues. 🔓
    • Styled with Primer, the css toolkit that powers GitHub. 💅
    • Dark theme. 🌘
    • Lightweight. Vanilla TypeScript. No font downloads, JavaScript frameworks or polyfills for evergreen browsers. 🐦🌲

    当有人评论时，自动在指定仓库创建一个issues，用于评论。（issues名可指定为多种形式）

    使用

    网上找的好像都是使用next主题的，如

    没有找到相同的，只能自己摸索了。

    1.安装应用

    安装utterances应用，网址 https://github.com/apps/utterances ，设置指定仓库即可。

    2.配置基本参数

    官方（主页）其实自带教程，配置相关参数，生成脚本如下：

    1
    2
    3
    4
    5
    6
    7
    <script src="https://utteranc.es/client.js"
            repo="yansheng836/yansheng836.github.io"
            issue-term="title"
            theme="github-light"
            crossorigin="anonymous"
            async>
    </script>

    解释一下主要参数：

    • repo：存放评论的issues的仓库名（即步骤1指定访问的仓库），可以和博客相同，也可以不同。
    • issue-term：指定issues的标题，title表示使用文章的标题作为issues的标题。可选参数（只介绍部分）：
    • theme：评论系统的主题，在Theme里面，选择主题，页面会变色：https://utteranc.es/#heading-theme
      github-light
      file
      github-dark
      file

    3.hexo+yilia配置

    直接嵌入

    修改：H:\Hexo\themes\yilia\layout\_partial\article.ejs，在博客评论系统代码附近，添加如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!-- 《utteranc评论：基于github issue的评论系统 -->
    <div>
        <section id="comments" class="comments">
          <style>
            .utterances{max-width: 100%;}
          </style>
            <script src="https://utteranc.es/client.js"
                    repo="yansheng836/yansheng836.github.io"
                    issue-term="title"
                    theme="github-light"
                    crossorigin="anonymous"
                    async>
            </script>
      </section>
    </div>
    <!-- utteranc评论》 -->

    在官网也有介绍到:Customize the layout using the.utterancesand.utterances-frameselectors.，如果需要控制样式，可以通过这两个选择器。因为指定了.utterances{max-width: 750px;}，我试了下，在yilia主题下，宽度不能充满评论区域，所以进行了调整。

    灵活嵌入

    可主题的配置文件中进行配置

    1
    2
    3
    4
    5
    6
    #7.utteranc评论： https://utteranc.es (参数配置详见主页)
    utterance:
      enable: true
      repo: 'yansheng836/yansheng836.github.io'     #仓库名字,格式：你的用户ID/仓库名称，如：blog/utterance_repo
      issue_term: 'title'            #映射配置
      theme: 'github-light'          #主题

    修改：H:\Hexo\themes\yilia\layout\_partial\article.ejs，在博客评论系统代码附近，添加如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!-- 《utteranc评论：基于github issue的评论系统 -->
    <% if (theme.utterance && theme.utterance.enable){ %>
        <section id="comments" class="comments">
          <style>
            .utterances{max-width: 100%;}
          </style>
            <script src="https://utteranc.es/client.js"
                    repo="<%= theme.utterance.repo %>"
                    issue-term="<%= theme.utterance.issue_term %>"
                    theme="<%= theme.utterance.theme %>"
                    crossorigin="anonymous"
                    async>
            </script>
      </section>
    <% } %>
    <!-- utteranc评论》 -->
    ]]> + + + + + + hexo + + yilia + + + + + + + + + hexo+yilia添加valine评论系统 + + /article/658be5fc.html + + hexo+yilia添加valine评论系统

    mmDUS0.jpg

    参考链接

    1.注册leancloud

    到官网：https://leancloud.cn，注册一个账号，然后创建应用，名字可以随意。然后会生成一个应用，有对应的APP ID，APP KEY，在设置>应用key可以查看。

    2.hexo设置

    2.1 在博客主题文件中添加评论设置

    在H:\Hexo\themes\yilia\_config.yml大概在#5、Gitment后面添加valine设置，内容如下（注意把里面的APP ID，APP KEY换成自己应用中的信息）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    #6、Valine https://valine.js.org
    valine: 
     appid: 'APP ID'  #Leancloud应用的appId
     appkey: 'APP KEY'  #Leancloud应用的appKey
     verify: false #验证码
     notify: false #评论回复提醒
     avatar: retro #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
     #头像类型可见： https://valine.js.org/avatar.html
     placeholder: Just go go #评论框占位符

    2.2 为article.ejs添加valine评论

    在H:\Hexo\themes\yilia\layout\_partial\article.ejs中搜索这行代码<% if (!index && post.comments){ %>，在其后面添加代码：(这个代码是有响应式的)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
        <section id="comments" class="comments">
          <style>
            .comments{margin:30px;padding:10px;background:#fff}
            @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
          </style>
          <%- partial('post/valine', {
            key: post.slug,
            title: post.title,
            url: config.url+url_for(post.path)
            }) %>
      </section>
    <% } %>

    2.3 新建文件valine.ejs

    新建文件H:\Hexo\themes\yilia\layout\_partial\post\valine.ejs，内容为：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div id="vcomment" class="comment"></div> 
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
    <script>
       var notify = '<%= theme.valine.notify %>' == true ? true : false;
       var verify = '<%= theme.valine.verify %>' == true ? true : false;
        window.onload = function() {
            new Valine({
                el: '.comment',
                notify: notify,
                verify: verify,
                app_id: "<%= theme.valine.appid %>",
                app_key: "<%= theme.valine.appkey %>",
                placeholder: "<%= theme.valine.placeholder %>",
                avatar:"<%= theme.valine.avatar %>"
            });
        }
    </script>

    3.生成发布

    1
    2
    hexo g
    hexo s  #本地可以预览效果，或者hexo d

    4.后台查看数据

    应用>存储>comment

    注意：这里还要设置一下web安全域名，位置：应用>设置>安全中心>Web安全域名

    5.升级

    5.1头像设置

    可切换多种头像，请看下面代码：

    1
    2
    avatar: retro #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
     #头像类型可见： https://valine.js.org/avatar.html

    5.2验证码

    这个比较多争议，官网是说：“由于是无后端的评论系统，验证工作也就只能在前端做，体验上可能不会太优雅。

    验证码默认是关闭的，如果你觉得太烦人或者太反人类，那就请不要打开。”

    5.3邮箱验证

    这个我暂时也不知道怎么设置。

    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + 2016十大校花排行榜，美翻了 + + /article/6216745.html + + 根据教育君长期收集的资料，总结了一份全国十大高校校花的花名册。
    图片太美，惹人心醉。大家看之前控制好自己的情绪。

    鞠婧祎

    武汉大学校花——樱花

    武汉大学的樱园是出了名的美，不少电影电视剧前去取景。

    img

    北京大学校花——荷花

    北大未名湖里的荷花，出淤泥而不染，濯清涟而不妖。

    img

    清华大学校花——丁香花

    你说你最爱丁香花，因为你的名字就是她。

    img

    天津外国语大学校花——玉兰花

    雪白的玉兰花正如同天外校园里那一袭白裙的女生们，不艳丽却分外出彩。

    img

    中山大学校花——木棉花

    木棉喜怒按在南方，北方的爷们，是否会喜爱这朵来自南方的姑娘。

    img

    哈尔滨工业大学校花——杜鹃花

    不怕冷，傲娇，杜鹃花就是如此要强。

    img

    湖南大学校花——芙蓉花

    吸烟的朋友都会知道，有一款香烟叫芙蓉王。

    img

    福州大学校花——蝴蝶兰

    此花虽美，却也娇气的出奇。

    img

    浙江大学校花——栀子花

    栀子花开呀开，栀子花开呀开，栀子花开呀开，栀子花开呀开。

    img

    复旦大学校花——海棠花

    投我以木桃，报之以琼瑶;匪报也，永以为好也!投我以木李，报之以琼玖;匪报也，永以为好也!

    img

    转自：http://mini.eastday.com/mobile/170102070337255.html

    ]]>     + + + + + + 生活 + + + +     + + + + + 文件对比软件:Beyond Compare 4-破解方法 + + /article/660ecf00.html + + Beyond Compare允许您快速轻松地比较文件和文件夹。通过使用简单，强大的命令，您可以专注于您感兴趣的差异，并忽略那些您不感兴趣的差异。然后，您可以合并更改，同步文件并生成记录报告。
    很强大的一个文本比较工具（、文件夹……好像啥都行），用过就会爱不释手。
    file

    介绍

    主页：https://www.scootersoftware.com/index.php
    具体功能介绍：https://www.scootersoftware.com/features.php?zz=features_focused
    下载页面：https://www.scootersoftware.com/download.php
    下载步骤如下：
    img

    0、补一波注册码：（2019年7月5日）

    我之前找过一些注册码但是都失效了（下文也说过），但是最近偶然找到这个真的是牛，之前是一个账号只能一个人用，这个可以同时支持9999！有图有真相：

    img

    注意下这里提供了两种的注册码bc3和bc4，按需自取，每个小点即为一个注册码，例如：下面bc3的第一个注册码(即你需要复制的内容)为：

    — BEGIN LICENSE KEY —
    +WzZmc9nOhf6Nq6UZrdlTiyRwwkF0g0kc7Qi1m8u4W70MKkkGmx8GCAfApSsGZWmnyb-DxvqT4hWqmxDqP96NU
    — END LICENSE KEY —–

    输入秘钥步骤也很简单：（软件上面菜单栏）帮助–>输入密码–>把注册码直接复制进去–>注意要勾选“针对所有用户注册”–>确定–>重启。

    // Universal Unlock Keys //

    • for Beyond Compare v3.x.x on Win/Mac/Linux:

      • — BEGIN LICENSE KEY —
        +WzZmc9nOhf6Nq6UZrdlTiyRwwkF0g0kc7Qi1m8u4W70MKkkGmx8GCAfApSsGZWmnyb-DxvqT4hWqmxDqP96NU
        — END LICENSE KEY —–

    • — BEGIN LICENSE KEY —
      KkSCJ2mU2A5bC4PJBxcZuLPp6HcOvLW0N97IdgEpNl+TqMfhtGEYEZEGXoAjYDwH-aI88DuxPWiUtxkhOoyGWU
      — END LICENSE KEY —–

    • — BEGIN LICENSE KEY —
      nH3s9i9zmBiRjkoPALth4x97WARK9nb-qbp4q3LemOPJ4EtsYjWhTbR8VhauOSAluBJVvxV4kEc5waolW1m7B7JzJXE6YVapYW7f+tRRXRFI4yn4NjjZ0RiiqGRCTVzwComUcXB-eiFWRBY6JpSsCNkmIxL5KsRCo442djHhTZE+
      — END LICENSE KEY —–

    • — BEGIN LICENSE KEY —
      Vf5EsE8iQYtXQxeG46emmFmWioaxoyQt8qSioqZ6q3K86JnfjJ9IAjXZMA8AuHD
      +932+OIqXOKwcOupap+MONdJzJXE6YVapYW7f+tRRXRFI4yn4NjjZ0RiiqGRCTVz

      wComUcXB-eiFWRBY6JpSsCNkmIxL5KsRCo442djHhTZE+
      — END LICENSE KEY —–

      • — BEGIN LICENSE KEY —
        gQKdhUEz-lQ3eol25s7vt5UamLLDeu+t6Ud+OWz8ULka40y71BYSDyC8drGILcz01

      +rvSpRpgOjCKj6N93VUKtJzJXE6YVapYW7f+tRRXRFI4yn4NjjZ0RiiqGRCTVzwComUcXB-eiFWRBY6JpSsCNkmIxL5KsRCo442djHhTZE+
      — END LICENSE KEY —–

    • for Beyond Compare v4.x.x on Win/Mac/Linux:

      • — BEGIN LICENSE KEY —
        L+wNGHgqTtetFnWpzTyfCIsnGMJOaPjZRTwdNyY9jMv1zzHpRQHFX-YaSqfNgijG-qufcsJpzGlhQZ+J8GyYkz8vC0Z54YIMCNrpEr5sXQZG3Ae9SYFUiNgaUpRE3K0ETY3go

      NvnJ8LvALwVgCbgj+E2DsK88L+zzLdqRze5yrwNMS+NtnQucM0EOjeC9mhUnyLZqB4x3W1iDwcYCKhFnZSSM7Fb+BMPbe-SBnToqnk4aNJ1hxanlk+rH8iYHh8RrGFkHiSV6QCS+5UBs28gGGYq-Yo1HwQsCI-KSpLJpGGuz+EyTcCz9r8v1uThuNbuWhX0ZNZR0DrmjC+obgg4-k++
      — END LICENSE KEY —–

    • — BEGIN LICENSE KEY —
      H1bJTd2SauPv5Garuaq0Ig43uqq5NJOEw94wxdZTpU-pFB9GmyPk677gJ
      vC1Ro6sbAvKR4pVwtxdCfuoZDb6hJ5bVQKqlfihJfSYZt-xVrVU27+0Ja
      hFbqTmYskatMTgPyjvv99CF2Te8ec+Ys2SPxyZAF0YwOCNOWmsyqN5y9t
      q2Kw2pjoiDs5gIH-uw5U49JzOB6otS7kThBJE-H9A76u4uUvR8DKb+VcB
      rWu5qSJGEnbsXNfJdq5L2D8QgRdV-sXHp2A-7j1X2n4WIISvU1V9koIyS
      NisHFBTcWJS0sC5BTFwrtfLEE9lEwz2bxHQpWJiu12ZeKpi+7oUSqebX+
      — END LICENSE KEY —–

    • — BEGIN LICENSE KEY —
      8QP7zlhDPb+aoFyysKK68NwROgI0+mNV1pEhPK2CQF95zYrEF9gvL8TfR
      moO+BiBoJu1T4g-3i0lpQ1BytfO7QL4jnXU-G18UuzNCGL3JtqLxJghs2
      2gzB5VZnYKQfXfYZG2LL-Vjl43k4Pili1DCBCXsMm3xei6VKeiw4eWFwJ
      A91xx0gngBUWCpK4GvKSEW0VNqCwECuLUXMie2MMogTmySJ6Xn7Rf2rgy
      3wqgxExgQWVCVbdD7e3phco7vt2xTH2m0qJEoFN3HVf9l5PWQCO3JflvS
      CSmQYw+ZkpFcZtfH3EPZBAkfjMEbbTwOTNJT-PTixf2619csMbgIn+M5E
      ++
      — END LICENSE KEY —–

    转自：BEYOND COMPARE – INTELLIGENT AND ALL-ROUND COMPARISON FOR FILES & FOLDERS

    因为这个软件是付费的，试用30天后需要购买注册码，我们一般都会去网上找别人分享的注册码，但是好像不知道怎么回事会失效（我找的就失效了……）。这里介绍几个我找到的几种破解方法：（这里以bc4为例，bc3的话注意修改一下对应路径）

    1、删除指定文件夹内容：（亲测可用）

    img
    **C:\Users\Administrator\AppData\Roaming\Scooter Software\Beyond Compare 4\**

    删除上面文件夹的全部内容。

    注意一下那个路径，如果没有Administrator的话说明不是用的默认用户，找自己的用户名下的对应文件夹也一样的。

    参考：https://blog.csdn.net/ghd602338792/article/details/85700014

    2、删除对应注册表

    （1）在（文件资源管理器，即此电脑）搜索栏中输入 regedit（或者用命令行打开：win+R，输入：regedit ，回车确定），打开注册表。
    （2）删除项目：计算机\HKEY_CURRENT_USER\Software\Scooter Software\Beyond Compare 4\CacheId
    img

    参考：https://blog.csdn.net/vuvivian/article/details/87772437

    3、删除指定文件夹内容：

    修改C:\Program Files\Beyond Compare 4\BCUnrar.dll ,这个文件重命名或者直接删除，则会新增30天试用期，再次打开提示还有28天试用期。

    参考：https://blog.csdn.net/weixin_40751723/article/details/86218785

    这几个方法应该有那么一两个有效吧。

    文章首发于csdn:https://blog.csdn.net/weixin_41287260/article/details/88927174

    ]]>     + + + + + + 工具软件 + + 软件破解 + + + +     + + + + + 一分钟教你快速识别不同茶叶分类！ + + /article/2928fb74.html + + 中国被称为茶的故乡，不仅因为这里的土地孕育出世界最早的茶树，更因为这里的人们将茶视为一种沟通天地的生命。茶树在中国大地上繁衍，更因气候和土壤的不同，分化出多样的品种，加之不同的制作工艺，茶叶的品类更加丰富起来。对于初识茶者，了解茶叶的分类便成为必修课。

    茶叶

    【茶的分类】

    以茶汤色泽和茶叶的制作工艺分类应该是最权威、最通俗的茶叶分类方法了。根据《中国茶经》的定义，所有的茶可以归为绿茶、黄茶、白茶、青茶（又称乌龙茶）、红茶、黑茶六大类。

    茶叶

    【绿茶】

    绿茶，不发酵，浅绿的汤色。根据杀青工艺不同分为：炒青绿茶、烘青绿茶、晒青绿茶、蒸青绿茶四种。

    茶叶

    不同绿茶，茶香特色不同。其中炒青香高，多为炒豆香和栗子香，亦有花果香。小伙伴们比较熟悉的西湖龙井，即是炒青绿茶中的细嫩炒青；烘青多清香、花果香；蒸青则多有类海苔的鲜香。

    茶叶

    【黄茶】

    黄茶，10%-20%轻发酵，汤色黄而亮。经过闷黄，形成特有的黄汤黄叶。其香也因工艺和原料而各有特色。蒙顶黄芽、君山银针类的黄芽茶，香气鲜嫩、清新；沩山毛尖、霍山黄大茶因烘焙工艺，而分别具松烟香和锅巴香。

    茶叶

    【白茶】

    轻度发酵的茶(发酵度为20～30%）。老白茶是采摘后，不经杀青或揉捻，只经过晒或文火干燥后加工的茶。具有外形芽毫完整，满身披毫，毫香清鲜，汤色黄绿清澈，滋味清淡回甘的品质特点。代表茶叶品种有：白毫银针、白牡丹等。

    茶叶

    【青茶】

    又称乌龙茶，半发酵的茶(发酵度为30～60%）。以香气著称，多按照产地划分，也是茶叶中品类最丰富的一类茶。它既有绿茶的鲜浓，又有红茶的甜醇。因其叶片中间为绿色，叶缘呈红色，故有“绿叶红镶边”之称。

    茶叶

    代表茶叶品种有：铁观音、大红袍、冻顶乌龙茶。这也是目前市面上主要最常见的三个品种。

    茶叶

    【红茶】

    全发酵的茶(发酵度为80～90%），世界上最早的红茶由中国明朝时期福建武夷山茶区的茶农发明，名为“正山小种”。按照其加工的方法与出品的茶形，一般又可分为三大类：小种红茶、工夫红茶、红碎茶和红茶茶珍。

    茶叶

    小种红茶是最古老的红茶，其他红茶都是从小种红茶演变而来的。除中国外，国外的红茶品种主要有印度的大吉岭红茶、斯里兰卡的锡兰红茶、印度的阿萨姆红茶。

    茶叶

    【黑茶】

    全发酵的茶，是六大茶类中工艺最复杂的茶了，也是唯一耐得住时间消磨的茶，而且有越陈越好的神奇特性在。工艺的复杂加上地域的风俗，造就了黑茶大家庭的盛况。

    茶叶

    主要有湖南黑茶、湖北老青茶、四川边茶、滇桂黑茶、安徽六安黑茶、云南普洱茶，影响力最大的，茶文化最普及的当属云南普洱茶，这得益于有着茶树发源地之称的云南极其丰富的茶树资源，加上愈百万年之久的时间沉积所孕育的山头茶底蕴，赋予了普洱茶与生俱来的口感魅力。

    茶叶

    以上词条内容均来源网络，均系原作者观点及所有，仅供参考。

    文章转自：京东-健康养生系列文章：https://www.jd.com/phb/zhishi/ed341c769764dba8.html

    ]]>     + + + + + + 生活 + + + +     + + + + + hexo4.扩展主题的个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章 + + /article/3efe2740.html + +

    虽然yilia主题已经集成了挺多功能的，界面也很不错。但是在某些方面好像还是略有欠缺。这篇博客主要是介绍一些外加的扩展功能。

    一、增加侧边导航栏的SubNav图标

    参考：修改Yilia左下角SubNav的社交图标
    Font Awesome:一套绝佳的图标字体库和CSS框架

    1. 这里只是添加csdn和gitee图标，其他可以参照上面两个链接进行设置。在H:\Hexo\themes\yilia\source\main.0cf68a.css文件中添加下面的代码（最好是在gitbub附近，分类管理）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    /* 1.这是github的默认图标 */
    .icon-github:before {
        content:"\E735"
    }
    /* 添加码云和CSDN的标签的图标 */
    .icon-gitee:before {
        content:"码"
    }
    .icon-csdn:before {
        content:"C"
    }

    /* 2.这是之前github的 */
    #header .header-nav .social a.github {
        background:#afb6ca;
        border:1px solid #afb6ca
    }
    #header .header-nav .social a.github:hover {
        border:1px solid #909ab6
    }

    /* 下面两个是新增的csdn和gitee */
    #header .header-nav .social a.csdn {
        background:#C71D23;
        border:1px solid #C71D23;
    }
    #header .header-nav .social a.csdn:hover {
        border:1px solid #C71D23;
    }
    #header .header-nav .social a.gitee {
        background:#C71D23;
        border:1px solid #C71D23;
    }
    #header .header-nav .social a.gitee:hover {
        border:1px solid #C71D23;
    }
    1. 在H:\Hexo\themes\yilia\_config.yml的中导航栏subnav中添加对应代码，添加后如下
    1
    2
    3
    4
    subnav:
      github: "https://github.com/username"
      gitee: "https://gitee.com/username"
      csdn: "https://blog.csdn.net/username"

    二、新增侧边栏归档、分类、标签内容–有bug（分类、标签）

    参考：hexo-theme-next的wiki：创建分类页面

    1. 添加一个分类页面，并在菜单中显示页面链接。
      新建一个页面，命名为 categories 。命令如下：
      hexo new page categories
    2. 编辑刚新建的页面，将页面的类型type设置为 categories ，主题将自动为这个页面显示所有分类。
    1
    2
    3
    title: 分类
    date: 2014-12-22 12:39:04
    type: "categories"
    1. 注意：如果有启用多说 或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false，如：
    1
    2
    3
    4
    title: 分类
    date: 2014-12-22 12:39:04
    type: "categories"
    comments: false
    1. 在菜单中添加链接。编辑主题的_config.yml ，将 menu中的 #categories: /categories注释去掉，如
    1
    2
    3
    4
    5
    6
    menu:
      home: /
      categories: /categories
      archives: /archives
      tags: /tags
    Add a custom footer

    三、设定站点建立时间–有bug（没有实现）

    参考：https://github.com/iissnan/hexo-theme-next/wiki/%E8%AE%BE%E5%AE%9A%E7%AB%99%E7%82%B9%E5%BB%BA%E7%AB%8B%E6%97%B6%E9%97%B4

    这个时间将在站点的底部显示，例如 ? 2013 - 2015

    编辑主題的 _config.yml，新增字段 since。

    1
    since: 2013

    四、添加字数统计和阅读时长功能

    参考：hexo下yilia主题添加字数统计和阅读时长功能

    1. 安装 hexo-wordcount
      在博客目录下打开Git Bash Here,输入命令:
      npm i --save hexo-wordcount
    2. 文件配置
      在theme\yilia\layout\_partial\post下创建word.ejs文件：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div style="margin-top:10px;">
        <span class="post-time">
          <span class="post-meta-item-icon">
            <i class="fa fa-keyboard-o"></i>
            <span class="post-meta-item-text">  字数统计: </span>
            <span class="post-count"><%= wordcount(post.content) %>字</span>
          </span>
        </span>

        <span class="post-time">
          &nbsp; | &nbsp;
          <span class="post-meta-item-icon">
            <i class="fa fa-hourglass-half"></i>
            <span class="post-meta-item-text">  阅读时长: </span>
            <span class="post-count"><%= min2read(post.content) %>分</span>
          </span>
        </span>
    </div>

    然后在themes/yilia/layout/_partial/article.ejs中添加:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div class="article-inner">
        <% if (post.link || post.title){ %>
          <header class="article-header">
            <%- partial('post/title', {class_name: 'article-title'}) %>
            <% if (!post.noDate){ %>
            <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
            <!-- 需要添加的位置 -->
            <!-- 开始添加字数统计-->
            <% if(theme.word_count && !post.no_word_count){%>
              <%- partial('post/word') %>
              <% } %>
            <!-- 添加完成 -->

            <% } %>
          </header>
    1. 开启功能
      在站点的_config.yml中添加下面代码:
    1
    2
    3
    # 是否开启字数统计
    #不需要使用，直接设置值为false，或注释掉
    word_count: True

    五、添加“不蒜子”访问量统计功能

    官网：不蒜子 - 极简网页计数器：http://busuanzi.ibruce.info/

    参考：Hexo博客添加访问量统计

    注意：本地测试时，访问量是不准确的！

    1. 配置是否开启不蒜子访问量统计功能
      在themes/yilia/_config.yml添加属性
    1
    2
    3
    # 是否开启访问量统计功能(不蒜子)
    busuanzi:
     enable: true
    1. 引入不蒜子并添加站点访问量
      在themes/yilia/layout/_partial/footer.ejs末尾(之前)添加如下代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <% if (theme.busuanzi && theme.busuanzi.enable){ %>
            <!-- 不蒜子统计 -->
            <span id="busuanzi_container_site_pv">
                    本站总访问量<span id="busuanzi_value_site_pv"></span>次
            </span>
            <span class="post-meta-divider">|</span>
            <span id="busuanzi_container_site_uv" style='display:none'>
                    本站访客数<span id="busuanzi_value_site_uv"></span>人
            </span>
            <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
      <% } %>
    1. 添加文章访问量

    我找到的添加位置主要有两种，下面会上图，可以选择自己喜欢的，推荐第一种。
    3.1 这种形式是：外面不显示，只在文章里面才显示，位置为右上角时间的右边。
    在themes/yilia/layout/_partial/post/date.ejs开头添加如下代码

    1
    2
    3
    4
    5
    6
    <% if (theme.busuanzi && theme.busuanzi.enable && !index){ %>
            <!-- 不蒜子统计 -->
            <span id="busuanzi_container_page_pv" style='display:none' class="<%= class_name %>">
                  <i class="icon-smile icon"></i> 阅读数：<span id="busuanzi_value_page_pv"></span>次
            </span>
    <% } %>

    主页样式：enG0f0.jpg
    文章样式（注意右上角）：enGDpV.jpg

    3.2 这种形式是：显示在标签的后面，即不仅文章里面会显示，外面主页也会显示，个人感觉体验略差。
    参考：hexo yilia 文章浏览量统计
    需要修改的文件：H:\Hexo\themes\yilia\layout\_partial\article.ejs

    1
    2
    3
    4
    5
    6
    7
     <%- partial('post/tag') %>

    <!-- 文末访问量统计（开始） -->
    <span id="busuanzi_container_page_pv">
        |阅读量:<span id="busuanzi_value_page_pv"></span>次
    </span>
    <!-- 文末访问量统计（结束） -->

    主页和文章样式（注意标签后面，因为之前忘记截图了，这是我自己标记的位置，不是实际显示效果）：enGwYq.jpg

    六、设置文章置顶功能

    参考：解决Hexo博客文章置顶问题：https://zhwhong.cn/2017/03/23/deal-with-hexo-article-top-problem/
    （这篇博客用的是另一个基于yilia的主题，感觉还是挺不错的，github：https://github.com/MOxFIVE/hexo-theme-yelee，但是也停止更新很久了……）
    原理：在Hexo生成首页HTML时，将top值高的文章排在前面，达到置顶功能。
    修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js，在生成文章之前进行文章top值排序。

    注意：一般情况下，git默认是忽略该文件的，所以应该先将该文件加到仓库，提交一次进行备份，然后再进行修改，不然不能实现备份该文件功能，可参考下面的示例代码进行操作：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 为了方便起见，不修改.gitignored文件，直接将该文件强制加入仓库。
    # 注意：修改后，再添加该文件时也要强制添加
    git add -f node_modules/hexo-generator-index/lib/generator.js

    # 参看是否添加成功，应该会变成绿色，表示已加入暂存区
    git status

    # 提交一次
    git commit -m "back up node_modules/hexo-generator-index/lib/generator.js"

    下面是generator.js修改后的代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    'use strict';

    var pagination = require('hexo-pagination');

    module.exports = function(locals) {
      var config = this.config;
      var posts = locals.posts.sort(config.index_generator.order_by);

      posts.data = posts.data.sort(function(a, b) {
          if(a.top && b.top) {
              if(a.top == b.top) return b.date - a.date;
              else return b.top - a.top;
          }
          else if(a.top && !b.top) {
              return -1;
          }
          else if(!a.top && b.top) {
              return 1;
          }
          else return b.date - a.date;
      });

      var paginationDir = config.pagination_dir || 'page';

      return pagination('', posts, {
        perPage: config.index_generator.per_page,
        layout: ['index', 'archive'],
        format: paginationDir + '/%d/',
        data: {
          __index: true
        }
      });
    };

    补充另一种：置顶方式：通过插件来实现。参考：Hexo—Yilia主题的归档页置顶

    1. blog目录下执行以下命令：
    1
    2
    npm uninstall hexo-generator-index --save
    npm install hexo-generator-index-pin-top --save
    1. 然后在文章头添加 top:true 如：
    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: 终于装好Hexo啦
    date: 2018-04-19 00:04:46
    tags: 心情
    top: true
    categories:
    - 你好，世界
    ---

    七、添加背景音乐

    参考：hexo+yilia个性化之-添加背景音乐

    1. 到网易云官网获取音乐外链：搜索音乐–>生成外链播放器–>复制代码
    2. 打开路径 themes/yilia/layout/_partial/left-col.ejs，在</nav>上面添加代码，就像下面这样。
    1
    2
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=228 height=86 src="//music.163.com/outchain/player?type=2&id=1371939273&auto=0&height=66"></iframe>
    </nav>
    1. 根据需要设置宽高属性，宽建议228。

    八、为博客设置404页面

    参考：github官网介绍：https://help.github.com/cn/articles/creating-a-custom-404-page-for-your-github-pages-site

    在/source/目录下新建404.md在头部添加属性permalink: /404.html，页面内容可以自定义。

    例1：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    ---
    # example 404.md
    title: 404 Not Found：该页无法显示
    permalink: /404.html
    ---

    # 404

    Page not found! :(

    推荐使用腾讯公益404页面（注意要把首页链接换成自己的）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    ---
    title: 404 Not Found：该页无法显示
    date: 2019-07-26 21:51:29
    permalink: /404.html
    ---

    <!DOCTYPE html>
    <html>
        <head>
             <meta charset="UTF-8" />
             <title>404</title>                           
        </head>
        <body>
             <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="返回首页" homePageUrl="https://www.yansheng.xyz/"></script>
    </body>
    </html>

    然后转换、部署就可以了。

    1
    2
    3
    hexo clean
    hexo g
    hexo d

    九、为头像增加旋转效果

    参考：hexo模版yilia头像增加旋转效果/

    1.在themes\yilia\source\文件夹下
    增加一个css文件avatarrotation.css用来旋转360度
    内容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .left-col #header .profilepic img {
    /* 控制旋转速度时间*/
      -webkit-transition: -webkit-transform 1.0s ease-out;
      -moz-transition: -moz-transform 1.0s ease-out;
      transition: transform 1.0s ease-out;
    }
    .left-col #header .profilepic img:hover {
    /* 鼠标经过360% */
      -webkit-transform: rotateZ(360deg);
      -moz-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
    }

    2.然后在themes\yilia\layout\_partial\head.ejs文件中添加进去创建的css文件：
    找到<%- partial('css') %>，在它的下面添加代码，把刚才写的文件添加进去，注意！！是在它的下面添加，不然旋转速度将不会生效

    1
    2
    3
    <% if (theme.avatarrotation){ %>
    <link rel="stylesheet" type="text/css" href="/./avatarrotation.css">
    <% } %>

    如果css不生效，查看css中的href位置是否写错了，可根据你具体存放的位置写路径。

    3.最后在主题文件_config.yml中添加

    1
    2
    #头像是否旋转(如果不要旋转取false)
    avatarrotation: true

    重新发布，最终就可以旋转了！

    十、安装hexo-admin插件

    github官网：https://github.com/jaredly/hexo-admin

    0.插件介绍

    hexo-admin 是一个Hexo博客引擎的管理用户界面插件。这个插件最初是作为本地编辑器设计的，在本地运行hexo使用hexo-admin编写文章，左边写右边预览，然后通过hexo g或hexo d（hexo g是本地渲染，hexo d是将渲染的静态页面发布到GitHub）将生成的静态页面发布到GitHub等静态服务器。如果你使用的是非静态托管服务器，比如自己买的主机搭建的hexo，那么一定要设置hexo-admin 的密码，否则谁都可以编辑你的文章。

    1.安装管理员并启动

    1
    2
    3
    npm install --save hexo-admin
    hexo server -d
    open http://localhost:4000/admin/

    2.密码保护

    如果您在实时服务器上使用Hexo admin，则需要一些密码保护。要启用此功能，只需在hexo中添加一些配置变量_config.yml：

    1
    2
    3
    4
    admin:
      username: myfavoritename
      password_hash: be121740bf988b2225a313fa1f107ca1
      secret: a secret something

    这password_hash是您密码的bcrypt哈希值。本secret是用来做饼干的安全，所以这是一个好主意，有它漫长而复杂。

    Hexo管理员设置中的实用程序可以散列您的密码并admin 为您生成该部分。启动Hexo并转到Settings > Setup authentification 并填写您的信息。将生成的YAML复制到您的_config.yml。

    一旦到位，启动您的hexo服务器，然后/admin/将要求您输入密码。

    3.自定义帖子元数据

    要使用管理界面添加和编辑您自己的帖子元数据，请将元数据变量和自定义变量添加到您的hexo中_config.yml：

    1
    2
    3
    metadata:
      author_id: defaultAuthorId
      language:

    您可以提供将用于初始化新帖子元数据的默认值。这些可以是基元或数组。

    hexo(yilia)+GitHub Pages搭建个人博客系列文章：
    1.hexo1.博客备份-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    2.hexo2.基本框架搭建-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    3.hexo3.主题简单个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    4.hexo4.扩展主题的个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章

    ]]> + + + + + + hexo + + yilia + + + + + + + + + hexo3.主题简单个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章 + + /article/b37cf67a.html + +

    简单介绍一些yilia主题的需要或者说可以自定义的内容，该部分内容主要参考yilia的制作者litten的博客的博客，github网址：https://github.com/litten/hexo-theme-yilia/blob/master/_config.yml
    可通过 hexo s 本地发布，然后通过访问 http://localhost:4000/ 预览效果，进行个性化设置。

    一、主要信息配置：Hexo/_config.yml配置

    一般需要设置一下内容

    1
    site,url,jsonContent(标签不能正常显示的问题)

    注意：标签不能正常显示的问题

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    #标签不能正常显示的问题
    jsonContent:
      meta: false
      pages: false
      posts:
        title: true
        date: true
        path: true
        text: false
        raw: false
        content: false
        slug: false
        updated: false
        comments: false
        link: false
        permalink: false
        excerpt: false
        categories: true
        tags: true

    jsonContent(标签不能正常显示的问题)，该功能需要添加依赖：

    1
    npm i hexo-generator-json-content --save

    二、主题配置Hexo/themes/yilia/_config.yml配置

    1
    menu;subnav;favicon(设置网站图标);avatar(头像);friends(社交)

    注意：favicon设置网站图标，用自己的图标替换H:\Hexo\source\assets\img\favicon.ico，然后修改H:\Hexo\themes\yilia\_config.yml里面的图标链接

    1
    2
    #设置网站图标
    favicon: /assets/img/favicon.ico

    图标介绍及制作可参考：http://www.faviconico.org/

    推荐原因：可以预览图标，就是你制作后图标后，点击预览，它会将当前网页图标设置成你的图标。

    favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏、浏览器标签上或者在收藏夹上，是展示网站个性的缩略logo标志，也可以说是网站头像,目前主要的浏览器都支持favicon.ico图标，如果要让网站看起来更专业、更美、更有个性，favicon.ico是必不可少的，你在本站使用ICO图标转换工具就可以轻松将您的网站图标转换成favicon.ico。

    hexo(yilia)+GitHub Pages搭建个人博客系列文章：
    1.hexo1.博客备份-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    2.hexo2.基本框架搭建-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    3.hexo3.主题简单个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    4.hexo4.扩展主题的个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章

    ]]> + + + + + + hexo + + yilia + + + + + + + + + hexo2.基本框架搭建-hexo(yilia)+GitHub Pages搭建个人博客系列文章 + + /article/37bae0ef.html + +

    这篇文章主要介绍了搭建博客中关键部分–hexo的内容，前提工作（git、github、node.js部分）并没有展开讲，如果需要了解这部分内容请步他出。

    一、目标

    搭建hexo+yilia的基本的框架，并且部署在github上面，能够通过github pages 进行访问。

    统一说明：我的hexo根目录为Hexo，仓库为yansheng836.github.io。

    二、准备工作

    （不详细介绍，可参考hexo官方文档：https://hexo.io/zh-cn/docs/）

    1. 安装git。

    2. 注册github，新建一个特殊的仓库(username.github.io)。

    3. 安装Node.js。

    三、安装hexo，并初始化

    参考官网教程：https://hexo.io/zh-cn/index.html

    在你需要安装hexo的地方打开git命令行工具，运行一下命令（注：#开头为注释）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 全局安装hexo
    # 并初始化一个文件夹Hexo作为hexo的根目录（可自定义，命令格式为`hexo init <folder>`）
    # 进入Hexo文件夹
    # npm install：Hexo 将会在指定文件夹中新建所需要的文件。
    # hexo server：部署在本地，会提醒可通过`http://localhost:4000`访问，`Ctrl+C`可停止

    npm install hexo-cli -g
    hexo init Hexo
    cd Hexo
    npm install
    hexo server

    eZEIaj.jpg

    四、更换主题

    4.1 主题介绍

    默认主题是landscape，好像不是很好看，一般都会更换主题。

    现在比较流行的挺多的，这里只列举几种：（部署方式在github上面都有，有问题也可以去那里问。）

    4.2 更换yilia主题的简单介绍

    我选的是yilia，以下是安装方式，参考：

    （如果你的不是该主题，仅供参考。）
    注意：一般默认都是在博客根目录打开git命令行，运行这些代码。

    安装

    1
    $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

    配置

    修改hexo根目录下的 _config.yml ： theme: yilia

    注意：（强制）部署这类格式的配置时，冒号后面要加英文空格；（推荐）如果文件中有添加中文注释，统一改文件格式为UTF-8。

    更新

    该主题好像已经很久没有更新了，最近的一次更新好像是2017年的。

    1
    2
    cd themes/yilia
    git pull

    部署：

    1
    2
    3
    hexo clean
    hexo generate
    hexo server

    浏览器访问：http://localhost:4000/，注意访问期间不能按停止命令Ctrl+C,不然会停止服务，页面404。

    效果图：eZEoIs.jpg

    五、将hexo部署到github上面，实现双分支部署

    引用master分支中README.md中的有关双分支的部署说明：

    1
    2
    3
    yansheng836.github.io
    -- master  部署分支：主要存放生成的静态文件，用于部署到github pages
    -- blog    写作分支：主要存放hexo环境配置、博客（md）

    1. 部署master分支

    1.1 指定hexo部署的方式、仓库、分支

    修改hexo根目录下的 _config.yml

    1
    2
    3
    4
    5
    6
    7
    #部署到github的仓库
    #Deployment
    #Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repository: https://github.com/yansheng836/yansheng836.github.io.git
      branch: master

    1.2 为项目添加说明README.md

    你可以把README.md,LICENSE（许可证）等文件放在/source/目录下，该目录的文件可以上传到github根目录；之前提过hexo g是将/source//.md所有文件渲染成html文件（如果没有设置跳过渲染的话），然后放到对应的/public/目录下；而对于其他文件，直接复制到对应文件夹下。

    设置跳过渲染README.md，需要修改hexo根目录下的 _config.yml

    1
    2
    3
    #hexo g 会默认将所有md文件转换成（渲染成）HTML文件放到public文件夹中；加上这句话的意思就是告诉hexo的解析器，跳过渲染(skip_render)README.md文件
    skip_render: 
     - 'README.md'

    如果不设置该属性，README.md文件会被装换成README.html文件，同理你可以通过该配置跳过渲染你不希望hexo渲染的md文件。

    1.3 把master分支部署到github的master分支

    如果有修改配置文件，最好都进行重新编译。

    1
    2
    3
    hexo clean
    hexo g
    hexo d

    如果出现类似错误：

    1
    ERROR Deployer not found: git

    需要添加git依赖：

    1
    npm install hexo-deployer-git --save

    2. 部署blog分支

    注意：该分支名可自定义。

    2.1 在Hexo根目录打开git命令行，初始化一个仓库

    在hexo根目录下新建仓库，用于管理写作分支（之前的部署到github的为部署分支）

    1
    2
    git init
    git remote add origin https://github.com/yansheng836/yansheng836.github.io.git

    2.2 忽略一些不需要备份的文件

    修改跟目录下的.gitignore，.gitignore的原内容：

    1
    2
    3
    4
    5
    6
    7
    .DS_Store
    Thumbs.db
    db.json
    *.log
    node_modules/
    public/
    .deploy*/

    在后面增加以下内容，用来忽略原来的主题文件：

    1
    2
    #ignored the useless themes
    /themes/landscape/

    2.3 删除/themes/yilia/.git文件夹。

    为方便将yilia的主题配置进行同步（其实该主题已经很久没更新了……），但是之前我们使用github克隆的yilia，也就是话说：/themes/yilia/里面也有一个仓库，这涉及到git仓库下的子仓库的问题，默认情况下是不将该子仓库介入到外层仓库的，但是我们需要备份yilia主题的配置文件，所以需要删除该子仓库，即删除/themes/yilia/.git文件夹。

    2.4 创建blog分支。

    创建一个分支存放写作内容，方便同步到同一仓库的不同分支，先提交一次，不然会报

    1
    fatal: Not a valid object name: 'master'

    添加、提交

    1
    2
    git add .
    git commit -m "init the blog"

    创建分支，并同步到github的blog分支

    1
    2
    3
    git branch blog
    git checkout blog
    git push origin blog

    2.5 github上把blog分支设置为默认分支

    可设置该分支为默认分支Settings-->branches-->Default branch:master设置为blog-->update，这样以后仓库主页显示就是blog分支，而且拉取（或者克隆）的时候拉取的就是blog分支，而不是原来默认的master分支。

    2.6 实现双分支部署

    每次写完博客要同时同步到该仓库的不同分支上，以实现真正的同步(备份)。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #Writing
    # 同步到master分支
    hexo clean
    hexo generate
    hexo deploy

    # 手动同步到blog分支上
    git add. 
    git commit -m "提交信息"
    git push origin blog #如果设置了blog为默认分支，可以直接git push

    五、发布到github pages

    设置master分支为主页，步骤Settings-->options-->GitHub Pages:设置master分支-->update，成功后会刷新，显示则可通过<https://yansheng836.github.io/>访问。

    如果有购买域名，可设置对应域名，之前要设置域名解析（这个好像有点啰嗦不细讲），或者直接在hexo根目录的/source/文件夹下添加CNAME文件(注意：该文件没有后缀)，内容为域名，如：

    1
    www.yansheng.xyz

    然后发布到github上

    1
    2
    3
    hexo clean
    hexo generate
    hexo deploy

    成功后在setting中会显示可通过域名访问，而不是原来的路径。

    hexo(yilia)+GitHub Pages搭建个人博客系列文章：
    1.hexo1.博客备份-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    2.hexo2.基本框架搭建-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    3.hexo3.主题简单个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    4.hexo4.扩展主题的个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章

    ]]> + + + + + + hexo + + yilia + + + + + + + + + hexo1.博客备份-hexo(yilia)+GitHub Pages搭建个人博客系列文章 + + /article/b4e9a9a2.html + +

    偶然间看到github pages+hexo搭建的博客，感觉很不错，就想自己也动手搭建一个这样的博客。因为从未接触过，所以刚开始搭建只能到各种博客论坛找教程，虽然教程很多，但是因为时间比较久了，很多配图都失效了；加之每个人的电脑环境都不一样……加上其它的林林总总的原因，其实搭建过程还是比较艰难的！

    这篇文章介绍的是有关“博客备份”的内容，有些人可能会疑惑：为什么还没有搭建好，就开始讲备份？在软件测试的过程中，测试是越早进行越好，因为修改的代价越小。博客备份同样也是这个道理。也许只有亲身经历过，你就会懂；不，看完我的文章，你一个也可以懂。我写这篇就是希望：你们不要和我一样走弯路。

    踩坑过程：

    1. 搭建博客之路：掉坑系列之巨坑篇

    我是从2019年7月22日开始搭建的，本以为一两天就能搭建完成的，事实上一天就可以搭建完成。但是为了增加一些个性化设置，我感觉我把自己逼上了绝路……在不知道修改了某个配置文件后，页面崩了，样式表加载不了。因此前端技术一般，所以我压根就找不到问题所占；想按照配置过程一步步回退，但是一下子配置了太多东西也不知道是哪里错了……

    出了问题总得解决，难不成下次出错又再搭建一次？以下是我探究解决方案的过程， 我记下这部分内容的原因是：我想留下点啥，记录我的挣扎的过程……，同时也是希望能给遇到同样问题的人一些帮助。

    2. 第一次探索：hexo的主要工作流程

    然后想着既然hexo是使用git部署到github，那么就是用了版本管理，我想着它应该要起作用了。因此想试下能不能恢复借此之前的正确配置，一番挣扎后，我放弃了，因为这和普通的git还是有一定差别的。

    我去研究了下hexo的主要的常用命令：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    hexo clean     #删除缓冲文件(db.json)和(public中的)已生成的静态文件。
    hexo generate  #读取配置文件，根据主题配置，将md解析成HTML，将source里的文件转换到public文件夹。
    hexo server    #将静态文件部署到本地，预览。
    hexo deploy    #清理.deploy_git文件夹，将public复制到.deploy_git，发布到github。

    #简写形式为
    hexo clean
    hexo g
    hexo s
    hexo d

    如下图：
    hexo的主要工作流程

    3. 第二次探索：hexo中的.deploy_git

    根据上面的分析，我们可以发现一个问题：这里的.deploy_git版本管理其实是单向的，只有push，没有pull（或者fetch+merge）；另一方面我们到.deploy_git文件夹打开git命令行，运行git remote来查看远程仓库，发现没有远程仓库，但是它确是是能够上传的，说明是被hexo封装了（详情可见/_config.yml的Deployment部分内容），而封装就意味着丢失一些东西，就比如高级语言虽然比底层语言好用，但是速度却慢得多。

    从hexo的命令来看，我们只是一味的将本地的生成的静态文件推送到远程仓库，而没有将远程仓库拉取到本地，因为”拉取到本地“其实这是没有意义的！我认为主要原因有下面二：

    （1）由hexo的主要命令我们知道：上传的文件基本是静态页面相关的文件，没有配置文件，每次部署都会自动生成，所以拉取远程仓库根本没有意义。

    （2）同样因为上次的是静态文件，也就是说是由hexo将markdown转换而成的HTML，假如我们之前发的博客发现了有错误，想要修改，我们也是修改源文件（md），而不是修改生成的HTML。

    4. 问题的根本：没有对配置文件和历史博客进行备份

    但是这样的设置就容易出现问题：如果配置出错或者是md博客源文件丢失，就找不回了！！！比如：

    （1）如果本地修改配置后，出错了就没有办法恢复原来的状态（我就是这样的）。
    （2）按照之前我对核心命令的理解：如果重装系统或者两边写博客就会出现问题——md博客源文件丢失，因为clean每次清理public文件夹，也就是每次generate就是重新生成之前你写的所有博客，如果你分开两地写博客（或者重装后），也就意味着你丢失了历史博客，所有只生成你现在更新的博客，发布后也就只有当前更新的博客，而没有历史博客。

    5. 解决问题：新建分支存放配置文件和博客源文件

    造成这个的原因是我们对发布的文件进行了版本控制，但是没有对我们的环境和写作资料（md）进行办版本控制。因为我是新手，一开始研究hexo，我都是搜如何搭建，所以也没有这方面的考虑，出问题后才开始注意，但是这个问题其实是很致命的，就想我一样，一失手就只能从头再来！

    而官方其实是有提及这个问题的，但是是在很不起眼的地方，而且我一开始也没有仔细看文档，只是简单看了下主要的功能，谁能想到这个问题如此致命！根据官网的文档：deployment部分

    当初次新建一个库的时候，库将自动包含一个master分支。请在这个分支下进行写作和各种配置来完善您的网页。当执行hexo deploy时，Hexo会创建或更新另外一个用于部署的分支，这个分支就是_config.yml配置文件中指定的分支。Hexo会将生成的站点文件推送至该分支下，并且完全覆盖该分支下的已有内容。因此，部署分支应当不同于写作分支。（一个推荐的方式是把master作为写作分支，另外使用public分支作为部署分支。）

    值得注意的是，hexo deploy并不会对本地或远程的写作分支进行任何操作，因此依旧需要手动推送写作分支的所有改动以实现版本控制。此外，如果您的Github Pages需要使用CNAME文件自定义域名，请将CNAME文件置于写作分支的source_dir目录下，只有这样hexo deploy才能将CNAME文件一并推送至部署分支。

    很多人都吐槽hexo的官方文档实在是有点简陋，但是有些问题也许可以在它的github仓库的issues里面找到答案。

    有了方向就好办了，于是乎我就像是和杜甫“剑外忽传收蓟北，初闻涕泪满衣裳。”一样开心，与此同时”出门左转找度娘，出门右转找哥哥“，求得一篇：CSDN博客Hexo备份与恢复，大意和官方文档基本一致：用一个仓库的两个分支分别存放部署分支和写作分支。就比如我的:

    yansheng836.github.io

    – master 部署分支：主要存放生成的静态文件，用于部署到github pages

    – blog 写作分支：主要存放hexo环境配置、博客（md）

    这样部署，即使是重装电脑，我们也可以hexo的环境恢复到本地，并且同步之前的博客到本地，这样博客就会有历史了。当然你也可以新建一个仓库存放blog分支，这两种方法二选一，你随意。

    master分支说明

    主要用于备份hexo生成的文件静态文件（html），用于发布到github pages。
    详细内容可到我的github仓库上进行查看 : master分支。

    blog分支说明

    博客构建过程和备份，计划记录下部署过程，方便恢复。

    新建该分支后，可设置该分支为默认分支Settings-->branches-->Default branch:master设置为blog-->update，这样以后仓库主页显示就是blog分支，而且拉取（或者克隆）的时候拉取的就是blog分支，而不是原来默认的master分支。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    git clone url
    git push
    #其实是下面的简写形式
    git clone -b master url [<repository-name>]
    git push origin master

    #设置blog为默认分支后，相当于是这样的：
    git clone -b blog url [<repository-name>]
    git push origin blog

    详细内容可到我的github仓库上进行查看 : blog分支。

    hexo(yilia)+GitHub Pages搭建个人博客系列文章：
    1.hexo1.博客备份-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    2.hexo2.基本框架搭建-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    3.hexo3.主题简单个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章
    4.hexo4.扩展主题的个性化设置-hexo(yilia)+GitHub Pages搭建个人博客系列文章

    ]]> + + + + + + hexo + + yilia + + + + + + + + + 什么是随笔？ + + /article/792be839.html + + 转自：百度百科

    注意查看：右下角是否有显示文章标题。

    随笔的定义

    随笔，顾名思义：随笔一记，是散文的一个分支，是议论文的一个变体，兼有议论和抒情两种特性，通常篇幅短小，形式多样，写作者惯常用各种修辞手法曲折传达自己的见解和情感，语言灵动，婉而多讽，是言禁未开之社会较为流行的一种文体。随笔作为一种文学样式，是由法国散文家蒙田所创的。

    通常指一种散文体裁，随手笔录，抒情、叙事或评论不拘，篇幅短小。或指听课、读书时所作的记录。

    引证解释编辑

    1．犹言随手下笔。鲁迅 《集外集拾遗·<铁流>编校后记》：“觉得译文很笨拙，而且怕有错字、脱字，望看的时候随笔代为改正一下。”
    2．一种灵活随便的笔记或文体。宋 洪迈《<容斋随笔>序》：“意之所之，随即纪录，因其后先，无复诠次，故目之曰随笔。”
    3．一种散文体裁。篇幅短小，表现形式灵活自由，可以抒情、叙事或评论。鲁迅《书信集·致李小峰》：“我们几个人在选我的随笔，从《坟》起到《二心》止。”

    写作要点

    随笔这类文章，或讲述文化知识，或发表学术观点，或评析世态人情，启人心智，引人深思。在写法上，它们往往旁征博引，而不作理论性太强的阐释，行文缜密而不失活泼，结构自由而不失谨严，因此，富有“理趣”是它们的突出特色。

    阅读这类文章，要整体把握文章的内容和风格，提炼作者的主要观点品味妙语佳句，还要敢于发表自己的见解。

    随笔是散文的一种，写随笔就像与邻家谈心般轻松，没有任何的负担，没有华丽的词藻，没有严密的结构。随笔的形式可以不受体裁的限制，灵活多样，不拘一格，可以观景抒情；可以睹物谈看法；可以读书谈感想；可以一事一议，也可以对同类事进行综合议论。随笔也不受字数的限制，短的几十字，长的几百字，篇幅长短皆由内容而定。

    写随笔最重要的是要表达出写作的意图：或者是一种快乐的心情，或者是一点小感悟，或者是一个新观点……总之，随笔之“随”字，正是突出了其如同邻家大婶般亲切与平易近人的特点。

    生活随笔就是日常生活中心情、感悟、新观点、新发现……生活如浩瀚的大海，博大宽广，时时处处事事都可以写成文章。

    “五四”新文学时代，现代随笔的创作繁荣一时，但“随笔”的命名与内涵尚未及统一，随笔这一文体便被左翼文学排斥至文学边缘。这给当代随笔的文体研究带来了一定困难。从现代随笔的滥觞、朱自清的“散文观”、周作人和鲁迅的“随笔观”等角度入手，在现代散文众多的命名中寻找随笔的源头，以期为当代随笔的发展提供可资借鉴的依据。

    分类

    记叙性随笔

    记叙性随笔大多取材于日常生活中的片断或作者的偶然经历，基本内容是叙事写人。随笔的主旨是写情见性，它的抒写往往融入作者的主观感受，有时直截了当说出，有时是隐藏在文字背后；它描写的往往是人人类似经历的平凡小事，但经过你仔细体味后，会使你察觉世俗风情、感悟人生道理。

    议论性随笔

    这类随笔又叫“随感”或“杂感”。所谓“随”，有随手记下而非刻意为文之义；所谓“杂”，是指内容广泛，包罗万象，大至社会问题、人生哲理，小至身边琐事，风花雪月，鸟虫宠物，校园风情，学习心得，书籍品评，亲人友人，无可不写。但随笔的重点还是个“感”字，作者要有感而发，哪怕是一点思考、一点感受、一点闪光的意念都可带到文章中去，不摆做文章的架子，保持一种随意漫谈的风格。

    说明性随笔

    黎先耀写人和自然关系的随笔《天之骄子》，着笔于形态各异的自然景观，表达自己热爱大自然的情趣，着力加强人们的生态意识。因此，说明性随笔不同于纯粹的说明文，它看重的是事物中的意趣，带有鉴赏的性质，有时则借物抒怀，另有寄托。模山范水，往往以片断的文字，把大自然的千姿百态准确形象地描绘出来。练习这类随笔，要以精细而敏锐的观察力，捕捉到事物特色的生命，笔调轻灵，不刻意为文。正如王国维所说的那样：“以我观物，故物皆著我之色彩。”

    技巧

    随手

    随笔中涉及的往往是一些即时发生的事件和看到事件当时产生的想法，那种想法也有点火花闪动似，所以需要及时捕捉，记录下来。因为扔了一段时间之后，您对事件的记忆可能就不那么清晰了，故事就很难说得完整，思想的火花可能也消失不见了。所以要养成随手写的习惯，如果能坚持记教育日记，那么您会发现那其中有很多您可能已经不太记得的事，但是在当时它是如何地让您受到震动。

    随便

    随笔没有什么格式的要求，不需要有什么论点论据,文字也可长可短，如果用200字就能把您想说的话说清楚了，也不一定要凑到1000字.如果您没想好这件事说明了什么，但是这件事却让您有所触动，不说不快，您也不必硬憋着，要找什么理论做依托，您可以把事情写出来，让读者自己去理解。

    随心

    这里讲的随心有两层意思，一是随心所欲，没有太多的限制；二是笔要随脑.文章是笔写出来的，但却是大脑想出来的，所以随笔是笔要随脑。

    总结

    随笔要想写好，必须有自己的独到之处，或是切入一个事件的角度不同于以往，或是自己的观点不同于常俗.这一切都需要我们有一双善于发现的眼睛，有一个善于思考的大脑，所以工作之中要注意观察.教师生活于学生之中，我们的工作对象是活生生的人，这就给我们提供了丰富的素材.每个孩子都是一本待读的书，和孩子的每一次倾心的谈话，都可以成为我们写作的素材.工作之余要读一点书，用心去思考一些新的教育理念的合理之处及与教育现实的结合点在哪里，所谓有正确的理念，才会有正确的眼光；有正确的眼光，才能有精彩的发现.

    最重要一点是，要想写好随笔，关键还在于动笔，动笔写了，才能有好的随笔。

    有了题材，如何得到一篇高质量的随笔你可能通常会觉得有话说不出说不好，这是因为尚缺乏理论积累，还不能从理论高度对手中的素材进行加工，整合，形成并表达出自己独到的视角.而这个至关重要的锤炼过程要求我们：
    1．注重积累相关理论.理论积累并无任何捷径，只有平常扎扎实实地研读并作好摘抄,久而久之，再处理起素材来自然会得心应手。
    2．认真解读他人随笔成果.一般报刊杂志上都有一些非常贴近我们工作实际的教学随笔，可以细细地分析一下它们是如何总结提炼得出自己观点的，久而久之，我们也会受到很大启发，感觉豁然开朗。

    例文编辑

    1．人的生命形态主要由许许多多细小的琐事组成，惊险奇特，英烈悲壮，可遇而不可求，是生活的非常态。平平凡凡，寻寻常常，随处皆是，是生活的常态。只有那些注目寻常琐事，并在其中能感发出无尽趣味来的人，他的心境必不至枯涩，他的心泉必不至干涸，而一旦弄笔写作便自然容易找到感觉，坠入境界，放任自由。对琐事不大放在心上的人，在平常生活中发现不了诗意的人，其人必定干枯无趣，其心必定顽劣粗糙，自然极难与笔墨有缘。
    2．于今世界红尘滚滚，物欲汹汹，人心越来越浮躁，时尚越来越火爆，而写作恰恰需要细腻的心灵，素材偏偏多在生活的幽微平常之处。所以，身处现代，你选择写作，其实写作也在选择你。只有当你在生活中“步步留心，时时在意”的时候，你才能从平常的生活中感发出具有共鸣效应的整体情感，生发出启迪人智的哲理思考，也便有可能与写作结下一份良缘。应该说，绮语清词，嘉言华章是天地间早就有了的，它在随笔式的自由写作中最易被呈现出来，只是它需要凝神遐思，用心体味方能妙手偶得。
    3．人总说永恒，期盼永恒，其实哪会有什么真正的永恒。人易朽，文字也易朽。如前所述，写作和其它种类的艺术一样，只是人的一种生命享受与精神自救。写作之初就心存“文章千古事”的觉悟与抱负的人，十有八九成不了写作的好手。用一颗善良之心，真诚之心去贴近平常的生活，从中感悟人生的真谛，触摸时代的脉搏，寻觅真善美的所在，并忠实地将其诉诸笔端，这才是我们生活随笔写作的正途。把发生在生活中的点点滴滴，记录下来，没有日记那么详细。

    ]]>     + + + + + Daily + + 随笔 + + + + + + + 随笔 + + + +     + + + + + the first blog writtern by hexo + + /article/7322d22a.html + + Hello hexo.

    hello-world

    ]]>     + + + + + + hexo + + yilia + + + +     + + + + + + + + + + //404.html + + 腾讯公益404 ]]> + + + + + + + + + /baidu_verify_QgSK2r2blo.html + + + + + + + + + + + /google4cc750c2e2103b7c.html + + + + + + + + + categories + + /categories/index.html + + + + + + + + + 友链 + + /links/index.html + + 友情链接

    荷塘月色的博客头像
    (example)荷塘月色的博客
    Metthew’s blog的博客头像
    Metthew’s blog
    一分夕阳的博客头像
    一分夕阳
    cqh-i的博客头像
    cqh-i
    蒋振飞的博客头像
    蒋振飞的博客

    友链申请

    ——多多互访，比任何友链都要强！

    点击查看友链申请要求/方式

    说明及要求：

    • 友链排名不分前后，来者就是友。
    • 站点不能是黄赌毒等非法网站(博客内无违法违规内容)。
    • 博客内容以原创为主，类型以技术博客为主，不能含有太多广告。
    • 站点要不定期的更新动态。
    • 站点打不开本站有权撤销友链。
    • 博主的好友可以无视上面的所有要求。

    格式

    右上角直接复制即可。

    1
    2
    3
    4
    网站地址：
    网站名称：
    网站描述：
    网站图标：

    示范（本站信息）

    申请之前请做好本站友情链接。

    申请方式

    在下方留言，或者请将你站点信息发至我的邮箱进行申请。

    邮箱地址：sheng.yan836@gmail.com

    注：如果不设置头像，或者图像获取失败，默认使用油纸伞的头像（如下）。

    博客相关

    音乐
    音乐
    RSS订阅
    RSS订阅
    百度统计
    百度统计

    在线工具推荐

    TinyPNG
    TinyPNG--图片压缩
    路过图床
    路过图床
    ]]> + + + + + + + Music + + /music/index.html + + 缝纫机乐队-娜扎

    缝纫机乐队-吉他

    ]]>     + +     + + + + + + + /links/link-box.css + + + + + + + + + 留言墙 + + /message-wall/index.html + + 相遇即是有缘💗

    🤔既然来了，过来踩一下可好？😝😘

    虞姬-云霓雀翎

    南台缘🌹

    献上一首《南台缘》，词曲：陈小奇老师。

    南台缘

    前生应该和你有过一段缘，
    晨钟暮鼓依稀敲了千百年。
    清风中你静静卧在天地间，
    心静如水，你我相看两不厌。

    今生注定和你会有一段缘，
    白云深处叩访了你千百遍。
    夕阳下你静静留下一个梦，
    鸟静山幽，你我相对两忘言。

    我是不是你脚下的那朵莲，
    等待着你含笑拈花的指尖，
    你是不是我许下的那个愿，
    飘飘渺渺总萦绕在我心间。

    南台山-大佛寺

    ]]> + + + + + + + 相册 + + /photos/index.html + +
    Photos
    图片正在加载中…
    ]]>     + +     + + + + + + + /photos/ins.css + + + + + + + + + + + /photos/data.json + + + + + + + + + + + /photos/lazyload.min.js + + jieyou * see https://github.com/jieyou/lazyload * use some tuupola's code https://github.com/tuupola/jquery_lazyload (BSD) * use component's throttle https://github.com/component/throttle (MIT) */!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a(window.jQuery||window.Zepto)}(function(a){function g(){}function h(a,b){var e;return e=b._$container==d?("innerHeight"in c?c.innerHeight:d.height())+d.scrollTop():b._$container.offset().top+b._$container.height(),e<=a.offset().top-b.threshold}function i(b,e){var f;return f="e._$container==d?d.width()+(a.fn.scrollLeft?d.scrollLeft():c.pageXOffset):e._$container.offset().left+e._$container.width(),f<=b.offset().left-e.threshold}function" j(a,b){var c;return c="b._$container==d?d.scrollTop():b._$container.offset().top,c">=a.offset().top+b.threshold+a.height()}function k(b,e){var f;return f=e._$container==d?a.fn.scrollLeft?d.scrollLeft():c.pageXOffset:e._$container.offset().left,f>=b.offset().left+e.threshold+b.width()}function l(a,b){var c=0;a.each(function(d){function g(){f.trigger("_lazyload_appear"),c=0}var f=a.eq(d);if(!(f.width()<=0&&f.height()<=0||"none"===f.css("display")))if(b.vertical_only)if(j(f,b));else if(h(f,b)){if(++c>b.failure_limit)return!1}else g();else if(j(f,b)||k(f,b));else if(h(f,b)||i(f,b)){if(++c>b.failure_limit)return!1}else g()})}function m(a){return a.filter(function(b){return!a.eq(b)._lazyload_loadStarted})}function n(a,b){function h(){f=0,g=+new Date,e=a.apply(c,d),c=null,d=null}var c,d,e,f,g=0;return function(){c=this,d=arguments;var a=new Date-g;return f||(a>=b?h():f=setTimeout(h,b-a)),e}}var f,c=window,d=a(c),e={threshold:0,failure_limit:0,event:"scroll",effect:"show",effect_params:null,container:c,data_attribute:"original",data_srcset_attribute:"original-srcset",skip_invisible:!0,appear:g,load:g,vertical_only:!1,check_appear_throttle_time:300,url_rewriter_fn:g,no_fake_img_loader:!1,placeholder_data_img:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC",placeholder_real_img:"http://ditu.baidu.cn/yyfm/lazyload/0.0.1/img/placeholder.png"};f=function(){var a=Object.prototype.toString;return function(b){return a.call(b).replace("[object ","").replace("]","")}}(),a.fn.hasOwnProperty("lazyload")||(a.fn.lazyload=function(b){var i,j,k,h=this;return a.isPlainObject(b)||(b={}),a.each(e,function(g,h){var i=f(b[g]);-1!=a.inArray(g,["threshold","failure_limit","check_appear_throttle_time"])?"String"==i?b[g]=parseInt(b[g],10):"Number"!=i&&(b[g]=h):"container"==g?(b._$container=b.hasOwnProperty(g)?b[g]==c||b[g]==document?d:a(b[g]):d,delete b.container):!e.hasOwnProperty(g)||b.hasOwnProperty(g)&&i==f(e[g])||(b[g]=h)}),i="scroll"==b.event,k=0==b.check_appear_throttle_time?l:n(l,b.check_appear_throttle_time),j=i||"scrollstart"==b.event||"scrollstop"==b.event,h.each(function(c){var e=this,f=h.eq(c),i=f.attr("src"),k=f.attr("data-"+b.data_attribute),l=b.url_rewriter_fn==g?k:b.url_rewriter_fn.call(e,f,k),n=f.attr("data-"+b.data_srcset_attribute),o=f.is("img");return 1==f._lazyload_loadStarted||i==l?(f._lazyload_loadStarted=!0,h=m(h),void 0):(f._lazyload_loadStarted=!1,o&&!i&&f.one("error",function(){f.attr("src",b.placeholder_real_img)}).attr("src",b.placeholder_data_img),f.one("_lazyload_appear",function(){function i(){d&&f.hide(),o?(n&&f.attr("srcset",n),l&&f.attr("src",l)):f.css("background-image",'url("'+l+'")'),d&&f[b.effect].apply(f,c?b.effect_params:[]),h=m(h)}var d,c=a.isArray(b.effect_params);f._lazyload_loadStarted||(d="show"!=b.effect&&a.fn[b.effect]&&(!b.effect_params||c&&0==b.effect_params.length),b.appear!=g&&b.appear.call(e,f,h.length,b),f._lazyload_loadStarted=!0,b.no_fake_img_loader||n?(b.load!=g&&f.one("load",function(){b.load.call(e,f,h.length,b)}),i()):a("").one("load",function(){i(),b.load!=g&&b.load.call(e,f,h.length,b)}).attr("src",l))}),j||f.on(b.event,function(){f._lazyload_loadStarted||f.trigger("_lazyload_appear")}),void 0)}),j&&b._$container.on(b.event,function(){k(h,b)}),d.on("resize load",function(){k(h,b)}),a(function(){k(h,b)}),this})});]]> + + + + + + + tags + + /tags/index.html + + + + + + + + + 相册 + + /photos/videos.html + +
    Photos

    指弹_女儿情

    指弹_友谊地久天长

    指弹_Always with me

    ]]>     + +     + + + + + + + /music/APlayer_config.js + + + + + + + + + + + /photos/ins.js + + \ \ \ \
    ' + data.text[i] + '
    \ '; } ulTmpl = ulTmpl + '

    ' + data.year + '年' + data.month + '月

    \
      ' + liTmpl + '
    \
    '; } document.querySelector('.instagram').innerHTML = '
    ' + ulTmpl + '
    '; createVideoIncon(); _view2.default.init(); }; var replacer = function replacer(str) { var arr = str.split("/"); return "/assets/ins/" + arr[arr.length - 1]; }; var ctrler = function ctrler(data) { var imgObj = {}; for (var i = 0, len = data.length; i < len; i++) { var y = data[i].y; var m = data[i].m; var src = replacer(data[i].src); var text = data[i].text; var key = y + "" + ((m + "").length == 1 ? "0" + m : m); if (imgObj[key]) { imgObj[key].srclist.push(src); imgObj[key].text.push(text); } else { imgObj[key] = { year: y, month: m, srclist: [src], text: [text] }; } } render(imgObj); }; function loadData(success) { if (!searchData) { var xhr = new XMLHttpRequest(); xhr.open('GET', './data.json?t=' + +new Date(), true); xhr.onload = function() { if (this.status >= 200 && this.status < 300) { var res = JSON.parse(this.response); searchData = res; success(searchData); } else { console.error(this.statusText); } }; xhr.onerror = function() { console.error(this.statusText); }; xhr.send(); } else { success(searchData); } } var Ins = { init: function init() { loadData(function(data) { render(data); }); } }; Ins.init(); // export default impush; }, /* 1 */ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */ (function(global) { 'use strict'; var inViewport = __webpack_require__(3); var lazyAttrs = ['data-src']; global.lzld = lazyload(); // Provide libs using getAttribute early to get the good src // and not the fake data-src replaceGetAttribute('Image'); replaceGetAttribute('IFrame'); function registerLazyAttr(attr) { if (indexOf.call(lazyAttrs, attr) === -1) { lazyAttrs.push(attr); } } function lazyload(opts) { opts = merge({ 'offset': 333, 'src': 'data-src', 'container': false }, opts || {}); if (typeof opts.src === 'string') { registerLazyAttr(opts.src); } var elts = []; function show(elt) { var src = findRealSrc(elt); if (src) { elt.src = src; } elt.setAttribute('data-lzled', true); elts[indexOf.call(elts, elt)] = null; } function findRealSrc(elt) { if (typeof opts.src === 'function') { return opts.src(elt); } return elt.getAttribute(opts.src); } function register(elt) { elt.onload = null; elt.removeAttribute('onload'); elt.onerror = null; elt.removeAttribute('onerror'); if (indexOf.call(elts, elt) === -1) { inViewport(elt, opts, show); } } return register; } function replaceGetAttribute(elementName) { var fullname = 'HTML' + elementName + 'Element'; if (fullname in global === false) { return; } var original = global[fullname].prototype.getAttribute; global[fullname].prototype.getAttribute = function(name) { if (name === 'src') { var realSrc; for (var i = 0, max = lazyAttrs.length; i < max; i++) { realSrc = original.call(this, lazyAttrs[i]); if (realSrc) { break; } } return realSrc || original.call(this, name); } // our own lazyloader will go through theses lines // because we use getAttribute(opts.src) return original.call(this, name); }; } function merge(defaults, opts) { for (var name in defaults) { if (opts[name] === undefined) { opts[name] = defaults[name]; } } return opts; } // http://webreflection.blogspot.fr/2011/06/partial-polyfills.html function indexOf(value) { for (var i = this.length; i-- && this[i] !== value;) {} return i; } module.exports = lazyload; // export default impush; /* WEBPACK VAR INJECTION */ }.call(exports, (function() { return this; }()))) /***/ }, /* 2 */ /***/ function(module, exports) { 'use strict'; var initPhotoSwipeFromDOM = function initPhotoSwipeFromDOM(gallerySelector) { // parse slide data (url, title, size ...) from DOM elements // (children of gallerySelector) var parseThumbnailElements = function parseThumbnailElements(el) { el = el.parentNode.parentNode; var thumbElements = el.getElementsByClassName('thumb'), numNodes = thumbElements.length, items = [], figureEl, linkEl, size, type, // video or not target, item; for (var i = 0; i < numNodes; i++) { figureEl = thumbElements[i]; // // include only element nodes if (figureEl.nodeType !== 1) { continue; } linkEl = figureEl.children[0]; // size = linkEl.getAttribute('data-size').split('x'); type = linkEl.getAttribute('data-type'); target = linkEl.getAttribute('data-target'); // create slide object item = { src: linkEl.getAttribute('href'), w: parseInt(size[0], 10), h: parseInt(size[1], 10) }; if (figureEl.children.length > 1) { item.title = figureEl.children[1].innerHTML; } if (linkEl.children.length > 0) { item.msrc = linkEl.children[0].getAttribute('src'); item.type = type; item.target = target; item.html = ''; if (type === 'video') { //item.src = null; } } item.el = figureEl; // save link to element for getThumbBoundsFn items.push(item); } return items; }; // find nearest parent element var closest = function closest(el, fn) { return el && (fn(el) ? el : closest(el.parentNode, fn)); }; // triggers when user clicks on thumbnail var onThumbnailsClick = function onThumbnailsClick(e) { e = e || window.event; e.preventDefault ? e.preventDefault() : e.returnValue = false; var eTarget = e.target || e.srcElement; // find root element of slide var clickedListItem = closest(eTarget, function(el) { return el.tagName && el.tagName.toUpperCase() === 'FIGURE'; }); if (!clickedListItem) { return; } // find index of clicked item by looping through all child nodes // alternatively, you may define index via data- attribute var clickedGallery = clickedListItem.parentNode, // childNodes = clickedListItem.parentNode.childNodes, // numChildNodes = childNodes.length, childNodes = document.getElementsByClassName('thumb'), numChildNodes = childNodes.length, nodeIndex = 0, index; for (var i = 0; i < numChildNodes; i++) { if (childNodes[i].nodeType !== 1) { continue; } if (childNodes[i] === clickedListItem) { index = nodeIndex; break; } nodeIndex++; } if (index >= 0) { // open PhotoSwipe if valid index found openPhotoSwipe(index, clickedGallery); } return false; }; // parse picture index and gallery index from URL (#&pid=1&gid=2) var photoswipeParseHash = function photoswipeParseHash() { var hash = window.location.hash.substring(1), params = {}; if (hash.length < 5) { return params; } var vars = hash.split('&'); for (var i = 0; i < vars.length; i++) { if (!vars[i]) { continue; } var pair = vars[i].split('='); if (pair.length < 2) { continue; } params[pair[0]] = pair[1]; } if (params.gid) { params.gid = parseInt(params.gid, 10); } return params; }; var openPhotoSwipe = function openPhotoSwipe(index, galleryElement, disableAnimation, fromURL) { var pswpElement = document.querySelectorAll('.pswp')[0], gallery, options, items; items = parseThumbnailElements(galleryElement); // define options (if needed) options = { // define gallery index (for URL) galleryUID: galleryElement.getAttribute('data-pswp-uid'), getThumbBoundsFn: function getThumbBoundsFn(index) { // See Options -> getThumbBoundsFn section of documentation for more info var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail pageYScroll = window.pageYOffset || document.documentElement.scrollTop, rect = thumbnail.getBoundingClientRect(); return { x: rect.left, y: rect.top + pageYScroll, w: rect.width }; } }; // PhotoSwipe opened from URL if (fromURL) { if (options.galleryPIDs) { // parse real index when custom PIDs are used // http://photoswipe.com/documentation/faq.html#custom-pid-in-url for (var j = 0; j < items.length; j++) { if (items[j].pid == index) { options.index = j; break; } } } else { // in URL indexes start from 1 options.index = parseInt(index, 10) - 1; } } else { options.index = parseInt(index, 10); } // exit if index not found if (isNaN(options.index)) { return; } if (disableAnimation) { options.showAnimationDuration = 0; } // Pass data to PhotoSwipe and initialize it gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); gallery.init(); var $tempVideo; var stopVideoHandle = function stopVideoHandle() { if ($tempVideo) { $tempVideo.remove(); $tempVideo = null; } }; var changeHandle = function changeHandle() { var item = gallery.currItem; stopVideoHandle(); if (item.type === 'video') { var $ctn = item.container; var style = $ctn.getElementsByClassName('pswp__img')[0].style; var $video = document.createElement('video'); $video.setAttribute('autoplay', 'autoplay'); $video.setAttribute('controls', 'controls'); $video.setAttribute('src', item.target); $video.style.width = style.width; $video.style.height = style.height; $video.style.position = 'absolute'; $video.style.zIndex = 2; $tempVideo = $video; $ctn.appendChild($video); } }; gallery.listen('initialZoomIn', changeHandle); gallery.listen('afterChange', changeHandle); gallery.listen('initialZoomOut', stopVideoHandle); }; // loop through all gallery elements and bind events var galleryElements = document.querySelectorAll(gallerySelector); for (var i = 0, l = galleryElements.length; i < l; i++) { galleryElements[i].setAttribute('data-pswp-uid', i + 1); galleryElements[i].onclick = onThumbnailsClick; } // Parse URL and open gallery if it contains #&pid=3&gid=1 var hashData = photoswipeParseHash(); if (hashData.pid && hashData.gid) { openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true); } }; var Viewer = function() { function init() { initPhotoSwipeFromDOM('.photos'); } return { init: init }; }(); module.exports = Viewer; /***/ }, /* 3 */ /***/ function(module, exports) { /* WEBPACK VAR INJECTION */ (function(global) { module.exports = inViewport; var instances = []; var supportsMutationObserver = typeof global.MutationObserver === 'function'; function inViewport(elt, params, cb) { var opts = { container: global.document.body, offset: 0 }; if (params === undefined || typeof params === 'function') { cb = params; params = {}; } var container = opts.container = params.container || opts.container; var offset = opts.offset = params.offset || opts.offset; for (var i = 0; i < instances.length; i++) { if (instances[i].container === container) { return instances[i].isInViewport(elt, offset, cb); } } return instances[ instances.push(createInViewport(container)) - 1 ].isInViewport(elt, offset, cb); } function addEvent(el, type, fn) { if (el.attachEvent) { el.attachEvent('on' + type, fn); } else { el.addEventListener(type, fn, false); } } function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); function later() { timeout = null; if (!immediate) func.apply(context, args); } }; } // https://github.com/jquery/sizzle/blob/3136f48b90e3edc84cbaaa6f6f7734ef03775a07/sizzle.js#L708 var contains = function() { if (!global.document) { return true; } return global.document.documentElement.compareDocumentPosition ? function(a, b) { return !!(a.compareDocumentPosition(b) & 16); } : global.document.documentElement.contains ? function(a, b) { return a !== b && (a.contains ? a.contains(b) : false); } : function(a, b) { while (b = b.parentNode) { if (b === a) { return true; } } return false; }; } function createInViewport(container) { var watches = createWatches(); var scrollContainer = container === global.document.body ? global : container; var debouncedCheck = debounce(watches.checkAll(watchInViewport), 15); addEvent(scrollContainer, 'scroll', debouncedCheck); if (scrollContainer === global) { addEvent(global, 'resize', debouncedCheck); } if (supportsMutationObserver) { observeDOM(watches, container, debouncedCheck); } // failsafe check, every 200ms we check for visible images // usecase: a hidden parent containing eleements // when the parent becomes visible, we have no event that the children // became visible setInterval(debouncedCheck, 150); function isInViewport(elt, offset, cb) { if (!cb) { return isVisible(elt, offset); } var remote = createRemote(elt, offset, cb); remote.watch(); return remote; } function createRemote(elt, offset, cb) { function watch() { watches.add(elt, offset, cb); } function dispose() { watches.remove(elt); } return { watch: watch, dispose: dispose }; } function watchInViewport(elt, offset, cb) { if (isVisible(elt, offset)) { watches.remove(elt); cb(elt); } } function isVisible(elt, offset) { if (!contains(global.document.documentElement, elt) || !contains(global.document.documentElement, container)) { return false; } // Check if the element is visible // https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css/hiddenVisibleSelectors.js if (!elt.offsetWidth || !elt.offsetHeight) { return false; } var eltRect = elt.getBoundingClientRect(); var viewport = {}; if (container === global.document.body) { viewport = { top: -offset, left: -offset, right: global.document.documentElement.clientWidth + offset, bottom: global.document.documentElement.clientHeight + offset }; } else { var containerRect = container.getBoundingClientRect(); viewport = { top: containerRect.top - offset, left: containerRect.left - offset, right: containerRect.right + offset, bottom: containerRect.bottom + offset }; } // The element must overlap with the visible part of the viewport var visible = ( (eltRect.right > viewport.left) && (eltRect.left < viewport.right) && (eltRect.bottom > viewport.top) && (eltRect.top < viewport.bottom) ); return visible; } return { container: container, isInViewport: isInViewport }; } function createWatches() { var watches = []; function add(elt, offset, cb) { if (!isWatched(elt)) { watches.push([elt, offset, cb]); } } function remove(elt) { var pos = indexOf(elt); if (pos !== -1) { watches.splice(pos, 1); } } function indexOf(elt) { for (var i = watches.length - 1; i >= 0; i--) { if (watches[i][0] === elt) { return i; } } return -1; } function isWatched(elt) { return indexOf(elt) !== -1; } function checkAll(cb) { return function() { for (var i = watches.length - 1; i >= 0; i--) { cb.apply(this, watches[i]); } }; } return { add: add, remove: remove, isWatched: isWatched, checkAll: checkAll }; } function observeDOM(watches, container, cb) { var observer = new MutationObserver(watch); var filter = Array.prototype.filter; var concat = Array.prototype.concat; observer.observe(container, { childList: true, subtree: true, // changes like style/width/height/display will be catched attributes: true }); function watch(mutations) { // some new DOM nodes where previously watched // we should check their positions if (mutations.some(knownNodes) === true) { setTimeout(cb, 0); } } function knownNodes(mutation) { var nodes = concat.call([], Array.prototype.slice.call(mutation.addedNodes), mutation.target ); return filter.call(nodes, watches.isWatched).length > 0; } } /* WEBPACK VAR INJECTION */ }.call(exports, (function() { return this; }()))) /***/ } /******/]);]]>     + +     + + + + diff --git a/sitemap.xml b/sitemap.xml index 12a5361f9..57e1ce8b0 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -2,16 +2,30 @@ - https://www.yansheng.xyz/article/b75f4e3a.html + https://www.yansheng.xyz/article/faa5d14.html - 2020-04-04T04:13:26.123Z + 2020-04-10T13:24:02.000Z + + + + + https://www.yansheng.xyz/article/bf60dd05.html + + 2020-04-05T16:34:06.047Z https://www.yansheng.xyz/links/index.html - 2020-04-04T01:47:20.368Z + 2020-04-05T15:02:36.582Z + + + + + https://www.yansheng.xyz/article/b75f4e3a.html + + 2020-04-04T04:13:26.123Z @@ -78,20 +92,6 @@ - - https://www.yansheng.xyz/links/%E5%8F%8B%E9%93%BE%E8%AF%B4%E6%98%8E.html - - 2020-02-12T11:41:32.675Z - - - - - https://www.yansheng.xyz/links/index-2020-2-10.html - - 2020-02-11T15:59:23.313Z - - - https://www.yansheng.xyz/message-wall/index.html @@ -106,34 +106,6 @@ - - https://www.yansheng.xyz/message-wall/index-%E5%89%AF%E6%9C%AC-%E8%A7%86%E9%A2%91.html - - 2020-02-07T14:49:12.269Z - - - - - https://www.yansheng.xyz/message-wall/index-%E5%89%AF%E6%9C%AC-%E8%AF%972.html - - 2020-02-07T14:35:28.719Z - - - - - https://www.yansheng.xyz/message-wall/index-%E5%89%AF%E6%9C%AC-%E8%AF%97.html - - 2020-02-04T16:17:27.555Z - - - - - https://www.yansheng.xyz/message-wall/index-%E5%89%AF%E6%9C%AC-%E5%86%85%E5%AE%B9.html - - 2020-02-04T13:49:10.705Z - - - https://www.yansheng.xyz/photos/data.json @@ -246,13 +218,6 @@ - - https://www.yansheng.xyz/article/faa5d14.html - - 2019-11-12T07:44:01.575Z - - - https://www.yansheng.xyz/article/47e1ef2d.html diff --git a/tags/2019-nCoV/index.html b/tags/2019-nCoV/index.html index ea6570e23..261f6aae4 100644 --- a/tags/2019-nCoV/index.html +++ b/tags/2019-nCoV/index.html @@ -5,6 +5,7 @@ + Tag: 新冠肺炎 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -696,19 +761,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -839,7 +904,7 @@

    • - + diff --git a/tags/Github/index.html b/tags/Github/index.html index 8cd01d792..c1c0d59b9 100644 --- a/tags/Github/index.html +++ b/tags/Github/index.html @@ -5,6 +5,7 @@ + Tag: GitHub | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -592,19 +657,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -735,7 +800,7 @@

    • - + diff --git a/tags/Ruby/index.html b/tags/Ruby/index.html index 2e76ec8a2..3322ca4d5 100644 --- a/tags/Ruby/index.html +++ b/tags/Ruby/index.html @@ -5,6 +5,7 @@ + Tag: Ruby | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -592,19 +657,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -735,7 +800,7 @@

    • - + diff --git a/tags/Ubuntu/index.html b/tags/Ubuntu/index.html index a9585cff2..a921c7d6c 100644 --- a/tags/Ubuntu/index.html +++ b/tags/Ubuntu/index.html @@ -5,6 +5,7 @@ + Tag: Ubuntu | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -592,19 +657,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -735,7 +800,7 @@

    • - + diff --git a/tags/essay/index.html b/tags/essay/index.html index ac4f1de48..f3620141b 100644 --- a/tags/essay/index.html +++ b/tags/essay/index.html @@ -5,6 +5,7 @@ + Tag: 随笔 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -809,19 +874,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -952,7 +1017,7 @@

    • - + diff --git a/tags/git/index.html b/tags/git/index.html index 59a2b4bb2..2b6c4fb9a 100644 --- a/tags/git/index.html +++ b/tags/git/index.html @@ -5,6 +5,7 @@ + Tag: Git | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -592,19 +657,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -735,7 +800,7 @@

    • - + diff --git a/tags/hexo/index.html b/tags/hexo/index.html index 26c798501..22d7d8718 100644 --- a/tags/hexo/index.html +++ b/tags/hexo/index.html @@ -5,6 +5,7 @@ + Tag: hexo | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -374,6 +439,52 @@

    荷塘月色

    + + + +
    + + +

    + hexo+yilia添加APlayer音乐播放器 +

    + + +
    + +
    + + +
    + + + +
    +
    + +
    +

    + + + +
    +
    +
    +
    + + + + @@ -2005,19 +2116,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -2148,7 +2259,7 @@

    • - + diff --git a/tags/index.html b/tags/index.html index a1602d02e..ed95bd890 100644 --- a/tags/index.html +++ b/tags/index.html @@ -5,6 +5,7 @@ + tags | 荷塘月色的博客 @@ -25,6 +26,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -177,7 +210,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -232,7 +265,7 @@

    荷塘月色

    - + @@ -245,31 +278,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -320,7 +329,7 @@

    荷塘月色

    - + @@ -348,6 +357,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -733,19 +798,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -876,7 +941,7 @@

    • - + diff --git a/tags/life/index.html b/tags/life/index.html index 1b8da1c15..a9a4fe126 100644 --- a/tags/life/index.html +++ b/tags/life/index.html @@ -5,6 +5,7 @@ + Tag: 生活 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -878,19 +943,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -1021,7 +1086,7 @@

    • - + diff --git a/tags/mysql/index.html b/tags/mysql/index.html index a499d0897..ef7249323 100644 --- a/tags/mysql/index.html +++ b/tags/mysql/index.html @@ -5,6 +5,7 @@ + Tag: MySQL | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -588,19 +653,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -731,7 +796,7 @@

    • - + diff --git a/tags/software-cracking/index.html b/tags/software-cracking/index.html index 9eff5b808..f0f1de42e 100644 --- a/tags/software-cracking/index.html +++ b/tags/software-cracking/index.html @@ -5,6 +5,7 @@ + Tag: 软件破解 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -592,19 +657,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -735,7 +800,7 @@

    • - + diff --git a/tags/tool-software/index.html b/tags/tool-software/index.html index 713a69c17..5a2c0e399 100644 --- a/tags/tool-software/index.html +++ b/tags/tool-software/index.html @@ -5,6 +5,7 @@ + Tag: 工具软件 | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -592,19 +657,19 @@

  • - 工具软件 + Git
  • - 软件破解 + GitHub
  • - Git + 工具软件
  • - GitHub + 软件破解
  • @@ -735,7 +800,7 @@

    • - + diff --git a/tags/yilia/index.html b/tags/yilia/index.html index e2f149231..8ce1b57b3 100644 --- a/tags/yilia/index.html +++ b/tags/yilia/index.html @@ -5,6 +5,7 @@ + Tag: yilia | 荷塘月色的博客 @@ -24,6 +25,8 @@ + + + + + +
    + + + + + + + + + + +
    @@ -176,7 +209,7 @@
    -

    荷塘月色

    +
    荷塘月色

    每天进步一点点

    @@ -231,7 +264,7 @@

    荷塘月色

    - + @@ -244,31 +277,7 @@

    荷塘月色

    - - - -
    - - - - - - - - + @@ -319,7 +328,7 @@

    荷塘月色

    - + @@ -347,6 +356,62 @@

    荷塘月色

    + + +
    + + 🍻 + 正在加载今日诗词.... + + + + + + + + +
    +     + + + + +
    + +
    @@ -374,6 +439,52 @@

    荷塘月色

    + + + +
    + + +

    + hexo+yilia添加APlayer音乐播放器 +

    + + +
    + +
    + + +
    + + + +
    +
    +
    +
    +
    + + + +