liuhuayong/tianya-shentie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 天涯神贴经典合集静态网站(32篇)

Browse Source 
- 收录 32 篇经典神贴,覆盖经济金融/莲蓬鬼话/人文历史/小说连载/社会成长/玄学命理
- 支持搜索、板块筛选、热度/年代排序、详情弹窗、本地收藏
- 怀旧宣纸风设计(宋体 + 朱红印章),响应式布局
- 纯静态,无依赖,浏览器直接打开即可
- 含 README 与数据扩充说明
This commit is contained in:
刘华勇 2026-06-26 15:56:00 +08:00
commit 96120711dc
6 changed files with 1681 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.gitignore vendored Normal file
View File

@ -0,0 +1,10 @@
# 系统文件
.DS_Store
Thumbs.db
# 编辑器
.vscode/
.idea/
*.swp
*.swo
*~

56
README.md Normal file
View File

@ -0,0 +1,56 @@
# 天涯神贴 · 经典合集
一个静态怀旧收藏站,致敬已于 2023 年关停的天涯社区(1999—2023),收录了当年那些熬夜追过的经典帖子。
## ✨ 特性
- 📚 **32 篇经典神贴**,覆盖经济金融、莲蓬鬼话、人文历史、小说连载、社会成长、玄学命理等板块
- 🔍 **关键词搜索**(标题 / 作者 / 标签 / 摘要)
- 🏷 **按板块筛选**(6 大板块)
- ↕️ **多种排序**(热度 / 年代新旧)
- 🪟 **详情弹窗**(金句 + 原始出处链接)
- ⭐ **本地收藏**(localStorage 持久化)
- 📱 **响应式布局**,手机端自适应
- 🎨 **怀旧宣纸风**(宋体 + 朱红印章,呼应老 BBS 气质)
## 📂 项目结构
```
tianya-classics/
├── index.html # 页面骨架
├── style.css # 怀旧宣纸 + 朱红印章风样式
├── data.js # 32 篇神贴数据(可自行增删)
├── app.js # 渲染与交互逻辑
└── README.md
```
## 🚀 使用
纯静态网站,无需服务器。直接用浏览器打开 `index.html` 即可。
## 📝 如何扩充内容
往 `data.js` 的 `window.SHEN_TIE` 数组里按相同格式追加条目即可,页面会自动渲染:
```js
{
id: '唯一标识',
title: '帖子标题',
author: '作者ID',
authorAlias: '作者昵称',
section: '板块(经济金融/莲蓬鬼话/人文历史/小说连载/成长箴言/社会人文/玄学命理)',
year: 2010,
hot: 90, // 热度 0-100
verified: false, // 是否标记"已应验"
tags: ['标签1', '标签2'],
summary: '一句话摘要',
content: ['金句1', '金句2', '金句3', '金句4'],
source: '原始出处链接'
}
```
## ⚠️ 说明
- 内容整理自公开网络资料,仅作展示与怀旧用途。
- 标记「已应验」的预测,仅为网友整理后的看法,**不构成任何投资或生活建议**。
- 若有内容涉及版权,请联系删除。

337
app.js Normal file
View File

