个人的 minimal-mistakes 配置记录

2024-09-03 00:36

本文主要是介绍个人的 minimal-mistakes 配置记录,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

记录一下个人的 minimal-mistakes 配置

Modifty

Change font size

assets\css\main.scss

html {font-size: 12px; // change to whatever@include breakpoint($medium) {font-size: 14px; // change to whatever}@include breakpoint($large) {font-size: 16px; // change to whatever}@include breakpoint($x-large) {font-size: 18px; // change to whatever}
}

Delete right padding of post

assets\css\main.scss

.page {@include breakpoint($large) {padding-right: 0;}@include breakpoint($x-large) {padding-right: 0;}
}

Add line number to code chunk

_config.yml

# Markdown Processing
kramdown:
...syntax_highlighter_opts:block:line_numbers: true

Add copy button to code chunk

Refer to https://github.com/iBug/iBug-source/commit/eb0180ae9eaa2d3d90c25b9c49cfb0e82fcc5e84

_includes/head.html

<script src="/assets/js/clipboard.js" async defer></script>

_sass\minimal-mistakes\_page.scss

  pre {.copy-button {position: absolute;top: 0.5em;right: 0.5em;z-index: 1;background: none;border: none;border-radius: 0.1em;padding: 0.2em 0.5em;color: white;opacity: 0.1;transition: color 0.25s linear, opacity 0.25s linear;&:hover {opacity: 1;}&:before {content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 2;}}&:hover .copy-button {opacity: 0.6;&:hover {opacity: 1;}}}

assets/js/clipboard.js

$(document).ready(function() {const copyText = function(text) {const isRTL = document.documentElement.getAttribute('dir') == 'rtl';var textarea = document.createElement('textarea');// Prevent zooming on iOStextarea.style.fontSize = '12pt';// Reset box modeltextarea.style.border = '0';textarea.style.padding = '0';textarea.style.margin = '0';// Move element out of screen horizontallytextarea.style.position = 'absolute';textarea.style[isRTL ? 'right' : 'left'] = '-9999px';// Move element to the same position verticallylet yPosition = window.pageYOffset || document.documentElement.scrollTop;textarea.style.top = yPosition + "px";textarea.setAttribute('readonly', '');textarea.value = text;document.body.appendChild(textarea);let success = true;try {textarea.select();success = document.execCommand("copy");} catch {success = false;}textarea.parentNode.removeChild(textarea);return success;};const copyButtonEventListener = function(event) {const thisButton = event.target;// Locate the <code> elementlet codeBlock = thisButton.nextElementSibling;while (codeBlock && codeBlock.tagName.toLowerCase() !== 'code') {codeBlock = codeBlock.nextElementSibling;}if (!codeBlock) {// No <code> found - wtf?throw new Error("No code block found beside this button. This is unexpected.");}return copyText(codeBlock.innerText);};$(".page__content pre > code").each(function() {// Locate the <pre> elementconst container = $(this).parent();var copyButton = document.createElement("button");copyButton.title = "Copy to clipboard";copyButton.className = "copy-button";copyButton.innerHTML = '<i class="far fa-copy"></i>';copyButton.addEventListener("click", copyButtonEventListener);container.prepend(copyButton);});
});

Disable scroll bar in code block

_sass\minimal-mistakes\_page.scss

  ::-webkit-scrollbar {display: none;}

最终这个也不想用了……在本地构建就可以看到复制按钮,但是 github pages 上不知道为什么看不到

不想研究了

这篇关于个人的 minimal-mistakes 配置记录的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1131516

相关文章

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》:本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu

Jenkins分布式集群配置方式

《Jenkins分布式集群配置方式》:本文主要介绍Jenkins分布式集群配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装jenkins2.配置集群总结Jenkins是一个开源项目,它提供了一个容易使用的持续集成系统,并且提供了大量的plugin满

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

Linux中SSH服务配置的全面指南

《Linux中SSH服务配置的全面指南》作为网络安全工程师,SSH(SecureShell)服务的安全配置是我们日常工作中不可忽视的重要环节,本文将从基础配置到高级安全加固,全面解析SSH服务的各项参... 目录概述基础配置详解端口与监听设置主机密钥配置认证机制强化禁用密码认证禁止root直接登录实现双因素

在Spring Boot中集成RabbitMQ的实战记录

《在SpringBoot中集成RabbitMQ的实战记录》本文介绍SpringBoot集成RabbitMQ的步骤,涵盖配置连接、消息发送与接收,并对比两种定义Exchange与队列的方式:手动声明(... 目录前言准备工作1. 安装 RabbitMQ2. 消息发送者(Producer)配置1. 创建 Spr

嵌入式数据库SQLite 3配置使用讲解

《嵌入式数据库SQLite3配置使用讲解》本文强调嵌入式项目中SQLite3数据库的重要性,因其零配置、轻量级、跨平台及事务处理特性,可保障数据溯源与责任明确,详细讲解安装配置、基础语法及SQLit... 目录0、惨痛教训1、SQLite3环境配置(1)、下载安装SQLite库(2)、解压下载的文件(3)、

Linux如何快速检查服务器的硬件配置和性能指标

《Linux如何快速检查服务器的硬件配置和性能指标》在运维和开发工作中,我们经常需要快速检查Linux服务器的硬件配置和性能指标,本文将以CentOS为例,介绍如何通过命令行快速获取这些关键信息,... 目录引言一、查询CPU核心数编程(几C?)1. 使用 nproc(最简单)2. 使用 lscpu(详细信

k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)

《k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)》本文记录在K8s上运行的MySQL/MariaDB备份方案,通过工具容器执行mysqldump,结合定时任务实... 目录前言一、获取需要备份的数据库的信息二、备份步骤1.准备工作(X86)1.准备工作(arm)2.手

Nginx 重写与重定向配置方法

《Nginx重写与重定向配置方法》Nginx重写与重定向区别:重写修改路径(客户端无感知),重定向跳转新URL(客户端感知),try_files检查文件/目录存在性,return301直接返回永久重... 目录一.try_files指令二.return指令三.rewrite指令区分重写与重定向重写: 请求