hexo-theme-next @modified LRH

Cell

发布于 2022-02-25 16:33:28

2530

发布于 2022-02-25 16:33:28

文章被收录于专栏：Cell的前端专栏

Danger

如无必要，不再更新！（2019.09.13）

今晚我做出了一个慎重的决定，由于博主时间精力有限，需要更多的时间来工作和学习。所以我将放弃对 next 的主题的自定义修改，next 主题官方已经更新到了 7.0+的版本，喜欢 next 主题风格的朋友可以在 github 更新。

我这也算是上古版本了，版本差距实在过大，所以我也将放弃博客使用主题的更新。

以下仍为当前博客使用主题，lib 资源已打包 github。

基于 hexo-theme-next 6.0+ 的 Pisces 模板做的 DIY 扩展性设计（部分兼容 next 其他几种模板）。主要是一些 custom style 还有一些第三方的 js。修改的地方太多也有点小乱就不提 PR 了。

modified 官方 Demo => https://theme-next.org

记录一下折腾过程，以后备份恢复博客也好方便自己。本文之前的美化修改请见 hexo 分类。

主题中若有遗漏第三方插件或应用的 key 及 id 值等请修改为自己对应的值

主要的几个自定义文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

_config.swig #主题配置文件相关账户信息自己注册替换 \layout\custom\head.swig #在头部自定义加入标签 \layout\custom\google_adsense.swig #谷歌广告模块，内有注释暂时弃用 \layout\_layout.swig #主布局 \layout\_macro\post.swig #文章布局 \layout\_macro\post-copyright.swig #文章版权 \layout\_macro\siderbar.swig #侧栏模板 \layout\_third-party\copy-code.swig #复制按钮 \layout\_partials\comments.swig #评论主模板 \layout\_partials\footer.swig #底部模板#该模块在 layout.swig 引入，用于在 body 自定义标签 \layout\_partials\footer_custom.swig #footer 自定义文件 \layout\_third-party\custom.swig #该模块在 layout.swig 引入用于在 body 自定义标签 \source\css\_custom\customs.styl #主要用户自定义样式表 \source\fonts\ #引入了一些我的手写体及外部字体 \scripts\qcloudcdn.js #腾讯云 cos 桶刷新缓存的脚本，不需要可删掉 ^1

初步安装

安装整个改过的主题，然后下载相应的 lib 资源解压放入 source 文件夹

1 2	cd hexo git clone https://github.com/Lruihao/hexo-theme-next themes/next

主题配置文件_config.yml, 选择主题

1	theme: next

lib 下载http://github.com/Lruihao/hexo-theme-next/releases/tag/v6.9.1

更新内容

更多自定义详见源码

links 模板

自定义友链模板，打开hexo\themes\next\layout\新建links.swig文件，写下以下内容后保存。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129

