biss/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文章-代码-表格-样式

Browse Source
This commit is contained in:
biss
2026-06-18 17:48:17 +08:00 Unverified
parent ce4a201508
commit aa87051c15
6 changed files with 574 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/BaseLayout.astro
+2
View File
@@ -20,6 +20,7 @@ const currentYear = new Date().getFullYear();
<meta name="description" content={description} />
<link rel="icon" href="/images/Bi.ico" />
<link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/instantsearch.css/themes/reset-min.css" />
<link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
<title>{pageTitle}</title>
</head>
<body>
@@ -102,6 +103,7 @@ const currentYear = new Date().getFullYear();
</footer>
<script is:inline src="https://cdn.jsdmirror.com/npm/instantsearch.js@4.56.0"></script>
<script is:inline src="https://cdn.jsdmirror.com/npm/typesense-instantsearch-adapter@2.7.0/dist/typesense-instantsearch-adapter.min.js"></script>
<script is:inline src="https://cdn.jsdmirror.com/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script is:inline src="/js/search/typesense-search.js"></script>
<script is:inline>
(() => {
src/pages/posts/[slug].astro
+120
View File
@@ -216,3 +216,123 @@ const twikooEnvId = 'https://comment.biss.click';
window.setTimeout(typeSummary, 280);
})();
</script>
<script is:inline>
(() => {
const prose = document.querySelector('.post-article .prose');
if (!prose) return;
const collapsedLineCount = 8;
const copyLabels = {
idle: '复制',
done: '已复制',
error: '复制失败',
};
prose.querySelectorAll('img').forEach((image) => {
if (image.closest('a, .article-header-cover')) return;
const src = image.currentSrc || image.getAttribute('src');
if (!src) return;
const link = document.createElement('a');
link.className = 'fancybox';
link.href = src;
link.dataset.fancybox = 'article-gallery';
link.dataset.caption = image.getAttribute('alt') || '';
image.parentNode?.insertBefore(link, image);
link.appendChild(image);
});
prose.querySelectorAll('table').forEach((table) => {
if (table.closest('.table-scroll')) return;
const wrapper = document.createElement('div');
wrapper.className = 'table-scroll';
table.parentNode?.insertBefore(wrapper, table);
wrapper.appendChild(table);
});
if (window.Fancybox) {
window.Fancybox.bind('[data-fancybox="article-gallery"]', {
compact: false,
dragToClose: true,
Images: {
zoom: true,
},
});
}
async function copyText(text) {
if (navigator.clipboard?.writeText) {
await navigator.clipboard.writeText(text);
return;
}
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.setAttribute('readonly', '');
textarea.style.position = 'fixed';
textarea.style.top = '-9999px';
textarea.style.opacity = '0';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
textarea.remove();
}
prose.querySelectorAll('pre').forEach((pre) => {
if (pre.closest('.code-block')) return;
const code = pre.querySelector('code');
if (!code) return;
const wrapper = document.createElement('div');
wrapper.className = 'code-block';
pre.parentNode?.insertBefore(wrapper, pre);
wrapper.appendChild(pre);
const toolbar = document.createElement('div');
toolbar.className = 'code-block-toolbar';
const copyButton = document.createElement('button');
copyButton.className = 'code-block-copy';
copyButton.type = 'button';
copyButton.textContent = copyLabels.idle;
copyButton.setAttribute('aria-label', '复制代码');
const toggleButton = document.createElement('button');
toggleButton.className = 'code-block-toggle';
toggleButton.type = 'button';
toggleButton.textContent = '展开';
toggleButton.setAttribute('aria-expanded', 'false');
toolbar.append(copyButton, toggleButton);
wrapper.appendChild(toolbar);
const lineCount = (code.textContent || '').split(/\r?\n/).length;
if (lineCount > collapsedLineCount) wrapper.classList.add('is-collapsible');
copyButton.addEventListener('click', async () => {
try {
await copyText(code.textContent || '');
copyButton.textContent = copyLabels.done;
window.setTimeout(() => {
copyButton.textContent = copyLabels.idle;
}, 1400);
} catch {
copyButton.textContent = copyLabels.error;
window.setTimeout(() => {
copyButton.textContent = copyLabels.idle;
}, 1600);
}
});
toggleButton.addEventListener('click', () => {
const isExpanded = wrapper.classList.toggle('is-expanded');
toggleButton.textContent = isExpanded ? '收起' : '展开';
toggleButton.setAttribute('aria-expanded', String(isExpanded));
});
});
})();
</script>
src/styles/site.css
+260 -2
View File
@@ -1182,20 +1182,262 @@ time {
}
.prose img {
display: block;
max-width: 100%;
height: auto;
margin: 1.4em auto;
border-radius: 8px;
}
.prose pre {
overflow-x: auto;
.prose .fancybox {
display: block;
width: fit-content;
max-width: 100%;
margin: 1.4em auto;
border-radius: 8px;
text-decoration: none;
}
.prose .fancybox img {
margin: 0 auto;
box-shadow: 0 12px 32px rgba(44, 55, 63, 0.12);
transition:
box-shadow 0.2s ease,
transform 0.2s ease;
}
.prose .fancybox:hover img {
box-shadow: 0 16px 38px rgba(15, 118, 110, 0.16);
transform: translateY(-1px);
}
.prose pre {
margin: 0;
overflow-x: auto;
padding: 18px;
overscroll-behavior-inline: contain;
scrollbar-color: rgba(102, 200, 245, 0.58) rgba(255, 255, 255, 0.08);
scrollbar-width: thin;
}
.prose code {
font-family: "JetBrains Mono", Consolas, monospace;
}
.prose .code-block {
position: relative;
margin: 1.25em 0;
overflow: hidden;
border: 1px solid rgba(15, 118, 110, 0.16);
border-radius: 8px;
background: rgba(22, 31, 36, 0.96);
box-shadow: 0 14px 32px rgba(44, 55, 63, 0.12);
}
.prose .code-block pre::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar {
height: 10px;
}
.prose .code-block pre::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track {
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
}
.prose .code-block pre::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb {
border: 2px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
background:
linear-gradient(90deg, rgba(102, 200, 245, 0.72), rgba(62, 184, 190, 0.76)),
rgba(62, 184, 190, 0.72);
}
.prose .code-block pre::-webkit-scrollbar-thumb:hover,
.table-scroll::-webkit-scrollbar-thumb:hover {
background:
linear-gradient(90deg, rgba(102, 200, 245, 0.9), rgba(62, 184, 190, 0.94)),
rgba(62, 184, 190, 0.9);
}
.prose .code-block pre {
max-height: none;
padding: 46px 18px 18px;
background: transparent;
transition: max-height 0.24s ease;
}
.prose .code-block pre code {
display: block;
min-width: max-content;
}
.prose .code-block.is-collapsible:not(.is-expanded) pre {
max-height: 15.5em;
}
.prose .code-block.is-collapsible:not(.is-expanded)::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 58px;
background: linear-gradient(rgba(22, 31, 36, 0), rgba(22, 31, 36, 0.98));
pointer-events: none;
}
.prose .code-block code {
color: #e8edf2;
line-height: 1.65;
}
.code-block-toolbar {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
display: flex;
gap: 8px;
}
.code-block-copy,
.code-block-toggle {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 8px;
padding: 5px 9px;
color: rgba(255, 255, 255, 0.86);
font: 700 0.78rem/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: rgba(255, 255, 255, 0.1);
cursor: pointer;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition:
color 0.2s ease,
border-color 0.2s ease,
background-color 0.2s ease,
transform 0.2s ease;
}
.code-block-copy:hover,
.code-block-toggle:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.34);
background: rgba(62, 184, 190, 0.72);
transform: translateY(-1px);
}
.code-block-toggle {
display: none;
}
.code-block.is-collapsible .code-block-toggle {
display: inline-flex;
}
.table-scroll {
max-width: 100%;
margin: 1.35em 0;
overflow-x: auto;
border: 1px solid rgba(15, 118, 110, 0.14);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(236, 253, 245, 0.42)),
rgba(255, 253, 248, 0.78);
box-shadow: 0 14px 34px rgba(44, 55, 63, 0.1);
overscroll-behavior-inline: contain;
scrollbar-color: rgba(62, 184, 190, 0.58) rgba(15, 118, 110, 0.08);
scrollbar-width: thin;
}
.prose table {
width: 100%;
min-width: 620px;
border-collapse: separate;
border-spacing: 0;
color: #33433f;
font-size: 0.95rem;
line-height: 1.6;
}
.prose th,
.prose td {
border-right: 1px solid rgba(15, 118, 110, 0.1);
border-bottom: 1px solid rgba(15, 118, 110, 0.1);
padding: 12px 14px;
vertical-align: top;
}
.prose th:last-child,
.prose td:last-child {
border-right: 0;
}
.prose tr:last-child td {
border-bottom: 0;
}
.prose thead th {
color: #2f4a43;
font-weight: 800;
text-align: left;
background:
linear-gradient(135deg, rgba(236, 253, 245, 0.88), rgba(220, 246, 240, 0.72)),
rgba(255, 255, 255, 0.66);
}
.prose tbody tr:nth-child(even) td {
background: rgba(236, 253, 245, 0.36);
}
.prose tbody tr:hover td {
background: rgba(102, 200, 245, 0.13);
}
.fancybox__container {
--fancybox-bg: rgba(32, 36, 42, 0.72);
--fancybox-accent-color: #3eb8be;
backdrop-filter: blur(18px) saturate(145%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
}
.prose mjx-container {
color: #223833;
}
.prose mjx-container[display="true"] {
max-width: 100%;
margin: 1.35em 0;
overflow-x: auto;
overflow-y: hidden;
padding: 10px 0;
scrollbar-color: rgba(62, 184, 190, 0.58) rgba(15, 118, 110, 0.08);
scrollbar-width: thin;
}
.prose mjx-container[display="true"]::-webkit-scrollbar {
height: 8px;
}
.prose mjx-container[display="true"]::-webkit-scrollbar-track {
border-radius: 999px;
background: rgba(15, 118, 110, 0.08);
}
.prose mjx-container[display="true"]::-webkit-scrollbar-thumb {
border-radius: 999px;
background:
linear-gradient(90deg, rgba(102, 200, 245, 0.72), rgba(62, 184, 190, 0.76)),
rgba(62, 184, 190, 0.72);
}
.post-copyright-card {
position: relative;
overflow: hidden;
@@ -1826,6 +2068,22 @@ time {
gap: 8px;
}
.prose .code-block,
.table-scroll {
margin-right: calc(var(--article-padding) * -0.5);
margin-left: calc(var(--article-padding) * -0.5);
}
.prose .code-block pre {
padding-right: 16px;
padding-left: 16px;
}
.prose table {
min-width: 560px;
font-size: 0.9rem;
}
.post-copyright-card {
padding: 22px 18px 18px;
}