如何搭建一个自己的博客(二)

系列文章

第一部分 Hexo配置

  • 网页基本信息填写（_config.yml）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    #网页基本信息：
    #网页名称
    title: 'CzrTuringB的博客'
    subtitle: 'CzrTuringB'
    description: '林深时见鹿，海蓝时见鲸，梦醒时见你'
    keywords:
    author: CzrTuringB
    language: zh-CN
    timezone: Asia/Shanghai

  • 部署信息填写：

    1
    2
    3
    4
    5
    6
    #部署信息
    #部署信息
    deploy:
      type: git
      repo: blog@43.138.32.12:/home/blog/blog.git
      branch: master

  • 文章链接永久化：

    1. 安装插件：
    1
    npm install hexo-abbrlink --save

    1. 配置：

    1
    2
    3
    4
    5
    6
    7
    8
    # URL
    ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
    url: http://www.czrturingb.top
    permalink: :year/:month/:day/:title/
    permalink_defaults:
    pretty_urls:
      trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
      trailing_html: true # Set to false to remove trailing '.html' from permalinks

第二部分 Hexo主题美化

第一章 安装Butterfly主题

  • 下载主题：

    1
    2
    3
    4
    5
    cd #自己的博客路径
    #下载主题
    git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
    #下载插件
    npm install hexo-renderer-pug hexo-renderer-stylus --save

  • 更改项目配置文件：

    1
    2
    #在blog/_config.yml文件中，配置主题
    theme: butterfly

  • 测试：

    1
    2
    hexo clean
    hexo s

第二章 主题配置

**注意：**在Blog目录下新建一个_config.butterfly.yml文件，把主题的配置文件内容复制过来，之后所有的更改都在这个文件中进行。

第一节 顶部导航栏配置

  • 顶部导航栏配置：

    1
    2
    3
    4
    5
    #顶部导航栏配置
    nav:
      logo: /img/001.jpg     #导航栏图标
      display_title: true    #导航栏上是否显示标题
      fixed: false           #是否固定导航栏

  • 顶部导航栏按钮的配置【每次添加页面都需要在这里配置导航栏按钮】：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #目录相关
    menu:
      主页: / || fas fa-home
      时间轴: /archives/ || fas fa-archive
      标签: /tags/ || fas fa-tags
      分类: /categories/ || fas fa-folder-open
      说说: /chat/ || fal fa-share-alt
      # 清单 List||fas fa-list:
      #   音乐: /music/ || fas fa-music
      #   视频: /movies/ || fas fa-video
      友情链接: /link/ || fas fa-link
      #关于: /about/ || fas fa-heart

  • 顶部导航栏目录配置格式：

    1
    2
    3
    4
    5
    #只有一个选项的导航目录
    {页面名称}: {路径} || fas fa-{图标名称}
    #包含多个子选项的导航目录
    {一级菜单名称} || fas fa-{图标名称}:
      	{二级页面名称}: {路径} || fas fa-{图标名称}

  • 顶部导航栏按钮的图标设置：

    1. 安装相关插件：

      1
      npm install hexo-butterfly-extjs

    2. 更改CDN配置：

      1
      2
      3
      4
      5
      6
      7
      8
      # CDN
      # 非必要不要修改
      CDN:
        internal_provider: local
        #主要就是把这里改为local
        third_party_provider: local
        version: true
        custom_format:

    3. 进入到https://fontawesome.com/v5/search选择图标复制图标的HTML代码内容到上述格式中即可。

  • 添加导航栏搜索选项：

    1. 安装依赖：

      1
      npm install hexo-generator-search --save

    2. 配置搜索项：

      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
      # search (搜索)
      # see https://butterfly.js.org/posts/ceeb73f/#搜索系統
      # --------------------------------------
      # Algolia search
      algolia_search:
        enable: false
        hits:
          per_page: 6
      # Local search
      local_search:
        enable: true
        #在页面加载时提前加载数据
        preload: false
        #每篇文章展示多少搜索结果，如果全部展示则设置为-1
        top_n_per_article: 1
        # Unescape html strings to the readable one.
        unescape: false
        CDN: 
      # Docsearch
      docsearch:
        enable: false
        appId: 
        apiKey: 
        indexName: 
        option:

第二节 图像设置

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
# 图片设置
# --------------------------------------
# 网站图标
favicon: /img/001.jpg
# 头像
avatar:
  img: /img/001.jpg
  effect: false
