修改hexo适配oss访问规则

hexo生成的静态博客很多都是以文件夹形式的，然后默认省略了index.html。而对于阿里云的OSS来说，并不会默认访问文件夹下的index.html，所以，生成的时候需要做调整

文章链接修改

文章的连接直接修改根目录下_config.yml中permalink: p/:abbrlink.html的生成规则，详细可以参考之前写的文章链接持久化

归档、标签、分类修改

修改主题目录下_config.yml中的menu:加入index.html

1
2
3
4
5
6
7
8
9
10
11
12
menu:
  home: /|| home
  #about: /about/|| user
  top: /top/index.html|| signal
  tags: /tags/index.html|| tags
  categories: /categories/index.html|| th
  archives: /archives/index.html|| archive

# Enable/Disable menu icons.

menu_icons:
  enable: true

文章翻页跳转

打开themes\next\layout\_partials\pagination.swig文件，添加format文件路径

1
2
3
4
5
6
7
paginator({
       prev_text: '<i class="fa fa-angle-left" aria-label="'+__('accessibility.prev_page')+'"></i>',
       next_text: '<i class="fa fa-angle-right" aria-label="'+__('accessibility.next_page')+'"></i>',
       mid_size: 1,
       format: 'page/%d/index.html',
       escape: false
     })

目录分类页中链接修改

打开themes\next\layout\page.swig文件修改list_categories

1
2
修改前：      {{ list_categories() }}
修改后：      {{ list_categories({suffix: 'index.html'}) }}

标签页中链接修改

next中标签用到了tagcloud而不是list_tags,而tagclud并没有suffix配置，所以，可以仿照list_tags修改一下。
打开node_modules\hexo\lib\plugins\helper\tagcloud.js, 加入suffix配置

1
2
修改前：const { transform } = options; 
修改后：const { transform , suffix = ''} = options;

在result.push的超链接中加入${suffix}

1
2
3
result.push(
      `<a href="${this.url_for(tag.path)}${suffix}" style="${style}">${transform ? transform(tag.name) : tag.name}</a>`
    );

修改tagcloud调用。打开themes\next\layout\page.swig文件修改tagcloud

1
2
修改前：{{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
修改后：{{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111',suffix: 'index.html'}) }}

文章内的目录和标签连接

打开themes\next\layout_macro\post.swig文件

找到for cat in post.categories在href中添加index.html

1
2
3
4
5
6
{% for cat in post.categories %}
  <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
    <a href="{{ url_for(cat.path) }}index.html" itemprop="url" rel="index">
      <span itemprop="name">{{ cat.name }}</span>
    </a>
  </span>

找到for tag in post.tags在href中添加index.html

1
2
3
{% for tag in post.tags %}
  <a href="{{ url_for(tag.path) }}index.html" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{% endfor %}

左侧状态栏日志链接

修改themes\next\layout_macro\sidebar.swig文件

1
2
修改前：<a href="{{ url_for(config.archive_dir) }}">
修改后：<a href="{{ url_for(theme.menu.archives.split('||')[0]) }}">

部署到阿里云OSS

阿里云OSS国内站点需要绑定备案的域名才可以当静态网站范围。

上传文件

清理编译并自动生成网页

1
hexo clean && hexo g

将博客目录下的public目录上传到OSS根目录下

脚本自动提交

安装阿里oss脚本

1
npm install ali-oss

在根目录下创建depoly-to-oss.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
const fs = require('fs')
const path = require('path')
const util = require('util')
const OSS = require('ali-oss').Wrapper

const promisifyReaddir = util.promisify(fs.readdir)
const promisifyStat = util.promisify(fs.stat)

const client = new OSS({
  region: '<oss region>',
  //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。
  accessKeyId: '<Your accessKeyId>',
  accessKeySecret: '<Your accessKeySecret>',
  bucket: '<Your bucket name>'
})

// 上传的目录
const publicPath = path.resolve(__dirname, './public')

// 同步上传文件
async function put(proPath = '') {
  const dir = await promisifyReaddir(`${publicPath}${proPath}`)

  for (let i = 0; i < dir.length; i++) {
    const stat = await promisifyStat(path.resolve(`${publicPath}${proPath}`, dir[i]))

    if (stat.isFile()) {
      const fileStream = fs.createReadStream(path.resolve(`${publicPath}${proPath}`, dir[i]))
      console.log(`上传文件: ${proPath}/${dir[i]}`)
      const result = await client.putStream(`${proPath}/${dir[i]}`, fileStream)
      console.log(result)
    } else if (stat.isDirectory()) {
      // 递归子目录
      await put(`${proPath}/${dir[i]}`)
    }

  }
}

put()

编译之后，直接使用上传

1
node depoly-to-oss.js

本文作者： 过客
本文链接： https://zengwu.com.cn/p/dd7e8a7b.html