苍穹登录页支持两种定制方式，“配置式”和“代码式”，下面详细介绍两种方式的使用场景：

1.配置式

管理员账号登录，进入‘系统管理->登录页配置’里配置登录页每个区域的内容，如下图标注了各个部分对应的登录页区域 。

该方式可以配置登录页面的大部分内容，满足了大部分企业的定制需求，普通实施人员就能轻松配置。如果客户的需求更复杂，如左侧图片能不能换成视频播放或者是多图片轮播方式？甚至登录页能不能完全个性化？

答案是：能！如何实现？请看下面的方法。

2.代码式

实现原理：苍穹登录页会将部分dom元素的id和登录页的执行声明周期的方法暴露出来。客户化开发可以自行编写JS，在不同的生命周期中，实现需要的逻辑即可，故该方式需要有客户化开发能力。

通过下面的例子详细介绍该方式如何实现把登录页面上的图片换成了视频播放的方式。

思路：拿到了dom元素的id就可以更改页面的结构、样式以及行为。如下图, 为视频添加了一个点击事件，点击视频alert了一串文字。

1. 如图我们暴露了五个DOM元素的id，左侧图片imgPart、右侧整体formpart、右下脚链接 linksBox、右侧输入框区域content、右侧小图片区域logo，通过操作相应dom的id可以实现登录页元素的个性化替换。移动端支持扩展js但并未暴露dom元素的id。

2. 编写代码：

（1）移动端扩展js文件命名为login_index_m.js，PC端扩展js文件命名为login_index.js。

（2） 将代码写在loginBeforeLoad里会在登录代码执行之前执行，将代码写在loginAfterLoad里会在登录页面加载完成后执行。

（3） 通过window.__kd_custome_js__可获得当前扩展js的位置。

（4）请注意如果loginBeforeLoad不为空但是内部没有执行callback那么登录页面将不会渲染。

（5）部分dom是动态创建的，需要监听页面改变，然后重新为元素绑定事件。

（6）代码示例如下：

(function () {
  // 登录代码加载前调用
  window.loginBeforeLoad = function (callback) {
    //   ... do something
    // 如果需要继续执行登录的代码则执行callback 否则不执行 注意:如果不执行callback登录页面不渲染
    callback()
  }
  /* 登录代码加载后调用
   *左侧容器部分暴露了盒子的id(imgPart) 二开可以获取这个id并根据需求修改这个盒子的内容
   *将方法挂载到window.loginAfterLoad 在页面加载完后会调用这个方法
   */
  window.loginAfterLoad = function (key) {
    // 修改左侧图片部分
    if (key === 'imgPart') {
      var imgPart = function () {
        var banner = document.getElementById('imgPart')
        var currentUrl = window.__kd_custome_js__.slice(0, window.__kd_custome_js__.indexOf('/login_index.js')) + '/img/'
        var videoUrl = currentUrl + 'kingdee.mp4'
        var video = document.createElement('video')
        video.src = videoUrl
        video.autoplay = true
        video.loop = true
        video.muted = true
        video.style.cssText = 'height:100%'
        banner.appendChild(video)
      }
      return imgPart
    }