# Disable all banner image
disable_top_img: false
# The banner image of home page
index_img:
# If the banner of page not setting, it will show the top_img
default_top_img: /img/002.jpg
# The banner image of archive page
archive_img:
# If the banner of tag page not setting, it will show the top_img
# note: tag page, not tags page (子標籤頁面的 top_img)
tag_img:
# The banner image of tag page
# format:
#  - tag name: xxxxx
tag_per_img:
# If the banner of category page not setting, it will show the top_img
# note: category page, not categories page (子分類頁面的 top_img)
category_img:
# The banner image of category page
# format:
#  - category name: xxxxx
category_per_img:
cover:
  # display the cover or not (是否顯示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
  # the position of cover in home page (封面顯示的位置)
  # left/right/both
  position: both
  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  default_cover:
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg
# Replace Broken Images (替換無法顯示的圖片)
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg
# A simple 404 page
error_404:
  enable: false
  subtitle: 'Page Not Found'
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

第三节 动画设置

  • 加载动画：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Loading Animation (加載動畫)
    preloader:
      enable: false
      # source
      # 1. fullpage-loading
      # 2. pace (progress bar)
      source: 1
      # pace theme (see https://codebyzach.github.io/pace/)
      pace_css_url:

  • 主页循环打字效果：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    # 如果有英文逗號' , ',請使用轉義字元 ,
    # 如果有英文雙引號' " ',請使用轉義字元 "
    # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
    # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
    # the subtitle on homepage (主頁subtitle)
    # 设置首页循环打字效果
    subtitle:
      enable: true
      effect: true
      # Customize typed.js (配置typed.js)
      # https://github.com/mattboldt/typed.js/#customization
      typed_option: 
      # source 調用第三方服務
      # source: false 關閉調用
      # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
      # source: 2  調用一句網（簡體） https://yijuzhan.com/
      # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
      # subtitle 會先顯示 source , 再顯示 sub 的內容
      source: false
      # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
      sub:
        - 林深时见鹿，海蓝时见鲸，梦醒时见你。
        - 择一事,终一生,唯有热爱可抵岁月漫长。

  • 主页冒泡特效添加：

    1. 在Blog/themes/butterfly/source/js目录下新建bubble.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
    $(function() {
        // 气泡
        function bubble() {
            $('#page-header').circleMagic({
                radius: 10,
                density: .2,
                color: 'rgba(255,255,255,.4)',
                clearOffset: 0.99
            });
        }! function(p) {
            p.fn.circleMagic = function(t) {
                var o, a, n, r, e = !0,
                    i = [],
                    d = p.extend({ color: "rgba(255,0,0,.5)", radius: 10, density: .3, clearOffset: .2 }, t),
                    l = this[0];

                function c() { e = !(document.body.scrollTop > a) }

                function s() { o = l.clientWidth, a = l.clientHeight, l.height = a "px", n.width = o, n.height = a }

                function h() {
                    if (e)
                        for (var t in r.clearRect(0, 0, o, a), i) i[t].draw();
                    requestAnimationFrame(h)
                }

                function f() {
                    var t = this;

                    function e() { t.pos.x = Math.random() * o, t.pos.y = a 100 * Math.random(), t.alpha = .1 Math.random() * d.clearOffset, t.scale = .1 .3 * Math.random(), t.speed = Math.random(), "random" === d.color ? t.color = "rgba(" Math.floor(255 * Math.random()) ", " Math.floor(0 * Math.random()) ", " Math.floor(0 * Math.random()) ", " Math.random().toPrecision(2) ")" : t.color = d.color }
                    t.pos = {}, e(), this.draw = function() { t.alpha <= 0 && e(), t.pos.y -= t.speed, t.alpha -= 5e-4, r.beginPath(), r.arc(t.pos.x, t.pos.y, t.scale * d.radius, 0, 2 * Math.PI, !1), r.fillStyle = t.color, r.fill(), r.closePath() }
                }! function() {
                    o = l.offsetWidth, a = l.offsetHeight,
                        function() {
                            var t = document.createElement("canvas");
                            t.id = "canvas", t.style.top = 0, t.style.zIndex = 0, t.style.position = "absolute", l.appendChild(t), t.parentElement.style.overflow = "hidden"
                        }(), (n = document.getElementById("canvas")).width = o, n.height = a, r = n.getContext("2d");
                    for (var t = 0; t < o * d.density; t++) {
                        var e = new f;
                        i.push(e)
                    }
                    h()
                }(), window.addEventListener("scroll", c, !1), window.addEventListener("resize", s, !1)
            }
        }(jQuery);

        // 调用气泡方法
        bubble();
    })

    1. 在inject的bottom中添加：

    1
    2
    - <script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script>
    - <script data-pjax defer src="https://npm.elemecdn.com/tzy-blog/lib/js/theme/chocolate.js"></script>

  • 主页流星雨特效添加：

    1. 打开_config.butterfly.yml文件，搜索inject，在head下添加：

      1
      - <link rel="stylesheet" href="/css/meteor.css">

    2. 打开_config.butterfly.yml文件，搜索inject，在bottom下添加：

      1
      2
      3
      #背景宇宙星光canvas
      - '<canvas id="universe"></canvas>' 
      - <script data-pjax defer src="/js/meteor.js"></script>

    3. 在/source/js目录下添加meteor.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
      //夜晚模式下流星特效的添加
      function dark() 
      {
          window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;
          var n,e,i,h,t=.05,s=document.getElementById("universe"),o=!0,a="180,184,240",r="226,225,142",d="226,225,224",c=[];
          function f()
          {
              n=window.innerWidth,
              e=window.innerHeight,
              i=.216*n,
              s.setAttribute("width",n),s.setAttribute("height",e)
          }
          function u()
          {
              h.clearRect(0,0,n,e);
              for(var t=c.length,i=0;i<t;i++)
              {
                  var s=c[i];
                  s.move(),
                  s.fadeIn(),
                  s.fadeOut(),
                  s.draw()
              }
          }
          function y()
          {
              this.reset=function()
              {
                  this.giant=m(3),
                  this.comet=!this.giant&&!o&&m(10),
                  this.x=l(0,n-10),
                  this.y=l(0,e),
                  this.r=l(1.1,2.6),
                  this.dx=l(t,6*t)+(this.comet+1-1)*t*l(50,120)+2*t,
                  this.dy=-l(t,6*t)-(this.comet+1-1)*t*l(50,120),
                  this.fadingOut=null,
                  this.fadingIn=!0,
                  this.opacity=0,
                  this.opacityTresh=l(.2,1-.4*(this.comet+1-1)),
                  this.do=l(5e-4,.002)+.001*(this.comet+1-1)},
                  this.fadeIn=function()
                  {
                      this.fadingIn&&(this.fadingIn=!(this.opacity>this.opacityTresh),this.opacity+=this.do)
                  },
                  this.fadeOut=function()
                  {
                      this.fadingOut&&(this.fadingOut=!(this.opacity<0),this.opacity-=this.do/2,(this.x>n||this.y<0)&&(this.fadingOut=!1,this.reset()))
                  },
                  this.draw=function()
                  {
                      if(h.beginPath(),this.giant)h.fillStyle="rgba("+a+","+this.opacity+")",h.arc(this.x,this.y,2,0,2*Math.PI,!1);
                      else if(this.comet)
                      {
                          h.fillStyle="rgba("+d+","+this.opacity+")",
                          h.arc(this.x,this.y,1.5,0,2*Math.PI,!1);
                          for(var t=0;t<30;t++)
                              h.fillStyle="rgba("+d+","+(this.opacity-this.opacity/20*t)+")",h.rect(this.x-this.dx/4*t,this.y-this.dy/4*t-2,2,2),h.fill()
                      }
                      else 
                          h.fillStyle="rgba("+r+","+this.opacity+")",h.rect(this.x,this.y,this.r,this.r);
                      h.closePath(),h.fill()
                  },
                  this.move=function()
                  {
                      this.x+=this.dx,this.y+=this.dy,!1===this.fadingOut&&this.reset(),(this.x>n-n/4||this.y<0)&&(this.fadingOut=!0)},setTimeout(function(){o=!1},50)
                  }
                  function m(t)
                  {
                      return Math.floor(1e3*Math.random())+1<10*t
                  }
                  function l(t,i)
                  {
                      return Math.random()*(i-t)+t
                  }
                  f(),window.addEventListener("resize",f,!1),function()
                  {
                      h=s.getContext("2d");
                      for(var t=0;t<i;t++)c[t]=new y,c[t].reset();u()
                  }(),
                  function t()
                  {
                      document.getElementsByTagName('html')[0].getAttribute('data-theme')=='dark'&&u(),window.requestAnimationFrame(t)
                  }()
      };
      dark()

    4. 在/source/css目录下添加meteor.styl文件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      /* 夜间模式下背景宇宙星光 */
      #universe {  
          display: block;
          position: fixed;
          margin: 0;
          padding: 0;
          border: 0;
          outline: 0;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 1;
      }
      /* 亮色模式下隐藏 */
      [data-theme='light'] #universe {
          display: none;
      }

