posts/github-graph-beds-vercel-cdn/

[giscus[bot]]

posts/github-graph-beds-vercel-cdn/

考虑到 Chinajsdelivr 的审查限制，本文改用 vercel 加速 GitHub 图床访问，并通过仓库结构调整和 GitHub Action，兼容国内外分流加速策略，自动化完成分支同步。

https://www.haoyep.com/posts/github-graph-beds-vercel-cdn/

[youcs233]

大佬，怎么让图片居中啊

[leegical]

你是说我博客里的图片居中吗？这是主题自带的

[wyy100ing]

大佬大佬，我是obsidian 中的图床，在进行到cloudflare时您文中的”img.haoyep.com“我不知道应该替换成什么域名，在picgo和ob里的配置里都没看到比较像的。我也买过一个域名但是这个图床是为了obsidian建的😵‍💫，obsidian的图床配置也是按您的文章来的，能正常使用。能否指点一下，多谢❤️

[leegical]

在本文中， 为了能让自定域名img.haoyep.com成功指向vercel图床项目，需要：

• 在vercel图床项目手动添加这个自定义域名
• 在Cloudflare中增加CNAME解析，使img.haoyep.com域名指向vercel图床项目

两个都设置完成之后，就可以使用img.haoyep.com域名访问使用了vercel加速的图片了。

接着参考之前文章中使用的分流规则，将cdn.haoyep.com的国内请求重定向到img.haoyep.com域名

[wyy100ing]

抱歉我刚才没说清楚，想说的不是如何设置，而是文中”使用图床仓库搭建的静态网站域名为 img.haoyep.com“在我的使用环境中”使用图床仓库的obsidian 笔记文件夹的域名”是什么呢，还是说我在obsidian中的图床项目也需要绑个自己的域名作为这里的自定域名img.haoyep.com

[leegical]

如果你是像我分流规则文章中一样，将cdn.haoyep.com国内重定向到img，国外重定向到jsdelivr，则使用cdn.haoyep.com；若没有使用分流规则，只配了本文的vercel加速Github图床，则使用img.haoyep.com

[Huazzi]

佬好～ 😄 感谢佬的优质内容，写的很详细，表达很清晰。
我还注意到了佬的Obididian挺好看的，蛮喜欢这种配色的，想问一下佬用的什么主题呢？还是自己自定义手搓的css？

[leegical]

我使用的obsidian主题是Obsidian Nord，字体如图所示：

css不确定自定义过，还是原本就有的，这里就都贴上来吧。

• hyphenation-and-justification.css

.cm-s-obsidian,
.markdown-preview-view {
  text-align: justify;
  hyphens: auto;
}

• notation-colour-blocks.css

