Hexo 01 - 部署运行

发表于 更新于 分类于 阅读次数：

文档地址

  1. 安装Hexo：npm install -g hexo-cli
  2. 新建文件夹项目Ancientree ，在文件夹内执行： hexo init
  3. 然后：npm install
  4. 启动：hexo g 编译，然后hexo s启动

一. 新建与删除

  1. 新建：hexo new [layout] <title>
  2. 在指定目录下新建：在/_post目录（对应模板目录）下新建目录，然后执行 hexo new <layout> -p <directory>/<name>，如hexo new post -p test/test 。或者对应文件夹内直接新建
  3. 删除：直接删除对应文件就可以，然后重新编译： 
    1
    2
    3
    4
    5
    6
    7
    hexo clean

    hexo g

    hexo s

    hexo d

二. 更换主题Next

项目地址。文档地址。npm install hexo-theme-next@latest —save。

  1. 根目录中新建文件_config.next.yml，在这里配置Next。
  2. 自定义样式：suorce文件夹下新建_data文件夹，在文件夹中新建各种样式文件，然后修改配置文件，添加样式文件的路径即可。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # 自定义样式文件路径
    custom_file_path:
      #head: source/_data/head.njk
      #header: source/_data/header.njk
      #sidebar: source/_data/sidebar.njk
      #postMeta: source/_data/post-meta.njk
      #postBodyEnd: source/_data/post-body-end.njk
      footer: source/_data/footer.njk
      #bodyEnd: source/_data/body-end.njk
      #variable: source/_data/variables.styl
      #mixin: source/_data/mixins.styl
      style: source/_data/styles.styl
  3. 删除网页底部信息栏：_data文件夹中新建styles.styl，添加以下样式 
    1
    2
    3
    .powered-by {
        display: none
    }
  4. 增加文章阴影：styles.styl中添加以下添加样式 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    if (hexo-config('motion.transition.post_block')) {
      .post-block {
        visibility: hidden;
        margin-top: 60px;
        margin-bottom: 60px;
        padding: 25px;
        border-radius: 20px 20px 20px 20px;
        -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
        -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
      }
      .pagination, .comments {
        visibility: hidden;
      }
    }
  5. 开启本地搜索功能。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 安装插件
    npm install hexo-generator-searchdb --save

    // 修改 hexo/_config.yml 站点配置文件，新增以下内容
    search:
    	path: search.xml
    	field: post
    	format: html
    	limit: 10000

    // 修改主题配置文件，启用搜索
    local_search:
    	enable: true
  6. 网站运行时间设置：_data文件夹下新footer.njk文件。添加以下： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!-- 网站运行时间的设置 -->
    <span id="timeDate">载入天数...</span>
    <!-- <span id="times">载入时分秒...</span> -->
    <script>
        var now = new Date();
        function createtime() {
            var grt= new Date("11/17/2022 8: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;}
            // var times = document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
            document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "+hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
        }
    setInterval("createtime()",250);
    </script>
  7. 添加live-2d。 
    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
    // 1. 安装插件
    npm install -save hexo-helper-live2d

    // 2. 安装模型
    npm install live2d-widget-model-wanko --save

    // 可选择其他模型
    # live2d-widget-model-chitose

    # live2d-widget-model-epsilon2_1

    # live2d-widget-model-gf

    # live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)

    # live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)

    # live2d-widget-model-haruto

    # live2d-widget-model-hibiki

    # live2d-widget-model-hijiki

    # live2d-widget-model-izumi

    # live2d-widget-model-koharu

    # live2d-widget-model-miku

    # live2d-widget-model-ni-j

    # live2d-widget-model-nico

    # live2d-widget-model-nietzsche

    # live2d-widget-model-nipsilon

    # live2d-widget-model-nito

    # live2d-widget-model-shizuku

    # live2d-widget-model-tororo

    # live2d-widget-model-tsumiki

    # live2d-widget-model-unitychan

    # live2d-widget-model-wanko

    # live2d-widget-model-z16

    // 3. 站点配置文件_config.yml添加以下代码
    live2d:
      enable: true
      scriptFrom: local
      pluginRootPath: live2dw/
      pluginJsPath: lib/
      pluginModelPath: assets/
      tagMode: false
      log: false
      model:
        use: live2d-widget-model-<模型名字>
      display:
        position: right
        # width: 150 # 大小根据模型结构自己调整合适的
        # height: 300
      mobile:
        show: false # 是否在手机端显示
  8. 背景图片设：将背景图放到source/images下，然后styles.styl中添加以下样式 
    1
    2
    3
    4
    5
    6
    7
    body {
        background-image: url(../images/background.png);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
        opacity: 0.8;
    }