第四节 右侧侧边栏配置

  • 社交按钮：

    1

第三章 博客页面

第一节 博客标签页面的添加

  • 标签页的添加：

    1
    hexo new page tags

  • 编辑Blog/source/tags/index.md:

    1
    2
    3
    4
    5
    6
    7
    ---
    title: 文章标签
    date: 2023-05-29 21:42:56
    type: "tags"
    orderby: random
    order: 1
    ---

第二节 博客分类页面的添加

  • 分类页的添加：

    1
    hexo new page categories

  • 编辑Blog/source/categories/index.md:

    1
    2
    3
    4
    5
    ---
    title: 文章分类
    date: 2023-05-29 21:57:07
    type: "categories"
    ---

第三节 友情链接页的添加

  • 添加友情链接页面：

    1
    hexo new page link

  • 编辑Blog/source/link/index.md:

    1
    2
    3
    4
    5
    ---
    title: 友情链接
    date: 2023-05-29 22:03:35
    type: "link"
    ---

  • 在Blog/source/_data目录下创建一个link.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    - class_name: CzrTuringB
      class_desc: 相关链接
      link_list:
        - name: 博客
          link: http://czr.czrturingb.top/
          avatar: /img/001.jpg
          descr: 怀念过去就是在时间的长河里刻舟求剑
    - class_name: 我的推荐
      class_desc: 大佬们的HomePage
      link_list:
        - name: 稚晖的个人站
          link: https://zhihui.lingjun.life/
          avatar: https://tse4-mm.cn.bing.net/th/id/OIP-C.t8bhJWGAQxHSq4jOXct-eAHaFl?rs=1&pid=ImgDetMain
          descr: 十年饮冰，难凉热血

