https://www.eacls.top/posts/4ddffcd0/ https://opeach.cn/posts/decb.html
在front-matter
添加highlight_shrink: true/false
来单独配置文章展开代码框。
true:关闭代码框,要点击 > 才打开
false:打开代码框
页面加载动画 preloader
1 2 3 4 5 6 7 8 9 preloader: enable: false source: 1 pace_css_url:
Snackbar 弹窗
1 2 3 4 5 6 7 8 9 snackbar: enable: true position: bottom-left bg_light: '#49b1f5' bg_dark: '#2d3035'
在线代码优化
https://tool.oschina.net/codeformat/js/
https://manamn.space/posts/52720.html
在nav.pug里面添加
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 nav#nav span#blog-info a(href=url_for('/') title=config.title) if theme.nav.logo img.site-icon(src=url_for(theme.nav.logo)) if theme.nav.display_title span.site-name=config.title #menus !=partial('includes/header/menu_item', {}, {cache: true}) center(id="name-container") a(id="page-name" href="javascript:scrollToTop()" onclick="btf.scrollToDest(0,500)") PAGE_NAME #nav-right if (theme.algolia_search.enable || theme.local_search.enable) .nav-button#search-button a.site-page.social-icon.search(title="站内搜索") i.fas.fa-search.fa-fw .nav-button#randomPost a.site-page.social-icon.search(href="javascript:;" onclick="toRandomPost()" title="随机前往一篇文章") i.fas.fa-bus.fa-fw #toggle-menu a.site-page i.fas.fa-bars.fa-fw
然后自定义css
1 2 3 4 5 6 7 8 9 #page-header #nav #nav-right .nav-button a { height : 35px ; width : 35px ; display : flex; align-items : center; justify-content : center; border-radius : 40px ; }
去掉主题文件导航栏
导航栏不居中
1 2 3 4 5 6 7 8 #nav-right { flex :0.9 1 auto; justify-content : flex-end; margin-left : auto; display : flex; flex-wrap :nowrap; }
换壁纸
首页壁纸高度
导航栏字体颜色
文章页局部 html 代码不渲染
在你的 md 文章页中,部分内容不想经过 Hexo 渲染,则包一层 raw 标签:
1 2 3 4 {% raw %} <div class="">你的一些代码...</div> <script>你的一些代码...</script> {% endraw %}
那么标签内的代码就不会被框架渲染了~
挂绳小猫咪(tzy大佬)
https://tzy1997.com/articles/hexo1613/#%E6%8B%93%E5%B1%95
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 #页脚 # footer_beautify # 页脚计时器:[Native JS Timer](https://akilar.top/posts/b941af/) # 页脚徽标:[Add Github Badge](https://akilar.top/posts/e87ad7f8/) footer_beautify: enable: timer: true # 计时器开关 bdage: true # 徽标开关 priority: 5 #过滤器优先权 enable_page: all # 应用页面 exclude: #屏蔽页面 # - /posts/ # - /about/ layout: # 挂载容器类型 type: id name: footer-wrap index: 0 # 计时器部分配置项 runtime_js: /js/runtime.js runtime_css: /css/runtime.css # 徽标部分配置项 swiperpara: 3 #若非0,则开启轮播功能,每行徽标个数 bdageitem: - link: https://hexo.io/ #徽标指向网站链接 shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #徽标API message: 博客框架为Hexo_v5.4.0 #徽标提示语 - link: https://butterfly.js.org/ shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender message: 主题版本Butterfly_v4.8.1 - link: http://creativecommons.org/licenses/by-nc-sa/4.0/ shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可 # swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css # swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js # swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js
1 2 3 4 5 6 if ((Number(time[2])<22) && (Number(time[2])>7)){ currentTimeHtml ="<img class='boardsign' src='https://img.shields.io/badge/Cyan-摘星星中-blue?logo=starship&style=social&logoColor=blue&logoWidth=10' title='今天也是努力的一天~' style='height:24px;'><div id='runtime'>" + ' 本站已经运行了 ' + time[0] + ' 年 ' + time[1] + ' 天 ' + time[2] + ' 小时 ' + time[3] + ' 分' + time[4] + '秒' + '</div>'; } else{ currentTimeHtml ="<img class='boardsign' src='https://img.shields.io/badge/Cyan-累了,休息吧-blue?logo=starship&style=social&logoColor=blue&logoWidth=10' title='这个点了应该去睡觉啦,熬夜对身体不好哦' style='height:24px;><div id='runtime'>" + ' 本站已经运行了 ' + time[0] + ' 年 ' + time[1] + ' 天 ' + time[2] + ' 小时 ' + time[3] + ' 分' + time[4] + '秒' + '</div>'; }
Cannot read properties of null (reading ‘addEventListener‘) 解决方法
原因: addEventListener 绑定的元素在 HTML 中还没有渲染完成(JS 中操作DOM元素的函数方法需要在 HTML 文档渲染完成后才可以使用)
解决方法:
addEventListener 放在绑定的元素添加渲染完成后再使用;
使用 window.onload 或 $(document).ready()
以上两个方法,视具体情况自己选择使用;
1 2 3 4 5 6 7 window.οnlοad=function(){ // code }; $(document).ready(function () { // code });