{% extends '_layout.swig' %} {% import '_macro/sidebar.swig' as sidebar_template %} {% block title %}{# #}{% set page_title_suffix = ' | ' + title %}{# #}{% if page.type === "categories" and not page.title %}{# #}{{ __('title.category') + page_title_suffix }}{# #}{% elif page.type === "tags" and not page.title %}{# #}{{ __('title.tag') + page_title_suffix }}{# #}{% elif page.type === "photos" and not page.title %}{# #}{{ __('title.photos') + page_title_suffix }}{# #}{% else %}{# #}{{ page.title + page_title_suffix }}{# #}{% endif %}{# #}{% endblock %} {% block page_class %}page-post-detail{% endblock %} {% block content %} <div id="posts" class="posts-expand"> {##################} {### PAGE BLOCK ###} {##################} <div class="post-block page"> {% include '_partials/page-header.swig' %} {#################} {### PAGE BODY ###} {#################} <script src="//at.alicdn.com/t/font\_578712\_g26jo2kbzd5qm2t9.js"></script> <div class="post-body{% if theme.han %} han-init-context{% endif %}{% if page.direction && page.direction.toLowerCase() === 'rtl' %} rtl{% endif %}"> <div class="links-list"> {% for svg,link in site.data.links %} <div class="card-box" title="{{ link.info }}"> <a href="{{ link.site }}" target="\_blank"> {% if link.avatar %} <img class="card-avatar" data-original="{{ link.avatar }}" alt="{{ link.nickname }}"/> {% else %} <svg class="card-avatar" aria-hidden="true"> <use xlink:href="#icon-{{svg+1}}"></use> </svg> {% endif %} <span title="{{ link.nickname }}">@{{ link.nickname }}</span> </a> </div> {% endfor %} </div> {{ page.content }} </div> <style> /* @Author: lruihao.cn */ .links-list { margin-top: 1rem; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; } .card-box { width: 150px; height: 200px; font-size: 1rem; text-align: center; background: rgba(255,255,255,0.3); box-sizing: border-box; box-shadow: 3px 3px 5px #aaa; border-radius: 5px; transition-duration: 0.3s; margin-bottom: 1rem; display: flex; flex-direction: column; } .card-box:hover { background: #fff; transform: scale(1.03); box-shadow: 0 0 3px #aaa; } .card-box a { border:none; } .card-avatar { width: 100%!important; height: 150px!important; border-radius: 5px; margin: 0; padding: 0; } .card-box span{ display: block; position: relative; bottom: 1rem; align-self: flex-end; color: #2bbc8a; font-weight: bold; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 15px; } .card-box span:hover { color: #d480aa; } </style> {#####################} {### END PAGE BODY ###} {#####################} </div> {% include '_partials/breadcrumb.swig' %} {######################} {### END PAGE BLOCK ###} {######################} </div> {% endblock %} {% block sidebar %} {{ sidebar_template.render(false) }} {% endblock %} {% block script_extra %} {% include '_scripts/pages/post-details.swig' %} {% endblock %}

若未使用懒加载请将模板中的**data-original**属性改为**src**
若懒加载无法加载预览图请手动添加**src="/images/loading.gif"**
若 fancybox 显示 alt 内容请更换 fancybox2 或者将 alt 属值删除

1	<img class="card-avatar" data-original="{{ link.avatar }}" alt="{{ link.nickname }}"/>

然后hexo n page links新建一个页面文章配置写下如下内容：

1 2 3 4	--- title: 友情链接 layout: links ---

然后在links页面文件夹下面新建文件夹_data，再在里面新建links.yml，内容如下

1 2 3 4 5 6 7 8	nickname: 博採眾長 avatar: http://lruihao.cn/images/avatar.png site: http://lruihao.cn info: 一个菜鸟的博客 - nickname: #友链名称 avatar: #友链头像 site: #友链地址 info: #友链说明

备案信息自定义

1 2 3 4 5 6 7 8	------------------------------------------------------------- # footer_custom Settings # ------------------------------------------------------------- beian: enable: true gov: 湘公网安备 43030402000254 号 recordcode: 43030402000254 icp: 湘 ICP 备 18020535 号

文字抖动特效

1	<div class="shaky">（づ●'◡'●) づ ❥内容区</div>

（づ●'◡'●) づ ❥内容区

左下角微信公众号

1	\source\css\_custom\customs.styl

Chat Services

共 chatra,tidio,daovoice 三个选项，三选一

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Chatra Support # See: https://chatra.io # Dashboard: https://app.chatra.io/settings/general chatra: enable: false async: true id: # visit Dashboard to get your ChatraID #embed: # unfinished experimental feature for developers, See: https://chatra.io/help/api/#injectto # Tidio Support # See: https://www.tidiochat.com # Dashboard: https://www.tidiochat.com/panel/dashboard tidio: enable: false key: # Public Key, get it from Dashboard, See: https://www.tidiochat.com/panel/settings/developer #在线客服 daovoice: true daovoice_app_id: xxxx # http://www.daovoice.io/

pdf 和 Mermaid 解析模块

pdf 传送门

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