第四节 说说页面的添加

  • 首先前往这个页面创建一个账号并进行认证LeanCloud

  • 创建一个应用，应用名称自行定义。

  • 在结构化数据的_User类中新建一个列，其列名称为img，数据类型为String，并设置默认值为头像的url链接。

  • 在结构化数据的_User类中新建一个行，输入用户名和密码，用于说说的发表。

  • 配置_User类的所有权限都指向刚才创建的用户。

  • 在结构化数据中创建一个shuoshuo类，然后将更新、删除、创建、添加域权限指向刚才创建的用户。

  • 在结构化数据中创建一个atComment类，然后将所有的权限都指向所有用户。

  • 打开设置----应用凭证----获取应用的AppID和AppKey。

  • 我有一个已经备案的域名，所以我使用的时leanCloud大陆版，在域名解析中添加一个新的解析，其解析类型选择：CNAME。解析值为leanCloud中的设置----域名绑定----API访问域名绑定所给的值。

  • 在安全中心，设置Web安全域名，填写自己博客的地址即可。

  • 创建一个说说页面：

    1
    hexo new page chat

  • 在创建的index.md文件中添加下面的内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    ---
    title: 说说
    date: 2024-08-22 07:53:47
    ---
    <!-- 引用 artitalk -->
    <script type="text/javascript" src="https://unpkg.com/artitalk" data-pjax></script>

    <!-- 存放说说的容器 -->
    <div id="artitalk_main"></div>
    <script>
    new Artitalk({
        appId: '', // Your LeanCloud appId
        appKey: '', // Your LeanCloud appKey
        serverURL: '',//刚才解析的子域名完整地址
        avatarPla: '',//默认头像URL链接'
        atComment: 0 //关闭评论
    })
    </script>

第四章 博客功能配置

