LiYanan2004

前言

在前不久的 WWDC 2019 上,Craig 已经为我们展示了 iOS 上的全新 深/浅模式 切换

那么这项技术可以引入到博客吗??

答案是:Of Course !

适用范围:本教程适用于 Hexo + Github 方案 使用 material-x 作为主题来进行使用

以下简称 “/theme/material-x” 为主题文件夹

编码格式

1、在 Windows 上所有 ejs 后缀名的文件均 以 记事本 打开

2、由于 Windows 默认保存编码为:ANSI,会导致修改处的“中文内容”在网页中显示为乱码

解决方法:保存时点击另存为,将保存类型选为“所有文件”编码选为“UTF-8”点击保存,系统提示是否替换,选择是即可

CSS 准备

1、打开 “/主题文件夹/sources/less/colour.less”,对配色方案进行修改

2、渲染到 Public 文件夹(可以直接本地部署测试,渲染完后结束即可)

3、在 ”/public“ 文件夹下找到 ”style.css“ 文件,对其进行命名

可改为:style_light.css && style_dark.css





再次重复 1、2、3 步骤,得到两个不同配色方案的 css(一个为深色模式,另一个为浅色模式)

也可以直接 下载我的配色方案 (浅色模式下白色背景,蓝色主题;深色模式下黑色背景,绿色主题)

4、将 2 个 css 文件复制到 ”/主题文件夹/source/“

5、将 ”_style.less“ 拖拽到 less 文件夹

最终的 ”/主题文件夹/source/“ 文件夹如下:





6、在 hexo 根目录下运行 ”hexo clean“ 命令来清除缓存(可跳过此步)

引入 css

1、在 ”/主题文件夹/layout/_partial/head.ejs“ 中找到 ”link“ 字段,进行如下修改

增加处语法如下:

1
2
<link rel="stylesheet" href="/style.css" title="light">
<link rel="stylesheet" href="/style_dark.css" title="dark">

rel 字段不变,复制即可

herf 为 css 的链接地址,写为 /之前命名的 css.css 即可

title 为 light(浅色模式) / dark(深色模式)

因为有深色和浅色两种模式,所以需要 2 条 link 语句





2、修改完结果如下:





3、下方另起一行,加入以下代码,引入通知css

1
2
<link href="https://cdn.jsdelivr.net/gh/LiYanan2004/LiYanan2004.github.io/website/style_sheet/light-theme.min.css" title="light_notify" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/LiYanan2004/LiYanan2004.github.io/website/style_sheet/dark-theme.min.css" title="dark_notify" rel="stylesheet">

⚠️ 顺序不能错,错的话会导致页面一开始渲染的时候显示异常,然后又自动恢复,切换模式的时候也会较卡顿

引入 JavaScript

在 ”/主题文件夹/layout/_partial/head.ejs“ 找到 “/script” 字样,在后方另起一行并加入以下代码:

1
2
<script async src="https://cdn.jsdelivr.net/gh/LiYanan2004/LiYanan2004.github.io/website/js/browser_check.min.js" type="8c9d1d17a02ca34de9208b07-text/javascript"></script>
<script async src="https://lc-ukjttwrd.cn-n1.lcfile.com/db5a3c5ef44fbc46778c/growl-notification.min.js" type="8c9d1d17a02ca34de9208b07-text/javascript"></script>




创建 深色/浅色模式 切换按钮

1、在 ”/主题文件夹/layout/_partial/header.ejs“ 的如图位置加入这两段代码





1
2
3
4
5
<li>
<a class="nav flat-box" onclick="switchTheme();">
<i class="fas fa-sync"></i>&nbsp;显示调节
</a>
</li>




1
2
3
4
5
<li>
<a class="nav flat-box" onclick="switchTheme();">
<i class="fas fa-sync"></i>&nbsp;显示调节
</a>
</li>

Tips:”显示调节“ 字样可以随意更改

引入并激活 Dark-Mode 切换脚本

1、下载 Dark-Mode 渲染文件,放在 ”/主题文件夹/layout/_third-party“ 里





2、打开 ”/主题文件夹/layout/layout.ejs”,在 “body” 字段后加 onload=”based_on_time_and_device()”

3、在 “body” 字样下增加 <%- partial(‘_third-party/Dark-Mode’) %>

修改后如下:

1
2
3
<body onload="based_on_time_and_device()">
<!-- DarkMode -->
<%- partial('_third-party/Dark-Mode') %>

Tips:直接复制上面的代码替换原代码中的 <“body“> 即可





4、将 layout.ejs 拉到底部,找到 <“/body“> 字样,在上方加入以下代码:

1
<div style="display: none;" id="theme"><p></p></div>




修改标题栏层级

1、在 ”/主题文件夹/layout/_partial/header.ejs“ 中第一行的 “>“ 字样前加入以下代码:

1
style = "z-index: 500;"

最终效果如图:





渲染测试

运行本地部署的 hexo 命令测试一下即可

查看视频 Demo

Enjoy it ~

 海报

 评论


字数统计:22.4k  |   正在计算...
总访问量为 次 。