docs(quartz): 更新文档站点样式和内容

- 在外部链接样式中添加 GitHub 图标 - 更新 Footer 组件，增加 GitPage链接 - 修改 Mermaid 图表样式，移除背景色和边框 - 更新 Mermaid 插件配置，修改标签文本为 @mermaid
CatCodeMe · Nov 29, 2024 · c80f629 · c80f629
1 parent d8b18e2
commit c80f629
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/quartz.config.ts b/quartz.config.ts
@@ -72,7 +72,7 @@ const config: QuartzConfig = {
       }),
       Plugin.Mermaid({
         label: {
-          text: 'Mermaid',  // 自定义标签文本
+          text: '@Mermaid',  // 自定义标签文本
           enabled: true  // 是否显示标签
         }
       }),

diff --git a/quartz/components/Footer.tsx b/quartz/components/Footer.tsx
@@ -10,11 +10,13 @@ export default ((opts?: Options) => {
     const cc = "https://creativecommons.org/licenses/by-nc-sa/4.0/";
     const quartz = "https://github.com/jackyzha0/quartz";
     const ob = "https://obsidian.md";
+    const ccm = "https://github.com/CatCodeMe/catcodeme.github.io";
     const Footer: QuartzComponent = ({fileData}: QuartzComponentProps) => {
         const year = new Date().getFullYear();
         return (
             <footer>
-                <p style="text-align:center;opacity:0.7;">Published By <a href={quartz} class="external">Quartz {version}</a> ©{year} / <a href={ob} class="external">Obsidian</a> | <a href={cc} class="external">CC BY-NC-SA 4.0</a></p>
+                <p style="text-align:center;opacity:0.7;">Powered By <a href={quartz} class="external">Quartz {version}</a>
+                    ©{year} / <a href={ob} class="external">Obsidian</a> / <a href={ccm} class="external">GitPage</a> | <a href={cc} class="external">CC BY-NC-SA 4.0</a></p>
                 <div className="giscus"></div>
             </footer>
         )

diff --git a/quartz/styles/external-links.scss b/quartz/styles/external-links.scss
@@ -120,6 +120,10 @@ footer {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.78em' height='1em' viewBox='0 0 256 332'%3E%3Cdefs%3E%3CradialGradient id='logosObsidianIcon0' cx='72.819%25' cy='96.934%25' r='163.793%25' fx='72.819%25' fy='96.934%25' gradientTransform='rotate(-104 11141.322 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.4'/%3E%3Cstop offset='100%25' stop-opacity='0.1'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon1' cx='52.917%25' cy='90.632%25' r='190.361%25' fx='52.917%25' fy='90.632%25' gradientTransform='rotate(-82 10746.75 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.6'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.1'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon2' cx='31.174%25' cy='97.138%25' r='178.714%25' fx='31.174%25' fy='97.138%25' gradientTransform='rotate(-77 10724.606 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.8'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.4'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon3' cx='71.813%25' cy='99.994%25' r='92.086%25' fx='71.813%25' fy='99.994%25' gradientTransform='translate(0 22251839.658)skewY(-90)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.3'/%3E%3Cstop offset='100%25' stop-opacity='0.3'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon4' cx='117.013%25' cy='34.769%25' r='328.729%25' fx='117.013%25' fy='34.769%25' gradientTransform='rotate(102 -1004.443 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.2'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon5' cx='-9.431%25' cy='8.712%25' r='153.492%25' fx='-9.431%25' fy='8.712%25' gradientTransform='rotate(45 1674.397 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.2'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.4'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon6' cx='103.902%25' cy='-22.172%25' r='394.771%25' fx='103.902%25' fy='-22.172%25' gradientTransform='rotate(80 3757.522 0)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.1'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.3'/%3E%3C/radialGradient%3E%3CradialGradient id='logosObsidianIcon7' cx='99.348%25' cy='89.193%25' r='203.824%25' fx='99.348%25' fy='89.193%25' gradientTransform='translate(0 -38783246.548)skewY(-90)'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.2'/%3E%3Cstop offset='50%25' stop-color='%23fff' stop-opacity='0.2'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0.3'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill-opacity='0.3' d='M209.056 308.305c-2.043 14.93-16.738 26.638-31.432 22.552c-20.823-5.658-44.946-14.616-66.634-16.266l-33.317-2.515a22 22 0 0 1-14.144-6.522L6.167 246.778a21.92 21.92 0 0 1-4.244-24.124s35.36-77.478 36.775-81.485c1.257-4.008 6.13-39.211 8.958-58.07a22 22 0 0 1 7.072-12.965L122.462 9.47a22 22 0 0 1 31.903 2.672l57.048 71.978a23.18 23.18 0 0 1 4.872 14.38c0 13.594 1.179 41.646 8.8 59.72a236.8 236.8 0 0 0 27.974 45.732a11 11 0 0 1 .786 12.258c-4.95 8.408-14.851 24.595-28.76 45.26a111.7 111.7 0 0 0-16.108 46.834z'/%3E%3Cpath fill='%236c31e3' d='M209.606 305.79c-2.043 15.009-16.737 26.717-31.432 22.71c-20.744-5.737-44.79-14.695-66.555-16.345L78.38 309.64a21.92 21.92 0 0 1-14.144-6.6L6.874 244.106a21.92 21.92 0 0 1-4.243-24.36s35.438-77.792 36.774-81.878c1.336-4.007 6.13-39.289 8.958-58.305a22 22 0 0 1 7.072-13.044L123.17 5.621a22 22 0 0 1 31.902 2.75l56.97 72.292a23.34 23.34 0 0 1 4.871 14.38c0 13.673 1.18 41.804 8.723 59.955a238 238 0 0 0 27.974 45.969a11 11 0 0 1 .864 12.336c-5.03 8.487-14.851 24.674-28.838 45.497a112.6 112.6 0 0 0-16.03 46.99'/%3E%3Cpath fill='url(%23logosObsidianIcon0)' d='M70.365 307.44c26.638-53.983 25.93-92.722 14.537-120.225c-10.372-25.459-29.781-41.489-45.025-51.468a19.2 19.2 0 0 1-1.415 4.243L2.631 219.747a21.92 21.92 0 0 0 4.321 24.36l57.284 58.933a23.8 23.8 0 0 0 6.129 4.4'/%3E%3Cpath fill='url(%23logosObsidianIcon1)' d='M142.814 197.902a86 86 0 0 1 21.06 4.793c21.844 8.172 41.724 26.56 58.147 61.999c1.179-2.043 2.357-4.008 3.615-5.894a960 960 0 0 0 28.838-45.497a11 11 0 0 0-.786-12.336a238 238 0 0 1-28.052-45.969c-7.544-18.073-8.644-46.282-8.723-59.955c0-5.186-1.65-10.294-4.871-14.38l-56.97-72.292l-.943-1.178c4.165 13.75 3.93 24.752 1.336 34.731c-2.357 9.272-6.757 17.68-11.394 26.56c-1.571 2.986-3.143 6.05-4.636 9.193a110 110 0 0 0-12.415 45.576c-.786 19.016 3.064 42.825 15.716 74.65z'/%3E%3Cpath fill='url(%23logosObsidianIcon2)' d='M142.736 197.902c-12.652-31.824-16.502-55.633-15.716-74.65c.786-18.858 6.286-33.002 12.415-45.575l4.715-9.193c4.558-8.88 8.88-17.288 11.315-26.56a61.7 61.7 0 0 0-1.336-34.731c-8.136-8.94-21.96-9.642-30.96-1.572L55.436 66.519a22 22 0 0 0-7.072 13.044l-8.25 54.69c0 .55-.158 1.022-.236 1.572c15.244 9.901 34.574 25.931 45.025 51.312c2.043 5.029 3.772 10.294 5.029 16.03a157.2 157.2 0 0 1 52.805-5.343z'/%3E%3Cpath fill='url(%23logosObsidianIcon3)' d='M178.253 328.5c14.616 4.007 29.31-7.701 31.353-22.789a120.2 120.2 0 0 1 12.494-41.017c-16.502-35.44-36.382-53.827-58.148-61.999c-23.18-8.643-48.404-5.736-74.021.472c5.736 26.01 2.357 60.034-19.487 104.273c2.436 1.257 5.186 1.965 7.936 2.2l34.496 2.593c18.701 1.336 46.597 11.001 65.377 16.266'/%3E%3Cpath fill='url(%23logosObsidianIcon4)' d='M127.177 122.074c-.864 18.859 1.493 40.39 14.144 72.135l-3.929-.393c-11.394-33.081-13.908-50.054-13.044-69.149c.786-19.094 6.994-33.789 13.123-46.361c1.571-3.143 5.186-9.037 6.758-12.023c4.557-8.879 7.622-13.515 10.215-21.609c3.772-11.315 2.986-16.658 2.514-22.001c2.908 19.251-8.172 35.988-16.501 53.04a113.9 113.9 0 0 0-13.358 46.361z'/%3E%3Cpath fill='url(%23logosObsidianIcon5)' d='M88.674 188.551c1.571 3.458 2.907 6.287 3.85 10.608l-3.379.786c-1.336-5.029-2.357-8.643-4.322-12.965c-11.472-26.953-29.86-40.861-44.79-51.076c18.074 9.744 36.697 25.066 48.64 52.647'/%3E%3Cpath fill='url(%23logosObsidianIcon6)' d='M92.681 202.617c6.286 29.467-.786 66.948-21.609 103.409c17.445-36.146 25.931-70.8 18.859-102.938l2.75-.55z'/%3E%3Cpath fill='url(%23logosObsidianIcon7)' d='M164.659 199.867c34.181 12.808 47.383 40.86 57.205 64.355c-12.18-24.516-29.074-51.626-58.462-61.684c-22.317-7.7-41.175-6.758-73.471.55l-.707-3.143c34.26-7.858 52.176-8.8 75.435 0z'/%3E%3C/svg%3E");
     }
 
+    &[href*="github.com"]::after {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23214257' d='M14 2A10 10 0 0 0 2 14c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 14A10 10 0 0 0 14 2'/%3E%3C/svg%3E");
+    }
+
     &[href*="creativecommons.org"]::after {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m11.89 10.34l-1.34.7c-.14-.3-.31-.51-.52-.63s-.41-.18-.58-.18c-.9 0-1.34.59-1.34 1.77c0 .54.11.97.34 1.29c.22.32.55.48 1 .48c.58 0 .99-.27 1.23-.86l1.23.63c-.26.49-.62.87-1.09 1.15q-.69.42-1.53.42c-.9 0-1.62-.27-2.17-.82C6.58 13.74 6.3 13 6.3 12c0-.95.28-1.7.83-2.26q.84-.84 2.1-.84c1.24-.01 2.13.48 2.66 1.44m5.77 0l-1.32.7c-.14-.3-.34-.51-.53-.63q-.315-.18-.6-.18c-.89 0-1.34.59-1.34 1.77c0 .54.13.97.34 1.29c.23.32.56.48 1 .48c.59 0 1-.27 1.24-.86l1.25.63c-.28.49-.65.87-1.11 1.15c-.47.28-.97.42-1.52.42c-.9 0-1.63-.27-2.17-.82S12.09 13 12.09 12c0-.95.28-1.7.83-2.26S14.17 8.9 15 8.9c1.26-.01 2.14.48 2.66 1.44M12 3.5a8.5 8.5 0 0 1 8.5 8.5a8.5 8.5 0 0 1-8.5 8.5A8.5 8.5 0 0 1 3.5 12A8.5 8.5 0 0 1 12 3.5M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2'/%3E%3C/svg%3E")
     }

diff --git a/quartz/styles/mermaid.scss b/quartz/styles/mermaid.scss
@@ -151,11 +151,11 @@ div.svg-pan-zoom-container {
       .svg-modal-content {
             width: 90%;
             height: 90%;
-            background: white;
             position: relative;
             padding: 20px;
             border-radius: 8px;
             overflow: hidden;
+            background: var(--ec-frm-trmBg);
 
             cursor: move;
 
@@ -172,6 +172,8 @@ div.svg-pan-zoom-container {
                   width: 100%;
                   height: 100%;
                   margin: 0;
+
+                  border: none;
 
                   // 使用与正文相同的提示标签样式
                   &::after {