第一节 搜索引擎收录

  • 百度收录：

    • 进入站长页面站点管理_站长工具_百度搜索资源平台创建网站，按提示填写信息即可。

    • 验证方式选择文件验证，将下载的文件上传到服务器网站根目录下。

    • 安装站点地图插件：

      1
      2
      npm install hexo-generator-sitemap --save     
      npm install hexo-generator-baidu-sitemap --save

    • 在Hexo配置文件中添加：

      1
      2
      3
      4
      5
      #站点地图配置
      baidusitemap:
          path: baidusitemap.xml
      sitemap:
          path: sitemap.xml

  • Bing收录

    • 进入站长页面URL 提交 - Bing Webmaster Tools

    • 登陆后选择手动提交页面，输入自己网站的域名，并下载验证文件，将其上传到服务器网站根目录下。

    • 安装主动推送插件：

      1
      npm install --save hexo-submit-urls-to-search-engine

    • 在Hexo配置文件中添加：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      #主动推送
      hexo_submit_urls_to_search_engine:
        submit_condition: count #链接被提交的条件，可选值：count | period 现仅支持count
        count: 10 # 提交最新的10个链接
        period: 900 # 提交修改时间在 900 秒内的链接
        google: 0 # 是否向Google提交，可选值：1 | 0（0：否；1：是）
        bing: 1 # 是否向Bing提交，可选值：1 | 0（0：否；1：是）
        baidu: 1 # 是否向Baidu提交，可选值：1 | 0（0：否；1：是）
        txt_path: submit_urls.txt # 文本文档名，需要推送的链接会保存在此文本文档里
        bing_host: http://www.czrturingb.top # 在Bing站长平台中注册的域名
        bing_token:  # 您的Bing密钥，从Bing站长平台获取
        baidu_host: http://www.czrturingb.top ## 在百度站长平台中注册的域名
        baidu_token: ## 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!

    • 部署信息：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      #部署信息
      deploy:
      - type: git
        #repo: git@192.168.100.12:/home/git/blog.git
        repo: git@43.138.32.12:/home/git/blog.git
        branch: master  

      - type: cjh_bing_url_submitter
      - type: cjh_baidu_url_submitter

    • 在Bing中提交站点地图，依据提示填写站点地图ID即可。

第二节 全局音乐播放器

  • 安装插件：

    1
    npm i hexo-tag-aplayer --save

  • 在项目配置文件中添加下面内容：

    1
    2
    3
    4
    #音乐播放器
    aplayer:
      meting: true
      asset_inject: false

  • 更改_config.butterfly.yml中的内容：

    1
    2
    3
    4
    # Inject the css and script (aplayer/meting)
    aplayerInject:
      enable: true
      per_page: true

  • 添加全局吸底音乐播放器：

    • 变量说明：

      1
      2
      @data-id：即自己网易云歌单的ID，通过网页打开网易云歌单，即可在连接处查看歌单ID
      @data-server：相关音乐播放平台，这里我设置为网易云netease

    • 添加inject：

      1
      2
      3
      #在inject bottom下面添加
      #底部音乐播放器
      - <div class="aplayer no-destroy" data-id="8424336101" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-lrctype="1" data-preload="none" data-autoplay="true" muted></div>

    • 切换页面音乐不中断：

      1
      2
      3
      4
      #开启pjax
      pjax:
        enable: true
        exclude:

第三部分 主题最终配置文件

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
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
# --------------------------------------
# 顶部导航栏设置
# -------------------------------------
nav:
  logo: /img/Avatar.jpg
  display_title: true
  fixed: false

#顶部导航栏按钮
menu:
  主页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  说说: /chat/ || fal fa-share-alt
  友情链接: /link/ || fas fa-link

# --------------------------------------
# 侧边导航
# --------------------------------------
#社交图标配置
social:
  fab fa-github: https://github.com/ChenZR0509 || Github || '#4a7dbe'
  fas fa-envelope: mailto:ChenZR20010509@outlook.com || Email || '#4a7dbe'
  fab fa-qq : tencent://message/?uin=1542453296&Site=Sambow&Menu=yes || QQ || '#4a7dbe'

