fix(theme): 设置 headers 后，外部资源添加 crossorigin

Author: FuckDoctors

docs/.vuepress/config.ts

@@ -28,6 +28,7 @@ export default defineUserConfig({
       {
         rel: 'stylesheet',
         href: '//at.alicdn.com/t/font_2410206_mfj6e1vbwo.css',
+        crossorigin: true,
       },
     ],
     [
@@ -36,20 +37,23 @@ export default defineUserConfig({
         rel: 'stylesheet',
         // zhaobc挑选的图标
         href: '//at.alicdn.com/t/c/font_4647860_t3wvzckeetc.css',
+        crossorigin: true,
       },
     ],
     [
       'script',
       {
         // 百度统计
         src: '//hm.baidu.com/hm.js?85e80625eddf91d81d9535565850722b',
+        crossorigin: true,
       },
     ],
     [
       'script',
       {
         // Clarity
         src: '/assets/js/clarity.js',
+        crossorigin: true,
       },
     ],
   ],

docs/.vuepress/styles/zhaobc.scss

@@ -109,7 +109,7 @@
 }
 
 /* 调整评论框宽度 */
-#vp-comment {
+.vp-comment {
   max-width: var(--content-width, 740px);
   margin: 0 auto;
   padding: 0 2.5rem;
@@ -123,10 +123,10 @@
   &.theme-container {
     .vp-breadcrumb,
     .vp-page-title,
-    .theme-hope-content,
+    [vp-content],
     .content-after-container,
     .vp-page-meta,
-    #vp-comment {
+    .vp-comment {
       max-width: 1080px;
     }
 

docs/posts/dev/python-playground.md

@@ -14,7 +14,7 @@ tag:
 head:
   - - meta
     - name: description
-      content: Python Playground, Python 演练场
+      content: Python Playground, Python 演练场, python repl, python, repl
 ---
 
 # Python Playground 演练场
@@ -330,6 +330,8 @@ api                                 // vercel 要求，必须放到根目录下
 
 开发中不熟悉 Pyodide, 也不熟悉 MonoEditor, Web Worker 所以遇到了不少问题，这里简单记录一下。
 
+### SharedArrayBuffer 使用问题
+
 - SharedArrayBuffer is not defined
   在处理 `stdin` 中，用到了 SharedArrayBuffer，但是使用上有些限制，需要配置 `headers`。
 
@@ -418,6 +420,25 @@ api                                 // vercel 要求，必须放到根目录下
 
   repl 和 前台的这两个输入流的类型必须一致。
 
+### 跨域设置问题
+
+为了使用 `SharedArrayBuffer` 主站设置了以下 headers:
+
+- `Cross-Origin-Opener-Policy` (_COOP_)
+- `Cross-Origin-Embedder-Policy` (_COEP_)
+- `Cross-Origin-Resource-Policy` (_CORP_)
+
+```txt
+Cross-Origin-Opener-Policy: same-origin
+Cross-Origin-Embedder-Policy: require-corp
+Cross-Origin-Resource-Policy: same-site
+```
+
+其中，设置 `Cross-Origin-Resource-Policy` 是为了嵌入的 `iframe` 里的 Python Playground，能正常使用。
+除此之外，还设置了 `iframe` 的属性 `allow="cross-origin-isolated"`。
+
+由于设置了上次 header 会导致主站的一些 `js`, `css` 等加载有问题，需要加上 `crossorigin` 属性。
+
 ## 类似功能
 
 其他网站已提供现成的功能，可以直接使用。本次开发中也借鉴了它们，再次表示感谢。