likes
comments
collection
share

如何让你喜欢的原神角色陪你写代码

作者站长头像
站长
· 阅读数 32

如何让你喜欢的原神角色陪你写代码

每天上班，脑子里面就想着一件事，原神，啊不对，VsCode！启动！(doge 狗头保命)，那么如何将这两件事情结合起来呢？特别是原神里面有那么多我喜欢的角色。

最终效果预览

  • 右下角固定一只小可爱

    • 如何让你喜欢的原神角色陪你写代码

  • 全屏一只小可爱

    • 如何让你喜欢的原神角色陪你写代码

省流直接抄作业版

  1. vscode 下载 background 插件

    • 如何让你喜欢的原神角色陪你写代码
    • 第一次使用这个插件会提示 vscode 已损坏让你 restart vscode，不要慌，因为插件底层是改 vscode 的样式
    • 需要管理员权限，如果你安装到了 C 盘

  2. copy 下面的配置到你的 settings.json 文件

    2.1 右下角固定图片配置

{
  "background.customImages": [
    "https://upload-bbs.miyoushe.com/upload/2023/02/24/196231062/8540249f2c0dd72f34c8236925ef45bc_3880538836005347690.png",
    "https://user-images.githubusercontent.com/41776735/163673800-0e575aa3-afab-405b-a833-212474a51adc.png"
  ],
  "background.enabled": true,
  "background.style": {
    "content": "''",
    "width": "30%",
    "height": "30%",
    "opacity": 0.3,
    "position": "absolute",
    "bottom": "0",
    "right": "7%",
    "z-index": "99999",
    "background-repeat": "no-repeat",
    "background-size": "contain",
    "pointer-events": "none"
  },
  "background.useDefault": false,
  "background.useFront": true
}

2.2 全屏图片配置

{
  "background.customImages": ["https://upload-bbs.miyoushe.com/upload/2024/01/15/196231062/1145c3a2f56b2f789a9be086b546305d_3972870625465222006.png"],
  "background.enabled": true,
  "background.style": {
    "content": "''",
    "pointer-events": "none",
    "position": "absolute",
    "z-index": "99999",
    "height": "100%",
    "width": "100%",
    "background-repeat": "no-repeat",
    "background-size": "cover",
    "background-position": "content",
    "opacity": 0.3
  },
  "background.useDefault": false,
  "background.useFront": true
}

详细说明版

第一步，你还是需要下载 background 这个插件。

第二步，配置解析

我们看官方文档里面，有两个配置是需要说明一下的

  • background.customImages:

    • 是一个数组，默认是用第一张图片做背景图，在分屏的时候第二屏就用的是数组的第二个元素，以此类推
    • 支持 https 协议和本地的 file 协议
      • 因为我有公司机器和自己电脑，所以本地协议不太适用我，但是我之前一直用的是本地协议，并且下面会教大家如何白嫖图床

  • background.style:

    • 作为一个前端，看到上面的内容是不是十分的熟悉，其实这个插件的底层原理就是去改 vscode 的 css，所以你可以想想成一个需求，在一个界面上显示一张图片，css 可以怎么写，背景图就可以是啥样的
    • 如果你看不懂 css 代码，你可以直接复制我上面提供的两种配置，一个全屏的，一个是在右下角固定一小只的

  • 如果你觉得背景图太亮了，有点看不清代码，你可以修改 background.style.opacity这个属性，降低图片的透明度。

  • 发现最新版本支持 background.interval 来轮播背景图了

高清社死图片

OK，其实到这就没啥了，但是到这里和原神好像并没有什么太大的关系，那现在我就教你怎么白嫖米游社的图床，并且获取高清的原神图片

  • 第一步，你需要有一个米游社的账号，当然，玩原神的不能没有吧

  • 第二步，随便找个帖子进行评论回复，如果你怕麻烦别人，可以自己发一贴

    • 如何让你喜欢的原神角色陪你写代码

  • 第三步：新标签页打开

    • 如何让你喜欢的原神角色陪你写代码

  • 到这里，你就能白嫖米游社的图床了，如果你是评论的自己的图片，新标签页打开之后，删除 url 中 ? 后面所有的内容，就可以得到原图 https 的链接了

  • 但是又遇到一个问题，我就是很喜欢米游社的图片，但是图片的分辨率太低了怎么办？

    • 提供两个用 ai 来放大图片的网站
    • waifu2x.udp.jp/
    • bigjpg.com/
    • 把图片放大之后，在用上面白嫖图床的方法就可以了

最后

水一期，求三连 + 可以在评论区分享你的背景图嘛

转载自:https://juejin.cn/post/7324143986759303194
评论
请登录