#侧边栏
aside:
  enable: true
  hide: true
  button: true        #隐藏按钮
  mobile: true        #移动端显示
  position: right     #侧边栏位置： left/right
  display:
    archive: true
    tag: true
    category: true
  card_author:        #用户信息栏
    enable: true
    description:
      - 回忆过去就是在时间的长河中刻舟求剑
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/ChenZR0509
  card_announcement:   #公告栏
    enable: true
    content: This is my Blog
  card_recent_post:     #最近文章
    enable: true
    # If set 0 will show all
    limit: 5
    # Sort: date / updated
    sort: date
    sort_order:
  card_newest_comments:
    enable: false
    sort_order:
    limit: 6
    # Unit: mins, save data to localStorage
    storage: 10
    avatar: true
  card_categories:
    enable: true
    # If set 0 will show all
    limit: 8
    # Choose: none / true / false
    expand: none
    sort_order:
  card_tags:
    enable: true
    # If set 0 will show all
    limit: 40
    color: false
    # Order of tags, random/name/length
    orderby: random
    # Sort of order. 1, asc for ascending; -1, desc for descending
    order: 1
    sort_order:
  card_archives:
    enable: true
    # Type: monthly / yearly
    type: monthly
    # Eg: YYYY年MM月
    format: MMMM YYYY
    # Sort of order. 1, asc for ascending; -1, desc for descending
    order: -1
    # If set 0 will show all
    limit: 8
    sort_order:
  card_post_series:   #文章系列
    enable: true
    # The title shows the series name
    series_title: true
    # Order by title or date
    orderBy: 'date'
    # Sort of order. 1, asc for ascending; -1, desc for descending
    order: -1
  card_webinfo:
    enable: true
    post_count: false
    last_push_date: true
    sort_order:
    # Time difference between publish date and now
    # Formal: Month/Day/Year Time or Year/Month/Day Time
    # Leave it empty if you don't enable this feature
    runtime_date: 2023-05-22 19:10:00
#底部快捷按钮
rightside_bottom:
#繁体简体转换
translate:
  enable: true
  default: 繁
  defaultEncoding: 2
  translateDelay: 0
  msgToTraditionalChinese: '繁'
  msgToSimplifiedChinese: '簡'
#阅读模式
readmode: true
#主题颜色模式
darkmode:
  enable: true
  button: true
  autoChangeMode: false
  start: 6
  end: 18
#页面滚动百分比
rightside_scroll_percent: true

rightside_item_order:
  enable: false
  hide:
  show:
# --------------------------------------
# 图像设置
# --------------------------------------
# 网站图标
favicon: /img/Avatar.jpg
# 头像
avatar:
  img: /img/Avatar.jpg
  effect: false             # 头像动画是否自动播放
#主页顶部背景图片
index_img: /img/Background.jpeg
#默认顶部背景图片
default_top_img: /img/Background.jpeg
#网站背景
background: /img/Background.jpeg
#底部背景图片
footer_img: true
#加载错误图片
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg
#加载错误页面
error_404:
  enable: false
  subtitle: 'Page Not Found'
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png
#其他配置
cover:
  index_enable: true
  aside_enable: true
  archives_enable: true
  default_cover:
archive_img:
tag_img:
tag_per_img:
category_img:
category_per_img:

# --------------------------------------
# 网站索引页面设置
# --------------------------------------
post_meta:
  page: # Home Page
    date_type: created # created or updated or both 主页文章日期是创建日期还是更新日期或者都显示
    date_format: date # date/relative 显示日期是绝对日期还是相对日期
    categories: true # true or false
    tags: true # true or false
    label: true # true or false
  post:
    date_type: both # created or updated or both 文章日期是创建日期还是更新日期或者都显示
    date_format: date # date/relative 显示日期是绝对日期还是相对日期
    categories: true # true or false
    tags: true # true or false
    label: true # true or false

# The position of site info, eg: 300px/300em/300rem/10%
index_site_info_top:
# The height of top_img, eg: 300px/300em/300rem
index_top_img_height:

# 主页上文章选项的布局
# 1: Cover on the left, info on the right
# 2: Cover on the right, info on the left
# 3: Cover and info alternate between left and right
# 4: Cover on top, info on the bottom
# 5: Info displayed on the cover
# 6: Masonry layout - Cover on top, info on the bottom
# 7: Masonry layout - Info displayed on the cover
index_layout: 3

# 主页上是否显示文章描述
# 1: description
# 2: both (if the description exists, it will show description, or show the auto_excerpt)
# 3: auto_excerpt (default)
# false: do not show the article introduction
index_post_content:
  method: 3
  length: 500

# --------------------------------------
# 网站文章页面设置
# --------------------------------------
#目录配置
toc:
  post: true
  page: true
  number: true
  expand: true
  # Only for post
  style_simple: true
  scroll_percent: true

#文章复制
post_copyright:
  enable: true
  decode: false
  author_href:
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

#相关文章推荐
related_post:
  enable: true
  # Number of posts displayed
  limit: 6
  # Choose: created / updated
  date_type: created

# Choose: 1 / 2 / false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: 1

#文章过期提醒
noticeOutdate:
  enable: false
  # Style: simple / flat
  style: flat
  # When will it be shown
  limit_day: 365
  # Position: top / bottom
  position: top
  message_prev: It has been
  message_next: days since the last update, the content of the article may be outdated.

