个人的 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

相关文章

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

CentOS7更改默认SSH端口与配置指南

《CentOS7更改默认SSH端口与配置指南》SSH是Linux服务器远程管理的核心工具,其默认监听端口为22,由于端口22众所周知,这也使得服务器容易受到自动化扫描和暴力破解攻击,本文将系统性地介绍... 目录引言为什么要更改 SSH 默认端口?步骤详解:如何更改 Centos 7 的 SSH 默认端口1

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

SpringBoot多数据源配置完整指南

《SpringBoot多数据源配置完整指南》在复杂的企业应用中,经常需要连接多个数据库,SpringBoot提供了灵活的多数据源配置方式,以下是详细的实现方案,需要的朋友可以参考下... 目录一、基础多数据源配置1. 添加依赖2. 配置多个数据源3. 配置数据源Bean二、JPA多数据源配置1. 配置主数据

Spring 基于XML配置 bean管理 Bean-IOC的方法

《Spring基于XML配置bean管理Bean-IOC的方法》:本文主要介绍Spring基于XML配置bean管理Bean-IOC的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录一. spring学习的核心内容二. 基于 XML 配置 bean1. 通过类型来获取 bean2. 通过

Java使用SLF4J记录不同级别日志的示例详解

《Java使用SLF4J记录不同级别日志的示例详解》SLF4J是一个简单的日志门面,它允许在运行时选择不同的日志实现,这篇文章主要为大家详细介绍了如何使用SLF4J记录不同级别日志,感兴趣的可以了解下... 目录一、SLF4J简介二、添加依赖三、配置Logback四、记录不同级别的日志五、总结一、SLF4J

如何使用Nginx配置将80端口重定向到443端口

《如何使用Nginx配置将80端口重定向到443端口》这篇文章主要为大家详细介绍了如何将Nginx配置为将HTTP(80端口)请求重定向到HTTPS(443端口),文中的示例代码讲解详细,有需要的小伙... 目录1. 创建或编辑Nginx配置文件2. 配置HTTP重定向到HTTPS3. 配置HTTPS服务器

SpringBoot中配置Redis连接池的完整指南

《SpringBoot中配置Redis连接池的完整指南》这篇文章主要为大家详细介绍了SpringBoot中配置Redis连接池的完整指南,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以... 目录一、添加依赖二、配置 Redis 连接池三、测试 Redis 操作四、完整示例代码(一)pom.

Linux内核参数配置与验证详细指南

《Linux内核参数配置与验证详细指南》在Linux系统运维和性能优化中,内核参数(sysctl)的配置至关重要,本文主要来聊聊如何配置与验证这些Linux内核参数,希望对大家有一定的帮助... 目录1. 引言2. 内核参数的作用3. 如何设置内核参数3.1 临时设置(重启失效)3.2 永久设置(重启仍生效