适用于sscms内容管理系统开发生命周期的页面热更新和热重载, 支持整站热更新、单模板热更新、指定栏目热更新.

安装

npm install sscms-hot-update-reload
or
yarn add sscms-hot-update-reload
or
pnpm add sscms-hot-update-reload

使用

服务端

在cms根目录下创建app.js脚本入口文件, 并且文件内写入初始化脚本和启动脚本, 运行app.js即可启动服务.

初始化应用

const App = require('sscms-hot-update-reload')

/**
 * 初始化服务
 * @param {string|number} site_id 站点id，管理后台查看
 * @param {string} client_domain 客户端域名 e.g. http://localhost:3000
 * @param {object} user_info 管理员账号信息
 * @param {string} user_info.account 管理员账号
 * @param {string} user_info.password 管理员密码
 * @param {string|number} [server_port] 服务启动监听端口号, 默认9876
 */
const app = new App(...)

示例

const app = new App(18, 'http://localhost:3000',
  {
    account: 'abc',
    password: 'password'
  }
)

模板热更新

模板热更新可以在模板及其关联文件变更时, 更新所有匹配了该模板的页面;

如果指定的是栏目模板, 那么所有匹配该模板的栏目页面都会被更新;

如果指定的是内容模板, 那么所有匹配该模板的内容页面都会被更新;

可以一次指定一个或多个模板, 当且仅当模板文件和当前模板相关联的文件(include参数传递)改变时, 才会触发模板的热更新, 其他文件不做响应.

/**
 * 仅更热更指定模板文件
 * @param {Object[]} files 需要热更新的文件及其对应的参数选项
 * @param {number} files[].temp_id 模板id
 * @param {string} files[].path 模板文件相对路径
 * @param {Array<string>} files[].include 这里包含的文件改变, 同样触发当前模板的更新
 */
app.watchTemp(options)

示例

// 指定单个模板
app.watchTemp([{
  temp_id: 1952,
  path:'./test/T_系统首页模板.html',
  include: ['./test/include/**', './test/js/**']
}])


// 指定多个模板
const IndexTemp = {
  temp_id: 1952,
  path:'./test/Template/new/index.temp.html',
  include: [
    './test/include/new/**', 
    './test/js/new/components/**', 
    './test/css/new/*.css'
  ]
}

const SearchTemp = {
  temp_id: 1953,
  path: './test/Template/new/search.temp.html',
  include: ['./test/include/new/**']
}

app.watchTemp([
  IndexTemp,
  SearchTemp
])

指定栏目热更新

当一个模板匹配了太多的栏目或内容时, 触发更新将更新所有匹配的页面, 这会造成更新响应缓慢(等待所有页面完成更新后响应并重载), 此时更适合使用指定栏目热更新方法;

可以一次指定多个栏目页面, 当且仅当与栏目页相关联的文件(watch参数传递)改变时, 才会触发指定栏目页面的热更新, 其他文件不做响应.

/**
   * 仅热更新指定栏目页
   * @param {object} params 指定栏目选项
   * @param {number[]} params.ids 需要更新的栏目页id数组
   * @param {string[]} params.watch 需要监听的文件的路径数组
   * @param {boolean} [params.descendent] 是否同时生成下级栏目页, 默认false
   */
app.watchChannels(params)

示例

app.watchChannels({
  ids: [4633, 4634],
  watch: [
    './test/include/new/**', 
    './test/js/new/components/**',
    './test/css/new/*.css'
  ]
})

整站热更新

整站热更新只要站点下的文件有变化,就会重新生成一次完整的站点静态资源文件, 当内容比较多的时候, 此方法非常耗时

 /**
 * 热更新指定网站
 * @param {object} options 选项
 * @param {string} options.site_dir 站点目录的绝对路径或相对脚本的相对路径
 * @param {string} options.site_name 站点名称
 * @param {array} options.ignored 需要忽略的目录或文件，相对站点的目录或文件，主要针对cms自动生成的静态html，避免循环调用
 */
app.watch(options)

示例

app.watch({
  site_dir: './test',
  site_name: '测试站点',
  ignored: ['channels', 'contents']
})

目录结构

服务端完整的使用示例

const App = require('sscms-hot-update-reload')
const app = new App(188, 'http://localhost:3000', {
  account: 'abc',
  password: 'password'
})

// 指定模板热更新
app.watchTemp([{
  temp_id: 1952,
  path:'./test/T_系统首页模板.html',
  include: ['./test/include/**', './test/js/**']
}])

// 指定栏目页
app.watchChannels({
  ids: [4633, 4634],
  watch: [
    './test/include/new/**', 
    './test/js/new/components/**',
    './test/css/new/*.css'
  ]
})

// 整站
app.watch({
  site_dir: './test',
  site_name: '测试站点',
  ignored: ['channels', 'contents']
})

客户端

最后你需要在客户端文件添加对应的socket脚本, 可直接写入include目录下的文件, 然后在模板中直接引入

<script src="//cdn.staticfile.org/socket.io/4.2.0/socket.io.min.js"></script>
<script>
  // 将下面 http://localhost:9876 替换成你服务端的 host 和 服务端脚本内定义的 server_port(默认9876) 即可
  const socket = io("http://localhost:9876");
  socket.on('connect', () => {
    console.log('socket已连接');
  })
  socket.on('reload', () => {
    location.reload()
  })
</script>