尝试增加全页布局，修复剪贴板BUG

rebron1900 · Sep 16, 2024 · f58462d · f58462d
1 parent 45d5b09
commit f58462d
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 21 deletions.
diff --git a/src/components/MenuNav.astro b/src/components/MenuNav.astro
@@ -7,8 +7,7 @@ const { title } = Astro.props;
 <ul class="book-menu-nav" transition:name="fdsafds">
     <li class="book-section-flat">
         <span>路线牌</span>
-        <span class=""></span>
-        <ul>
+        <ul class="book-collspan">
             {
                 title && (
                     <li transition:name="page-current">

diff --git a/src/components/MenuOther.astro b/src/components/MenuOther.astro
@@ -5,7 +5,7 @@ import config from '../data/config';
 <ul class="book-copy">
     <li class="book-section-flat">
         <span>其他</span>
-        <ul>
+        <ul class="book-collspan">
             {
                 config.footer.map((item) => (
                     <li>

diff --git a/src/components/MenuTaxonomy.astro b/src/components/MenuTaxonomy.astro
@@ -6,7 +6,7 @@ import { normalizeSlug } from '../utils/help';
 <ul>
     <li class="book-section-flat">
         <span>专栏</span>
-        <ul>
+        <ul class="book-collspan">
             {
                 config.taxonomy.map((item) => (
                     <li>

diff --git a/src/components/MenuTheme.jsx b/src/components/MenuTheme.jsx
@@ -27,17 +27,21 @@ const MenuTheme = () => {
     const menuTheme = () => {
         return (
             <ul class='book-theme'>
-                <li>配色</li>
-                <li>
-                    <input type='checkbox' id='theme' class='toggle' />
-                    <label for='theme' class='flex justify-between'>
-                        <span role='button' class='flex align-center'>
-                            <span innerHTML={getSvg('theme')}></span>
-                            <span>{theme()}</span>
-                        </span>
-                    </label>
-                    <ul>
-                        <For each={config.themes}>{(theme, index) => <li onClick={[changeTheme, theme]}>{theme.desc}</li>}</For>
+                <li class='book-section-flat'>
+                    <span>配色</span>
+                    <ul class='book-collspan'>
+                        <li>
+                            <input type='checkbox' id='theme' class='toggle' />
+                            <label for='theme' class='flex justify-between'>
+                                <span role='button' class='flex align-center'>
+                                    <span innerHTML={getSvg('theme')}></span>
+                                    <span>{theme()}</span>
+                                </span>
+                            </label>
+                            <ul>
+                                <For each={config.themes}>{(theme, index) => <li onClick={[changeTheme, theme]}>{theme.desc}</li>}</For>
+                            </ul>
+                        </li>
                     </ul>
                 </li>
             </ul>

diff --git a/src/layouts/FullLayout.astro b/src/layouts/FullLayout.astro
@@ -0,0 +1,54 @@
+---
+// import lib
+import type { Tag } from '@ts-ghost/content-api';
+import { settings } from '../data/ghost-store';
+import '../styles/book.scss';
+// ...
+const { post } = Astro.props;
+
+const isFullWidth = post && post.tags.some((tag: Tag) => tag.slug === 'hash-page-fullwidth');
+---
+
+<html lang={settings?.lang ?? 'en'} dir="ltr">
+    <head>
+        <slot name="head" />
+        <Fragment set:html={settings?.codeinjection_head} />
+
+        {/* 这里可以引入其他头部内容 */}
+    </head>
+
+    <body dir="ltr">
+        <input aria-label="menu-control" type="checkbox" class="hidden toggle" id="menu-control" />
+        <input aria-label="toc-control" type="checkbox" class="hidden toggle" id="toc-control" />
+        <main class="full-container flex">
+            <aside class="book-menu">
+                <div class="book-menu-content" transition:animate="none">
+                    <slot name="menu" />
+                </div>
+            </aside>
+            <div class="book-page">
+                <header class="book-header" transition:name="astro-header">
+                    <slot name="header" />
+                    <slot name="h-toc" />
+                </header>
+
+                <slot name="content" transition:name="astro-content" />
+
+                <footer class="book-footer">
+                    <slot name="footer" transition:name="astro-fo0ter" />
+                </footer>
+
+                <slot name="pagination" transition:name="astro-pagination" />
+                <slot name="comments" transition:name="astro-comments" />
+                <label for="menu-control" class="hidden book-menu-overlay"></label>
+            </div>
+
+            <aside class={`book-toc ${isFullWidth ? 'full-width' : ''}`}>
+                <div class="book-toc-content">
+                    <slot name="toc" transition:name="astro-toc" />
+                </div>
+            </aside>
+        </main>
+        <Fragment set:html={settings?.codeinjection_foot} />
+    </body>
+</html>
diff --git a/src/pages/douban.astro b/src/pages/douban.astro
@@ -2,7 +2,7 @@
 import { pages, settings, neodb } from '../data/ghost-store.js';
 import { doubanGroupByDate, getSvg } from '../utils/help.js';
 
-import BaseLayout from '../layouts/BaseLayout.astro';
+import FullLayout from '../layouts/FullLayout.astro';
 import Head from '../components/Head.astro';
 import Comments from '../components/Comments.astro';
 import Relitu from '../components/Relitu.jsx';
@@ -14,7 +14,7 @@ const pageDouban = pages.find((post) => post.slug == 'douban');
 const groupdata = doubanGroupByDate(neodb.data);
 ---
 
-<BaseLayout post={pageDouban}>
+<FullLayout post={pageDouban}>
     <Head slot="head" post={pageDouban} site={settings} title={pageDouban?.title + ' | ' + settings?.title + ' - ' + settings?.description} />
 
     <Header slot="header" title={pageDouban.title} />
@@ -163,4 +163,4 @@ const groupdata = doubanGroupByDate(neodb.data);
     <Fragment slot="toc">
         <Top />
     </Fragment>
-</BaseLayout>
+</FullLayout>
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
@@ -370,12 +370,13 @@ body[dir='rtl'] .book-menu {
 .book-theme {
     margin-block-end: $padding-16 * 2;
 
-    & > li:first-child {
+    & > span:first-child {
         font-weight: bolder;
     }
 
-    ul {
+    ul ul {
         padding-inline-start: 1.5em;
+        cursor: pointer;
     }
 }
 
@@ -466,3 +467,39 @@ body[dir='rtl'] .book-menu {
         padding: $padding-16 * 2 $padding-16;
     }
 }
+
+.full-container {
+    display: flex;
+    flex-direction: column;
+
+    .book-menu {
+        flex: 0 0 5rem;
+        z-index: 2;
+
+        .book-menu-content {
+            width: 100%;
+            height: 17rem;
+            overflow-y: visible;
+            position: relative;
+            nav {
+                display: flex;
+
+                .book-collspan {
+                    width: 10rem;
+                    float: left;
+                    display: none;
+                }
+
+                .book-section-flat {
+                    width: 5rem;
+                    text-align: right;
+                    &:hover {
+                        .book-collspan {
+                            display: block;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/styles/_markdown.scss b/src/styles/_markdown.scss
@@ -108,6 +108,7 @@
         border-radius: $border-radius;
         font-size: 0.875em;
         background-color: var(--gray-200);
+        display: block;
     }
 
     pre {

diff --git a/src/utils/code.js b/src/utils/code.js
@@ -48,7 +48,7 @@ function createFoldButton(highlightDiv) {
 }
 
 async function copyCodeToClipboard(button, highlightDiv) {
-    const codeToCopy = highlightDiv.querySelector(':last-child').innerText;
+    const codeToCopy = highlightDiv.querySelector('code').innerText;
     try {
         result = await navigator.permissions.query({ name: 'clipboard-write' });
         if (result.state == 'granted' || result.state == 'prompt') {