Stellar自用魔改存档

前言

当前主题版本: 1.18.5
钟意博客提醒您, 魔改不备份, 亲人两行泪.

文章目录样式

文章目录样式https://blog.thatcoder.cn/Stellar%E6%96%87%E7%AB%A0%E7%9B%AE%E5%BD%95%E4%B8%AA%E4%BA%BA%E5%90%91%E7%BE%8E%E5%8C%96/

昼夜模式切换

用户主题切换功能https://blog.thatcoder.cn/Stellar%E5%8F%AF%E6%8E%A7%E5%A4%9C%E9%97%B4%E6%A8%A1%E5%BC%8F/

根据分类排版

这是大致思路, 根据自己需求修改

博客目录/_config.yml>inject.script引入

// 判断是否为首页类。有很多种方法, 有空我找一下最优解
const isIndex=()=>{
    const href = window.location.href;
    const protocol = window.location.protocol+"//"+window.location.host+"/";
    return href === protocol || href === protocol + "categories/" || href === protocol + "tags/" || href === protocol + "archives/" || href === protocol + "rss/" || href === protocol + "wiki/" || href === protocol + "links/" || href === protocol + "about/";
}
if (!isIndex()){
    var ThisCategory = document.querySelector("#breadcrumb > a.cap.breadcrumb-link").text;
    if (ThisCategory == "第九艺术") {
        document.querySelector("#start > div > article > h1").style.display = 'none';
        document.querySelector("#start > div > article > div:nth-child(3)").style.textAlign = 'center';
    }
}

全局复制提示

引入

博客目录/_config.yml

inject:
  head:
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast@1.4.0/dist/css/iziToast.min.css">
  script:
    - <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/izitoast@1.4.0/dist/js/iziToast.min.js"></script>

博客目录/_config.yml>inject.script引入

// 复制提示
document.body.oncopy = function () {
iziToast.info({
timeout: 4000, // 关闭弹窗的时间
// icon: 'Fontawesome', // 图标类别
closeOnEscape: 'true', // 允许使用Esc键关闭弹窗
transitionIn: 'bounceInLeft', // 弹窗打开动画
transitionOut: 'fadeOutRight', // 弹窗关闭动画
displayMode: 'replace', // 替换已经打开的弹窗
layout: '2', // Medium模式
position: 'topRight', // 弹窗位置
//icon: 'fad fa-copy', // 图标类名
iconUrl: 'https://upyun.thatcdn.cn/hexo/stellar/image/favicon.webp',
backgroundColor: '#fff', // 弹窗背景色
title: '复制成功', // 通知标题
message: '请遵守 CC BY-NC-SA 4.0 协议' // 通知消息内容
});
}

修改网页字体

引入

配置

博客目录/_config.yml

inject:
  head:
    - <link rel="stylesheet" href="https://upyun.thatcdn.cn/hexo/stellar/css/font.css">

博客目录/_config.stellar.yml

style:
  font-size:
    root: 19.3px
    body: .9999rem # 15px
    code: 85% # 14px
    codeblock: 0.8125rem # 13px
  font-family:
    logo: 'ZFonts, system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
    body: 'ZFonts, system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif'
    code: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'
    codeblock: 'Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif'

侧边栏欢迎图

API采用IP签名档, 主要是代码的img标签.

效果

代码

其实字有点小

博客目录/source/_data/widgets.yml

welcome:
    layout: markdown
    title: '🎉欢迎, 先生亦或是姑娘: '
    content: |
        这是一个成分复杂的小站，建于二十一世纪初，至今练习时长两年半，将会继续长期维护和更新。<br>🙏本站评论与动态在Github托管, 显示不全是不能裸连Github。
        <img id="ZYTheme" style="border-radius: 10px;" src="https://api.szfx.top/info-card/?word=感谢来访钟意博客, 懈怠轻忽."/>

自定义Fancybox范围

好在主题已经给出相关配置, 我们只需要找到自己要开启的地方.
我开的地方除了自带image标签还有文章里所有img, 和waline评论里的img.

_config.stellar.yml

plugins:
  fancybox: # 可以处理评论区的图片（不支持 iframe 类评论系统）例如：
    # 使用twikoo评论可以写: .tk-content img:not([class*="emo"])
    # 使用waline评论可以写: #waline_container .vcontent img
    selector: .swiper-slide img, .md-text.content p>img, .md-text.content li img , .wl-content img # 多个选择器用英文逗号隔开

代码主题样式

效果

代码

效果

body{display:none;}

ZYCode.csshttps://cloud.thatcoder.cn/%E5%B7%B2%E5%85%AC%E5%BC%80%E6%96%87%E4%BB%B6/CoderSpace/Stellar/ZYCode.css

博客目录/_config.stellar.yml

style:
  codeblock:
    highlightjs_theme: https://upyun.thatcdn.cn/public/web/stellar-1.18.5/ZYCode.css

字体切片

cn-font-split

切片方法

安装npm包:

新建一个xxx.mjs文件, 填入以下代码.

切片函数

import { fontSplit } from "@konghayao/cn-font-split";

fontSplit({
    FontPath: "./xxx.ttf", // 把字体放到本文件同级下
    destFold: "./FontOrigin",   // 生成的文件夹位置
    targetType: "ttf", // ttf woff woff2；注意 eot 文件在浏览器中的支持度非常低，所以不进行支持
    testHTML: true, // 输出一份 html 报告文件
    reporter: true, // 输出 json 报告
});