更新日志

_sidebar.md

@@ -4,6 +4,7 @@
     margin: 0;
     & img{
       image-rendering: pixelated;
+      width: 64px;
       height: 32px;
     }
   }
@@ -37,6 +38,7 @@
 - 进阶：视觉特效
   - [<img src="/indexicon/camera.png"/><p>镜头移动</p>](/pages/camera.md)
   - [<img src="/indexicon/roomfx.png"/><p>房间视效</p>](/pages/roomfx.md)
+  - [<img src="/indexicon/vfxpro.png"/><p>视觉干扰</p>](/pages/vfxpro.md)
   - [<img src="/indexicon/camerafx.png"/><p>摄像机视效</p>](/pages/camerafx.md)
   - [<img src="/indexicon/hallofmirror.png"/><p>镜厅</p>](/pages/hallofmirror.md)
   - [<img src="/indexicon/windowmove.png"/><p>窗口移动</p>](/pages/windowmove.md)

pages/changelog.md

@@ -9,6 +9,7 @@
 - 更改了群号
 - 添加了网页简介
 - 添加了制作人员名单
+- 更改了页面右侧功能区的样式
 - 大量修改内容布局，这包括
     - 场景资源
     - 房间与镜头
@@ -21,6 +22,7 @@
     - 视觉干扰  
 - 部分页面处于未完成状态，如
     - 基础 vfx 效果