pdf: enable: false # Default height height: 500px pdfobject: cdn: //cdn.jsdelivr.net/npm/pdfobject@2/pdfobject.min.js #cdn: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js # Mermaid tag mermaid: enable: false # Available themes: default | dark | forest | neutral theme: forest cdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js #cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

模仿 csdn 转发样式

1 2 3 4 5 6 7 8 9 10 11 12 13	... <a class="post-title-link" href="{{ url\_for(post.path) }}" itemprop="url"> + {% if post.repost %} + <span class="repost">转</span> + {% endif %} {{ post.title \| default(__('post.untitled'))}} </a> {% else -%} + {% if post.repost %} + <span class="repost">转</span> + {% endif %} {{- post.title -}} ...

1 2 3 4 5 6 7 8	.repost { color: #5acc79; border: 1px solid #e7f4df; border-radius: 20px; padding: 2px 5px; font-size: 15px; font-weight: 500; }

1 2 3 4	--- title: xxxx repost: true ---

预览

热度页面

打开hexo\themes\next\layout新建 top.swig 文件，写下如下内容保存：

{% extends '_layout.swig' %} {% import '_macro/sidebar.swig' as sidebar_template %} {% block title %}{# #}{% set page_title_suffix = ' | ' + title %}{# #}{% if page.type === "categories" and not page.title %}{# #}{{ __('title.category') + page_title_suffix }}{# #}{% elif page.type === "tags" and not page.title %}{# #}{{ __('title.tag') + page_title_suffix }}{# #}{% elif page.type === "photos" and not page.title %}{# #}{{ __('title.photos') + page_title_suffix }}{# #}{% else %}{# #}{{ page.title + page_title_suffix }}{# #}{% endif %}{# #}{% endblock %} {% block page_class %}page-post-detail{% endblock %} {% block content %} <div id="posts" class="posts-expand"> {##################} {### PAGE BLOCK ###} {##################} <div class="post-block page"> {% include '_partials/page-header.swig' %} {#################} {### PAGE BODY ###} {#################} <div class="post-body{% if theme.han %} han-init-context{% endif %}{% if page.direction && page.direction.toLowerCase() === 'rtl' %} rtl{% endif %}"> {{ page.content }} <div id="top"></div> </div> <style> #top{ display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; width: 100%; min-height: calc({{ page.limit }} * 20px); } #top div{ width: 400px; height: 40px; max-width: 400px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #top a{ color: #555; text-decoration: none; outline: 0; border-bottom: 1px solid #999; word-wrap: break-word; } </style> <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script> <script>AV.initialize("{{ theme.valine.appid }}", "{{ theme.valine.appkey }}");</script> <script type="text/javascript"> setTimeout(function(){ var time=0 var title="" var url="" var query = new AV.Query('Counter'); query.notEqualTo('id',0); query.descending('time'); query.limit({{ page.limit }}); //设置篇数 query.find().then(function (todo) { for (var i=0;i<{{ page.limit }};i++){ var result=todoi.attributes; time=result.time; title=result.title; category=result.categories url=result.url; var content="<div>"+"【文章热度："+time+"℃】"+"<a href='"+"{{ config.url }}"+""+url+"'>"+title+"</a>"+"</div>"; document.getElementById("top").innerHTML+=content; } }, function (error) { console.log("error"); }); },1000) </script> {#####################} {### END PAGE BODY ###} {#####################} </div> {% include '_partials/breadcrumb.swig' %} {######################} {### END PAGE BLOCK ###} {######################} </div> {% endblock %} {% block sidebar %} {{ sidebar_template.render(false) }} {% endblock %} {% block script_extra %} {% include '_scripts/pages/post-details.swig' %} {% endblock %}

其中第 36 行改成你自己的 leancloud 的 appid 和 appkey, 比如我的是在主题配置文件里面的 valine 配置下，所以我就写成theme.valine.appid。和我一样就不需要修改，其他自行配置。

然后hexo n page top新建一个页面文章配置写下如下内容，limit 表示显示篇数：