mirror of
https://github.com/Ad-closeNN/blog-fuwari.git
synced 2026-05-31 01:00:04 -04:00
docs(pages): 为 Astro 加上在新标签页打开链接的功能
2. del(music): 删除音乐：在银河中孤独摇摆 3. fix(config): 简单修复即使 background 为关闭时依然加载背景图片的问题 4. chore(friends): 加入新的友链 5. style(friends): 优化友情链接页面的样式 6. style(footer): 修改 footer 页脚文本 7. fix(css): 修复复制按钮无法显示的问题
This commit is contained in:
Ad-closeNN
@@ -15,7 +15,7 @@ const currentYear = new Date().getFullYear();
|
|||||||
<br>
|
<br>
|
||||||
<a href="https://icp.gov.moe/?keyword=20256087" target="_blank">萌ICP备20256087号</a>
|
<a href="https://icp.gov.moe/?keyword=20256087" target="_blank">萌ICP备20256087号</a>
|
||||||
<br>
|
<br>
|
||||||
© <span id="copyright-year">{currentYear}</span> <span><a class="transition link text-[var(--primary)] font-medium" href="https://github.com/Ad-closeNN" target="blank">{profileConfig.name}</a></span>. All Rights Reserved.
|
© <span id="copyright-year">2025-present</span> <span><a class="transition link text-[var(--primary)] font-medium" href="https://github.com/Ad-closeNN" target="blank">{profileConfig.name}</a></span>. 博客代码 <a href="https://github.com/Ad-closeNN/blog-fuwari" class="transition link text-[var(--primary)] font-medium" target="_blank">已开源</a>
|
||||||
<br>
|
<br>
|
||||||
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('rss.xml')}>RSS</a> /
|
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('rss.xml')}>RSS</a> /
|
||||||
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a><br>
|
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a><br>
|
||||||
|
|||||||
@@ -63,49 +63,10 @@ const config = profileConfig;
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 星期日等 -->
|
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=250 height=86 src="//music.163.com/outchain/player?type=2&id=411500345&auto=0&height=66"></iframe>
|
||||||
<div id="sunday-music"></div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 音乐 -->
|
|
||||||
<script>
|
|
||||||
(function () {
|
|
||||||
const sundayMusicElement = document.getElementById('sunday-music');
|
|
||||||
// 检查是否已经存在播放器
|
|
||||||
if (sundayMusicElement && sundayMusicElement.querySelector('iframe')) {
|
|
||||||
return; // 如果已经存在播放器，则不再添加
|
|
||||||
}
|
|
||||||
const isSunday = new Date().getDay() === 0;
|
|
||||||
if (!isSunday){
|
|
||||||
const iframe = document.createElement('iframe');
|
|
||||||
iframe.setAttribute('frameborder', '0');
|
|
||||||
iframe.setAttribute('marginwidth', '0');
|
|
||||||
iframe.setAttribute('marginheight', '0');
|
|
||||||
iframe.width = '250';
|
|
||||||
iframe.height = '86';
|
|
||||||
iframe.src = 'https://music.163.com/outchain/player?type=2&id=411500345&auto=1&height=66';
|
|
||||||
const sundayMusicElement = document.getElementById('sunday-music');
|
|
||||||
if (sundayMusicElement) {
|
|
||||||
sundayMusicElement.appendChild(iframe);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
const iframe = document.createElement('iframe');
|
|
||||||
iframe.setAttribute('frameborder', '0');
|
|
||||||
iframe.setAttribute('marginwidth', '0');
|
|
||||||
iframe.setAttribute('marginheight', '0');
|
|
||||||
iframe.width = '250';
|
|
||||||
iframe.height = '86';
|
|
||||||
iframe.src = 'https://music.163.com/outchain/player?type=2&id=2155423467&auto=0&height=66';
|
|
||||||
|
|
||||||
const sundayMusicElement = document.getElementById('sunday-music');
|
|
||||||
if (sundayMusicElement) {
|
|
||||||
sundayMusicElement.appendChild(iframe);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
+1
-1
@@ -29,7 +29,7 @@ export const siteConfig: SiteConfig = {
|
|||||||
background: {
|
background: {
|
||||||
enable: false, // Enable background image
|
enable: false, // Enable background image
|
||||||
//src: "https://eo-pic.2x.nz/h", // Background image URL (supports HTTPS)
|
//src: "https://eo-pic.2x.nz/h", // Background image URL (supports HTTPS)
|
||||||
src: "https://bing.ee123.net/img", // Bing daily theme
|
src: "", // Bing daily theme
|
||||||
position: "center", // Background position: 'top', 'center', 'bottom'
|
position: "center", // Background position: 'top', 'center', 'bottom'
|
||||||
size: "cover", // Background size: 'cover', 'contain', 'auto'
|
size: "cover", // Background size: 'cover', 'contain', 'auto'
|
||||||
repeat: "no-repeat", // Background repeat: 'no-repeat', 'repeat', 'repeat-x', 'repeat-y'
|
repeat: "no-repeat", // Background repeat: 'no-repeat', 'repeat', 'repeat-x', 'repeat-y'
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
@@ -0,0 +1,244 @@
|
|||||||
|
---
|
||||||
|
title: 为 Astro 加上在新标签页打开链接的功能
|
||||||
|
published: 2025-08-31
|
||||||
|
tags: ["插件", "网站"]
|
||||||
|
description: 原版 Astro（包括 Fuwari） 中，打开外部链接是在当前页面打开，而非在新标签页打开。这个插件完美适配了这个需求，让我们的链接可以在新的标签页打开。
|
||||||
|
image: ../assets/images/newtab-link-npm-plugin-info-1.png
|
||||||
|
customcover: ../assets/images/newtab-link-npm-plugin-info-2.png
|
||||||
|
showcover: false
|
||||||
|
category: 教程
|
||||||
|
---
|
||||||
|
|
||||||
|
# 前言
|
||||||
|
看标题可能不明白在说什么。但是如果我放出这两个链接让你点，你应该知道是什么意思。
|
||||||
|
|
||||||
|
<a href="https://www.bing.com">打开必应</a> | <a href="https://www.bing.com" target="_blank">在新标签页打开必应</a>
|
||||||
|
|
||||||
|
可以看到，第一个按钮是在**当前页面**打开必应，而第二个是在**新标签页**打开必应。如果你用的是手机，那这两种在外观上看不出很大的区别（手机版 Chrome 点击第二个按钮会表现为右上角的标签页个数+1）。但是如果你用的是电脑浏览器，那就很容易看出区别了： 
|
||||||
|
浏览器开了一个新标签页用于访问必应，这就是我们想要的，因为 Astro 的打开行为是第一个按钮（在本页打开）。下面是这两个按钮的代码：
|
||||||
|
|
||||||
|
```html title=打开必应
|
||||||
|
<a href="https://www.bing.com">打开必应</a>
|
||||||
|
```
|
||||||
|
```html title=在新标签页打开必应
|
||||||
|
<a href="https://www.bing.com" target="_blank">在新标签页打开必应</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
仔细观察，会发现第二个按钮的代码多了一个 `target="_blank"。这个就是控制这个链接的打开方式，如果不写 target 就是默认为当前页面打开，**Astro 就是这样**。 [<a>：锚元素#target - MDN - Mozilla](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/a#target)
|
||||||
|
|
||||||
|
**设想一下，看的教程需要我们打开一个链接操作，但是点了之后，链接就立马在本页打开，教程就被那个链接的新页面覆盖，看不到了。那这时候你要么鼠标中键开链接（快速用新标签页打开链接），要么右键开。不过，还是挺麻烦的吧。**
|
||||||
|
|
||||||
|
所以我们需要：**让我们的链接通过新标签页打开，而非在当前页面打开**。
|
||||||
|
|
||||||
|
当然，你自己在文章里写 `<a href="https://xxx.com" target="_blank">xxx</a>` 也是一样的效果，但谁又会有这么多时间去写这么一长串的a元素呢？
|
||||||
|
# 使用插件 rehype-external-links
|
||||||
|
::github{repo="rehypejs/rehype-external-links"}
|
||||||
|
|
||||||
|
:::note[笔记]
|
||||||
|
即使这个插件的官方 npm 文档 [When should I use this?](https://www.npmjs.com/package/rehype-external-links?activeTab=readme#when-should-i-use-this) 中描述的样例和我们的需求有着天壤之别，但没关系，它的功能已经包含了我们需要的东西。
|
||||||
|
:::
|
||||||
|
|
||||||
|
## 安装插件
|
||||||
|
假如你的项目使用的包管理器是 pnpm，那就用 pnpm 的命令安装。npm 同理。
|
||||||
|
|
||||||
|
```bash title="使用 pnpm 包管理器安装"
|
||||||
|
pnpm i rehype-external-links
|
||||||
|
```
|
||||||
|
|
||||||
|
```bash title="使用 npm 包管理器安装"
|
||||||
|
npm i rehype-external-links
|
||||||
|
```
|
||||||
|
|
||||||
|
安装成功后你的 `package.json` 中会新增一个类似于 `"rehype-external-links": "^3.0.0",` 的行：
|
||||||
|
|
||||||
|
```json title=package.json ins={2} startLineNumber=50
|
||||||
|
"rehype-components": "^0.3.0",
|
||||||
|
"rehype-external-links": "^3.0.0",
|
||||||
|
"rehype-katex": "^7.0.1",
|
||||||
|
```
|
||||||
|
|
||||||
|
## 配置插件
|
||||||
|
在根目录的 `astro.config.mjs` 文件内加入以下**5行**代码：
|
||||||
|
```js title=astro.config.mjs collapse={2-105, 145-177} ins={132-137}
|
||||||
|
import sitemap from "@astrojs/sitemap";
|
||||||
|
import svelte from "@astrojs/svelte";
|
||||||
|
import tailwind from "@astrojs/tailwind";
|
||||||
|
import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
|
||||||
|
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
|
||||||
|
import swup from "@swup/astro";
|
||||||
|
import expressiveCode from "astro-expressive-code";
|
||||||
|
import icon from "astro-icon";
|
||||||
|
import { defineConfig } from "astro/config";
|
||||||
|
import rehypeAutolinkHeadings from "rehype-autolink-headings";
|
||||||
|
import rehypeComponents from "rehype-components"; /* Render the custom directive content */
|
||||||
|
import rehypeKatex from "rehype-katex";
|
||||||
|
import rehypeSlug from "rehype-slug";
|
||||||
|
import remarkDirective from "remark-directive"; /* Handle directives */
|
||||||
|
import remarkGithubAdmonitionsToDirectives from "remark-github-admonitions-to-directives";
|
||||||
|
import remarkMath from "remark-math";
|
||||||
|
import remarkSectionize from "remark-sectionize";
|
||||||
|
import { expressiveCodeConfig } from "./src/config.ts";
|
||||||
|
import { pluginLanguageBadge } from "./src/plugins/expressive-code/language-badge.ts";
|
||||||
|
import { AdmonitionComponent } from "./src/plugins/rehype-component-admonition.mjs";
|
||||||
|
import { GithubCardComponent } from "./src/plugins/rehype-component-github-card.mjs";
|
||||||
|
import { parseDirectiveNode } from "./src/plugins/remark-directive-rehype.js";
|
||||||
|
import { remarkExcerpt } from "./src/plugins/remark-excerpt.js";
|
||||||
|
import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs";
|
||||||
|
import { pluginCustomCopyButton } from "./src/plugins/expressive-code/custom-copy-button.js";
|
||||||
|
import rehypeExternalLinks from 'rehype-external-links';
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
export default defineConfig({
|
||||||
|
site: "https://adclosenn.top",
|
||||||
|
base: "/",
|
||||||
|
trailingSlash: "always",
|
||||||
|
integrations: [
|
||||||
|
tailwind({
|
||||||
|
nesting: true,
|
||||||
|
}),
|
||||||
|
swup({
|
||||||
|
theme: false,
|
||||||
|
animationClass: "transition-swup-", // see https://swup.js.org/options/#animationselector
|
||||||
|
// the default value `transition-` cause transition delay
|
||||||
|
// when the Tailwind class `transition-all` is used
|
||||||
|
containers: ["main", "#toc"],
|
||||||
|
smoothScrolling: true,
|
||||||
|
cache: true,
|
||||||
|
preload: true,
|
||||||
|
accessibility: true,
|
||||||
|
updateHead: true,
|
||||||
|
updateBodyClass: false,
|
||||||
|
globalInstance: true,
|
||||||
|
}),
|
||||||
|
icon({
|
||||||
|
include: {
|
||||||
|
"preprocess: vitePreprocess(),": ["*"],
|
||||||
|
"fa6-brands": ["*"],
|
||||||
|
"fa6-regular": ["*"],
|
||||||
|
"fa6-solid": ["*"],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
expressiveCode({
|
||||||
|
themes: [expressiveCodeConfig.theme, expressiveCodeConfig.theme],
|
||||||
|
plugins: [
|
||||||
|
pluginCollapsibleSections(),
|
||||||
|
pluginLineNumbers(),
|
||||||
|
pluginLanguageBadge(),
|
||||||
|
pluginCustomCopyButton()
|
||||||
|
],
|
||||||
|
defaultProps: {
|
||||||
|
wrap: true,
|
||||||
|
overridesByLang: {
|
||||||
|
'shellsession': {
|
||||||
|
showLineNumbers: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
styleOverrides: {
|
||||||
|
codeBackground: "var(--codeblock-bg)",
|
||||||
|
borderRadius: "0.75rem",
|
||||||
|
borderColor: "none",
|
||||||
|
codeFontSize: "0.875rem",
|
||||||
|
codeFontFamily: "'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
|
||||||
|
codeLineHeight: "1.5rem",
|
||||||
|
frames: {
|
||||||
|
editorBackground: "var(--codeblock-bg)",
|
||||||
|
terminalBackground: "var(--codeblock-bg)",
|
||||||
|
terminalTitlebarBackground: "var(--codeblock-topbar-bg)",
|
||||||
|
editorTabBarBackground: "var(--codeblock-topbar-bg)",
|
||||||
|
editorActiveTabBackground: "none",
|
||||||
|
editorActiveTabIndicatorBottomColor: "var(--primary)",
|
||||||
|
editorActiveTabIndicatorTopColor: "none",
|
||||||
|
editorTabBarBorderBottomColor: "var(--codeblock-topbar-bg)",
|
||||||
|
terminalTitlebarBorderBottomColor: "none"
|
||||||
|
},
|
||||||
|
textMarkers: {
|
||||||
|
delHue: 0,
|
||||||
|
insHue: 180,
|
||||||
|
markHue: 250
|
||||||
|
}
|
||||||
|
},
|
||||||
|
frames: {
|
||||||
|
showCopyToClipboardButton: false,
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
svelte(),
|
||||||
|
sitemap(),
|
||||||
|
],
|
||||||
|
markdown: {
|
||||||
|
remarkPlugins: [
|
||||||
|
remarkMath,
|
||||||
|
remarkReadingTime,
|
||||||
|
remarkExcerpt,
|
||||||
|
remarkGithubAdmonitionsToDirectives,
|
||||||
|
remarkDirective,
|
||||||
|
remarkSectionize,
|
||||||
|
parseDirectiveNode,
|
||||||
|
],
|
||||||
|
rehypePlugins: [
|
||||||
|
rehypeKatex,
|
||||||
|
rehypeSlug,
|
||||||
|
[
|
||||||
|
rehypeComponents,
|
||||||
|
{
|
||||||
|
components: {
|
||||||
|
github: GithubCardComponent,
|
||||||
|
note: (x, y) => AdmonitionComponent(x, y, "note"),
|
||||||
|
tip: (x, y) => AdmonitionComponent(x, y, "tip"),
|
||||||
|
important: (x, y) => AdmonitionComponent(x, y, "important"),
|
||||||
|
caution: (x, y) => AdmonitionComponent(x, y, "caution"),
|
||||||
|
warning: (x, y) => AdmonitionComponent(x, y, "warning"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
rehypeExternalLinks,
|
||||||
|
{
|
||||||
|
target: '_blank',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
rehypeAutolinkHeadings,
|
||||||
|
{
|
||||||
|
behavior: "append",
|
||||||
|
properties: {
|
||||||
|
className: ["anchor"],
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
type: "element",
|
||||||
|
tagName: "span",
|
||||||
|
properties: {
|
||||||
|
className: ["anchor-icon"],
|
||||||
|
"data-pagefind-ignore": true,
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: "text",
|
||||||
|
value: "#",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
},
|
||||||
|
vite: {
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
onwarn(warning, warn) {
|
||||||
|
// temporarily suppress this warning
|
||||||
|
if (
|
||||||
|
warning.message.includes("is dynamically imported by") &&
|
||||||
|
warning.message.includes("but also statically imported by")
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
warn(warning);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
至此，插件的配置就完成了。随便找个**文章内链接**点击，应该会在**新标签页**打开，而非原来的在当页打开。
|
||||||
+18
-2
@@ -88,11 +88,27 @@ import { Icon } from "astro-icon/components";
|
|||||||
|
|
||||||
<a href="https://blog.mckero.com" target="_blank" class="friend-card">
|
<a href="https://blog.mckero.com" target="_blank" class="friend-card">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<img src="https://tuchuang.mckero.top/OIP.jpeg" loading="lazy" class="w-5 h-5 rounded">
|
<img src="https://tuchuang.mckero.top/OIP.jpeg" loading="lazy" class="w-5 h-5 rounded">
|
||||||
<div class="font-bold text-black dark:text-white">MC_Kero的 blog</div>
|
<div class="font-bold text-black dark:text-white">MC_Kero的 blog</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-sm text-black/50 dark:text-white/50">依稀当年泪目干！</div>
|
<div class="text-sm text-black/50 dark:text-white/50">依稀当年泪目干！</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<a href="https://icp.redcha.cn" target="_blank" class="friend-card">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<img src="https://icp.redcha.cn/favicon.ico" loading="lazy" class="w-5 h-5 rounded">
|
||||||
|
<div class="font-bold text-black dark:text-white">茶备案</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-black/50 dark:text-white/50">茶备案致力于打造一个经典的互联网同盟会，希望可以和站长朋友们一起学习交流</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="https://icp.gov.moe" target="_blank" class="friend-card">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<img src="https://icp.gov.moe/images/ico64.png" loading="lazy" class="w-5 h-5 rounded">
|
||||||
|
<div class="font-bold text-black dark:text-white">萌国ICP备案</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-black/50 dark:text-white/50">嗯，你没看错，这是萌国的ICP备案。萌国在哪呢，听某萌主说，好像是个异次元上的国度。萌主就爱给人组cp,俗称icp我们说的是萌国ICP备案，号称萌ICP备，简称萌备</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 申请友链 -->
|
<!-- 申请友链 -->
|
||||||
@@ -102,7 +118,7 @@ import { Icon } from "astro-icon/components";
|
|||||||
将您的网站加入本站友链
|
将您的网站加入本站友链
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-sm text-black/60 dark:text-white/60">
|
<p class="text-sm text-black/60 dark:text-white/60">
|
||||||
请自行提交 Issue ： <a target="_blank" href="https://github.com/Ad-closeNN/blog-friends/issues/new?title=%E5%8F%8B%E9%93%BE%E7%94%B3%E8%AF%B7%EF%BC%9A" class="transition link text-[var(--primary)] font-medium underline">点击这里提交</a>
|
请自行提交 Issue ： <a target="_blank" href="https://github.com/Ad-closeNN/blog-friends/issues/new?title=%E5%8F%8B%E9%93%BE%E7%94%B3%E8%AF%B7%EF%BC%9A" class="transition link text-[var(--primary)] font-medium">点击这里提交</a>
|
||||||
</p>
|
</p>
|
||||||
<br>
|
<br>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+35
-9
@@ -1,3 +1,18 @@
|
|||||||
|
.btn-regular-dark {
|
||||||
|
@apply bg-gray-800 text-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-regular-bg {
|
||||||
|
@apply bg-gray-100 dark:bg-gray-800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-plain-bg-hover {
|
||||||
|
@apply bg-gray-50 dark:bg-gray-700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-plain-bg-active {
|
||||||
|
@apply bg-gray-200 dark:bg-gray-600;
|
||||||
|
}
|
||||||
.custom-md {
|
.custom-md {
|
||||||
h1 {
|
h1 {
|
||||||
@apply text-3xl;
|
@apply text-3xl;
|
||||||
@@ -19,7 +34,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* https://github.com/afoim/fuwari/blob/main/src/styles/markdown.css */
|
|
||||||
a:not(.no-styling) {
|
a:not(.no-styling) {
|
||||||
@apply relative bg-none transition rounded-md p-1 -m-1 font-medium text-[var(--primary)]
|
@apply relative bg-none transition rounded-md p-1 -m-1 font-medium text-[var(--primary)]
|
||||||
before:ease-out before:transition active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0
|
before:ease-out before:transition active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0
|
||||||
@@ -61,10 +75,30 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.copy-btn {
|
||||||
|
all: initial;
|
||||||
|
@apply btn-regular-dark opacity-0 shadow-lg shadow-black/50 absolute active:scale-90 h-8 w-8 top-3 right-3 text-sm rounded-lg transition-all ease-in-out z-20 cursor-pointer;
|
||||||
|
}
|
||||||
.frame:hover .copy-btn {
|
.frame:hover .copy-btn {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.copy-btn-icon {
|
||||||
|
@apply absolute top-1/2 left-1/2 transition -translate-x-1/2 -translate-y-1/2 w-4 h-4 fill-white pointer-events-none;
|
||||||
|
}
|
||||||
|
.copy-btn .copy-icon {
|
||||||
|
@apply opacity-100 fill-white dark:fill-white/75;
|
||||||
|
}
|
||||||
|
.copy-btn.success .copy-icon {
|
||||||
|
@apply opacity-0 fill-[var(--deep-text)]
|
||||||
|
}
|
||||||
|
.copy-btn .success-icon {
|
||||||
|
@apply opacity-0 fill-white;
|
||||||
|
}
|
||||||
|
.copy-btn.success .success-icon {
|
||||||
|
@apply opacity-100
|
||||||
|
}
|
||||||
|
|
||||||
.expressive-code {
|
.expressive-code {
|
||||||
@apply my-4;
|
@apply my-4;
|
||||||
::selection {
|
::selection {
|
||||||
@@ -72,7 +106,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
ul, ol {
|
ul, ol {
|
||||||
li::marker {
|
li::marker {
|
||||||
@apply text-[var(--primary)];
|
@apply text-[var(--primary)];
|
||||||
@@ -93,11 +126,4 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.katex-display-container {
|
|
||||||
max-width: 100%;
|
|
||||||
overflow-x: auto;
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user