博客美化教程：手把手教你制作优雅的“人物志”卡片
前言
最近我在博客中开辟了一个新栏目——“Admire”。
为了庄重地记录这些人物，我不想只写一篇普通的流水账文章，而是希望它像一张“人物名片”：平时简洁明了，点击后能展开详细的生平往事。同时，为了尊重图片版权，我还特别设计了杂志风格的悬停版权标识。
今天就分享一下如何在 Hexo (以 Butterfly 主题为例)
中实现这个功能。
效果预览
卡片布局：左图右文，展示姓名、生卒年和荣誉标签。
交互详情：点击卡片底部，平滑展开时间轴风格的生平事迹。
版权保护：鼠标悬停在头像上时，底部优雅浮现图片作者和协议链接。
实现步骤
我们将采用模块化的思路，把样式（CSS）和逻辑（JS）分离，这样以后新建人物页面时，只需要复制
HTML 模板即可。
第一步：编写通用 CSS
在博客根目录 source/css/ 下新建文件
admire.css。
这个文件定义了卡片的布局、黑白滤镜效果、展开动画以及那层“杂志级”的渐变版权遮罩。
123456789101112131415161718192021222324252627282930313233...
Hello World
Welcome to Hexo! This is your very
first post. Check documentation for
more info. If you get any problems when using Hexo, you can find the
answer in troubleshooting or
you can ask me on GitHub.
Quick Start
Create a new post
1$ hexo new "My New Post"
More info: Writing
Run server
1$ hexo server
More info: Server
Generate static files
1$ hexo generate
More info: Generating
Deploy to remote sites
1$ hexo deploy
More info: Deployment