/* Dark theme */
.theme-dark {
    --text-gray: rgba(255, 255, 255, 0.6);
    --text-brown: rgb(147, 114, 100);
    --text-orange: rgb(255, 163, 68);
    --text-yellow: rgb(255, 220, 73);
    --text-green: rgb(77, 171, 154);
    --text-blue: rgb(82, 156, 202);
    --text-purple: rgb(154, 109, 215);
    --text-pink: rgb(226, 85, 161);
    --text-red: rgb(255, 115, 105);
  
    --background-gray: rgb(69, 75, 78);
    --background-brown: rgb(67, 64, 64);
    --background-orange: rgb(89, 74, 58);
    --background-yellow: rgb(89, 86, 59);
    --background-green: rgb(53, 76, 75);
    --background-blue: rgb(54, 73, 84);
    --background-purple: rgb(68, 63, 87);
    --background-pink: rgb(83, 59, 76);
    --background-red: rgb(89, 65, 65);
  }
  
  /* Light theme */
  .theme-light {
    --text-gray: rgba(55, 53, 47, 0.6);
    --text-brown: rgb(100, 71, 58);
    --text-orange: rgb(217, 115, 13);
    --text-yellow: rgb(223, 171, 1);
    --text-green: rgb(15, 123, 108);
    --text-blue: rgb(11, 110, 153);
    --text-purple: rgb(105, 64, 165);
    --text-pink: rgb(173, 26, 114);
    --text-red: rgb(224, 62, 62);
  
    --background-gray: rgb(235, 236, 237);
    --background-brown: rgb(233, 229, 227);
    --background-orange: rgb(250, 235, 221);
    --background-yellow: rgb(251, 243, 219);
    --background-green: rgb(221, 237, 234);
    --background-blue: rgb(221, 235, 241);
    --background-purple: rgb(234, 228, 242);
    --background-pink: rgb(244, 223, 235);
    --background-red: rgb(251, 228, 228);
  }
  
  /* 6. Notion Colour Blocks */
  /* Original idea from: https://gist.github.com/mklepaczewski/54e451f09994b9d450de81c8baaf8aa4 */
  /* but also with simpler classes so you can use `<span class='colour'>` as well */
  
  .app-container .markdown-preview-view pre[class*="language-note-"] {
    padding: 3px 2px;
    border-radius: 0;
  }
  
  .app-container .markdown-preview-view pre[class*="language-note-"] code[class*="language-note-"] {
    color: var(--text-normal);
    white-space: pre-wrap;
    font-family: var(--default-font);
    font-size: 1rem;
    padding: 0;
    background:none;
  }
  
  .app-container .markdown-preview-view pre.language-note-notice,
  .app-container .markdown-preview-view pre.language-note-gray-background,
  .app-container .markdown-preview-view pre.language-note-gray-bg,
  .gray-background,
  .gray-bg {
    background-color: var(--background-gray);
  }
  
  .app-container .markdown-preview-view pre.language-note-brown-background,
  .app-container .markdown-preview-view pre.language-note-brown-bg,
  .brown-background,
  .brown-bg {
    background-color: var(--background-brown);
  }
  
  .app-container .markdown-preview-view pre.language-note-orange-background,
  .app-container .markdown-preview-view pre.language-note-orange-bg,
  .orange-background,
  .orange-bg {
    background-color: var(--background-orange);
  }
  
  .app-container .markdown-preview-view pre.language-note-warn,
  .app-container .markdown-preview-view pre.language-note-yellow-background,
  .app-container .markdown-preview-view pre.language-note-yellow-bg,
  .yellow-background,
  .yellow-bg {
    background-color: var(--background-yellow)
  }
  
  .app-container .markdown-preview-view pre.language-note-success,
  .app-container .markdown-preview-view pre.language-note-green-background,
  .app-container .markdown-preview-view pre.language-note-green-bg,
  .green-background,
  .green-bg {
    background-color: var(--background-green);
  }
  
  .app-container .markdown-preview-view pre.language-note-info,
  .app-container .markdown-preview-view pre.language-note-blue-background,
  .app-container .markdown-preview-view pre.language-note-blue-bg,
  .blue-background,
  .blue-bg {
    background-color: var(--background-blue);
  }
  
  .app-container .markdown-preview-view pre.language-note-purple-background,
  .app-container .markdown-preview-view pre.language-note-purple-bg,
  .purple-background,
  .purple-bg {
    background-color: var(--background-purple);
  }
  
  .app-container .markdown-preview-view pre.language-note-pink-background,
  .app-container .markdown-preview-view pre.language-note-pink-bg,
  .pink-background,
  .pink-bg {
    background-color: var(--background-pink);
  }
  
  .app-container .markdown-preview-view pre.language-note-danger,
  .app-container .markdown-preview-view pre.language-note-red-background,
  .app-container .markdown-preview-view pre.language-note-red-bg,
  .red-background,
  .red-bg {
    background-color: var(--background-red);
  }
  
  .app-container .markdown-preview-view pre.language-note-gray,
  .app-container .markdown-preview-view pre.language-note-brown,
  .app-container .markdown-preview-view pre.language-note-orange,
  .app-container .markdown-preview-view pre.language-note-yellow,
  .app-container .markdown-preview-view pre.language-note-green,
  .app-container .markdown-preview-view pre.language-note-blue,
  .app-container .markdown-preview-view pre.language-note-purple,
  .app-container .markdown-preview-view pre.language-note-pink,
  .app-container .markdown-preview-view pre.language-note-red {
    background-color: transparent;
  }
  
  .app-container .markdown-preview-view pre.language-note-gray code.language-note-gray,
  .gray {
    color: var(--text-gray);
  }
  
  .app-container .markdown-preview-view pre.language-note-brown code.language-note-brown,
  .brown {
    color: var(--text-brown);
  }
  
  .app-container .markdown-preview-view pre.language-note-orange code.language-note-orange,
  .orange {
    color: var(--text-orange);
  }
  
  .app-container .markdown-preview-view pre.language-note-yellow code.language-note-yellow,
  .yellow {
    color: var(--text-yellow)
  }
  
  .app-container .markdown-preview-view pre.language-note-green code.language-note-green,
  .green {
    color: var(--text-green);
  }
  
  .app-container .markdown-preview-view pre.language-note-blue code.language-note-blue,
  .blue {
    color: var(--text-blue);
  }
  
  .app-container .markdown-preview-view pre.language-note-purple code.language-note-purple,
  .purple {
    color: var(--text-purple);
  }
  
  .app-container .markdown-preview-view pre.language-note-pink code.language-note-pink,
  .pink {
    color: var(--text-pink);
  }
  
  .app-container .markdown-preview-view pre.language-note-red code.language-note-red,
  .red {
    color: var(--text-red);
  }

