本文基于butterfly
主题3.6.0
版本修改。
部分修改无法使用纯css
或JavaScript
实现,需要修改原主题的源码。如果后续需要升级原主题,请重新修改一遍。
有些修改就算能用JavaScript
实现,也严重影响加载速度,所以还不如修改原主题的源码。
为避免修改地方过多,可将自定义的css
样式和js
脚本分别放置在同一文件中。
在/themes/butterfly/source/css/_global
目录下新建自己的styl
样式文件,取名sunchaser.styl
,index.styl
中已自动引入。
在/themes/butterfly/source/js
目录下新建自己的js
脚本文件,取名sunchaser.js
,然后在_config.butterfly.yml
中进行inject
引入。
配置项:
1 2 3 inject: bottom: - <script src="/js/sunchaser.js"></script>
去掉首页的全屏图片 首页的全屏图片和subtitle
,看似很美,却无实际作用。个人觉得作为博客站,打开的第一屏应该展现的是优质的文章。
在3.6.0
版本之前,原主题没有关闭首页全屏图片的配置项。该功能为3.6.0
版本新增。
version<3.6.0 version=3.6.0 版本号小于3.6.0
打开/themes/butterfly/layout/includes/header/index.pug
文件找到以下代码:
1 - var isHomeClass = is_home() ? 'full_page' : 'not-index-bg'
修改为以下内容:
1 - var isHomeClass = is_home() ? '' : 'not-index-bg'
再在此文件中找到以下代码并全部注释掉。
1 2 3 4 5 6 7 8 9 //#site-info // h1#site-title=site_title // #site-subtitle // span#subtitle // if(theme.social) // #site_social_icons // !=fragment_cache('social', function(){return partial('includes/header/social')}) //#scroll-down // i.fas.fa-angle-down.scroll-down-effects
版本号等于3.6.0
自带了配置项disable_top_img
,设置为true
时无首页全屏大图。
但会发现导航栏的背景颜色变成了白色且带一点透明,文字变成了黑色。这点看上去并不是很美观。所以这里可以将背景颜色修改为透明色,文字修改为白色。
在sunchaser.styl
样式文件中添加以下样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 #page-header &.not-top -img #nav background : transparent !important box-shadow : none !important a color : #ffffff !important #page-header &.nav-visible #nav background: rgba(255, 255, 255, .8) !important a color : var(--font-color) !important if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' [data-theme='dark' ] #page-header &.not-top-img > #nav background : transparent !important box-shadow : none !important &.nav-visible > #nav background: alpha(#121212, .8) !important
关掉首页全屏大图后,会发现整个博客呈现白色背景,如果觉得不够美观,可在_config.butterfly.yml
配置文件中将背景修改为图片:
1 background: url(https://cdn.jsdelivr.net/gh/sunchaser-lilu/sunchaser-cdn@master/lilu.org.cn/index_1.png)
导航栏居左,搜索按钮居右,且加上浅色和深色模式转化的icon
打开/themes/butterfly/layout/includes/header/nav.pug
文件,修改为以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 nav#nav span#blog_name a#site-name(href=url_for('/')) #[=config.title] span#menus !=fragment_cache('menus', function(){return partial('includes/header/menu_item')}) #toggle-menu a.site-page i.fas.fa-bars.fa-fw if theme.darkmode.enable && theme.darkmode.button div.button.mode-button#darkmode(type="button" title=_p('rightside.night_mode_title')) a.site-page.social-icon i.fas.fa-adjust.fa-fw if (theme.algolia_search.enable || theme.local_search.enable) #search-button a.site-page.social-icon.search i.fas.fa-search.fa-fw span=' ' + _p('search')
在sunchaser.styl
样式文件中添加以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 #nav #search-button ,.mode-button float : right &.hide-menu #toggle-menu float : right .mode-button display : inline padding: 0 0 0 .4rem a -webkit-user-select: none ; -moz-user-select: none ; -ms-user-select: none ; user-select: none ; [type=button], [type=reset], [type=submit], button { -webkit-appearance: none !important }
在sunchaser.js
文件中,添加以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 document .getElementById('darkmode' ).addEventListener('click' , function (e ) { const nowMode = document .documentElement.getAttribute('data-theme' ) === 'dark' ? 'dark' : 'light' ; if (nowMode === 'light' ) { activateDarkMode(); saveToLocal.set('theme' , 'dark' , 2 ); GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night); } else { activateLightMode(); saveToLocal.set('theme' , 'light' , 2 ); GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day); } typeof utterancesTheme === 'function' && utterancesTheme(); typeof FB === 'object' && window .loadFBComment(); window .DISQUS && document .getElementById('disqus_thread' ).children.length && setTimeout (() => window .disqusReset(), 200 ); });
浏览器滚动条美化 在sunchaser.styl
文件中添加以下样式:
1 2 3 4 5 6 7 8 9 10 *::-webkit-scrollbar-thumb background-image : -webkit-linear-gradient( 45deg , rgba(255 , 255 , 255 , 0.4 ) 25% , transparent 25% , transparent 50% , rgba(255 , 255 , 255 , 0.4 ) 50% , rgba(255 , 255 , 255 , 0.4 ) 75% , transparent 75% , transparent) border-radius : 2em *::-webkit-scrollbar-corner background-color : transparent *::-moz-selection color : #fff background-color : var(--btn-bg)
此问题在3.6.0
版本已经被修复,低版本可按以下方式修改。
参考:https://butterfly.js.org/posts/ea33ab97/
鼠标放在搜一搜图片上时微小放大特效。在sunchaser.styl
样式文件中添加以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 .aside-img object-fit : cover width : 100% height : 100% max-width : 100% border-radius : 7px padding : 0 transition: all .6s &:hover box-shadow : none border-radius : 7px transform : scale(1.1 )
在文章详情页底部添加文章结束语和公众号 在/themes/butterfly/layout/includes/post
目录下添加两个文件post-end.pug
和post-end-wechat.pug
,内容分别为:
post-end.pug
:
1 2 3 4 5 div div(style='text-align:center;color: #ccc;font-size:14px;font-family: cursive;') | -------------有过牵挂 i(style='margin:0 7px;').fa.fa-umbrella | 了无牵挂-------------
post-end-wechat.pug
1 2 3 4 #post-end-wechat center img#wechat-qrcode(src=`${theme.post_end.wechat.cdn_qrcode}` onerror=`onerror=null;src='${theme.post_end.wechat.local_default_qrcode}'`,alt='打工这件小事') div=theme.post_end.wechat.description
修改/themes/butterfly/layout/post.pug
文件,在include includes/post/post-copyright.pug
这一行的上方缩进对齐位置添加以下内容:
1 2 3 4 if theme.post_end.enable include includes/post/post-end.pug if theme.post_end.wechat.enable include includes/post/post-end-wechat.pug
在_config.butterfly.yml
配置文件中添加以下配置项:
1 2 3 4 5 6 7 post_end: enable: true wechat: enable: true cdn_qrcode: https://i.loli.net/2020/02/15/SDRF87I6ohlyVk1.jpg local_default_qrcode: /assets/images/weixin/wechat-gzh.png description: 欢迎关注微信公众号【打工这件小事】~
在sunchaser.styl
样式文件中添加以下内容:
1 2 3 4 5 6 7 8 9 10 #post-end-wechat text-align : center display : inline-block line-height : 36px width : 100% margin : 0 auto #wechat-qrcode width : 200px max-width : 100%
修改/themes/butterfly/layout/includes/footer.pug
文件。
1 2 3 4 if theme.footer.owner.since && theme.footer.owner.since != nowYear .copyright!= `©${theme.footer.owner.since} - ${nowYear} <i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;"class="fas fa-heart"></i> By ${config.author}` else .copyright!= `©${nowYear} <i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;"class="fas fa-heart"></i> By ${config.author}`
在博客根目录下输入以下命令:
1 npm install hexo-generator-feed --save
在博客配置文件_config.yml
中添加以下代码:
1 2 3 4 5 6 7 8 plugin: - hexo-generator-feed feed: type: atom path: atom.xml limit: 20
在主题的配置文件_config.butterfly.yml
中的social
属性下添加rss
的icon
配置:
1 2 social: fa fa-rss: /atom.xml
生成百度sitemap 在hexo
博客根目录下分别执行以下命令安装插件:
1 2 npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save
修改博客根目录下_config.yml
文件中的url
属性为站点自定义域名(不支持github.io
)
sitemap提交 配置百度主动推送 在hexo
博客根目录下执行以下命令安装插件:
1 npm install hexo-baidu-url-submit --save
在博客根目录下_config.yml
文件中添加以下内容:
1 2 3 4 5 baidu_url_submit: count: 100 host: lilu.org.cn token: eNsEfgMEdafegvn path: baidu_urls.txt
修改deploy
属性,有两个type
时前面要加-
1 2 3 4 5 deploy: - type: git repo: https://github.com/sunchaser-lilu/sunchaser-lilu.github.io.git branch: master - type: baidu_url_submitter
添加PDF插件 此插件可在单页面中全屏打开PDF,效果与打开本地磁盘的PDF文件类似。
在hexo
博客根目录下执行以下命令安装插件:
1 npm install hexo-pdf-plugin@0.0.1-beta --save
使用示例:
1 2 3 4 5 6 7 --- layout: false title: PDF date: 2021-01-29 16:00:00 --- {% pdf https://cdn.jsdelivr.net/gh/sunchaser-lilu/sunchaser-cdn@master/pdf/the-road-to-code-improvement-from-code-farmers-to-craftsmen.pdf %}