#网站底部信息配置
footer:
  owner:
    enable: true  #作者名称显示
    since: 2019   #网站创建年份
  custom_text: Welcome to Enigma Universe!!!
  copyright: true
# --------------------------------------
# 动画设置
# --------------------------------------
#加载动画
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 1
  pace_css_url:
#主页打字效果
# The subtitle on homepage
subtitle:
  enable: true
  effect: true
  sub:
    - 林深时见鹿，海蓝时见鲸，梦醒时见你。
    - 择一事，终一生，唯有热爱可抵岁月漫长。
    - 我有一壶酒，足以慰风尘。
    - 我有一书卷，足以消余生。
# --------------------------------------
# 功能配置
# --------------------------------------
# 1、代码块设置
# --------------------------------------
code_blocks:
  #可选主题: darker / pale night / light / ocean / false
  theme: darker
  macStyle: false
  height_limit: false
  word_wrap: false
  #代码块工具栏
  copy: true
  language: true
  # true: shrink the code blocks | false: expand the code blocks | none: expand code blocks and hide the button
  shrink: false
  fullpage: false
# --------------------------------------
# 2、图片描述标题
# --------------------------------------
photofigcaption: true
# --------------------------------------
# 3、复制
# --------------------------------------
copy:
  enable: true
  #复制后粘贴时添加的额外描述
  copyright:
    enable: false
    limit_count: 150
# --------------------------------------
# 4、网站访问量统计
# --------------------------------------
busuanzi:
  site_uv: false
  site_pv: false
  page_pv: false
# --------------------------------------
# 5、文章锚点
# --------------------------------------
#锚点
anchor:
  auto_update: false
  click_to_scroll: false
# --------------------------------------
# 6、文章字数统计
# --------------------------------------
# Need to install the hexo-wordcount plugin
wordcount:
  enable: false
  post_wordcount: true
  min2read: true
  total_wordcount: true
# --------------------------------------
# 7、数学公式渲染
# --------------------------------------
# About the per_page
# if you set it to true, it will load mathjax/katex script in each page
# if you set it to false, it will load mathjax/katex script according to your setting (add the 'mathjax: true' or 'katex: true' in page's front-matter)
math:
  # Choose: mathjax, katex
  # Leave it empty if you don't need math
  use:
  per_page: true
  hide_scrollbar: false
  mathjax:
    # Enable the contextual menu
    enableMenu: true
    # Choose: all / ams / none, This controls whether equations are numbered and how
    tags: none
  katex:
    # Enable the copy KaTeX formula
    copy_tex: false
# --------------------------------------
# 8、搜索功能配置
# --------------------------------------
search:
  use: local_search
  placeholder:
  local_search:
    enable: true
    preload: false
    top_n_per_article: 1
    # Unescape html strings to the readable one.
    unescape: false
# --------------------------------------
# 9、文章分享功能
# --------------------------------------

share:
  # Choose: sharejs / addtoany
  # Leave it empty if you don't need share
  use: sharejs

  # Share.js
  # https://github.com/overtrue/share.js
  sharejs:
    sites: facebook,twitter,wechat,weibo,qq

  # AddToAny
  # https://www.addtoany.com/
  addtoany:
    item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link
# --------------------------------------
# 10、评论系统
# --------------------------------------

comments:
  # Up to two comments system, the first will be shown as default
  # Leave it empty if you don't need comments
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  # Format of two comments system : Disqus,Waline
  use:
  # Display the comment name next to the button
  text: true
  # Lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  # Display comment count in post's top_img
  count: false
  # Display comment count in Home Page
  card_post_count: false

# Disqus
# https://disqus.com/
disqus:
  shortname:
  # For newest comments widget
  apikey:

# Alternative Disqus - Render comments with Disqus API
# https://github.com/SukkaW/DisqusJS
disqusjs:
  shortname:
  apikey:
  option:

# Livere
# https://www.livere.com/
livere:
  uid:

# Gitalk
# https://github.com/gitalk/gitalk
gitalk:
  client_id:
  client_secret:
  repo:
  owner:
  admin:
  option:

# Valine
# https://valine.js.org
valine:
  appId:
  appKey:
  avatar: monsterid
  # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  serverURLs:
  bg:
  # Use Valine visitor count as the page view count
  visitor: false
  option:

# Waline - A simple comment system with backend support fork from Valine
# https://waline.js.org/
waline:
  serverURL:
  bg:
  # Use Waline pageview count as the page view count
  pageview: false
  option:

