博客系统更新日志#

1
// 实时应用导航栏设置
2
function applyNavbarSettings() {
3
  const settings = JSON.parse(localStorage.getItem('effectsSettings'));
4
  // 根据设置显示/隐藏导航链接
5
  links.forEach(link => {
6
    link.style.display = settings.navbarLinks[key] ? '' : 'none';
7
  });
8
}

1
/* Webkit 浏览器 */
2
.playlist-items::-webkit-scrollbar {
3
  width: 5px;
4
}
5
.playlist-items::-webkit-scrollbar-thumb {
6
  background: rgba(0, 0, 0, 0.15);
7
  border-radius: 2.5px;
8
}
9

10
/* Firefox */
11
.playlist-items {
12
  scrollbar-width: thin;
13
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
14
}

1
// 外站链接配置
2
export const externalSites: {
3
  name: string;
4
  desc: string;
5
  avatar: string;
6
  url: string;
7
  category?: string;
8
}[] = [
9
  // 外站链接列表
10
];

1
[LinkPreset.friend]: {
2
  name: "友链&外站",
3
  url: "/friends/",
4
}

1
// 使用 radial-gradient 创建聚光灯效果
2
background: radial-gradient(
3
  circle ${radius}px at ${x}px ${y}px,
4
  transparent 0%,
5
  rgba(0, 0, 0, 0.85) 100%
6
);

1
// 使用 fixed 定位 + 发光效果
2
box-shadow:
3
  0 0 20px rgba(255, 0, 0, 0.8),
4
  0 0 40px rgba(255, 0, 0, 0.4);

1
/* 易读模式 */
2
.accessibility-mode {
3
  letter-spacing: 0.05em;
4
  word-spacing: 0.1em;
5
}
6

7
/* 高对比度 */
8
.high-contrast-mode {
9
  filter: contrast(1.2);
10
}
11

12
/* 专注模式 */
13
.focus-mode p {
14
  opacity: 0.4;
15
  transition: opacity 0.3s ease;
16
}
17
.focus-mode p:hover {
18
  opacity: 1;
19
}

1
.modal {
2
  z-index: 99999 !important;
3
}

1
ReactDOM.createPortal(modal, document.body)

1
.parent {
2
  transform: none !important;
3
}

1
<script lang="ts">
2
  import { onMount, onDestroy } from 'svelte';
3

4
  export let show = false;
5
  let modalElement: HTMLDivElement;
6

7
  // 响应式
8
  $: if (show && modalElement) {
9
    // 将模态框移动到 body
10
    document.body.appendChild(modalElement);
11
    document.body.style.overflow = 'hidden';
12
  } else if (!show && typeof document !== 'undefined') {
13
    document.body.style.overflow = '';
14
  }
15

16
  onDestroy(() => {
17
    if (typeof document !== 'undefined') {
18
      document.body.style.overflow = '';
19
    }
20
  });
21
</script>
22

23
{#if show}
24
  <div
25
    bind:this={modalElement}
26
    class="modal-root"
27
    on:click={close}
28
  >
29
    <div class="modal-content" on:click|stopPropagation>
30
      <!-- 内容 -->
31
    </div>
32
  </div>
33
{/if}
34

35
<style>
36
  .modal-root {
37
    /* 使用 !important 确保样式不被覆盖 */
38
    position: fixed !important;
39
    top: 0 !important;
40
    left: 0 !important;
41
    right: 0 !important;
42
    bottom: 0 !important;
43
    width: 100vw !important;
44
    height: 100vh !important;
45
    z-index: 999999 !important;
46

47
    /* 背景和模糊 */
48
    background: rgba(0, 0, 0, 0.6) !important;
49
    backdrop-filter: blur(12px) !important;
50
    -webkit-backdrop-filter: blur(12px) !important;
51

52
    /* 居中布局 */
53
    display: flex !important;
54
    align-items: center !important;
55
    justify-content: center !important;
56
  }
57
</style>

1
$: if (show && modalElement) {
2
  document.body.appendChild(modalElement);
3
}

1
<div bind:this={modalElement}>

1
<div on:click={close}>
2
  <div on:click|stopPropagation>

1
document.body.style.overflow = 'hidden';

1
function addFavorite() {
2
  const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
3
  const shortcut = isMac ? 'Cmd+D' : 'Ctrl+D';
4
  alert(`请按 ${shortcut} 将本页添加到书签`);
5
}

1
import JsBarcode from 'jsbarcode';
2

3
function generateBarcode() {
4
  const barcodeData = `${slug}-${Date.now()}`.substring(0, 20);
5

6
  JsBarcode(barcodeCanvas, barcodeData, {
7
    format: 'CODE128',
8
    width: 2,
9
    height: 60,
10
    displayValue: false,
11
    background: 'transparent',
12
    lineColor: isDark ? '#ffffff' : '#000000'
13
  });
14
}

1
@media print {
2
  #navbar, #sidebar, .post-actions {
3
    display: none !important;
4
  }
5

6
  .markdown-content {
7
    font-size: 12pt !important;
8
    line-height: 1.6 !important;
9
  }
10

11
  .markdown-content a[href]:after {
12
    content: " (" attr(href) ")";
13
  }
14
}