+- 旧版教程已归档至[这里](https://2025.rd.rdlevel.cn)
 
 #### 2025-11-02
 - [无障碍设计](../pages/accessibledesign.md)添加了屏幕朗读事件相关说明

script/switchLightDarkMode.js

@@ -19,16 +19,17 @@ const themeModes = ['light', 'dark', 'auto',]
 var switchSpan = document.createElement('span')
 
 switchSpan.id = 'switchLightDarkModeDivBeforeArticle'
+switchSpan.classList.add('controlSpan')
 switchSpan.style.position = 'fixed'
 switchSpan.style.right = switchLightDarkModeOptions.right.toString() + 'px'
 switchSpan.style.top = switchLightDarkModeOptions.top.toString() + 'px'
 
-const lightModeIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M12 18a6 6 0 100-12 6 6 0 000 12zM22 12h1M12 2V1M12 23v-1M20 20l-1-1M20 4l-1 1M4 20l1-1M4 4l1 1M1 12h1" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-const darkModeIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M3 11.507a9.493 9.493 0 0018 4.219c-8.507 0-12.726-4.22-12.726-12.726A9.494 9.494 0 003 11.507z" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-const autoModeIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M3 15c2.483 0 4.345-3 4.345-3s1.862 3 4.345 3c2.482 0 4.965-3 4.965-3s2.483 3 4.345 3M3 20c2.483 0 4.345-3 4.345-3s1.862 3 4.345 3c2.482 0 4.965-3 4.965-3s2.483 3 4.345 3M19 10a7 7 0 10-14 0" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-const zoomInIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M8 11h3m3 0h-3m0 0V8m0 3v3M17 17l4 4M3 11a8 8 0 1016 0 8 8 0 00-16 0z" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-const zoomOutIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M17 17l4 4M3 11a8 8 0 1016 0 8 8 0 00-16 0zM8 11h6" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
-const zoomDefaultIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M12 19a7 7 0 100-14 7 7 0 000 14zM12 19v2M5 12H3M12 5V3M19 12h2" stroke="' + switchLightDarkModeOptions.svgColor + '" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
+const lightModeIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M12 18a6 6 0 100-12 6 6 0 000 12zM22 12h1M12 2V1M12 23v-1M20 20l-1-1M20 4l-1 1M4 20l1-1M4 4l1 1M1 12h1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
+const darkModeIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M3 11.507a9.493 9.493 0 0018 4.219c-8.507 0-12.726-4.22-12.726-12.726A9.494 9.494 0 003 11.507z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
+const autoModeIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M3 15c2.483 0 4.345-3 4.345-3s1.862 3 4.345 3c2.482 0 4.965-3 4.965-3s2.483 3 4.345 3M3 20c2.483 0 4.345-3 4.345-3s1.862 3 4.345 3c2.482 0 4.965-3 4.965-3s2.483 3 4.345 3M19 10a7 7 0 10-14 0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
+const zoomInIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M8 11h3m3 0h-3m0 0V8m0 3v3M17 17l4 4M3 11a8 8 0 1016 0 8 8 0 00-16 0z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
+const zoomOutIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M17 17l4 4M3 11a8 8 0 1016 0 8 8 0 00-16 0zM8 11h6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
+const zoomDefaultIconXml = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="' + switchLightDarkModeOptions.svgColor + '"><path d="M12 19a7 7 0 100-14 7 7 0 000 14zM12 19v2M5 12H3M12 5V3M19 12h2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
 const ottoIconXml = `
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="26px" height="30px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24" color="` + switchLightDarkModeOptions.svgColor + `" stroke="` + switchLightDarkModeOptions.svgColor + `" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
@@ -125,6 +126,7 @@ function plugin(hook, vm) {
 
         var zoomInSpan = document.createElement('span')
         zoomInSpan.id = 'zoomInSpan'
+        zoomInSpan.classList.add('controlSpan')
         zoomInSpan.style.position = 'fixed'
         zoomInSpan.style.right = switchLightDarkModeOptions.right.toString() + 'px'
         zoomInSpan.style.top = (switchLightDarkModeOptions.top + 35).toString() + 'px'
@@ -132,6 +134,7 @@ function plugin(hook, vm) {
 
         var zoomOutSpan = document.createElement('span')
         zoomOutSpan.id = 'zoomOutSpan'
+        zoomOutSpan.classList.add('controlSpan')
         zoomOutSpan.style.position = 'fixed'
         zoomOutSpan.style.right = switchLightDarkModeOptions.right.toString() + 'px'
         zoomOutSpan.style.top = (switchLightDarkModeOptions.top + 70).toString() + 'px'
@@ -139,6 +142,7 @@ function plugin(hook, vm) {
 
         var zoomDefaultSpan = document.createElement('span')
         zoomDefaultSpan.id = 'zoomDefaultSpan'
+        zoomDefaultSpan.classList.add('controlSpan')
         zoomDefaultSpan.style.position = 'fixed'
         zoomDefaultSpan.style.right = switchLightDarkModeOptions.right.toString() + 'px'
         zoomDefaultSpan.style.top = (switchLightDarkModeOptions.top + 105).toString() + 'px'
@@ -146,6 +150,7 @@ function plugin(hook, vm) {
 
         var ottoSpan = document.createElement('span')
         ottoSpan.id = 'ottoSpan'
+        ottoSpan.classList.add('controlSpan')
         ottoSpan.style.position = 'fixed'
         ottoSpan.style.right = switchLightDarkModeOptions.right.toString() + 'px'
         ottoSpan.style.top = (switchLightDarkModeOptions.top + 140).toString() + 'px'

style/base.css

@@ -1291,4 +1291,19 @@ del {
   margin: 0;
   border-radius: 5px;
   font: 300 12px 'd9c', 'd9';
+}
+
+.controlSpan {
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'd9', sans-serif;
+  font-size: 16px;
+  height: 30px;
+  width: 30px;
+  transition: background-color 0.3s, transform 0.2s;
+  z-index: 20;
 }

style/color.css

@@ -223,4 +223,11 @@ div.medium-zoom-overlay{
   &>p{
     background-color: var(--background-color);
   }
+}
+
+.controlSpan{
+  background-color: var(--span-color);
+  &>svg{
+    stroke: var(--span-fill-color);
+  }
 }

style/dark.css

@@ -20,6 +20,9 @@ body.dark {
   -webkit-tap-highlight-color: rgb(0, 0, 0);
 
   --special-theme-position-backgound-color: #177500;
+
+  --span-color: #2020203a;
+  --span-fill-color: #3c7e7e;
 }
 
 body.dark .sidebar li>a:has(>img) {

style/light.css

@@ -20,6 +20,9 @@ body.light {
   -webkit-tap-highlight-color: rgb(255, 255, 255);
   
   --special-theme-position-backgound-color: #05a000;
+
+  --span-color: #e0e0e03a;
+  --span-fill-color: #008585;
 }
 
 body.light .sidebar li>a:has(>img) {