一个简洁大气，含夜间模式的 Typecho主题-Single

幻蓝 2023-12-08 Typecho 67

简洁大气、夜间模式、文章目录、图片灯箱、代码高亮、平滑滚动、无 JQ 库。

开源https://github.com/Dreamer-Paul/Single

[常见问题]

[前端相关]

文章热度不会变？

答：这个是评论数，不是浏览数

手机版的菜单文章分类无法收缩？

答：这个是我本身的设计，不属于 BUG，主要是制作简单 23333

我博客的背景图怎么设置的？

答：1.4 以前的版本请在主题后台添加自定义 CSS，1.4 及以后的版本在后台直接输入图片地址即可。

我博客使用的背景图是从哪来的？

答：目前采用了我自己设计的随机壁纸 API，所有壁纸都是白色背景的，对于本主题是最适合不过的了。

夜间模式使用自定义的白色背景，会造成整体背景色变亮？

答：可以通过设置自定义 CSS 以解决这个问题，白天模式下不受影响。考虑到主题的通用性和可二次修改性，暂时没有默认设置和提供这个选项。

body::before{
    mix-blend-mode: multiply;
}

夜间模式会闪屏？

答：1.9 版本已经修复，欢迎下载更新。经测试：Chrome 下有概率在返回页面的情况下复原，这个需要看看怎么解决。

夜间模式无法使用？

答：最新版本（非 Release 下的 2.1 版）改成了 CSS3 变量的方式实现变色，在 IE11 环境下只能勉勉强强预览，其他浏览器下（需升级到新版）均正常。

文章已经添加了标题，但目录树不显示？

答：目录树功能暂只支持 `.post-contents` 下的直属标题元素（h1-h6），如果你使用了「EditorMD」一类的插件，改变了输出结构，则可能导致无法正常识别。

文章底部作者信息/评论的头像裂开无法显示？

裂开主要是因为国内网络环境问题导致，根据文章 Typecho 一些冷门小技巧自定义一个 Gravatar 源，即可解决。

文章底部作者信息的头像显示成了蓝色标志，如何进行修改？

这主要是因为你的邮箱地址未注册 Gravatar，被替换成了默认图像。如果需要修改，建议直接注册一个账号，除了能解决这里的显示，你在其他网站和博客使用该邮箱进行评论互动都会采用该头像。

评论区"几天前"的日期输出形式如何替换成最原始的？

答：编辑主题的 `comments.php` 文件，替换以下内容即可。

<time class="comment-time"><?php $comments -> created(); ?></time>

替换为：

<time class="comment-time"><?php $comments -> date(); ?></time>

如何使用多栏效果？

答：根据奇趣框架栅格的使用方式编写 HTML 代码，可以随意拼凑多种方式使用。一个三栏编写方式如下：

!!!
<div class="row">
    <div class="col-m-4">
!!!

// 此处即可填写 Markdown 内容

!!!
    </div>
    <div class="col-m-4">
!!!

// 此处即可填写 Markdown 内容

!!!
    </div>
    <div class="col-m-4">
!!!

// 此处即可填写 Markdown 内容

!!!
    </div>
</div>

由于 Typecho 的解析方式比较特殊，因此需要带上 `!!!` 划分内容区域。

我的表格内容太长，存在溢出页面或换行严重的情况，怎么改善？

答：根据奇趣框架表格的使用方式增加一层 `ks-table` 的 DIV 容器，就可以解决这个问题。如果要禁止换行，可以在额外设置一条 `text-nowrap` 的类名。

!!!
<div class="ks-table text-nowrap">
!!!

// 此处即可填写 Markdown 表格内容

!!!
</div>
!!!

以上两种方式，均仅限在使用「奇趣框架」的主题和网站上使用，而保罗的主题均采用这个框架进行设计。

[服务端相关]

安装主题，提示您选择的风格不存在

答：文件夹要重命名！重命名！重命名！重要的事情说三次！

新建页面选择自定义模板，发现并没有出现主题对应的模板

答：请先将主题目录的所有者设置为 PHP 执行的用户/用户组，并赋予 755 的权限。

博客采用多域名（例：www.sample.com 和 sample.com），其中一个图标字体显示不正常？

答：服务器默认是阻止跨域访问内容的，需要手动修改服务器头或只使用一个域名。个人推荐只使用一个域名，可以保证网站收录情况正常。

网站访问时而缓慢？

