本文参考：将Hexo部署到云服务器（使用宝塔面板）

主题：Adagio，来自翰林院

一、现状及需求

已安装z-blog博客；计划转为hexo，因为基于node.js，支持Markdown语法。

二、技术要点

1. 安装

（与参照文章不同的地方）

  • 自带宝塔，通过宝塔安装git和nginx
  • 在安装git时，使用root权限处理
  • 使用宝塔：备份原网站，删除其中一个域名
  • 使用宝塔：新建网站，使用新目录，添加上面删除的域名
  • sudo chown -R git:git /home/git/repos/ #仓库所有者改为git这步未成功，但不影响同步
  • 下载Adagio包，将解压缩后目录放在themes内

2. 本地及连接测试

1
2
3
hexo s
hexo clean
hexo g -d

可以查看本地127.0.0.1:4000，远程看上面设定的域名。通过继续。

三、Hexo及Adagio设置

主要在两个_config.yml中设置。

3.1 在Hexo中

  • 没有那么多文章，到月即可

    1
    permalink: :year/:month/:title/

  • 设置主题

    1
    theme: adagio

3.2 在Adagio中

  • 设置首页通栏banner图片及文章页返回首页图片，其中的img为themes/adagio/source/img/目录。

    1
    2
    3
    4
    5
    img_banner: true
    img_banner_large: /img/banner1.jpeg
    img_banner_small: /img/banner0.jpg
    logo_url: /img/logo.png
    logo_word: 云知识竞赛

  • 设置顶部导航条

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    navbar: true
    navbar_items:
      - text: 知识竞赛
        url: /categories/知识竞赛/
        layout: ~
      - text: IT技术
        url: /categories/IT技术/
        layout: ~
      - text: 联系我们
        url: /about/
        layout: ~

  • 各文章页最后的网站标题

    1
    SEOTitle: 云知识竞赛

  • 边栏常驻文章

    1
    2
    3
    4
    sidebar_trending: true
    trending:
        -   path: /2023/09/知识竞赛答题小程序/
            text: 知识竞赛答题小程序

  • 百度统计

    • 申请百度统计
    • 在themes/adagio/_config.yml中增加百度统计代码
      1
      2
      3
      4
      5
      baidu_analytics: true
      baidu_url: https://hm.baidu.com/hm.js?<你的百度统计ID>
      # For google analytics, specify with the UA-xxx track ID.
      google_analytics: false
      google_track_id: UA-11111111-1

  • 其他功能大多屏蔽

四、写文章及设置页面格式

4.1 新写一篇

hexo n 测试文章
会在博客根目录/source/_posts中找到测试文章.md，使用vscode编辑，随便写点东西，然后保存，可以在127.0.0.1:4000中实时看到。

4.2 设置页面格式

全英文，有点东西不想要，怎么办？
修改themes/adagio/layout/目录下面的.ejs模板文件。主要有：

主页：index.ejs
文章页：post.ejs
档案页：archive.ejs
头部：_partial/head.ejs
导航：_partial/nav.ejs
边栏：_partial/sidebar.ejs
页脚：_partial/footer.ejs

如修改footer.ejs，增加备案行：
<a target="_blank" rel="noopener" href="https://beian.miit.gov.cn">赣ICP备2022009885号-1</a>

4.3 添加图片

  • 貌似添加不了图片和插件hexo-asset-image有关，添加吧。下面是package.json安装的插件。
    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
    {
      "name": "hexo-site",
      "version": "0.0.0",
      "private": true,
      "scripts": {
        "build": "hexo generate",
        "clean": "hexo clean",
        "deploy": "hexo deploy",
        "server": "hexo server"
      },
      "hexo": {
        "version": "6.3.0"
      },
      "dependencies": {
        "hexo": "^6.3.0",
        "hexo-asset-image": "^1.0.0",
        "hexo-deployer-git": "^4.0.0",
        "hexo-generator-archive": "^2.0.0",
        "hexo-generator-baidu-sitemap": "^0.1.9",
        "hexo-generator-category": "^2.0.0",
        "hexo-generator-index": "^3.0.0",
        "hexo-generator-tag": "^2.0.0",
        "hexo-renderer-ejs": "^2.0.0",
        "hexo-renderer-marked": "^6.0.0",
        "hexo-renderer-stylus": "^3.0.0",
        "hexo-server": "^3.0.0",
        "hexo-theme-landscape": "^1.0.0"
      }
    }
  • 将图片放在博客根目录/source/images/中，可以在images目录中，再新建目录，如：2309
  • 这样引用![首页](/images/2309/zsjsxcx01.jpg)

4.3 设置分类与标签

好像adagio不支持文章分类，但hexo是支持的。
修改文章头部信息，文件是博客根目录/scaffolds/post.md

1
2
3
4
5
6
7
8
9
---
title: {{ title }}
date: {{ date }}
author: 云涌科技
categories:
  - 知识竞赛
tags: 
  - 微信小程序
---

分类目录对应：https://www.zhishijingsai.com/categories/知识竞赛/
标签目录对应：https://www.zhishijingsai.com/tags/微信小程序/

标签页还好，分类页有点问题，和档案页共同使用themes/adagio/layout/archive.ejs这个模板。

4.4 新建独立页

想生成一个关于页，可以作为普通文章生成。下面命令是作为独立页：
hexo new page about
会直接生成：/source/about/index.md，修改这个文件。发布后，会在网站/about/index.html。

五、其他

5.1 百度sitemap

安装插件：hexo-generator-baidu-sitemap

5.2 计数器

可以参考这个话题：hexo如何添加访问量统计的功能？，综合考虑还是没使用。
已更新，使用百度统计。见3.2节。2023-10-15

5.3 发布

  • 首次发布，或改版发布

    1
    2
    hexo clean
    hexo g -d

  • 增量发布
    hexo g -d

  • 删除原网站，将全部域名转至新网站

5.4 置顶文章

2023-10-15更新

  • 卸载默认安装的hexo-generator-index插件
  • 安装hexo-generator-index-pin-top插件
  • 在文章头部信息中，增加top: 100，数字越大，越靠前

5.5 无后端评论系统valine

2023-10-23更新

  • 在leancloud注册账号，创建应用，获取APP ID和APP Key
  • 信息写入themes/adagio/_config.yml中
    1
    2
    3
    4
    valine_comments: true
    valine_appId: xxxxxxxx
    valine_appKey: xxxxxxxx
    valine_placeholder: ~
  • 可能会报错
    1
    2
    Code -1: Request has been terminated
    Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.
  • 解决方法(基于v1.3.5)
  1. 前往leancloud，在设置>应用凭证里找到服务器地址 (REST API 服务器地址)
  2. 在/js/av-min.js文件中，将api: "https://" + n + ".api.lncld.net"替换为：api: "https://" + n + ".lc-cn-n1-shared.com"
  3. 重启本地服务并上传，hexo clean， hexo s， hexo g -d