code-server 登录页面美化
时间:04月28日 人气:...

家里老人淘汰给了我一个 iPad,拿着这个平板,我不由得思考这玩意儿要是配个蓝牙键盘妥妥的就是个电脑啊。现在蓝牙键盘可以和平板壳合成一套,所以这玩意儿会比 surface pro 更加便携。那么唯一的问题就是,这玩意儿真的可以有生产力的工具吗?

因为我经常写代码和阅读代码,所以首选的就是要有 IDE 工具,结果在 appstore 里逛了一圈,竟然发现没几个好用的 IDE。但凡有点功能的 app 就是收费,但这个收费吧,他要是功能很流弊我也认,但是那个功能也一言难尽。你要想想电脑上的 vs code、source insight 之类的工具,那么商店里的这些个工具就没一个能打的,甚至就连个最基本的阅读代码,查找阅读参考变量就太难了。于是我想着就这样的现状,这玩意儿到底是怎么个的生产力工具,难道就只适合码字、画画图吗?又上网上转了一圈,发现不止就我一个有这疑问,倒是发现了一个比较靠谱的解决方法,那就是

code-server

code-server 部署之后,我发现自带的登录页面比较原始,于是就美化一下。

在 /usr/lib/code-server/src/browser/pages 目录下就是登录页面,login.html 是个很简单的表单提交页面,我在网上找了找登录模板,拼凑了个比较好看的页面:

需要修改 login.html 和 css.css 文件,可以下载我改好的 pages.zip

登录之后,就可以进行代码阅读、编译等开发之事了:

此外,这个网页版的 vs code 他也是可以搭配 AI 插件进行高科技辅助开发的。比如说我安装了 continue 插件,又部署了大模型,那么就可以在 continue 插件里进行一番设置,进而就可以使用自动补全、智能编辑、代码仓库(codebase)、AI 对话等功能了:

体验下来 code-server 在移动端使用非常不错,不但在 iPad,在 Android 平板上也是没问题的,甚至在手机、以至于电脑上都是可以的,可以更加灵活的使用。

continue 使用的大模型,在代码补全和插入、编辑中所用的尽量不要使用较大的模型,这种以追求速度才能有个好体验,所以建议安装其推荐的 Llama 3.1 8B 和 Qwen2.5-Coder 1.5B 就可以很好的使用了。对话聊天模型就可以选择个比较大的模型,比如 deepseek 啥的。如果想使用 codebase 的话,那还需要嵌入模型和重排模型,嵌入模型建议使用 nomic-embed-text 模型比较方便部署,重排模型建议使用 TEI 的 BAAI/bge-reranker-large 模型搭建方便(需科学上网)。

分享下我的 continue 插件的配置文件:

name: Local Assistant
version: 1.0.0
schema: v1
models:
  - name: Llama 3.1 8B
    provider: ollama
    model: llama3.1:8b
    apiBase: http://192.168.1.11:11434
    roles:
      - chat
      - edit
      - apply
  - name: Qwen2.5-Coder 1.5B
    provider: ollama
    model: qwen2.5-coder:1.5b-base
    apiBase: http://192.168.1.11:11434
    roles:
      - autocomplete
  - name: Nomic embed text
    provider: ollama
    model: nomic-embed-text:latest
    apiBase: http://192.168.1.11:11434
    roles:
      - embed
  - name: Huggingface-tei Reranker
    provider: huggingface-tei
    model: BAAI/bge-reranker-large
    apiBase: http://192.168.1.11:11444
    roles:
      - rerank
  - name: DeepSeek-R1
    provider: ollama
    model: DeepSeek-R1:latest
    apiBase: http://192.168.1.11:11434
    roles:
      - chat
      - edit
      - apply
context:
  - provider: code
  - provider: docs
  - provider: diff
  - provider: terminal
  - provider: problems
  - provider: folder
  - provider: codebase

大模型我是部署在另一台电脑上的(192.168.1.11),如果是本地搭建的话可以省略 apiBase 这一行不写。

热门评论