本教程基于Hexo v4.2
和Next v7.7
作为教学案例进行演示。 从第一篇建站后的主题美化,并进行自定义修改,可以让大家按照自己的想法进行美化改造。
下载主题 例如 Next主题 ,进入官网Github后,可以看到介绍下载内容。
1 2 3 4 cd hexo git clone https://github.com/theme-next /hexo-theme-next themes/next
全局修改主题 打开/HexoBlog/_config.yml
,修改:
注意:HexoBlog建站文档里会有两个_config.yml配置文件,各存在于:
HexoBlog/_config.yml
HexoBlog/themes/next/_config.yml
其中,上面的配置文件是针对于全局Hexo的配置文档,例如博客名称、主题、链接、以及git保存链接。 下面这一个是针对next这个主题的具体配置信息,请勿混淆。
主题自带样式修改 像Next 这样的使用量超广的主题,在主题配置文件下都可以有很多自定义的详细修改参数,一般都可以通过true
和false
来进行修改。
首页菜单栏 这部分可以自主定义博客的几大类别:首页、存档、分类、标签、关于。
比如:
1 2 3 4 5 6 7 menu: home: / || home archives: /archives/ || archive categories: /categories/ || th tags: /tags/ || tags about: /about/ || user
这部分可以增减,依靠个人喜好,也可以进行目录名称的修改。修改文章大目录的位置在HexoBlog\themes\next\languages\zh-CN.yml
里。
链接的值不可修改,一旦修改next主题识别不到位置。需要修改的是在对应的翻译文档里将所定义的分类目录修改为指定的名称。
例如:
themes\next\languages\zh-CN.yml 1 2 3 4 menu: home: 大世界 archives: 全部文章 categories: 归类文档
菜单栏样式 此处修改目录样式
1 2 3 menu_settings: icons: true badges: true
侧边栏样式 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 sidebar: position: left width: 260 display: always avatar: url: rounded: false rotated: false site_state: true social: GitHub: https://github.com/MichaelVector || github E-Mail: mailto:cbw390179428@cloud.com || envelope toc: enable: true number: true wrap: true expand_all: false max_depth: 6
文章设置 首页文章排序 Hexo默认是以日期date
进行倒序排列,但有时候更新了文章,想让最新的更新排在前列呢? 只需修改一个参数即可:
1 2 3 4 5 6 7 8 9 # Home page setting # path: Root path for your blogs index page. (default = '') # per_page: Posts displayed per page. (0 = disable pagination) # order_by: Posts order. (Order by date descending by default) path: '' per_page: 10 - # order_by: -date + order_by: -update
阅读更多 在文章简介后可以加入<!-- more -->
来缩短在首页显示的内容(而不是整个篇幅)。 同时需要打开read more button
的开关。
1 2 <!-- more --> read_more_btn: true
文章信息 1 2 3 4 5 6 7 post_meta: item_text: true created_at: true updated_at: enable: true another_day: true categories: true
文章计数 1 2 3 4 5 6 symbols_count_time: separated_meta: true item_text_post: true item_text_total: true awl: 3 wpm: 300
代码块样式 1 2 3 4 5 6 codeblock: highlight_theme: night eighties copy_button: enable: true show_result: true style: flat
页脚 页脚标签美化 使用图标来代替#的标签样式
打赏设置 1 2 3 4 5 6 7 8 reward_settings: enable: true animation: false reward: wechatpay: /images/paypal.png alipay: /images/paypal.png
相关文章 1 2 3 4 5 6 related_posts: enable: true title: display_in_home: true params: maxCount: 5
功能模块 返回顶层 1 2 3 4 back2top: enable: true sidebar: false scrollpercent: true
阅读进度条 1 2 3 4 5 reading_progress: enable: true position: top color: "#37c6c0" height: 3px
Github条幅 1 2 3 4 github_banner: enable: true permalink: https://github.com/MichaelVector title: Follow me on GitHub
本地搜索 1 2 3 4 5 6 7 8 local_search: enable: true trigger: auto top_n_per_article: 1 unescape: false preload: false
第三方代码样式 增加建站时间 修改footer.njk
,在最后加上:
/themes/matery/layout/_partial/footer.njk 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 <div class ="sitetime" > <span id ="sitetime" > </span > </div> <script language =javascript > function siteTime ( ) { window .setTimeout ("siteTime()" , 1000 ); var seconds = 1000 ; var minutes = seconds * 60 ; var hours = minutes * 60 ; var days = hours * 24 ; var years = days * 365 ; var today = new Date (); var todayYear = today.getFullYear (); var todayMonth = today.getMonth () + 1 ; var todayDate = today.getDate (); var todayHour = today.getHours (); var todayMinute = today.getMinutes (); var todaySecond = today.getSeconds (); var t1 = Date .UTC (2018 , 09 , 11 , 00 , 00 , 00 ); var t2 = Date .UTC (todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond); var diff = t2 - t1; var diffYears = Math .floor (diff / years); var diffDays = Math .floor ((diff / days) - diffYears * 365 ); var diffHours = Math .floor ((diff - (diffYears * 365 + diffDays) * days) / hours); var diffMinutes = Math .floor ((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes); var diffSeconds = Math .floor ((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds); document .getElementById ("sitetime" ).innerHTML = "本站已运行 " +diffYears+" 年 " +diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒" ; } siteTime (); </script >
鼠标点击特效 下载脚本文件 点击下方按钮下载相应的脚本,并置于 themes\next\source\js\cursor\
目录下:
爆炸特效
礼花特效
爱心特效
文字特效
添加引用代码、文件 在主题自定义布局文件中添加以下代码:
layout\_third-party\cursor.njk 1 2 3 4 5 6 7 8 9 10 11 12 {# 鼠标点击特效 #} {% if theme.cursor_effect == "fireworks" %} <script async src="/js/cursor/fireworks.js" ></script> {% elseif theme.cursor_effect == "explosion" %} <canvas class ="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> <script src ="//cdn.bootcss.com/animejs/2.2.0/anime.min.js" > </script > <script async src ="/js/cursor/explosion.min.js" > </script > {% elseif theme.cursor_effect == "love" %} <script async src="/js/cursor/love.min.js" ></script> {% elseif theme.cursor_effect == "text" %} <script async src="/js/cursor/text.js" ></script> {% endif %}
添加_layout.njk引用 如果 cursor.njk
文件不存在,需要手动新建并在布局页面中 body 末尾引入:
layout\_layout.njk 1 2 3 4 5 6 ... {%- include '_third-party/math/index.njk' -%} {%- include '_third-party/quicklink.njk' -%} + {%- include '_third-party/cursor.njk' -%} </body> </html>
增加选择变量 在主题配置文件中添加以下代码:
_config.yml 1 2 cursor_effect: fireworks
这样即可在配置文件中一键快速切换鼠标点击特效。
Canvas-nest 背景特效 新版本的Next已经移除了对canvas-nest
的支持,但此特效依旧是我的最爱。 现用最简便的方式引用添加js文件来添加支持。
新增一个njk文件 njk文件的原身就是swig。 在Hexo\themes\next\layout\_third-party
里新建nest.njk
添加内容:
themes\next\layout\_third-party\nest.njk 1 2 3 4 5 6 7 <script color="0,0,0" opacity="0.7" zIndex="-1" count="120" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js" > </script>
添加全局引用 在文件layout.njk
中,最下方添加刚才新建的nest.njk
文件。
layout\_layout.njk 1 2 3 4 5 6 7 ... {%- include '_third-party/math/index.njk' -%} {%- include '_third-party/quicklink.njk' -%} {%- include '_third-party/cursor.njk' -%} + {%- include '_third-party/nest.njk' -%} </body> </html>
最后在Next主题的配置文件中打开此脚本的开关:
theme/next/_config.yml