# Utterances
# https://utteranc.es/
utterances:
  repo:
  # Issue Mapping: pathname/url/title/og:title
  issue_term: pathname
  # Theme: github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
  light_theme: github-light
  dark_theme: photon-dark
  js:
  option:

# Facebook Comments Plugin
# https://developers.facebook.com/docs/plugins/comments/
facebook_comments:
  app_id:
  # optional
  user_id:
  pageSize: 10
  # Choose: social / time / reverse_time
  order_by: social
  lang: en_US

# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
  envId:
  region:
  # Use Twikoo visitor count as the page view count
  visitor: false
  option:

# Giscus
# https://giscus.app/
giscus:
  repo:
  repo_id:
  category_id:
  light_theme: light
  dark_theme: dark
  js:
  option:

# Remark42
# https://remark42.com/docs/configuration/frontend/
remark42:
  host:
  siteId:
  option:

# Artalk
# https://artalk.js.org/guide/frontend/config.html
artalk:
  server:
  site:
  # Use Artalk visitor count as the page view count
  visitor: false
  option:
# --------------------------------------
# 11、对话服务
# --------------------------------------

chat:
  # Choose: chatra/tidio/crisp
  # Leave it empty if you don't need chat
  use:
  # Chat Button [recommend]
  # It will create a button in the bottom right corner of website, and hide the origin button
  rightside_button: false
  # The origin chat button is displayed when scrolling up, and the button is hidden when scrolling down
  button_hide_show: false

# https://chatra.io/
chatra:
  id:

# https://www.tidio.com/
tidio:
  public_key:

# https://crisp.chat/en/
crisp:
  website_id:
# --------------------------------------
# 12、统计功能配置
# --------------------------------------

# https://tongji.baidu.com/web/welcome/login
baidu_analytics:

# https://analytics.google.com/analytics/web/
google_analytics:

# https://www.cloudflare.com/zh-tw/web-analytics/
cloudflare_analytics:

# https://clarity.microsoft.com/
microsoft_clarity:

# https://umami.is/
umami_analytics:
  enable: false
  # For self-hosted setups, configure the hostname of the Umami instance
  serverURL:
  website_id:
  option:
  UV_PV:
    site_uv: false
    site_pv: false
    page_pv: false
    # Umami Cloud (API key) / self-hosted Umami (token)
    token:
# --------------------------------------
# 13、广告设置
# --------------------------------------

# Google Adsense
google_adsense:
  enable: false
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client:
  enable_page_level_ads: true
# --------------------------------------
# 14、Verification
# --------------------------------------
site_verification:
# - name: google-site-verification
#   content: xxxxxx
# - name: baidu-site-verification
#   content: xxxxxxx
# Insert ads manually
# Leave it empty if you don't need ads
ad:
  # Insert ads in the index (every three posts)
  index:
  # Insert ads in aside
  aside:
  # Insert ads in the post (before pagination)
  post:

# --------------------------------------
# 15、图片放大查看功能
# --------------------------------------
lightbox:
  medium_zoom: false
  fancybox: true
# --------------------------------------
# 15、外部js配置
# --------------------------------------
inject:
  head:
    #宇宙星光
    - <link rel="stylesheet" href="/css/meteor.css">
  bottom:
    #气泡特效
    - <script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script>
    - <script data-pjax defer src="https://npm.elemecdn.com/tzy-blog/lib/js/theme/chocolate.js"></script>
    #宇宙星光
    - '<canvas id="universe"></canvas>'
    - <script data-pjax defer src="/js/meteor.js"></script>

# --------------------------------------
# UI美化
# --------------------------------------
# 自定义主题颜色
theme_color:
   enable: true
   main: "#49B1F5"
   paginator: "#00c4b6"
   button_hover: "#FF7242"
   text_selection: "#00c4b6"
   link_color: "#99a9bf"
   meta_color: "#858585"
   hr_color: "#A4D8FA"
   code_foreground: "#F47466"
   code_background: "rgba(27, 31, 35, .05)"
   toc_color: "#00c4b6"
   blockquote_padding_color: "#49b1f5"
   blockquote_background_color: "#49b1f5"
   scrollbar_color: "#49b1f5"
   meta_theme_color_light: "#ffffff"
   meta_theme_color_dark: "#141518"

# --------------------------------------
# CDN设置
# --------------------------------------
CDN:
  internal_provider: local
  third_party_provider: local
  version: true
  custom_format: