前期,对网站一番魔改,视觉效果全面提升。功能诸如主页轮播图、评论邮件通知、标签页美化、归档页美化、相册、文章推荐等。小改的地方包括页面分享功能、鼠标样式、类知乎卡片页…关于魔改,仁者见仁智者见智,在此记录一下相关功能的具体实现。
PS:本站 已集成以下所有功能,全动态配置,欢迎 star、fork !
主页轮播图
在 /themes/next/layout/_macro/ 目录下,新建 carousel.swig 文件:
carousel.swig在 /themes/next/layout/index.swig 中,找到
1 | {% block content %} |
在其下方引入新建的 carousel.swig 文件:
1 | <!--轮播图--> |
- 在主题配置文件末尾添加:
1 | #Home carousel map, from means link, img means picture |
轮播图相应的实现逻辑,可参考 Bootstrap 官方 Carousel 实现:
可能遇到的问题
- the requested content cannot be loaded. please try again later
如点击轮播图出现
可在 /themes/next/source/js/src/utils.js 的 wrapImageWithFancyBox 方法中增加以下第 8 行代码:
1 | wrapImageWithFancyBox: function () { |
然后,在 carousel.swig 中,为 img 标签加上:
1 | class="nofancybox" |
- 轮播图锚点(被困扰 N 久)
点击轮播图左右导航按钮时,a 标签的 href 会锚点到 myCarousel
处,引起页面滚动。可将 href 属性改成 data-target,如下:
1 | <a class="left carousel-control" data-target="#myCarousel" href="javascript:void(0);" role="button" data-slide="prev"> |
以下是本站 carousel.swig 和图标:
carousel.swig icon-slides注意:部分图片需自己制作,样式微调
valine-admin
刚建站那会,使用了多款评论插件,从 gitalk 到 livere(来必力)到 valine,一路折腾,最终找到了更喜欢的 valine-admin
Valine Admin 是 Valine 评论系统的扩展和增强,主要实现评论邮件通知、评论管理、垃圾评论过滤等功能。支持完全自定义的邮件通知模板,基于 Akismet API 实现准确的垃圾评论过滤
Hexo NexT主题整合步骤如下:
下载 Valine.min.js 文件,放到 /themes/next/source/js/src/ 下,也可以上传到自己的服务器或主机上(或者直接使用别人提供的外链)。
修改 /themes/next/layout/_third-party/comments/valine.swig 代码如下:
1 | {% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %} |
主题配置文件中的 valine 可这样配置:
1 | valine: |
这样就完成 valine 替换,不过文章标题下方的评论数会不显示,这功能作者目前没有实现,只能先隐藏,详细教程可参考:
有关 Valine Admin 邮件通知功能,可参考:
我使用的是国际版 Leancloud,要对应于北京时间,可相应减8小时,例如我是这样配置:
1 | # 北京时间每天早8点检查过去24小时内漏发的通知邮件并补发 |
1 | # 每天早0点到晚23点每隔30分钟访问云引擎 |
可根据后边的『下次执行时间』进行调整。
附上我个人正在使用的邮件模板和邮件主题
MAIL_TEMPLATE_ADMIN:
1 | <div style="border-radius: 10px 10px 10px 10px;font-size:13px; color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);"><div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;"><p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您的<a style="text-decoration:none;color: #ffffff;" href="${SITE_URL}"> 『${SITE_NAME}』 </a>上有了新的评论 </p></div><div style="margin:40px auto;width:90%"><p><strong>"${NICK}"</strong> 发表评论:</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">${COMMENT}</div><p><a style="text-decoration:none; color:#12addb" href="${POST_URL}" target="_blank">[查看详情]</a></p><style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style></div></div> |
MAIL_TEMPLATE:
1 | <div style="border-radius: 10px 10px 10px 10px;font-size:13px;color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);"><div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;"><p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您在<a style="text-decoration:none;color: #ffffff;" href="${SITE_URL}">『${SITE_NAME}』</a>上的留言有新回复啦!!!</p></div><div style="margin:40px auto;width:90%"><p>"<strong>${PARENT_NICK}</strong>" 同学,您曾发表评论:</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">${PARENT_COMMENT}</div><p>"<strong>${NICK}</strong>" 给您的回复如下:</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">${COMMENT}</div><p>您可以点击:<a style="text-decoration:none; color:#12addb" href="${POST_URL}">[回复的完整内容] </a>进行查看。欢迎再次光临<a style="text-decoration:none; color:#12addb" href="${SITE_URL}"> 『${SITE_NAME}』</a>!!!</p><style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style></div></div> |
MAIL_SUBJECT_ADMIN:
1 | 叮咚!『${SITE_NAME}』上有了新评论! |
MAIL_SUBJECT:
1 | ${PARENT_NICK},您在『${SITE_NAME}』上的评论收到了回复 |
另外:点击邮件中的链接跳转至相应评论,可在 /themes/next/layout/_third-party/comments/valine.swig 中添加如下代码:
1 | <script> |
具体效果,可在下方的评论区体验哦~
彩色标签页
在 /themes/next/layout/ 目录下,新增 tag-color.swig 文件,填入如下内容:
1 | <script type="text/javascript"> |
在同级目录的 page.swig 中引入 tag-color.swig
1 | <div class="tag-cloud"> |
hexo 三连,打开 我的标签页 看看效果吧
以下是文章底部的标签样式
1 | /*文章底部标签样式*/ |
代码拷入 /themes/next/source/css/_custom/custom.styl 即可,效果参考文章末尾处的标签。其它自定义标签样式,可参考:
归档页美化
- 修改 /themes/next/layout/_macro/post-collapse.swig 后的代码如下:
1 | {% macro render(post) %} |
主要修改:一是将 post-meta 这个 div 移到前面 header 标签下;二是将所有的 class 属性都加上 my-,例如 my-post-meta,这样改动是为了不影响其它页面引用的样式。
- 在 /themes/next/source/css/_custom/custom.styl 新增如下样式:
1 | /* 归档页样式 began */ |
根据需要调整对应的样式,效果可查看:
相册
相册功能可参考兰州小红鸡,使用的是腾讯云 cos 作为相册存储桶。实名认证后,赠送 50GB 标准存储容量,有效期 6 个月,但是访问或下载对象产生的外网下行流量是单独计费的,可以购买 COS 下行流量包,具体可参考官网。
相册调试开始的这两天,我每天刷掉了 5G 左右的流量,费用大概 5 块钱吧,欠费第二天就被禁用了,需要充值缴费,要么删数据。腾讯嘛,你懂的。虽然流量也不是很贵,但对我这种负债的人来说,还是想想其他办法吧,主要是免费的用惯了,哈哈~
期间也考虑使用七牛云图床,对象存储的官方 SDK 挺全,也能通过 api 获取到图片。主要是不想整这么复杂,再者我还没绑定域名,其融合 CDN 加速域名会在 30 个自然日后自动回收。当然了,它的 CDN-HTTP 流量也是按量收费,貌似没腾讯的贵。基本是类似的一个套路吧。
考虑到自己这相册也不常用,放上些个性化图片就行,无需经常更新,所以就选择用免费的图床链接来实现。完整代码:
index.md部分逻辑参考小红鸡的做法,这里代码做了简化,将图片标题、链接写成 json 格式即可。自定义排序,拷贝代码到你的网站即可看到效果,其他样式按需修改,效果:
文章推荐
文章结束时,开启相关文章推荐功能,会根据文章标签的相关度推荐相关的文章,效果像这样:
- 该功能需要依赖 hexo-related-popular-posts 插件:
1 | npm install hexo-related-popular-posts --save |
- 在 /themes/next/layout/_macro/ 目录下,新建 post-related.swig 文件,内容如下:
1 | {% set popular_posts = popular_posts_json(theme.related_posts.params, post) %} |
在同级别的 post.swig 中 END POST BODY 上方(POST 文章末尾)引入:
1 | <!-- 相关文章推荐 --> |
- 主题配置文件末尾加入如下配置:
1 | # Dependencies: https://github.com/tea3/hexo-related-popular-posts |