合规国际互联网加速 OSASE为企业客户提供高速稳定SD-WAN国际加速解决方案。 广告
[TOC] ## geek主题下增加left-side展开、收起功能 在本地环境终于实现了,但是……打包的时候又出现了问题…… 我在toolMenu中增加了一个全屏事件按钮: ~~~ { enable: true, page: 'post', icon: '🌜', tooltip: '全屏', // className: 'leftside-toggle', callback() { $('#left-side').toggleClass( 'leftside-toggle' ) $('#home').css("grid-template-columns", "auto") }, }, ~~~ 关于这个[文档](https://www.yuque.com/awescnb/nsztg6/psb9if)中提到的`打包`,需要注意下,默认只能打出theme相关的js。所以,dist下面的内容不要删掉哦~ 最终效果如下: ![](https://img.kancloud.cn/e1/a7/e1a74e506c7d5d148e1893513223278d_1438x768.png) ## toolMenu图标自定义 ### 图标效果 #### 默认效果 显示效果: ![](https://img.kancloud.cn/55/96/559606b7b4d073ef364e48baa52f3fde_73x513.png) geek.js中配置信息如下: ~~~ .use( toolMenu, {}, { toolbarItems: [ { icon: 'fa-comment-dots', }, { icon: 'fa-star', }, { icon: 'fa-heart', }, { icon: 'fa-thumbs-up', }, { enable: true, icon: 'fa-adjust', }, { icon: 'fa-align-justify', }, { icon: 'fa-rocket', }, ], }, ) ~~~ #### 彩色样式 注释掉以上配置的属性`toolbarItems`,就可以实现彩色效果了: ![彩色](https://img.kancloud.cn/db/5b/db5ba401f1820e4ff3c8aa9eaef9b105_80x444.png)