如无必要,不再更新!(2019.09.13) 今晚我做出了一个慎重的决定,由于博主时间精力有限,需要更多的时间来工作和学习。所以我将放弃对next的主题的自定义修改 ,next主题官方已经更新到了7.0+的版本,喜欢next主题风格的朋友可以在github更新。 我这也算是上古版本了,版本差距实在过大,所以我也将放弃博客使用主题的更新。 以下仍为当前博客使用主题,lib资源已打包github。
主要的几个自定义文件
主要修改路径及文件 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]
^1
初步安装 安装整个改过的主题,然后下载相应的lib资源解压放入source文件夹
1 2 cd hexogit clone https://github.com/Lruihao/hexo-theme-next themes/next
主题配置文件_config.yml
,选择主题
lib下载
更新内容 更多自定义详见源码
links模板 自定义友链模板,打开hexo\themes\next\layout\
新建links.swig
文件,写下links.swig 内容后保存。
若未使用懒加载请将模板中的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
新建一个页面文章配置写下如下内容:
top.md 1 2 3 4 --- title: 友情链接 layout: links ---
然后在links
页面文件夹下面新建文件夹_data
,再在里面新建links.yml
,内容如下
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: #友链说明
备案信息自定义 _config.yml 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
相关文章收纳 加入H5标签,实现可收纳功能,点击查看详情。
Chat Services 共chatra,tidio,daovoice三个选项,三选一
_config.swig 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传送门
config.swig 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转发样式 post.swig主要修改 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 -}} ...
css样式 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 ; }
post使用 1 2 3 4 --- title: xxxx repost: true ---
预览
热度页面 打开hexo\themes\next\layout
新建top.swig 文件,写下如下内容保存: 其中第36行改成你自己的leancloud的appid和appkey,比如我的是在主题配置文件里面的valine配置下,所以我就写成theme.valine.appid
。和我一样就不需要修改,其他自行配置。
然后hexo n page top
新建一个页面文章配置写下如下内容,limit表示显示篇数:
top.md 1 2 3 4 5 --- title: 热度 layout: top limit: 20 ---
复制按钮样式
本来只想简单美化一下变成night样式的,后来写完发现3dbtn也挺喜欢的。
config配置 1 2 3 4 5 6 7 8 9 10 11 codeblock: # Manual define the border radius in codeblock # Leave it empty for the default 1 border_radius: 5 # Add copy button on codeblock copy_button: enable: true # Show text copy result show_result: true # Style: 'light,night,flat,3dbtn' is currently available, leave it empty or light is default theme style: night