答：你可以通过使用浏览器 F12 开发工具检查网络请求，确认速度慢的原因。这里给的建议是可能和主题预设的 CDN 地址有关，目前主题使用的是 JSDelivr CDN，在国内部分地区访问速度不稳定，你可以通过检查主题的 `header.php` 和 `footer.php` 两个文件手动进行确认。除此之外，还有一种情况就是第三方插件所致。

伪静态怎么配置？

答：Nginx 配置：

location / {
    try_files $uri $uri/ $uri.html /index.php?$args;
}

Apache 配置：

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteRule index.html$ index.php
    RewriteRule index-([1-9]+[0-9]*).html$ index.php?p=$1
    RewriteRule ([a-z]{1,})-([0-9]{1,}).html$ index.php?action=$1&id=$2
</IfModule>

[其他问题]

为什么主题免费开源？

答：这是我做的第一款 Typecho 主题，抱着学习的态度制作而成。并且希望借此主题扩展人脉、结识更多的大佬和同道之人。当然你可以为我打赏，给我的博客提供微薄的帮助。这样我以后就可以给大家带来更好的作品和文章了。

本主题的 WordPress 版有 BUG？

答：本人并没有参与制作 WordPress 版本，你所使用的均为他人的移植版，我这边无法提供疑难解答和功能排错。

想参与移植本主题？

答：请注明移植于奇趣保罗的 Typecho 主题 Single，优秀的移植作品我将同时推荐显示。

关于 Fork 和 PR

答：开源版默认公开于社区，你可以自由的 Fork 项目，魔改出自己的版本，也可将部分功能进行 PR（需要得到作者同意），但不可进行二次销售。

其他问题

关于 Typecho 使用的一些奇怪的问题，你可以先阅读一下作者的这篇文章《Typecho 一些冷门小技巧》，还可以在博客上以「typecho」为关键词尝试搜索其他文章。

如果上述内容不符合你所遇到的问题，请加入群（915297074）联系群主即时提问交流，也可在 GitHub 的 Issues 区提出。

主题选项

站点图标

填写一张 png 图片地址（192x192px），不填则使用默认图标

默认：网站地址/usr/themes/single/img/icon.png

(https://docs.paul.ren/single/#/?id=%e7%ab%99%e7%82%b9%e8%83%8c%e6%99%af)

在这里填入一张图片地址，不填则显示纯色背景

默认：无

[社交链接]

参考下方格式编写，就可以实现我博客的效果了！更多图标可以参考 FontAwesome 的文档，主题暂时没有想要升级到最新版本的打算（毕竟商业化了，感觉性质变了）

<a rel="nofollow" title="新浪微博" href="http://weibo.com/234891753" target="_blank">
    <i class="fa fa-weibo"></i>
</a>
<a rel="nofollow" title="企鹅群" href="https://jq.qq.com/?_wv=1027&k=4Buhabv" target="_blank">
    <i class="fa fa-qq"></i>
</a>
<a rel="nofollow" title="GitHub" href="https://github.com/Dreamer-Paul" target="_blank">
    <i class="fa fa-github"></i>
</a>
<a rel="nofollow" title="蒸汽" href="http://steamcommunity.com/id/dreamer-paul" target="_blank">
    <i class="fa fa-steam"></i>
</a>
<a rel="nofollow" title="小窝" href="https://paul.ren" target="_blank">
    <i class="fa fa-home"></i>
</a>

[自定义样式表]

如果你对主题现在的部分样式不够满意，可以在这里编写自己的 CSS 代码，以改变主题的默认外观。

// 让看板娘在夜间模式下变暗（旧版）
.neon .pio-container{
    -webkit-filter: brightness(.7);
    filter: brightness(.7);
}

// 最新版
.dark-theme .pio-container{
    -webkit-filter: brightness(.7);
    filter: brightness(.7);
}

主题在最新（2.1 及以上）已经采用 CSS3 变量设置主题颜色，你可以通过在这里编写代码，以修改默认的颜色！

// 白天模式颜色（默认）
:root{
    --blue: #00bcd4;
    --light-blue: #11e4ff;
}

// 夜间模式颜色
.dark-theme{
    --blue: #00bcd4;
    --light-blue: #11e4ff;
}

变量名称	默认颜色	说明
--blue	#6f9fc7	默认蓝
--light-blue	#9fcff7	亮蓝
--border	#ddd	默认边框
--dark-border	#ccc	深边框
--light-border	#eee	亮边框
--light-background	#fff	亮背景

更多 CSS 变量，可自行使用浏览器的开发工具查看！

[统计代码]

如果你的网站想接入百度统计、Google Analytics 等网站流量统计平台，请在此填写对应的代码。同时这里还支持插入自己想要的额外 JavaScript 代码。需要包裹 `