【转载】code-server登录页自定义

da11 · 发表于 2023-5-15 13:44:19

code-server登录页自定义

转载地址：https://blog.csdn.net/sinat_34104446/article/details/130544827

自定义登录页面预览：

1. 默认的登录页面如下，整体界面比较素，可以修改主页然后自定义一个酷炫的登录，如文章开图所示

2. 在code-server/src/browser/pages下就是登录页面的代码信息，就是普通的html的css（login.css如果没有则需要新建此文件并在login.html引用）

3. 修改login.html，login.css文件，根据自己的需要修改
login.html代码示例（核心就是form表单提交，然后增加了回车登录，多余的代码全部删除了，图片等信息根据自己的需要替换）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>码坐标-IDE权限认证</title>
  <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" />
  <link rel="alternate icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" />
  <link rel="apple-touch-icon" sizes="192x192" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-192.png" />
  <link rel="apple-touch-icon" sizes="512x512" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-512.png" />
  <link rel="stylesheet" href="{{CS_STATIC_BASE}}/src/browser/pages/global.css" />
  <link rel="stylesheet" href="{{CS_STATIC_BASE}}/src/browser/pages/login.css" />
  <meta id="coder-options" data-settings="{{OPTIONS}}" />
</head>

<body>
  <div class="center-container login-container">
<div>
   <form id="loginForm" method="post">
      <input id="base" type="hidden" name="base" value="{{BASE}}" />
      <input id="href" type="hidden" name="href" value="" />
      <input required autofocus class="password" id="password" type="password" placeholder="请输入授权口令" name="password"
      autocomplete="off" />
   </form>
</div>
  </div>
  <script>

const el = document.getElementById("href")
if (el) {
   el.value = location.href
}

function validPass() {
   var event = arguments.callee.caller.arguments[0] || window.event;
   if (event.keyCode == 13) {
      let loginForm = document.getElementById("loginForm")
      let password = document.getElementById("password").value
      if (!password) {
      return
      }
      loginForm.submit()
   }
}
  </script>
</body>

4. login.css代码示例，不需要的已经全部删除了

body {
  background-image: url(../media/hacker.jpg);
  background-size: cover;
}

.password {
  background-color: rgb(244, 247, 252);
  border: 1px solid #ddd;
  box-sizing: border-box;
  color: black;
  padding: 10px;
  width: 600px;
  height: 50px;
  font-size: 1rem;
  position: relative;
  top: -3rem;
}

input:focus {
  outline: none;
}

5. 重新登录刷新页面（如果刷新页面还是无效，则需要强制刷新或者重启code-server），恭喜你，拥有了一个自己IDE，可以在此IDE里面搞一个自己的代码仓库，随时随地coding

[html] 【转载】code-server登录页自定义

本帖子中包含更多资源