很久之前,为了在主题中新增功能还是改主题文件实现的,不过因为没有用Git进行管理,后面带来一个很严重的问题:升级十分困难 。
当然,即便早已摆脱了那种想升级又不敢升级的困境,我还是不喜欢对主题进行过多的侵入式修改,在前几个月我陆陆续续将主题中一些自定义的部分阉掉或通过外部注入实现,但随之而来又有一个问题:可自定义程度低 。
罢了罢了,我自己写一篇文章来记录改动吧,免得以后出现问题时不知道怎么改回来。
非直接修改主题 杂项包括:烟花特效,运行时间,复制提醒,超链接图标等等,以注释为准
烟花特效&运行时间
来自网络
加载动画通过injector
实现
对应的js
哔哔广场与其说是广场,不如说是个人独秀 (毕竟我这也不是正经的Memos
魔改自哔哔广场-木木木木木 (immmmm.com)
对应的js
配色方案_config.stellar.yml 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 article: category_color: '生活小事' : '#bf9936' '技术类' : '#2196f3' '瞎折腾' : '#ef613f' style: color: background: 'hsl(212 16% 98%)' block: 'hsl(212 8% 95%)' code: 'hsl(220 20% 10%)' text: 'hsl(0 0% 20%)' theme: 'hsl(88 76% 40%)' accent: 'hsl(14 100% 57%)' link: 'hsl(88 76% 40%)' hover: 'hsl(14 100% 57%)'
超链接样式调整文章内链接:加粗并下移下划线。
1 2 3 4 5 6 7 li :not ([class] ) a :not ([class] ),p :not ([class] ) a :not ([class] ),table a :not ([class] ) { padding-bottom : 0.1rem ; background : linear-gradient (0 , var (--theme-link-opa), var (--theme-link-opa)) no-repeat center bottom / 100% 40% ; }
直接修改主题 字数统计themes\stellar\layout\_partial\main\footer.ejs 1 2 3 4 5 6 7 8 9 10 11 12 ... el += '<div class="text">' if (content) { el += markdown (content) } el += '<script> var allpostscount = "' + site.posts .length + '" ;var allpostswords = "' + totalcount (site) + '";gtime_days = Math.floor((new Date() - new Date(' + page.updated + ')) / 1000 / 60 / 60 / 24);</script>' el += '</div></footer>' return el } %> <%- layoutDiv () %>
将字数信息引入到变量中供调用
1 <span id ="timeDate" > 载入天数...</span > <span > &</span > <span id ="times" > 载入时分秒...</span > ,共发表了<span id ="all-posts-count" > load</span > 篇文章,总计<span id ="all-post-words" > load</span > 字
相关js参阅#杂项
文章内字数统计&阅读时长
themes\stellar\layout\_partial\main\navbar\article_banner.ejs 1 2 3 4 5 ... el += partial ('dateinfo' ) el += '<div class="flex-row" id="page-words"><span style="padding: 4px;">本文字数:' + wordcount (page.content ) + '字</span><span class="sep updated" style="padding: 4px;"></span><span class="text updated" style="padding: 4px;">阅读时长:' + min2read (page.content ) + '分</span></div>' ;
css:
source\mcss\mcss.css 1 2 3 4 5 6 7 8 9 .bread-nav div #page-words span .sep :before { content : '|' ; } .bread-nav div #page-words span .updated { visibility : hidden; } .bread-nav :hover div #page-words span .updated { visibility : visible; }
文章内过期提醒变量获取一并放在footer
里了
themes\stellar\layout\page.ejs 1 2 3 4 ... el += `<article class="${articleClass()} ">` el +=`<div id="gtime"></div>`
相关js参阅#杂项
文章内标签显示紧跟在文章内字数统计
下方
themes\stellar\layout\_partial\main\navbar\article_banner.ejs 1 2 3 4 5 6 7 8 9 10 11 12 if (page.layout == "post" && page.tags && page.tags .length > 0 ) { el += '<div class="flex-row" id="tag">' ; el += ' <span> 标签:</span>' ; el += list_categories (page.tags , { class : "cap breadcrumb" , show_count : false , separator : ' ' , style : "none" }); el += ' </div>' ; }
显示Artalk最近评论
注释部分为头像获取
css:
source\mcss\mcss.css 1 2 3 4 5 6 7 8 .tag-plugin .timeline .body img [atk-emoticon] { max-height : 40px ; display : initial; margin : 0 ; } .tag-plugin .timeline .body img { max-height : 200px ; }
注册为数据服务:
_config.stellar.yml 1 2 3 4 data_services: artalk: js: /js/services/artalk.js
组件引入:
source\_data\widgets.yml 1 2 3 4 5 6 new_comment: layout: timeline title: 最新评论 api: https://artalk.hzchu.top/api/v2/stats/latest_comments?site_name=Thun888 type: artalk limit: 10
侧边栏stellar\layout\_partial\widgets\toc.ejs 1 2 3 4 5 6 7 8 9 10 11 12 var relativePath = page.source; <!-- 编辑本页 --> el += `<a class="edit-btn" href="https://github.com/thun888/myblog/edit/main/source/${relativePath}">` el += icon('myself:edit-twotone') el += `<span>${__('btn.edit')}</span>` el += `</a>` <!-- 删除模式 --> el += `<a class="delmode-btn" onclick="toggleDeleteMode()">` el += icon('myself:close-circle') el += `<span>${__('btn.delmode')}</span>` el += `</a>`
部分用语改动themes\stellar\languages\zh-CN.yml 1 2 3 4 meta: related_posts: 这些怎么样( ̄︶ ̄)↗ search: search: 搜搜看