Typecho 极简风格写作主题 Salome

Typecho维基君 • 主题列表 • 1997次浏览 • 发布 2023-09-23 • 更新 2023-09-23

主题简介

Salome是一款极简风格的Typecho博客主题，专注于写作，排除多余干扰，优化文字显示。据该主题作者说此主题编码工作是由 ChatGPT提供技术支持的。

Typecho 极简风格写作主题Salome

其实关于极简风的Typecho主题，今天分享的salome和之前分享的几款主题前端界面上几乎差不多，感兴趣的可以顺便去看看：

Typecho 单栏简约主题 Ying
Typecho 简单的单栏生活笔记类主题 LIFET
Typecho 移植自 Bitcron 的简洁主题 Fantasy
Typecho 单栏文章主题 Hucore

使用方式

下载将文件夹名修改为 Salome
将 Salome 文件夹放到 typecho/usr/themes，在后台页面-控制台-外观启用。

功能使用

启用归档：后台页面 -> 管理 -> 独立页面 -> 新建页面 -> [自定义模板]选择：archive -> 发布页面
首页图标：进入 Font Awesome 选择图标 -> 复制图标代码(如fa fa-facebook) -> 在 header.php内替换
浏览器图标(favicon.ico)：制作 32 X 32 .ico 格式的图片，在 /images 文件夹里替换，apple-touch-icon.png(180 X 180) 同理。
RSS：在你的完整网址后加上 /feed 即可。例如：https://example.com/feed。 header.php 里替换自己的网址。
代码高亮：Ver:0.2.0 版已移除代码高亮，可以自行使用 prismjs 实现。注意在 prism.css 里需对[背景色]或[其他]使用 !important 声明，否则颜色有错误。
数学公式：语法可以参考这篇博文
黑暗模式：界面和图片可以正常显示，若特定界面颜色有反转，可在 style.css 添加颜色再次反转，例子如下。

@media (prefers-color-scheme: dark) {
    html {
        filter: invert(90%) hue-rotate(180deg);
    }

    img, video, svg, div[class*="language-"] {
        filter: invert(110%) hue-rotate(180deg);
        opacity: .8;
    }

    # 嵌入 Youtube 视频颜色修正
    .iframe{
        filter: invert(1) hue-rotate(180deg); 
        opacity: .8;
    }
}

嵌入YouTube：如果直接粘贴嵌入代码，视频宽度和高度不能自适应屏幕，可使用以下方法修正。

1. YouTube 视频界面 -> 分享 -> 嵌入 -> 复制代码
<iframe width="560" height="315" src="https://www.youtube.com/embed/4pIJluV19HY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

2. 删除代码内的宽高参数
<iframe src="https://www.youtube.com/embed/4pIJluV19HY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

3. 添加 div 包裹

<div class="iframe">

<iframe src="https://www.youtube.com/embed/4pIJluV19HY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

</div>

4. 将内容粘贴到文章页面即可