jianzhihuixiang/alacarte-novel-website/chapters/chapter-5.html
小虾米 f8894dd3f3 fix: 修复上一章/下一章导航对小数章节(如107.5)的支持
- updateNavButtons: 改用数组索引查找,而非简单的+1/-1
- updateSidebarHighlight: 使用parseFloat比较章节ID
- updateMobileTOCHighlight: 使用parseFloat比较章节ID
- 更新版本号强制刷新缓存
2026-03-27 17:42:41 +08:00

544 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雷鸣废墟 - 阿拉德:剑之回响</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
--text-primary: #e0e0e0;
--text-secondary: #888;
--accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--border-color: rgba(255,255,255,0.1);
--btn-bg: rgba(255,255,255,0.1);
--btn-hover: rgba(255,255,255,0.2);
}
[data-theme="light"] {
--bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
--text-primary: #333;
--text-secondary: #666;
--border-color: rgba(0,0,0,0.1);
--btn-bg: rgba(0,0,0,0.05);
--btn-hover: rgba(0,0,0,0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Serif SC', serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.8;
min-height: 100vh;
transition: all 0.3s ease;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
padding-bottom: 120px;
}
/* 顶部导航 */
.top-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
z-index: 1000;
padding: 10px 20px;
}
.top-nav-content {
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-link {
color: var(--text-primary);
text-decoration: none;
font-family: 'Noto Sans SC', sans-serif;
font-size: 14px;
padding: 8px 16px;
background: var(--btn-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
transition: all 0.3s ease;
}
.nav-link:hover {
background: var(--btn-hover);
}
.chapter-header {
text-align: center;
padding: 80px 0 40px;
border-bottom: 1px solid var(--border-color);
margin-bottom: 40px;
}
.chapter-number {
font-size: 14px;
color: var(--text-secondary);
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 10px;
}
.chapter-title {
font-size: 32px;
font-weight: 700;
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
}
.chapter-meta {
font-size: 14px;
color: var(--text-secondary);
}
.chapter-content {
font-size: 18px;
line-height: 2;
text-align: justify;
}
.chapter-content p {
margin-bottom: 1.5em;
text-indent: 2em;
}
.chapter-content p:first-of-type::first-letter {
font-size: 3em;
float: left;
line-height: 1;
margin-right: 8px;
margin-top: -5px;
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
/* 固定底部导航 */
.fixed-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(10px);
border-top: 1px solid var(--border-color);
z-index: 1000;
padding: 15px 20px;
}
.fixed-nav-content {
max-width: 800px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-btn {
padding: 12px 24px;
background: var(--btn-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-primary);
text-decoration: none;
transition: all 0.3s ease;
font-family: 'Noto Sans SC', sans-serif;
font-size: 14px;
cursor: pointer;
}
.nav-btn:hover {
background: var(--btn-hover);
transform: translateY(-2px);
}
.nav-btn.disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
/* 右侧滚动按钮 */
.scroll-buttons {
position: fixed;
right: 20px;
bottom: 90px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1001;
}
.scroll-btn {
width: 40px;
height: 40px;
border-radius: 8px;
background: var(--btn-bg);
border: 1px solid var(--border-color);
color: var(--text-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.3s ease;
font-family: 'Noto Sans SC', sans-serif;
}
.scroll-btn:hover {
background: var(--btn-hover);
}
/* 侧边栏 - 标题固定,内容滚动 */
.sidebar {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
border-radius: 12px;
border: 1px solid var(--border-color);
width: 200px;
max-height: 70vh;
z-index: 999;
display: flex;
flex-direction: column;
}
.sidebar-title {
font-size: 14px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 2px;
padding: 15px 20px;
border-bottom: 1px solid var(--border-color);
flex-shrink: 0;
}
.sidebar-content {
overflow-y: auto;
padding: 10px 20px 20px;
flex: 1;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
transition: scrollbar-color 0.3s ease;
}
.sidebar-content:hover {
scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.sidebar-content::-webkit-scrollbar {
width: 6px;
}
.sidebar-content::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-content::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 3px;
transition: background 0.3s ease;
}
.sidebar-content:hover::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.3);
}
.sidebar-content:hover::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.5);
}
[data-theme="light"] .sidebar-content:hover {
scrollbar-color: rgba(0,0,0,0.3) transparent;
}
[data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.3);
}
[data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.5);
}
.sidebar-chapter {
display: block;
padding: 8px 0;
color: #aaa;
text-decoration: none;
font-size: 13px;
border-bottom: 1px solid rgba(255,255,255,0.05);
transition: all 0.3s ease;
line-height: 1.5;
}
.sidebar-chapter:hover {
color: #667eea;
}
.sidebar-chapter.current {
color: #667eea;
font-weight: 600;
}
@media (max-width: 1200px) {
.sidebar {
display: none;
}
}
@media (max-width: 600px) {
.chapter-title {
font-size: 24px;
}
.chapter-content {
font-size: 16px;
}
.fixed-nav-content {
gap: 10px;
}
.nav-btn {
padding: 10px 15px;
font-size: 12px;
}
.scroll-buttons {
right: 10px;
bottom: 80px;
}
.scroll-btn {
width: 36px;
height: 36px;
}
}
/* 滚动条样式 */
.sidebar::-webkit-scrollbar {
width: 4px;
}
.sidebar::-webkit-scrollbar-track {
background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 2px;
}
</style>
</head>
<body>
<!-- 顶部导航 -->
<nav class="top-nav">
<div class="top-nav-content">
<a href="../index.html" class="nav-link">返回首页</a>
<button class="nav-link" id="themeToggle">切换主题</button>
</div>
</nav>
<div class="container">
<header class="chapter-header">
<div class="chapter-number">Chapter 5</div>
<h1 class="chapter-title">雷鸣废墟</h1>
</header>
<article class="chapter-content">
<p>一个月后。林克站在艾尔文防线的边缘,看着远处被雷电笼罩的区域。</p>
<p>"那里就是雷鸣废墟。"阿甘左站在他身后,"闪电哥布林的领地。"</p>
<p>"我能感觉到。"林克眯起眼睛,"空气中有电流的气息。"</p>
<p>这一个月里,他每天都在进行高强度的训练。挥剑、闪避、体能,然后再挥剑、再闪避、再体能。循环往复,永无止境。</p>
<p>但他从不抱怨。</p>
<p>因为每一次训练,他都能感觉到自己在变强。体内的诅咒力量也不再像之前那样狂暴,而是逐渐变得温顺,像是一头被驯服的野兽。</p>
<p>当然,这只是假象。</p>
<p>---</p>
<p>雷鸣废墟比他想象中还要诡异。</p>
<p>天空永远笼罩着乌云,闪电在云层中不断闪烁。空气中弥漫着一股臭氧的味道,刺激着他的鼻腔。地面是焦黑色的,仿佛被雷电常年轰炸过,到处都是深浅不一的坑洞。</p>
<p>"噼啪——"</p>
<p>一道闪电从天而降,落在林克前方不到十米的地方。</p>
<p>"这就是闪电哥布林的领地……"</p>
<p>林克警惕地看着四周,缓慢前行。</p>
<p>这里的能见度很低,闪电的光芒每隔几秒就会照亮整个废墟。在那短暂的光亮中,林克能看到废墟中游荡的身影。</p>
<p>哥布林。到处都是哥布林。</p>
<p>它们和外面的普通哥布林不同,身体呈灰蓝色,皮肤像是被雷电劈焦了一样。手中的木棒顶端镶嵌着蓝色的水晶球,不断闪烁着电光。</p>
<p>"闪电哥布林……"</p>
<p>林克数了一下,至少有二十只。</p>
<p>这还是他能看到的。在这片废墟里,不知道还有多少隐藏在暗处。</p>
<p>---</p>
<p>战斗瞬间打响。</p>
<p>"嘎——!"</p>
<p>一只闪电哥布林发现了林克,发出了刺耳的尖叫。</p>
<p>几乎是同时,二十多只闪电哥布林同时转向他,眼中闪烁着嗜血的光芒。</p>
<p>"噼里啪啦——!"</p>
<p>蓝色的电光从它们手中的水晶球中迸发而出,汇聚成一道道闪电链,像是群蛇乱舞般向林克劈来。</p>
<p>"太快了!"</p>
<p>林克咬牙,身体一侧,险之又险地躲过第一道闪电。但第二道、第三道闪电紧随其后,让他避无可避。</p>
<p>"轰——!"</p>
<p>闪电击中了他的肩膀。</p>
<p>剧烈的疼痛从肩膀蔓延开来,林克感觉整条手臂都失去了知觉。他的身体被电流击中,不由自主地颤抖起来。</p>
<p>---</p>
<p>就在林克陷入绝境时,一只体型格外庞大的闪电哥布林出现了。</p>
<p>那是一只哥布林王。</p>
<p>身高超过三米,浑身的皮肤呈深蓝色,像是蕴含着无穷的雷电能量。它的眼睛是银白色的,瞳孔中不断有电光闪烁。最引人注目的是它头顶的角——两根螺旋形的蓝色水晶角,不断向外散发着噼里啪啦的电火花。</p>
<p>"闪电哥布林王……"</p>
<p>林克握紧太刀,体内诅咒力量开始运转。</p>
<p>这是他面对过的最强敌人。</p>
<p>---</p>
<p>在闪电哥布林王的压迫下,林克体内的卡赞血脉突然发生了变化。</p>
<p>原本狂暴的红色血气开始凝聚,在他身后形成一个模糊的人形虚影。</p>
<p>那是一个战士的轮廓,手持巨剑,身披战甲,散发着毁天灭地的气息。</p>
<p>卡赞的虚影。</p>
<p>那个虚影举起手中的巨剑,对着笼罩而来的雷电海洋,狠狠地劈下。</p>
<p>"轰——!!!"</p>
<p>血色的剑芒撕裂了雷电,撕裂了天空,也撕裂了闪电哥布林王的身体。</p>
<p>战斗结束。</p>
<p>---</p>
<p>红色的血气从林克身上缓缓散去,那个模糊的人形虚影也逐渐消失。</p>
<p>林克跪在地上,大口大口地喘着粗气。</p>
<p>"刚才那个虚影……是什么?"</p>
<p>"卡赞的虚影。"阿甘左不知何时出现在他身边,"那是卡赞血脉觉醒的征兆。"</p>
<p>"卡赞血脉?"</p>
<p>"你是卡赞血脉的继承者。"阿甘左说,"而且,是最纯净的血脉之一。"</p>
<p>"最纯净?"</p>
<p>"普通的鬼剑士,体内只有一丝卡赞的血脉。但你不同。你体内的卡赞血脉,纯净到可以召唤出卡赞的虚影。"</p>
<p>"那刚才那个影子……"</p>
<p>"是卡赞残留在世间的意志。"阿甘左说,"当你体内的血脉觉醒到一定程度时,就可以借用那股意志的力量。"</p>
<p>林克沉默了。</p>
<p>原来如此。</p>
<p>原来他体内流淌的,是卡赞的血脉。</p>
<p>---</p>
<p>(第五章完)</p>
</article>
</div>
<!-- 固定底部导航 -->
<nav class="fixed-nav">
<div class="fixed-nav-content">
<a href="chapter-4.html" class="nav-btn ">上一章</a>
<a href="../chapters.html" class="nav-btn">目录</a>
<a href="chapter-6.html" class="nav-btn ">下一章</a>
</div>
</nav>
<!-- 右侧滚动按钮 -->
<div class="scroll-buttons">
<button class="scroll-btn" id="scrollTop" title="回到顶部"></button>
<button class="scroll-btn" id="scrollBottom" title="回到底部"></button>
</div>
<!-- 侧边栏章节导航 -->
<aside class="sidebar">
<div class="sidebar-title">章节导航</div>
<div class="sidebar-content" id="sidebarContent">
<a href="chapter-1.html" class="sidebar-chapter">第1章洛兰的风</a>
<a href="chapter-2.html" class="sidebar-chapter">第2章洛兰深处</a>
<a href="chapter-3.html" class="sidebar-chapter">第3章幽暗密林</a>
<a href="chapter-4.html" class="sidebar-chapter">第4章幽暗密林深处</a>
<a href="chapter-5.html" class="sidebar-chapter current">第5章雷鸣废墟</a>
<a href="chapter-6.html" class="sidebar-chapter">第6章格拉卡</a>
<a href="chapter-7.html" class="sidebar-chapter">第7章烈焰格拉卡</a>
<a href="chapter-8.html" class="sidebar-chapter">第8章冰霜幽暗密林</a>
<a href="chapter-9.html" class="sidebar-chapter">第9章转职之路</a>
<a href="chapter-10.html" class="sidebar-chapter">第10章暗黑雷鸣废墟</a>
<a href="chapter-11.html" class="sidebar-chapter">第11章剑魂转职仪式</a>
<a href="chapter-12.html" class="sidebar-chapter">第12章西海岸</a>
<a href="chapter-13.html" class="sidebar-chapter">第13章龙人之塔</a>
<a href="chapter-14.html" class="sidebar-chapter">第14章人偶玄关</a>
<a href="chapter-15.html" class="sidebar-chapter">第15章石巨人塔</a>
<a href="chapter-16.html" class="sidebar-chapter">第16章黑暗玄廊</a>
<a href="chapter-17.html" class="sidebar-chapter">第17章城主宫殿</a>
<a href="chapter-18.html" class="sidebar-chapter">第18章番外·悬空城</a>
<a href="chapter-19.html" class="sidebar-chapter">第19章天帷巨兽·神殿外围</a>
<a href="chapter-20.html" class="sidebar-chapter">第20章树精丛林</a>
<a href="chapter-21.html" class="sidebar-chapter">第21章炼狱</a>
<a href="chapter-22.html" class="sidebar-chapter">第22章西海岸的闲暇</a>
<a href="chapter-23.html" class="sidebar-chapter">第23章极昼</a>
<a href="chapter-24.html" class="sidebar-chapter">第24章第一脊椎</a>
<a href="chapter-25.html" class="sidebar-chapter">第25章赫顿玛尔的准备</a>
<a href="chapter-26.html" class="sidebar-chapter">第26章第二脊椎</a>
<a href="chapter-27.html" class="sidebar-chapter">第27章重逢的温柔</a>
<a href="chapter-28.html" class="sidebar-chapter">第28章暗精灵的委托</a>
<a href="chapter-29.html" class="sidebar-chapter">第29章阿法利亚营地</a>
<a href="chapter-30.html" class="sidebar-chapter">第30章浅栖之地</a>
<a href="chapter-31.html" class="sidebar-chapter">第31章蜘蛛洞穴</a>
<a href="chapter-32.html" class="sidebar-chapter">第32章克伦特的委托</a>
<a href="chapter-33.html" class="sidebar-chapter">第33章暗精灵墓地·左翼守卫</a>
<a href="chapter-34.html" class="sidebar-chapter">第34章暗精灵墓地·剩余三将军</a>
</div>
</aside>
<script>
// 记录阅读进度
let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
if (!readChapters.includes(5)) {
readChapters.push(5);
localStorage.setItem('readChapters', JSON.stringify(readChapters));
}
// 主题切换
const themeToggle = document.getElementById('themeToggle');
const savedTheme = localStorage.getItem('theme') || 'dark';
document.documentElement.setAttribute('data-theme', savedTheme);
themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
themeToggle.addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
});
// 滚动到顶部
document.getElementById('scrollTop').addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// 滚动到底部
document.getElementById('scrollBottom').addEventListener('click', () => {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
});
// 页面加载时,侧边栏自动滚动到当前章节
window.addEventListener('load', () => {
const sidebarContent = document.getElementById('sidebarContent');
const currentChapter = sidebarContent.querySelector('.current');
if (currentChapter) {
currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
</script>
</body>
</html>