@ -0,0 +1,337 @@
/**
* 天涯神贴 · 静态网站交互逻辑
* 依赖:data.js 中提供的 window.SHEN_TIE
*/
(function () {
'use strict';
var DATA = window.SHEN_TIE || [];
var STORAGE_KEY = 'tianya-favs';
/* ---------- 工具函数 ---------- */
function $(sel, ctx) {
return (ctx || document).querySelector(sel);
}
function $all(sel, ctx) {
return Array.prototype.slice.call((ctx || document).querySelectorAll(sel));
}
function escapeHtml(str) {
return String(str)
.replace(/&/g, '&')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
function loadFavs() {
try {
return JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
} catch (e) {
return [];
}
}
function saveFavs(list) {
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
} catch (e) {
/* 隐私模式忽略 */
}
}
/* ---------- 全局状态 ---------- */
var state = {
section: '全部',
keyword: '',
sort: 'hot', // hot | year-asc | year-desc
favs: loadFavs(),
onlyFav: false,
};
/* ---------- 派生数据 ---------- */
function sections() {
var set = {};
DATA.forEach(function (t) {
set[t.section] = true;
});
return ['全部'].concat(Object.keys(set));
}
function filtered() {
var kw = state.keyword.trim().toLowerCase();
var list = DATA.filter(function (t) {
var okSection = state.section === '全部' || t.section === state.section;
var okFav = !state.onlyFav || state.favs.indexOf(t.id) > -1;
var okKw = true;
if (kw) {
var hay = [t.title, t.author, t.authorAlias, t.summary, t.section]
.concat(t.tags || [])
.join(' ')
.toLowerCase();
okKw = hay.indexOf(kw) > -1;
}
return okSection && okFav && okKw;
});
if (state.sort === 'hot') {
list.sort(function (a, b) {
return b.hot - a.hot;
});
} else if (state.sort === 'year-asc') {
list.sort(function (a, b) {
return a.year - b.year;
});
} else if (state.sort === 'year-desc') {
list.sort(function (a, b) {
return b.year - a.year;
});
}
return list;
}
/* ---------- 渲染:分类标签 ---------- */
function renderSections() {
var box = $('#sections');
box.innerHTML = sections()
.map(function (s) {
var active = s === state.section ? ' active' : '';
return (
'<button class="tag' + active + '" data-section="' + escapeHtml(s) + '">' +
escapeHtml(s) + '</button>'
);
})
.join('');
}
/* ---------- 渲染:卡片列表 ---------- */
function renderCards() {
var box = $('#cards');
var list = filtered();
if (!list.length) {
box.innerHTML =
'<div class="empty">没有找到相关神贴,换个关键词或分类试试。</div>';
$('#count').textContent = '0 篇';
return;
}
var html = list
.map(function (t) {
var isFav = state.favs.indexOf(t.id) > -1;
var tagsHtml = (t.tags || [])
.map(function (tag) {
return '<span class="chip">#' + escapeHtml(tag) + '</span>';
})
.join('');
var verifyBadge = t.verified
? '<span class="verified" title="网友整理认为预测大体应验">已应验</span>'
: '';
return (
'<article class="card" data-id="' + escapeHtml(t.id) + '">' +
'<div class="card-head">' +
'<span class="section-badge">' + escapeHtml(t.section) + '</span>' +
'<span class="year">' + escapeHtml(String(t.year)) + '</span>' +
'</div>' +
'<h3 class="title">' + escapeHtml(t.title) + '</h3>' +
'<div class="author">' +
'<span class="avatar">' + escapeHtml((t.authorAlias || t.author).slice(0, 1)) + '</span>' +
'<span class="name">' + escapeHtml(t.authorAlias || t.author) + '</span>' +
'<span class="dim">@' + escapeHtml(t.author) + '</span>' +
verifyBadge +
'</div>' +
'<p class="summary">' + escapeHtml(t.summary) + '</p>' +
'<div class="tagline">' + tagsHtml + '</div>' +
'<div class="card-foot">' +
'<span class="hot" title="热度">🔥 ' + escapeHtml(String(t.hot)) + '</span>' +
'<button class="fav-btn ' + (isFav ? 'on' : '') + '" data-fav="' + escapeHtml(t.id) + '">' +
(isFav ? '★ 已收藏' : '☆ 收藏') +
'</button>' +
'<span class="read-more">展开阅读 →</span>' +
'</div>' +
'</article>'
);
})
.join('');
box.innerHTML = html;
$('#count').textContent = list.length + ' 篇';
}
/* ---------- 渲染:详情弹窗 ---------- */
function openDetail(id) {
var t = DATA.filter(function (x) {
return x.id === id;
})[0];
if (!t) return;
var paras = (t.content || [])
.map(function (p) {
return '<p>' + escapeHtml(p) + '</p>';
})
.join('');
var tagsHtml = (t.tags || [])
.map(function (tag) {
return '<span class="chip">#' + escapeHtml(tag) + '</span>';
})
.join('');
var isFav = state.favs.indexOf(t.id) > -1;
var html =
'<div class="modal-mask" id="modalMask">' +
'<div class="modal" role="dialog" aria-modal="true">' +
'<button class="modal-close" id="modalClose" aria-label="关闭">×</button>' +
'<div class="modal-head">' +
'<span class="section-badge">' + escapeHtml(t.section) + '</span>' +
'<span class="year">' + escapeHtml(String(t.year)) + '</span>' +
(t.verified ? '<span class="verified">已应验</span>' : '') +
'</div>' +
'<h2 class="modal-title">' + escapeHtml(t.title) + '</h2>' +
'<div class="author">' +
'<span class="avatar lg">' + escapeHtml((t.authorAlias || t.author).slice(0, 1)) + '</span>' +
'<span class="name">' + escapeHtml(t.authorAlias || t.author) + '</span>' +
'<span class="dim">@' + escapeHtml(t.author) + '</span>' +
'<span class="hot">🔥 ' + escapeHtml(String(t.hot)) + '</span>' +
'</div>' +
'<p class="modal-summary">' + escapeHtml(t.summary) + '</p>' +
'<div class="tagline">' + tagsHtml + '</div>' +
'<div class="quotes">' + paras + '</div>' +
'<div class="modal-foot">' +
'<button class="fav-btn ' + (isFav ? 'on' : '') + '" data-fav="' + escapeHtml(t.id) + '">' +
(isFav ? '★ 已收藏' : '☆ 收藏') +
'</button>' +
'<a class="source-link" href="' + escapeHtml(t.source || '#') + '" target="_blank" rel="noopener noreferrer">' +
'查看原始出处 ↗' +
'</a>' +
'</div>' +
'</div>' +
'</div>';
var old = $('#modalMask');
if (old) old.remove();
document.body.insertAdjacentHTML('beforeend', html);
document.body.style.overflow = 'hidden';
}
function closeDetail() {
var mask = $('#modalMask');
if (mask) mask.remove();
document.body.style.overflow = '';
}
/* ---------- 收藏切换 ---------- */
function toggleFav(id) {
var idx = state.favs.indexOf(id);
if (idx > -1) {
state.favs.splice(idx, 1);
} else {
state.favs.push(id);
}
saveFavs(state.favs);
updateFavCount();
renderCards();
// 弹窗内的按钮也同步
var modalBtn = $('#modalMask .fav-btn');
if (modalBtn) {
var on = state.favs.indexOf(id) > -1;
modalBtn.classList.toggle('on', on);
modalBtn.textContent = on ? '★ 已收藏' : '☆ 收藏';
}
}
function updateFavCount() {
var el = $('#favCount');
if (el) el.textContent = state.favs.length;
}
/* ---------- 事件绑定 ---------- */
function bindEvents() {
// 分类
$('#sections').addEventListener('click', function (e) {
var btn = e.target.closest('[data-section]');
if (!btn) return;
state.section = btn.getAttribute('data-section');
renderSections();
renderCards();
});
// 搜索
var searchInput = $('#search');
var timer = null;
searchInput.addEventListener('input', function (e) {
clearTimeout(timer);
var val = e.target.value;
timer = setTimeout(function () {
state.keyword = val;
renderCards();
}, 150);
});
// 排序
$('#sort').addEventListener('change', function (e) {
state.sort = e.target.value;
renderCards();
});
// 只看收藏
$('#onlyFav').addEventListener('click', function (e) {
state.onlyFav = !state.onlyFav;
e.currentTarget.classList.toggle('on', state.onlyFav);
renderCards();
});
// 卡片区域:点击卡片展开 / 收藏
$('#cards').addEventListener('click', function (e) {
var favBtn = e.target.closest('[data-fav]');
if (favBtn) {
e.stopPropagation();
toggleFav(favBtn.getAttribute('data-fav'));
return;
}
var card = e.target.closest('.card');
if (card) {
openDetail(card.getAttribute('data-id'));
}
});
// 弹窗关闭(事件委托,因弹窗是后插入的)
document.addEventListener('click', function (e) {
if (e.target.id === 'modalMask' || e.target.id === 'modalClose') {
closeDetail();
return;
}
var favBtn = e.target.closest('#modalMask .fav-btn');
if (favBtn) {
toggleFav(favBtn.getAttribute('data-fav'));
}
});
// ESC 关闭弹窗
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') closeDetail();
});
// 返回顶部
$('#backTop').addEventListener('click', function () {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
window.addEventListener('scroll', function () {
var btn = $('#backTop');
btn.classList.toggle('show', window.scrollY > 400);
});
}
/* ---------- 启动 ---------- */
function init() {
renderSections();
renderCards();
updateFavCount();
bindEvents();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();

672
data.js Normal file
View File

@ -0,0 +1,672 @@
/**
* 天涯神贴 · 经典合集数据
* 内容整理自公开网络资料,仅作展示与怀旧用途。
* 标记「已应验」的预测,仅为网友整理后的看法,不构成任何投资或生活建议。
* 多部经典作品最初即在天涯连载发轫,后出版成书,这里一并收录并标注出处。
*/
window.SHEN_TIE = [
/* =========================================================
* 一、经济金融(7 篇)
* ========================================================= */
{
id: 'kk-fangjia',
title: '2010年房地产调控已经拉开序幕',
author: 'kkndme',
authorAlias: 'KK大神',
section: '经济金融',
year: 2010,
hot: 99,
verified: true,
tags: ['房地产', '货币', '宏观'],
summary:
'以货币发行制度切入,系统推演了中国房地产的运行逻辑:房价本质是货币现象,调控真实目的是稳预期而非降房价,一线城市长期看涨。十年后大部分预测被网友认为「弹无虚发」。',
content: [
'房价问题,归根结底是一个货币问题。只要你还在用人民币,你就逃不开这个问题的辐射半径。',
'调控的本质,从来不是把房价打下来,而是把上涨的节奏控制在可承受范围内,防止泡沫失控,也防止信心崩塌。',
'一线城市会长期坚挺,因为稀缺资源永远向头部集中;三四线城市则取决于人口净流出与库存的博弈。',
'当所有人都觉得「这次不一样」的时候,往往就是最危险的时候;而真正考验人的,是预言成真之后你有没有提前下车。',
],
source: 'https://github.com/kkndmetianya/kkndme_tianya',
},
{
id: 'chan-108',
title: '教你炒股票 108 课',
author: '缠中说禅',
authorAlias: '缠师',
section: '经济金融',
year: 2007,
hot: 98,
verified: false,
tags: ['股市', '缠论', '技术分析'],
summary:
'2006—2008 年连载的股市操作体系,后世称为「缠论」。以中枢、走势必完美、背驰、级别、买卖点等概念,构建了一套自洽的技术分析框架,至今仍有大量追随者。',
content: [
'就在买点买,卖点卖。买点并不一定是一个点、一个价位;级别越大,可以容忍的区间越大。',
'不要在以巨量大阴线构造顶部的下跌反抽中介入,这是投资中的大忌。',
'要养成绝对不追高的好习惯,不要在所有均线都向下发散时买股票,风险太大。',
'市场里没有神,只有概率。你能做的,是把每次出手的胜率和赔率算清楚,然后重复执行。',
],
source: 'https://chzhshch.blog/',
},
{
id: 'jinrongshibu',
title: '金融三部曲',
author: '佚名',
authorAlias: '金融老饕',
section: '经济金融',
year: 2011,
hot: 88,
verified: false,
tags: ['金融危机', '货币', '监管'],
summary:
'2011 年发表的长篇连载,从货币发行、信用扩张讲到金融危机的传导与监管博弈。被网友与 KK 大神、缠中说禅并列为天涯金融类「三大神贴」。',
content: [
'金融创新的本质,很多时候就是把风险,从看得见的地方搬到看不见的地方。',
'危机从来不是突然发生的,它只是在某个清晨,被一个人捅破了那层窗户纸。',
'货币的水,放出去容易,收回来——从来没有不疼的。',
'看懂监管的意图,比看懂K线更重要,因为规则是游戏的前提。',
],
source: 'https://cj.sina.com.cn/articles/view/7857201856/1d45362c0019067t66',
},
{
id: 'dapeng',
title: '大鹏金翅明王·金融观察合集',
author: '大鹏金翅明王',
authorAlias: '大鹏',
section: '经济金融',
year: 2010,
hot: 90,
verified: false,
tags: ['金融', '房价', '宏观经济'],
summary:
'与 kkndme、缠中说禅并列的天涯财经大神,长期撰写宏观经济与房价走势分析。脱水合集在网络上流传甚广,被称为「读懂中国财富逻辑的入门读物」。',
content: [
'看经济,别只看当下,要看周期;看周期,别只看数字,要看人心。',
'财富不会消失,它只会换一种方式,从一群人的口袋,流进另一群人的口袋。',
'泡沫不可怕,可怕的是你不知道自己站在泡沫的哪一段。',
'多数人亏钱,不是因为看不懂行情,而是控制不住自己的手。',
],
source: 'https://github.com/als3453/Collection_TianYa',
},
{
id: 'beiwang-didu',
title: '北望帝都·房价长期预测',
author: '佚名',
authorAlias: '北望',
section: '经济金融',
year: 2009,
hot: 86,
verified: true,
tags: ['房价', '北京', '预测'],
summary:
'一篇大胆给出具体数字的房价预测帖,断言帝都房价将在十年内迈上新台阶。多年后回看,其判断方向与时间点被网友反复翻出,奉为「敢说且说中」的代表。',
content: [
'预测房价,赌的不是运气,是你对这座城市的未来有多深的判断。',
'一线城市的房子,买的不只是砖瓦,是这座城市的入场券。',
'当全社会的钱都在往一个池子里涌,你说它会不会涨?',
'事后诸葛亮谁都会当,但在众人犹豫时敢下注,才是真本事。',
],
source: 'https://tianya.im/',
},
{
id: 'chaofangren',
title: '一个炒房人的终极预测',
author: '佚名',
authorAlias: '炒房客',
section: '经济金融',
year: 2012,
hot: 83,
verified: false,
tags: ['炒房', '实操', '楼市'],
summary:
'以亲历者视角,拆解炒房的资金杠杆、选筹逻辑与退出节奏。区别于宏观分析,这篇更像一份「实战手册」,真金白银堆出来的经验,读起来格外刺骨。',
content: [
'炒房的第一步不是看房,是算账——算得清自己的现金流,才能扛过调控的寒冬。',
'杠杆是天使也是魔鬼,用好了翻倍,用错了归零。',
'买房看地段,卖房看时机;多数人死在「不舍得卖」这四个字上。',
'这一行没有秘密,只有不敢说的真相。',
],
source: 'https://tianya.im/t.php?id=6921',
},
{
id: 'jiuge',
title: '九哥·读懂中国经济底牌',
author: '九哥',
authorAlias: '九哥',
section: '经济金融',
year: 2013,
hot: 80,
verified: false,
tags: ['宏观', '货币', '洞察'],
summary:
'天涯财经板块的另一位代表人物,擅长把枯燥的宏观数据讲成大白话。其系列帖帮助无数普通读者第一次理解了 M2、地方债、土地财政这些概念。',
content: [
'经济学不难,难的是有人故意把它讲得让你听不懂。',
'看不懂新闻里的「适度宽松」,你就看不懂自己的钱包。',
'每一轮放水,都在悄悄重新分配你手里的购买力。',
'普通人能做的,是在潮水来之前,先找好自己的船。',
],
source: 'https://zhuanlan.zhihu.com/p/695576106',
},
/* =========================================================
* 二、莲蓬鬼话(8 篇)
* ========================================================= */
{
id: 'guichuideng',
title: '鬼吹灯(连载起源)',
author: '天下霸唱',
authorAlias: '霸唱',
section: '莲蓬鬼话',
year: 2006,
hot: 97,
verified: false,
tags: ['盗墓', '探险', '连载'],
summary:
'中国盗墓小说开山之作,最早即在天涯「莲蓬鬼话」板块连载。胡八一、王胖子、Shirley 杨的铁三角与十六字阴阳风水秘术,后来被改编为多部现象级影视剧。',
content: [
'发丘印,摸金符,搬山卸岭寻龙诀。',
'人点烛,鬼吹灯,勘舆倒斗觅星峰。',
'传说归传说,这是科学;但有些事情,科学也未必解释得清楚。',
'进了古墓,就把命别在裤腰带上——这句话,从来都不是吓唬人。',
],
source: 'https://www.zhihu.com/question/655716710',
},
{
id: 'daoshi',
title: '我当道士那些年',
author: '崔走召',
authorAlias: '走召',
section: '莲蓬鬼话',
year: 2011,
hot: 90,
verified: false,
tags: ['道士', '灵异', '自述'],
summary:
'以第一人称讲述从小被爷爷带上道、行走江湖捉鬼驱邪的经历。将民俗、科仪、江湖切口与悬疑叙事揉在一起,真真假假,是「莲蓬鬼话」最具代表性的自述体长帖之一。',
content: [
'这世上,有些东西你信则有,不信——它该来还是会来。',
'道士不度无缘之人,这「缘」字,讲究的是天时地利人和缺一不可。',
'我走过的路越多,就越明白一个道理:人比鬼可怕,人心比阴宅还深。',
'金盆洗手那天,我师傅说,这辈子积的德,够你下辈子接着用了。',
],
source: 'https://www.huxiu.com/article/361277.html',
},
{
id: 'shisihunshou',
title: '十四年猎鬼人',
author: '匿名',
authorAlias: '猎鬼人',
section: '莲蓬鬼话',
year: 2010,
hot: 92,
verified: false,
tags: ['走阴', '红衣', '鬼压床'],
summary:
'一位自称「金盆洗手」的从业者,讲述十四年里走阴、遇红衣、解鬼压床等亲历事件。文字冷静克制,细节真实到让人后背发凉,被奉为灵异帖「天花板」之一。',
content: [
'我金盆洗手了,所以有些事,现在才敢讲出来。',
'真正吓人的,从来不是狰狞的面孔,而是那张再普通不过、却对你笑的脸。',
'走阴的人有一条铁律:只看不碰,碰了,就要拿东西来还。',
'红衣的事,我能讲三天三夜,但每讲一次,夜里就睡不安稳。',
],
source: 'https://www.bilibili.com/video/BV1HHcbeLEsH/',
},
{
id: 'mingjing',
title: '山上有神仙——寻仙修仙真实经历',
author: '明镜照虚行',
authorAlias: '明镜',
section: '莲蓬鬼话',
year: 2012,
hot: 80,
verified: false,
tags: ['修仙', '寻仙', '自述'],
summary:
'作者讲述进山寻仙、接触修行圈层的见闻。介于游记、自述与志怪之间,新奇震撼又不失克制,引发了关于「这个世界到底还有没有另一种可能」的长久讨论。',
content: [
'山上有神仙——这句话,我原本也是不信的。',
'真正的高人,从来不在你找得到的地方;但也许,他一直在你身边。',
'修不修得成不好说,但这趟山,确实让我看清了一些从前看不见的东西。',
'有些事,你信不信是一回事,遇没遇到过是另一回事。',
],
source: 'https://www.tianya.im/?cid=4',
},
{
id: 'xizang-jinshu',
title: '西藏禁书',
author: '小撒',
authorAlias: '小撒',
section: '莲蓬鬼话',
year: 2006,
hot: 84,
verified: false,
tags: ['灵异', '悬疑', '连载'],
summary:
'2006 年起在莲蓬鬼话连载的灵异悬疑长篇,围绕一本神秘禁书展开,融合宗教、历史与超自然元素。气氛营造极佳,被老读者列为「深夜不敢独自看」的经典之一。',
content: [
'有些书,写出来就不是给人看的;有些字,读出来就不该读出声。',
'禁,往往不是因为内容可怕,而是因为内容太真。',
'当科学与信仰走到尽头,中间那块地带,最是迷人。',
'雪域高原的秘密,比海拔更深。',
],
source: 'https://www.huxiu.com/article/361277.html',
},
{
id: 'binyiguan',
title: '我在殡仪馆工作的日子',
author: '匿名',
authorAlias: '夜班人',
section: '莲蓬鬼话',
year: 2011,
hot: 82,
verified: false,
tags: ['殡仪馆', '职业', '纪实'],
summary:
'一位殡仪馆夜班员工的工作见闻录。没有刻意吓人的鬼怪,更多的是对生死边界的冷静注视,以及对「体面告别」这件事的温柔理解,读着读着眼眶会热。',
content: [
'我送走的人,比认识的人还多。',
'在这里久了你会明白:能好好说一句再见,本身就是一种福分。',
'最安静的,从来不是夜晚,而是清晨推出去的那张床。',
'活人的世界很吵,死人的世界很轻——我都见识过。',
],
source: 'https://zhuanlan.zhihu.com/p/635015746',
},
{
id: 'zouyinren',
title: '民间怪谈录之走阴人',
author: '佚名',
authorAlias: '走阴人',
section: '莲蓬鬼话',
year: 2010,
hot: 79,
verified: false,
tags: ['走阴', '民间', '志怪'],
summary:
'讲述民间「走阴人」行走阴阳、通晓鬼神的传承与禁忌。扎根乡土民俗,把口口相传的老规矩写成了故事,有种旧时光里才有的神秘感与人情味。',
content: [
'走阴人有三不问:不问寿数,不问因果,不问来路。',
'阴阳本是一张纸的两面,翻过去容易,翻回来难。',
'老辈人留下的规矩,听着迷信,其实都是拿命换来的。',
'护送一个人回家,不管是活路还是阴路,都得尽心。',
],
source: 'https://baike.baidu.com/item/%E6%B0%91%E9%97%B4%E6%80%AA%E8%B0%88%E5%BD%95%E4%B9%8B%E8%B5%B0%E9%98%B4%E4%BA%BA/61785836',
},
{
id: 'lingyituteng',
title: '莲蓬鬼话之灵异图腾',
author: '佚名',
authorAlias: '绘图者',
section: '莲蓬鬼话',
year: 2009,
hot: 75,
verified: false,
tags: ['图腾', '灵异', '连载'],
summary:
'以「图腾」为线索串联起一个个灵异短篇,作者用独特的视角把符号、图腾与离奇事件编织在一起。情节引人入胜,是莲蓬鬼话里少见的「单元剧」式长帖。',
content: [
'每一个图腾背后,都藏着一个不肯走的灵魂。',
'符号不会说话,但它会等——等到那个能看懂它的人出现。',
'你以为那只是个图案,其实它一直在看你。',
'画下来的东西,有时候比写下来的更危险。',
],
source: 'https://www.tianya.im/?cid=4',
},
/* =========================================================
* 三、人文历史(5 篇)
* ========================================================= */
{
id: 'mingchaonaxieshier',
title: '明朝那些事儿',
author: '当年明月',
authorAlias: '当年明月',
section: '人文历史',
year: 2006,
hot: 99,
verified: false,
tags: ['明史', '连载', '现象级'],
summary:
'中国网络写作史上的现象级作品,最初在天涯「煮酒论史」连载,把枯燥的明史写成了一部引人入胜的「心灵史」。作者从海关小职员一路写到千万级畅销书作家。',
content: [
'历史原来可以这样写,也可以这样读。',
'所有的悲剧,以喜剧开始;所有的喜剧,以悲剧结束。',
'所谓百折不挠、所谓坚持不懈,其实不过是因为——别无选择。',
'成功只有一个——按照自己的方式,去度过人生。',
],
source: 'https://zhuanlan.zhihu.com/p/2047399463874978324',
},
{
id: 'shanggushi',
title: '神奇神秘的华夏上古史',
author: '星河璀璨777',
authorAlias: '星河',
section: '人文历史',
year: 2009,
hot: 85,
verified: false,
tags: ['史前文明', '神话', '脑洞'],
summary:
'从神话、考古与「脑洞」交织的视角,重新解读华夏上古史与可能的史前文明。逻辑自洽、引经据典,读着读着就忍不住想「如果都是真的呢」,是煮酒论史的长帖代表。',
content: [
'我们的神话里,藏着太多「不像编出来」的细节:洪水、天柱、十日并出……',
'如果史前真的存在过一轮高度文明,那它消失的方式,本身就是最大的谜。',
'不要急着说这是迷信——科学的尽头,往往就是另一门学问的起点。',
'把所有神话连起来读,你会发现它们像是在讲同一个故事的不同版本。',
],
source: 'https://www.tianya.im/?cid=4',
},
{
id: 'liuxuedeshitu',
title: '流血的仕途',
author: '曹昇',
authorAlias: '曹三公子',
section: '人文历史',
year: 2007,
hot: 87,
verified: false,
tags: ['李斯', '秦史', '权谋'],
summary:
'讲述李斯从一介布衣到大秦丞相的跌宕一生。文笔华丽而锋利,被网友称为「天涯历史帖里文笔最好的作品」,读完会对「读书改变命运」有全新的理解。',
content: [
'李斯一生,都在证明一件事:布衣也可以,只是要付出血的代价。',
'仕途这条路,流的不止是汗,还有同僚的血。',
'一个人能走多远,有时候取决于他敢不敢背弃昨天的自己。',
'功名利禄到头来一场空,可过程的壮烈,足以写成史诗。',
],
source: 'https://www.sina.cn/news/detail/5305116447999668.html',
},
{
id: 'jieguan',
title: '假如历史可以重来:明朝那些假设',
author: '佚名',
authorAlias: '煮酒客',
section: '人文历史',
year: 2010,
hot: 76,
verified: false,
tags: ['明史', '假设', '讨论'],
summary:
'在「煮酒论史」引发热议的讨论帖:从土木堡之变到崇祯末路,逐个推演「如果当时换一个选择,历史会怎样」。评论区众说纷纭,是天涯「神仙评论区」的缩影。',
content: [
'历史没有如果,但思考「如果」,能让我们更懂为什么走到了现在。',
'崇祯不是不勤政,他是太想一把抓,反而什么都没抓住。',
'一个王朝的崩塌,从来不是因为最后那一场雪,而是雪下积了多年的火。',
'假设的意义不在于改写历史,而在于看清历史的来路与去路。',
],
source: 'https://www.tianya.im/',
},
{
id: 'helianbobu',
title: '赫连勃勃大王·帝国最后的荣耀',
author: '赫连勃勃大王',
authorAlias: '赫连勃勃大王',
section: '人文历史',
year: 2008,
hot: 81,
verified: false,
tags: ['明清史', '通俗史', '连载'],
summary:
'煮酒论史的代表写手之一,以通俗有力的笔触重写明清史。其连载帖当年与《明朝那些事儿》并驾齐驱,虽风格迥异,却各自圈粉无数,共同撑起了天涯历史板块的黄金时代。',
content: [
'写历史,不是为了掉书袋,是为了让今天的人看得懂昨天。',
'帝国的黄昏,从来不缺壮烈,缺的是看清黄昏的人。',
'每一个王朝的背影里,都站着一群回不了头的人。',
'历史是任人打扮的小姑娘——但真懂的人,能看出她本来的样子。',
],
source: 'https://www.zhihu.com/question/283883115',
},
/* =========================================================
* 四、小说连载 / 舞文弄墨(6 篇)
* ========================================================= */
{
id: 'chengdujinye',
title: '成都,今夜请将我遗忘',
author: '慕容雪村',
authorAlias: '慕容雪村',
section: '小说连载',
year: 2002,
hot: 93,
verified: false,
tags: ['都市', '青春', '迷茫'],
summary:
'天涯舞文弄墨板块的成名作之一,写一群成都青年的欲望、迷茫与背叛。文字冷峻又迷醉,掀起了「城市青春残酷物语」的写作热潮,被视为网络文学早期的里程碑。',
content: [
'城市很大,大到可以装下所有的梦想,也装得下所有的堕落。',
'我们这一代人,好像什么都有,又好像什么都没有。',
'青春是一场宿醉,醒来时,该走的都走了。',
'成都的夜很软,软到让人忘了自己是谁。',
],
source: 'https://zhuanlan.zhihu.com/p/627770103',
},
{
id: 'dongbeiwangshi',
title: '东北往事:黑道风云二十年',
author: '孔二狗',
authorAlias: '孔二狗',
section: '小说连载',
year: 2007,
hot: 91,
verified: false,
tags: ['黑道', '东北', '现实主义'],
summary:
'天涯连载后结集出版,全景式书写东北某城二十年间的江湖风云。方言、市井、暴力与义气交织,粗粝中见真性情,被誉为「中国黑帮小说的扛鼎之作」。',
content: [
'江湖不是打打杀杀,江湖是人情世故。',
'在那个年代,混,有时候不是选择,是活法。',
'义气这两个字,值钱的时候值命,不值钱的时候一文不值。',
'二十年的风云,到头来,不过是茶余饭后的一段旧事。',
],
source: 'https://www.vipc6.com/18184.html',
},
{
id: 'dulala',
title: '杜拉拉升职记',
author: '李可',
authorAlias: '李可',
section: '小说连载',
year: 2007,
hot: 86,
verified: false,
tags: ['职场', '女性', '外企'],
summary:
'网络连载后引爆职场的现象级小说,讲 HR 杜拉拉在外企的升迁之路。被誉为「中国白领必读的职场修炼手册」,后来改编成电影、电视剧,带火了一整个职场题材。',
content: [
'在外企,能干的不如会说的,会说的不如懂规则的。',
'升职从来不是因为你做了多少,而是因为关键的人看到了你做了多少。',
'职场没有童话,只有把委屈嚼碎了咽下去的本事。',
'聪明的下属,让领导做选择题,而不是问答题。',
],
source: 'https://baike.baidu.com/item/%E6%9D%9C%E6%8B%89%E6%8B%89%E5%8D%87%E8%81%8C%E8%AE%B0/24011',
},
{
id: 'fuchen',
title: '浮沉',
author: '崔曼莉',
authorAlias: '崔曼莉',
section: '小说连载',
year: 2008,
hot: 78,
verified: false,
tags: ['职场', '商战', '外企'],
summary:
'与《杜拉拉升职记》齐名的女性职场小说代表作,聚焦外企销售与商战博弈。格局更大、刀光剑影更烈,被网友称为「职场小说里最有格局的一部」。',
content: [
'商场如战场,浮的不仅是业绩,还有人心。',
'在利益面前,所有的关系都要重新排队。',
'能在风浪里站稳的人,不是因为没摔倒,是因为摔倒了还记得抓缆绳。',
'浮沉之间,看清的不是对手,是自己。',
],
source: 'https://www.chinawriter.com.cn/n1/2023/0314/c404027-32643992.html',
},
{
id: 'tiancaizuozuo',
title: '精神病人的世界(天才在左 疯子在右)',
author: '高铭',
authorAlias: '高铭',
section: '小说连载',
year: 2009,
hot: 89,
verified: false,
tags: ['访谈', '心理', '哲思'],
summary:
'原帖名《精神病人的世界》,在天涯连载后出版为《天才在左,疯子在右》。以访谈形式记录精神病患的独特世界观,颠覆常识,让人分不清究竟谁是病人。',
content: [
'也许,他们看到的世界,比我们看到的更真实。',
'天才和疯子,有时候只隔着一层窗户纸。',
'当我试图理解他们时,我开始怀疑自己。',
'所谓正常,不过是多数人达成的一种默契。',
],
source: 'https://www.sina.cn/news/detail/5304373062140159.html',
},
{
id: 'gunbazu',
title: '滚蛋吧!肿瘤君',
author: '熊顿',
authorAlias: '熊顿',
section: '小说连载',
year: 2011,
hot: 88,
verified: false,
tags: ['抗癌', '漫画', '治愈'],
summary:
'漫画师熊顿记录自己抗癌历程的连载,用诙谐画笔对抗病魔。笑着笑着就哭了,后来改编为同名电影,那句「滚蛋吧肿瘤君」温暖了无数正在经历至暗时刻的人。',
content: [
'生活给我一记重拳,我就画个鬼脸还回去。',
'生病不可怕,可怕的是丢了那股子劲儿。',
'能笑着面对的事,就别哭着扛。',
'别等失去了才懂,平凡的日子有多珍贵。',
],
source: 'https://zhuanlan.zhihu.com/p/627770103',
},
/* =========================================================
* 五、成长 / 社会人文(4 篇)
* ========================================================= */
{
id: 'chengzhang',
title: '写给年轻人的 36 句实话',
author: '佚名',
authorAlias: '过来人',
section: '成长箴言',
year: 2009,
hot: 82,
verified: false,
tags: ['成长', '人生', '经验'],
summary:
'一位「过来人」写给年轻人的短句集,涵盖职场、人际、金钱、婚姻。话糙理不糙,直白到有些刺耳,却被无数人截图转发,称「每过几年重读,都有新感受」。',
content: [
'别在最该赚钱的年纪,把所有时间都用来合群。',
'成年人的体面,90% 是银行卡余额给的,剩下 10% 是不麻烦别人。',
'真正能帮你的,永远是那个愿意指出你缺点的人,而不是天天夸你的。',
'先把本事练好,人脉自然会来找你;顺序反了,你认识谁都没用。',
],
source: 'https://zhuanlan.zhihu.com/p/635015746',
},
{
id: 'xiancheng',
title: '读懂中国县城',
author: '佚名',
authorAlias: '县城观察者',
section: '社会人文',
year: 2013,
hot: 84,
verified: false,
tags: ['县城', '社会', '观察'],
summary:
'以一个县城为样本,剖析熟人社会的权力结构、人情世故与生存法则。被网友称为「最接地气的社会学」,看完会对「中国到底是怎么运转的」多一层理解。',
content: [
'县城是一个熟人社会,谁家什么底,三天之内全城都知道。',
'在这里,关系就是生产力,你办不成的事,熟人一个电话就办成了。',
'看懂一个县城,你就看懂了大半个中国。',
'别嫌它小,这里藏着最真实的人间。',
],
source: 'https://www.sohu.com/a/692178613_121740327',
},
{
id: 'jiemu',
title: '一个中国农妇眼里的真实中国',
author: '佚名',
authorAlias: '乡野笔记',
section: '社会人文',
year: 2012,
hot: 77,
verified: false,
tags: ['乡村', '纪实', '观察'],
summary:
'从一位农村妇女的视角切入,记录被宏大叙事忽略的乡村日常与朴素智慧。没有华丽的辞藻,只有扎扎实实的烟火气,让人看到「另一面的中国」。',
content: [
'城里的高楼再亮,也照不进村口那盏路灯。',
'日子是过出来的,不是算出来的——庄稼人最懂这个理。',
'城里人羡慕的乡愁,是农妇们想逃出的日常。',
'接地气的话,往往最戳心。',
],
source: 'https://zhuanlan.zhihu.com/p/635015746',
},
{
id: 'chengshishengcun',
title: '底层年轻人如何在城市翻身',
author: '佚名',
authorAlias: '城市观察者',
section: '成长箴言',
year: 2014,
hot: 79,
verified: false,
tags: ['逆袭', '城市', '认知'],
summary:
'一篇当年引发无数共鸣的长帖,冷静拆解普通年轻人在城市扎根的现实路径与认知陷阱。不灌鸡汤,只摆事实,被很多人称作「少走十年弯路的清醒剂」。',
content: [
'逆袭的第一步,是先承认自己的起点,而不是幻想天降好运。',
'城市的门槛一直在变,真正的本事是让自己涨得比门槛快。',
'信息差就是命运差,你知道的多一步,路就宽一寸。',
'没有背景的人,只能靠选择对赛道来补。',
],
source: 'https://zhuanlan.zhihu.com/p/635015746',
},
/* =========================================================
* 六、玄学命理 / 民俗(2 篇)
* ========================================================= */
{
id: 'lingshou',
title: '民间灵宠灵草杂谈',
author: '佚名',
authorAlias: '养灵人',
section: '玄学命理',
year: 2008,
hot: 78,
verified: false,
tags: ['民俗', '宠物', '草木'],
summary:
'汇集民间关于养灵宠(猫、龟、鱼等)、识灵草的讲究与禁忌。充满市井烟火气,又夹杂几分玄妙,是网友爱看的「生活化玄学」典型,常被收录进各类神贴合集。',
content: [
'猫是灵物,养得好,它替你看家;养得不好,它替别人看你。',
'老一辈说,有些草长在哪、何时采,都是有讲究的,错了一点就不灵。',
'万物皆有灵,你善待它,它自然也护着你——这道理,人和花草都一样。',
'别小看门口那盆绿植,养对了,比你想象的还有用。',
],
source: 'https://zhuanlan.zhihu.com/p/635015746',
},
{
id: 'minjianfengshui',
title: '民间风水先生杂谈',
author: '佚名',
authorAlias: '风水先生',
section: '玄学命理',
year: 2009,
hot: 74,
verified: false,
tags: ['风水', '民俗', '堪舆'],
summary:
'一位自称从业者的网友,讲述民间风水堪舆的规矩、行话与亲历案例。不故弄玄虚,更像一本「江湖见闻录」,把堪舆术背后的环境心理学与人情世故讲得通透。',
content: [
'风水这行,三分术,七分心——心术不正,再好的局也立不住。',
'所谓藏风聚气,说到底,是让人住得舒服、踏实。',
'先生看宅,宅也看人;人不正,宅再吉也压不住。',
'老手艺里藏着的,其实是几百年的生活智慧。',
],
source: 'https://zhuanlan.zhihu.com/p/635015746',
},
];

66
index.html Normal file
View File

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>天涯神贴 · 经典合集</title>
<meta name="description" content="天涯社区经典神贴合集:KK大神房价预言、缠中说禅教你炒股票、莲蓬鬼话、煮酒论史等,一个静态怀旧收藏站。" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&display=swap" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- ====== 顶栏 ====== -->
<header class="topbar">
<div class="brand">
<span class="seal">涯</span>
<span>天涯神贴 <small>· 经典合集</small></span>
</div>
<div class="search-wrap">
<span class="icon">🔍</span>
<input id="search" type="search" placeholder="搜索标题 / 作者 / 标签…" autocomplete="off" />
</div>
<div class="topbar-actions">
<select id="sort" class="sort-select" title="排序方式">
<option value="hot">热度优先</option>
<option value="year-desc">年代新→旧</option>
<option value="year-asc">年代旧→新</option>
</select>
<button id="onlyFav" class="fav-toggle" title="只看收藏">★ 收藏 <span id="favCount">0</span></button>
</div>
</header>
<!-- ====== Hero ====== -->
<section class="hero">
<h1>天涯 · 神贴</h1>
<p class="sub">那些年,我们在天涯论坛熬夜追过的帖子。<br />金融、缠论、鬼话、煮酒——这里收藏着中文互联网的旧时光。</p>
<p class="meta">共收录 32 篇 · 致敬天涯社区(1999—2023)</p>
</section>
<!-- ====== 工具栏 ====== -->
<div class="toolbar">
<span class="label">板块:</span>
<div id="sections" class="sections" style="display:contents"></div>
<span class="count-line" id="count">— 篇</span>
</div>
<!-- ====== 卡片列表 ====== -->
<main class="grid" id="cards"></main>
<!-- ====== 页脚 ====== -->
<footer class="footer">
<p>本站为静态怀旧收藏页,内容整理自公开网络资料,仅供学习交流。</p>
<p class="dim">天涯社区已于 2023 年关停,愿这些文字得以留存。 © 天涯神贴收藏站</p>
</footer>
<!-- ====== 返回顶部 ====== -->
<button id="backTop" class="back-top" title="回到顶部" aria-label="回到顶部">↑</button>
<!-- ====== 脚本 ====== -->
<script src="data.js"></script>
<script src="app.js"></script>
</body>
</html>

540
style.css Normal file
View File

@ -0,0 +1,540 @@
/* ==========================================================
天涯神贴 · 经典合集
风格:怀旧宣纸 + 朱红印章,致敬老 BBS
========================================================== */
:root {
--paper: #f4ecd8; /* 宣纸底 */
--paper-2: #efe5cc; /* 卡片底 */
--paper-3: #e8dcbb; /* 边线/分隔 */
--ink: #2b2420; /* 墨色正文 */
--ink-2: #5c5048; /* 次级文字 */
--ink-3: #8a7e6f; /* 弱化文字 */
--vermilion: #b23b2e; /* 朱砂红 */
--vermilion-d: #8f2e22; /* 深朱红 */
--gold: #b8860b; /* 印章金 */
--seal: #c0392b; /* 印章红 */
--shadow: 0 2px 8px rgba(80, 50, 20, 0.12);
--shadow-lg: 0 10px 40px rgba(80, 50, 20, 0.25);
--radius: 4px;
--serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Source Han Serif SC", serif;
--sans: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--serif);
color: var(--ink);
background-color: var(--paper);
/* 宣纸纹理:细密横纹 + 微噪点 */
background-image:
repeating-linear-gradient(0deg, rgba(120, 90, 50, 0.03) 0px, rgba(120, 90, 50, 0.03) 1px, transparent 1px, transparent 4px),
radial-gradient(circle at 20% 30%, rgba(178, 59, 46, 0.04), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(184, 134, 11, 0.04), transparent 40%);
line-height: 1.75;
-webkit-font-smoothing: antialiased;
}
a { color: var(--vermilion); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ---------- 顶栏 ---------- */
.topbar {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
gap: 16px;
padding: 12px 28px;
background: rgba(244, 236, 216, 0.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--paper-3);
box-shadow: 0 1px 0 rgba(80, 50, 20, 0.04);
}
.brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 20px;
letter-spacing: 2px;
white-space: nowrap;
}
.brand .seal {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 4px;
background: var(--seal);
color: #fff;
font-size: 18px;
font-weight: 700;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
transform: rotate(-4deg);
}
.brand small {
font-size: 12px;
font-weight: 400;
color: var(--ink-3);
letter-spacing: 0;
}
.search-wrap {
flex: 1;
max-width: 460px;
position: relative;
}
.search-wrap input {
width: 100%;
padding: 10px 14px 10px 36px;
font-family: var(--serif);
font-size: 14px;
color: var(--ink);
background: rgba(255, 255, 255, 0.55);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
outline: none;
transition: border-color 0.2s, background 0.2s;
}
.search-wrap input:focus {
border-color: var(--vermilion);
background: #fffaf0;
}
.search-wrap .icon {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
color: var(--ink-3);
font-size: 15px;
}
.topbar-actions {
display: flex;
align-items: center;
gap: 8px;
}
.sort-select {
font-family: var(--serif);
font-size: 13px;
color: var(--ink-2);
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: 8px 10px;
cursor: pointer;
outline: none;
}
.fav-toggle {
font-family: var(--serif);
font-size: 13px;
color: var(--ink-2);
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: 8px 12px;
cursor: pointer;
transition: all 0.2s;
}
.fav-toggle:hover { border-color: var(--vermilion); color: var(--vermilion); }
.fav-toggle.on {
background: var(--vermilion);
border-color: var(--vermilion);
color: #fff;
}
/* ---------- Hero ---------- */
.hero {
text-align: center;
padding: 56px 20px 28px;
position: relative;
}
.hero h1 {
margin: 0 0 10px;
font-size: clamp(34px, 6vw, 56px);
font-weight: 900;
letter-spacing: 6px;
color: var(--ink);
position: relative;
display: inline-block;
}
.hero h1::after {
content: "印";
position: absolute;
right: -42px;
top: 6px;
width: 32px;
height: 32px;
background: var(--seal);
color: #fff;
font-size: 16px;
line-height: 32px;
border-radius: 3px;
transform: rotate(6deg);
letter-spacing: 0;
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.hero .sub {
color: var(--ink-2);
font-size: 16px;
letter-spacing: 1px;
margin: 0 auto 14px;
max-width: 640px;
}
.hero .meta {
color: var(--ink-3);
font-size: 13px;
font-family: var(--sans);
}
/* ---------- 分类标签 ---------- */
.toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
max-width: 1080px;
margin: 0 auto 24px;
padding: 0 24px;
}
.toolbar .label {
font-size: 13px;
color: var(--ink-3);
margin-right: 4px;
}
.tag {
font-family: var(--serif);
font-size: 14px;
color: var(--ink-2);
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--paper-3);
border-radius: 999px;
padding: 6px 16px;
cursor: pointer;
transition: all 0.2s;
}
.tag:hover { border-color: var(--vermilion); color: var(--vermilion); }
.tag.active {
background: var(--vermilion);
border-color: var(--vermilion);
color: #fff;
font-weight: 600;
}
.count-line {
margin-left: auto;
font-size: 13px;
color: var(--ink-3);
font-family: var(--sans);
}
/* ---------- 卡片网格 ---------- */
.grid {
max-width: 1080px;
margin: 0 auto;
padding: 0 24px 80px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.empty {
grid-column: 1 / -1;
text-align: center;
color: var(--ink-3);
padding: 80px 20px;
font-size: 15px;
}
.card {
position: relative;
background: var(--paper-2);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: 20px 20px 16px;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
}
.card::before {
/* 卡片左上角朱红短杠,仿印章感 */
content: "";
position: absolute;
top: 0;
left: 20px;
width: 36px;
height: 3px;
background: var(--vermilion);
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--vermilion);
}
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.section-badge {
display: inline-block;
font-size: 12px;
color: var(--vermilion-d);
background: rgba(178, 59, 46, 0.1);
border: 1px solid rgba(178, 59, 46, 0.25);
border-radius: 3px;
padding: 2px 8px;
letter-spacing: 1px;
}
.year {
font-size: 12px;
color: var(--ink-3);
font-family: var(--sans);
}
.verified {
font-size: 11px;
color: #fff;
background: var(--gold);
border-radius: 3px;
padding: 2px 6px;
margin-left: 6px;
letter-spacing: 1px;
}
.title {
margin: 0 0 12px;
font-size: 19px;
font-weight: 700;
line-height: 1.45;
color: var(--ink);
}
.author {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 13px;
}
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--vermilion);
color: #fff;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
}
.avatar.lg { width: 34px; height: 34px; font-size: 16px; }
.author .name { color: var(--ink-2); font-weight: 600; }
.author .dim { color: var(--ink-3); font-family: var(--sans); font-size: 12px; }
.summary {
margin: 0 0 12px;
font-size: 14px;
color: var(--ink-2);
line-height: 1.8;
flex: 1;
}
.tagline { margin-bottom: 14px; }
.chip {
display: inline-block;
font-size: 12px;
color: var(--ink-2);
margin-right: 6px;
background: rgba(255, 255, 255, 0.5);
border-radius: 3px;
padding: 1px 7px;
}
.card-foot {
display: flex;
align-items: center;
gap: 12px;
padding-top: 12px;
border-top: 1px dashed var(--paper-3);
}
.hot {
font-size: 13px;
color: var(--vermilion);
font-family: var(--sans);
}
.fav-btn {
margin-left: auto;
font-family: var(--serif);
font-size: 13px;
color: var(--ink-2);
background: transparent;
border: 1px solid var(--paper-3);
border-radius: 3px;
padding: 4px 10px;
cursor: pointer;
transition: all 0.15s;
}
.fav-btn:hover { border-color: var(--vermilion); color: var(--vermilion); }
.fav-btn.on {
background: rgba(178, 59, 46, 0.1);
border-color: var(--vermilion);
color: var(--vermilion);
}
.read-more {
font-size: 12px;
color: var(--ink-3);
font-family: var(--sans);
}
/* ---------- 详情弹窗 ---------- */
.modal-mask {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(40, 30, 20, 0.55);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 5vh 20px;
overflow-y: auto;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
position: relative;
width: 100%;
max-width: 640px;
background: var(--paper);
border-radius: 6px;
padding: 32px 36px 28px;
box-shadow: var(--shadow-lg);
animation: popUp 0.25s ease;
}
@keyframes popUp {
from { transform: translateY(20px) scale(0.98); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-close {
position: absolute;
top: 14px;
right: 16px;
width: 32px;
height: 32px;
border: none;
background: transparent;
color: var(--ink-2);
font-size: 24px;
cursor: pointer;
line-height: 1;
}
.modal-close:hover { color: var(--vermilion); }
.modal-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.modal-title {
margin: 0 0 16px;
font-size: 26px;
font-weight: 800;
line-height: 1.4;
color: var(--ink);
}
.modal .author { margin-bottom: 18px; }
.modal-summary {
margin: 0 0 18px;
font-size: 15px;
color: var(--ink-2);
line-height: 1.9;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.45);
border-left: 3px solid var(--vermilion);
border-radius: 2px;
}
.quotes {
margin: 18px 0;
}
.quotes p {
position: relative;
margin: 0 0 14px;
padding: 4px 0 4px 18px;
font-size: 15px;
color: var(--ink);
line-height: 1.95;
border-left: 2px solid var(--paper-3);
}
.quotes p::before {
content: "「";
position: absolute;
left: 2px;
top: 4px;
color: var(--vermilion);
font-size: 18px;
}
.modal-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 18px;
border-top: 1px solid var(--paper-3);
}
.source-link {
font-size: 13px;
color: var(--vermilion);
font-family: var(--sans);
}
/* ---------- 返回顶部 ---------- */
.back-top {
position: fixed;
right: 28px;
bottom: 28px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--vermilion);
color: #fff;
border: none;
font-size: 20px;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s, transform 0.25s;
box-shadow: var(--shadow-lg);
z-index: 40;
}
.back-top.show { opacity: 1; pointer-events: auto; }
.back-top:hover { transform: translateY(-3px); }
/* ---------- 页脚 ---------- */
.footer {
text-align: center;
padding: 28px 20px 48px;
color: var(--ink-3);
font-size: 13px;
border-top: 1px dashed var(--paper-3);
margin-top: 20px;
}
.footer p { margin: 4px 0; }
.footer .dim { font-size: 12px; }
/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
.topbar { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
.search-wrap { order: 3; flex-basis: 100%; max-width: none; }
.hero { padding: 36px 16px 20px; }
.hero h1 { letter-spacing: 4px; }
.hero h1::after { right: -36px; width: 26px; height: 26px; font-size: 13px; line-height: 26px; }
.toolbar { padding: 0 14px; }
.count-line { margin-left: 0; flex-basis: 100%; }
.grid { padding: 0 14px 60px; grid-template-columns: 1fr; }
.modal { padding: 28px 22px; }
.modal-title { font-size: 22px; }
.back-top { right: 16px; bottom: 16px; }
}