• outliner-for-the-outline-and-file-explorer.css

.outline .tree-item-children {
    margin-left: 20px;
    border-left: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    transition: all 0.5s ease-in-out;
  }
  .outline .tree-item-children:hover {
    margin:0 !important;
    border-left-color: var(--background-modifier-border);
  }
  .nav-folder-children .nav-folder-children {
    margin-left: 20px;
    padding-left: 0;
    border-left: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    transition: all 0.5s ease-in-out;
  }
  .nav-folder-children .nav-folder-children:hover {
    margin:0 !important;
    border-left-color: var(--background-modifier-border);
  }

[Huazzi]

好的，非常感谢佬的耐心回答。 在 2025-02-27 23:20:07，"leegical" ***@***.***> 写道： 我使用的obsidian主题是Obsidian Nord，字体如图所示： css不确定自定义过，还是原本就有的，这里就都贴上来吧。 hyphenation-and-justification.css .cm-s-obsidian, .markdown-preview-view { text-align: justify; hyphens: auto; } notation-colour-blocks.css /* Dark theme */ .theme-dark { --text-gray:rgba(255,255,255,0.6); --text-brown:rgb(147,114,100); --text-orange:rgb(255,163,68); --text-yellow:rgb(255,220,73); --text-green:rgb(77,171,154); --text-blue:rgb(82,156,202); --text-purple:rgb(154,109,215); --text-pink:rgb(226,85,161); --text-red:rgb(255,115,105);

…

--background-gray:rgb(69,75,78); --background-brown:rgb(67,64,64); --background-orange:rgb(89,74,58); --background-yellow:rgb(89,86,59); --background-green:rgb(53,76,75); --background-blue:rgb(54,73,84); --background-purple:rgb(68,63,87); --background-pink:rgb(83,59,76); --background-red:rgb(89,65,65); } /* Light theme */ .theme-light { --text-gray:rgba(55,53,47,0.6); --text-brown:rgb(100,71,58); --text-orange:rgb(217,115,13); --text-yellow:rgb(223,171,1); --text-green:rgb(15,123,108); --text-blue:rgb(11,110,153); --text-purple:rgb(105,64,165); --text-pink:rgb(173,26,114); --text-red:rgb(224,62,62);

--background-gray:rgb(235,236,237); --background-brown:rgb(233,229,227); --background-orange:rgb(250,235,221); --background-yellow:rgb(251,243,219); --background-green:rgb(221,237,234); --background-blue:rgb(221,235,241); --background-purple:rgb(234,228,242); --background-pink:rgb(244,223,235); --background-red:rgb(251,228,228); } /* 6. Notion Colour Blocks *//* Original idea from: https://gist.github.com/mklepaczewski/54e451f09994b9d450de81c8baaf8aa4 *//* but also with simpler classes so you can use `<span class='colour'>` as well */ .app-container .markdown-preview-viewpre[class*="language-note-"] { padding:3px2px; border-radius:0; } .app-container .markdown-preview-viewpre[class*="language-note-"] code[class*="language-note-"] { color:var(--text-normal); white-space: pre-wrap; font-family:var(--default-font); font-size:1rem; padding:0; background:none; } .app-container .markdown-preview-viewpre.language-note-notice, .app-container .markdown-preview-viewpre.language-note-gray-background, .app-container .markdown-preview-viewpre.language-note-gray-bg, .gray-background, .gray-bg { background-color:var(--background-gray); } .app-container .markdown-preview-viewpre.language-note-brown-background, .app-container .markdown-preview-viewpre.language-note-brown-bg, .brown-background, .brown-bg { background-color:var(--background-brown); } .app-container .markdown-preview-viewpre.language-note-orange-background, .app-container .markdown-preview-viewpre.language-note-orange-bg, .orange-background, .orange-bg { background-color:var(--background-orange); } .app-container .markdown-preview-viewpre.language-note-warn, .app-container .markdown-preview-viewpre.language-note-yellow-background, .app-container .markdown-preview-viewpre.language-note-yellow-bg, .yellow-background, .yellow-bg { background-color:var(--background-yellow) } .app-container .markdown-preview-viewpre.language-note-success, .app-container .markdown-preview-viewpre.language-note-green-background, .app-container .markdown-preview-viewpre.language-note-green-bg, .green-background, .green-bg { background-color:var(--background-green); } .app-container .markdown-preview-viewpre.language-note-info, .app-container .markdown-preview-viewpre.language-note-blue-background, .app-container .markdown-preview-viewpre.language-note-blue-bg, .blue-background, .blue-bg { background-color:var(--background-blue); } .app-container .markdown-preview-viewpre.language-note-purple-background, .app-container .markdown-preview-viewpre.language-note-purple-bg, .purple-background, .purple-bg { background-color:var(--background-purple); } .app-container .markdown-preview-viewpre.language-note-pink-background, .app-container .markdown-preview-viewpre.language-note-pink-bg, .pink-background, .pink-bg { background-color:var(--background-pink); } .app-container .markdown-preview-viewpre.language-note-danger, .app-container .markdown-preview-viewpre.language-note-red-background, .app-container .markdown-preview-viewpre.language-note-red-bg, .red-background, .red-bg { background-color:var(--background-red); } .app-container .markdown-preview-viewpre.language-note-gray, .app-container .markdown-preview-viewpre.language-note-brown, .app-container .markdown-preview-viewpre.language-note-orange, .app-container .markdown-preview-viewpre.language-note-yellow, .app-container .markdown-preview-viewpre.language-note-green, .app-container .markdown-preview-viewpre.language-note-blue, .app-container .markdown-preview-viewpre.language-note-purple, .app-container .markdown-preview-viewpre.language-note-pink, .app-container .markdown-preview-viewpre.language-note-red { background-color: transparent; } .app-container .markdown-preview-viewpre.language-note-graycode.language-note-gray, .gray { color:var(--text-gray); } .app-container .markdown-preview-viewpre.language-note-browncode.language-note-brown, .brown { color:var(--text-brown); } .app-container .markdown-preview-viewpre.language-note-orangecode.language-note-orange, .orange { color:var(--text-orange); } .app-container .markdown-preview-viewpre.language-note-yellowcode.language-note-yellow, .yellow { color:var(--text-yellow) } .app-container .markdown-preview-viewpre.language-note-greencode.language-note-green, .green { color:var(--text-green); } .app-container .markdown-preview-viewpre.language-note-bluecode.language-note-blue, .blue { color:var(--text-blue); } .app-container .markdown-preview-viewpre.language-note-purplecode.language-note-purple, .purple { color:var(--text-purple); } .app-container .markdown-preview-viewpre.language-note-pinkcode.language-note-pink, .pink { color:var(--text-pink); } .app-container .markdown-preview-viewpre.language-note-redcode.language-note-red, .red { color:var(--text-red); } outliner-for-the-outline-and-file-explorer.css .outline .tree-item-children { margin-left:20px; border-left:1px solid var(--background-modifier-border); border-radius:4px; transition: all 0.5s ease-in-out; } .outline .tree-item-children:hover { margin:0!important; border-left-color:var(--background-modifier-border); } .nav-folder-children .nav-folder-children { margin-left:20px; padding-left:0; border-left:1px solid var(--background-modifier-border); border-radius:4px; transition: all 0.5s ease-in-out; } .nav-folder-children .nav-folder-children:hover { margin:0!important; border-left-color:var(--background-modifier-border); } — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>