redesign: 沉浸式梦境主题 - 星空粒子、水晶效果、滚动动画
All checks were successful
Deploy / deploy (push) Successful in 2s

This commit is contained in:
Chen Gu
2026-04-23 23:04:10 +08:00
parent b3139f500c
commit 3338178f88
7 changed files with 733 additions and 47 deletions

View File

@@ -5,13 +5,27 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ if .Title }}{{ .Title }} | {{ end }}{{ .Site.Title }}</title>
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
{{- partial "head.html" . -}}
<link rel="canonical" href="{{ .Permalink }}">
{{ $style := resources.Get "css/dreamscape.css" | minify }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
<link rel="alternate" type="application/rss+xml" href='{{ "feed.xml" | relURL }}'>
</head>
<body class="{{ if .IsHome }}home{{ else }}page{{ end }}">
{{- partial "header.html" . -}}
<main>
{{- block "main" . }}{{- end }}
</main>
{{- partial "footer.html" . -}}
<body>
<canvas id="starfield"></canvas>
<div id="app">
<nav class="nav">
<a href="/" class="nav-logo"></a>
{{ range .Site.Menus.main }}
<a href="{{ .URL | relURL }}" class="nav-link">{{ .Name }}</a>
{{ end }}
</nav>
<main>
{{- block "main" . }}{{- end }}
</main>
<footer class="footer">
<span>✦ Val's Dreamscape Journal ✦</span>
</footer>
</div>
<script src='{{ "js/dreamscape.js" | relURL }}'></script>
</body>
</html>

View File

@@ -1,16 +1,15 @@
{{ define "main" }}
<div class="page-header">
<h1>{{ .Title | default .Section | title }}</h1>
{{ if .Content }}<div class="section-desc">{{ .Content }}</div>{{ end }}
</div>
<div class="list">
<div class="dream-list reveal">
<h1 class="list-heading">
<span class="section-glyph"></span>
{{ .Title | default .Section | title }}
</h1>
{{ range .Paginator.Pages }}
<article class="list-item">
<time>{{ .Date.Format "2006-01-02" }}</time>
<h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
<a href="{{ .RelPermalink }}" class="list-entry reveal">
<time>{{ .Date.Format "2006.01.02" }}</time>
<h3>{{ .Title }}</h3>
<p>{{ .Summary | truncate 100 }}</p>
</article>
</a>
{{ end }}
</div>
{{ end }}

View File

@@ -1,19 +1,23 @@
{{ define "main" }}
<div class="page-header">
<h1>{{ .Title }}</h1>
{{ if .Params.subtitle }}<p class="subtitle">{{ .Params.subtitle }}</p>{{ end }}
<div class="meta">
<time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006年01月02日" }}</time>
{{ with .Params.tags }}<span class="tags">{{ range . }}<span class="tag">{{ . }}</span>{{ end }}</span>{{ end }}
<article class="dream-article">
<div class="article-hero reveal">
<div class="article-glyph"></div>
<h1 class="article-title">{{ .Title }}</h1>
<div class="article-meta">
<time>{{ .Date.Format "2006年01月02日" }}</time>
<div class="article-tags">
{{ range .Params.tags }}<span class="tag">{{ . }}</span>{{ end }}
</div>
</div>
</div>
</div>
<article class="article">
{{ .Content }}
<div class="article-body">
{{ .Content }}
</div>
<nav class="article-nav">
{{ with .PrevInSection }}<a href="{{ .RelPermalink }}" class="nav-prev">← {{ .Title }}</a>{{ end }}
{{ with .NextInSection }}<a href="{{ .RelPermalink }}" class="nav-next">{{ .Title }} →</a>{{ end }}
</nav>
</article>
<nav class="post-nav">
{{ with .PrevInSection }}<a href="{{ .RelPermalink }}" class="prev">← {{ .Title }}</a>{{ end }}
{{ with .NextInSection }}<a href="{{ .RelPermalink }}" class="next">{{ .Title }} →</a>{{ end }}
</nav>
{{ end }}

View File

@@ -1,28 +1,48 @@
{{ define "main" }}
<div class="home">
<div class="dream-home">
<section class="hero">
<h1 class="hero-title">{{ .Site.Title }}</h1>
<p class="hero-subtitle">{{ .Site.Params.description }}</p>
<div class="hero-constellation"></div>
<h1 class="hero-title reveal">
<span class="hero-glyph"></span>
Val's Dreamscape
</h1>
<p class="hero-subtitle reveal">{{ .Site.Params.description }}</p>
<div class="hero-scroll reveal">
<span>向下探索</span>
<div class="scroll-arrow"></div>
</div>
</section>
{{ $sections := slice "journey" "sketch" "gallery" "essay" }}
{{ range $sections }}
{{ $pages := where $.Site.RegularPages "Section" . }}
{{ if $pages }}
<section class="section">
<h2 class="section-title">
<a href="/{{ . }}/">{{ . | title }} · {{ len $pages }}</a>
<section class="dream-section reveal">
<h2 class="section-heading">
<span class="section-glyph">
{{ if eq . "journey" }}◈{{ end }}
{{ if eq . "sketch" }}✎{{ end }}
{{ if eq . "gallery" }}❖{{ end }}
{{ if eq . "essay" }}✦{{ end }}
</span>
{{ if eq . "journey" }}旅程{{ end }}
{{ if eq . "sketch" }}速记{{ end }}
{{ if eq . "gallery" }}图志{{ end }}
{{ if eq . "essay" }}随笔{{ end }}
</h2>
<div class="card-grid">
{{ range first 3 $pages }}
<article class="card">
<div class="card-meta">
<time>{{ .Date.Format "2006-01-02" }}</time>
{{ with .Params.tags }}<span class="tags">{{ range . }}<span class="tag">{{ . }}</span>{{ end }}</span>{{ end }}
<div class="card-constellation">
{{ range $pages }}
<a href="{{ .RelPermalink }}" class="dream-card reveal">
<div class="card-glow"></div>
<div class="card-content">
<time class="card-time">{{ .Date.Format "2006.01.02" }}</time>
<h3 class="card-title">{{ .Title }}</h3>
<p class="card-excerpt">{{ .Summary | truncate 80 }}</p>
<div class="card-tags">
{{ range .Params.tags }}<span class="tag">{{ . }}</span>{{ end }}
</div>
</div>
<h3 class="card-title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
<p class="card-summary">{{ .Summary | truncate 120 }}</p>
</article>
</a>
{{ end }}
</div>
</section>