介绍一种让 Sakurairo 随侧边栏的出现，使其中的布局自动变色的方案 #842

PolarisSdesu · 2024-01-30T05:16:35Z

PolarisSdesu
Jan 30, 2024

引言

本教程包括布局：🍔移动端的汉堡菜单 iconflat、搜索按钮 i、🔗顶栏中的标签元素 a 的黑白色过渡，具体效果可前往我的博客 https://polarissmusic.cn 查看。

此处不介绍顶栏 Logo 自动变色方案的具体介绍，因为我的博客直接修改了顶栏的 PHP 文件以使用 svg 格式来作为我的顶栏 Logo。

开始

对于🔍搜索按钮 `i`、🔗顶栏中的标签元素 `a`

这其实超级简单，按下 F12，在滚动页面时会发现有一个 CSS 样式 yya 被添加到顶栏中：

<header class="site-header no-select" role="banner">...</header>

<header class="site-header no-select yya" role="banner">...</header>

所以我们只写一个：当 yya 样式出现时，更改搜索按钮 i及顶栏中的标签元素 a 的颜色就可以：

.site-top .lower a{
    transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
    color:#FFFFFF;
}

.site-header i{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
    color:#FFFFFF;
}

.yya .lower a{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
    color:#000000;
}

.yya i{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
    color:#000000;
}

将以上自定义的 CSS 文件添加到你的 WordPress 后台中的：外观 --> 自定义 --> 额外 CSS 中，随后点击发布就可以了。

我们通过元素定位，定位到了 i 和 a 的位置，当 yya 样式出现时，对其更改一个新的颜色属性。

为了过渡更加流畅，我添加了 transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1); 贝塞尔曲线属性，如果你不喜欢可自行删除。

对于🍔移动端的汉堡菜单 `iconflat`

这就不像搜索按钮和标签元素那样简单了，因为对于移动端的汉堡菜单中：

<div class="openNav no-select">
	<div class="iconflat no-select" style="padding: 30px;">
		<div class="icon"></div>
	</div>
</div>

它并没有随着页面滚动而添加新的 CSS 样式，而且也没有被 yya 元素所包裹起来......

解决方法

既然移动端的汉堡菜单 iconflat 没有随着页面的滚动而增加新的 CSS 样式，我们就来自己创造一个！

yya 样式肯定是被一个 JavaScript 所控制，所以只要我们模仿那个 JavaScript 函数来写一个随着页面滚动，为汉堡菜单 iconflat 添加一个新的 CSS 样式就可以了！

于是找啊找......这个 JavaScript 位于 Sakurairo-2.6.3.1/js/app.js！

我们所需要的那部分长这样：

const e = document.querySelector(".site-header")
    , t = document.querySelector(".skin-menu")
    , n = document.querySelector("#changskin")
    , o = document.querySelector("#moblieGoTop")
    , r = t=>{
      t > 0 ? e.classList.add("yya") : e.classList.remove("yya");
      const r = t > 20 ? "scale(1)" : "scale(0)";
      o.style.transform = r,
      n.style.transform = r
  }
  ;

对它魔改一下......？

为了达到汉堡菜单自动变色的效果，我们首先要定义一个默认颜色，就选择白色吧；且当出现一个新的样式时，汉堡菜单的颜色要切换到黑色。

为此我们定义一个空的 CSS 样式：make-it-black，并实现上述效果：

.no-select .icon{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
	background-color:#FFFFFF;
}

.no-select .icon:before{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
	background-color:#FFFFFF;
}

.no-select .icon:after{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
	background-color:#FFFFFF;
}

.make-it-black .no-select .icon{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
	background-color:#000000;
}

.make-it-black .no-select .icon:before{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
	background-color:#000000;
}

.make-it-black .no-select .icon:after{
	transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1);
	background-color:#000000;
}

同理，将以上自定义的 CSS 文件添加到你的 WordPress 后台中的：外观 --> 自定义 --> 额外 CSS 中，随后点击发布就可以了。

接下来是 JavaScript 的部分：

const e = document.querySelector(".site-header")
    , t = document.querySelector(".skin-menu")
    , n = document.querySelector("#changskin")
    , o = document.querySelector("#moblieGoTop")
    , h = document.querySelector(".openNav")
    , r = t=>{
      t > 0 ? e.classList.add("yya") : e.classList.remove("yya");
      t > 0 ? h.classList.add("make-it-black") : h.classList.r  ("make-it-black");
      const r = t > 20 ? "scale(1)" : "scale(0)";
      o.style.transform = r,
      n.style.transform = r
  }
  ;

前往 Sakurairo-2.6.3.1/js/app.js，使用自己喜欢的编辑器搜索 yya，定位到这部分直接对原内容（在 ### 解决方法中）覆盖即可。

我们模仿原 JavaScript 文件添加了：

随着页面滚动，为汉堡菜单所在的元素添加一个 make-it-black 的空样式。

配合先前定义的 CSS 样式，就可以做到汉堡菜单自动切换颜色的效果。

结语

感谢你阅读这篇文章。

链接树：https://links.polarissmusic.cn

我的个人博客：https://polarissmusic.cn

在 X（Twitter）上关注我：https://twitter.com/PolarisSdesu

mirai-mamori · 2024-01-31T02:22:22Z

mirai-mamori
Jan 31, 2024
Maintainer

快提pr 获取 Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ 发件人: PolarisSdesu ***@***.***> 发送时间: Tuesday, January 30, 2024 1:16:47 PM 收件人: mirai-mamori/Sakurairo ***@***.***> 抄送: Subscribed ***@***.***> 主题: [mirai-mamori/Sakurairo] 介绍一种让 Sakurairo 随侧边栏的出现，使其中的布局自动变色的方案 (Discussion #842) 引言本教程包括布局：🍔移动端的汉堡菜单 iconflat、搜索按钮 i、🔗顶栏中的标签元素 a 的黑白色过渡，具体效果可前往我的博客 https://polarissmusic.cn 查看。此处不介绍顶栏 Logo 自动变色方案的具体介绍，因为我的博客直接修改了顶栏的 PHP 文件以使用 svg 格式来作为我的顶栏 Logo。开始对于🔍搜索按钮 i、🔗顶栏中的标签元素 a 这其实超级简单，按下 F12，在滚动页面时会发现有一个 CSS 样式 yya 被添加到顶栏中： <header class="site-header no-select" role="banner">...</header> <header class="site-header no-select yya" role="banner">...</header> 所以我们只写一个：当 yya 样式出现时，更改搜索按钮 i及顶栏中的标签元素 a 的颜色就可以： .site-top .lower a{ transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1); color:#FFFFFF; } .site-header i{ transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1); color:#FFFFFF; } .yya .lower a{ transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1); color:#000000; } .yya i{ transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1); color:#000000; } 将以上自定义的 CSS 文件添加到你的 WordPress 后台中的：外观 --> 自定义 --> 额外 CSS 中，随后点击发布就可以了。我们通过元素定位，定位到了 i 和 a 的位置，当 yya 样式出现时，对其更改一个新的颜色属性。为了过渡更加流畅，我添加了 transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1); 贝塞尔曲线属性，如果你不喜欢可自行删除。对于🍔移动端的汉堡菜单 iconflat 这就不像搜索按钮和标签元素那样简单了，因为对于移动端的汉堡菜单中： <div class="openNav no-select"> <div class="iconflat no-select" style="padding: 30px;"> <div class="icon"></div> </div> </div> 它并没有随着页面滚动而添加新的 CSS 样式，而且也没有被 yya 元素所包裹起来...... 解决方法既然移动端的汉堡菜单 iconflat 没有随着页面的滚动而增加新的 CSS 样式，我们就来自己创造一个！ yya 样式肯定是被一个 JavaScript 所控制，所以只要我们模仿那个 JavaScript 函数来写一个随着页面滚动，为汉堡菜单 iconflat 添加一个新的 CSS 样式就可以了！于是找啊找......这个 JavaScript 位于 Sakurairo-2.6.3.1/js/app.js！我们所需要的那部分长这样： const e = document.querySelector(".site-header") , t = document.querySelector(".skin-menu") , n = document.querySelector("#changskin") , o = document.querySelector("#moblieGoTop") , r = t=>{ t > 0 ? e.classList.add("yya") : e.classList.remove("yya"); const r = t > 20 ? "scale(1)" : "scale(0)"; o.style.transform = r, n.style.transform = r } ; 对它魔改一下......？为了达到汉堡菜单自动变色的效果，我们首先要定义一个默认颜色，就选择白色吧；且当出现一个新的样式时，汉堡菜单的颜色要切换到黑色。为此我们定义一个空的 CSS 样式：make-it-black，并实现上述效果： .no-select .icon{ transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1); background-color:#FFFFFF; } .no-select .icon:before{ transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1); background-color:#FFFFFF; } .no-select .icon:after{ transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1); background-color:#FFFFFF; } .make-it-black .no-select .icon{ transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1); background-color:#000000; } .make-it-black .no-select .icon:before{ transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1); background-color:#000000; } .make-it-black .no-select .icon:after{ transition: all 0.3s cubic-bezier(0.82, 0, 0.58, 1); background-color:#000000; } 同理，将以上自定义的 CSS 文件添加到你的 WordPress 后台中的：外观 --> 自定义 --> 额外 CSS 中，随后点击发布就可以了。接下来是 JavaScript 的部分： const e = document.querySelector(".site-header") , t = document.querySelector(".skin-menu") , n = document.querySelector("#changskin") , o = document.querySelector("#moblieGoTop") , h = document.querySelector(".openNav") , r = t=>{ t > 0 ? e.classList.add("yya") : e.classList.remove("yya"); t > 0 ? h.classList.add("make-it-black") : h.classList.r ("make-it-black"); const r = t > 20 ? "scale(1)" : "scale(0)"; o.style.transform = r, n.style.transform = r } ; 前往 Sakurairo-2.6.3.1/js/app.js，使用自己喜欢的编辑器搜索 yya，定位到这部分直接对原内容（在 ### 解决方法中）覆盖即可。我们模仿原 JavaScript 文件添加了：随着页面滚动，为汉堡菜单所在的元素添加一个 make-it-black 的空样式。配合先前定义的 CSS 样式，就可以做到汉堡菜单自动切换颜色的效果。结语感谢你阅读这篇文章。链接树：https://links.polarissmusic.cn 我的个人博客：https://polarissmusic.cn 在 X（Twitter）上关注我：https://twitter.com/PolarisSdesu — Reply to this email directly, view it on GitHub<#842>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AOUJUFTYWDHDOBHXBQWKDWDYRB637AVCNFSM6AAAAABCQTIS2CVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZWGE2TGMJWHA>. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

2 replies

PolarisSdesu Jan 31, 2024
Author

草，可以提 PR 吗

PolarisSdesu Jan 31, 2024
Author

毕竟这个方法实现的并不全面，因为还没有考虑到深色模式

mirai-mamori · 2024-01-31T02:24:30Z

mirai-mamori
Jan 31, 2024
Maintainer

提就完事啦获取 Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ 发件人: PolarisSdesu ***@***.***> 发送时间: Wednesday, January 31, 2024 10:23:41 AM 收件人: mirai-mamori/Sakurairo ***@***.***> 抄送: 染川瞳 ***@***.***>; Comment ***@***.***> 主题: Re: [mirai-mamori/Sakurairo] 介绍一种让 Sakurairo 随侧边栏的出现，使其中的布局自动变色的方案 (Discussion #842) 草，可以提 PR 吗 ― Reply to this email directly, view it on GitHub<#842 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AOUJUFWJQKU7BBWSN7RDH2TYRGTK3AVCNFSM6AAAAABCQTIS2CVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DGMJUGA4TC>. You are receiving this because you commented.Message ID: ***@***.***>

0 replies

mirai-mamori · 2024-01-31T02:24:50Z

mirai-mamori
Jan 31, 2024
Maintainer

还有你QQ群加了吗获取 Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ 发件人: 染川瞳 ***@***.***> 发送时间: Wednesday, January 31, 2024 10:24:21 AM 收件人: mirai-mamori/Sakurairo ***@***.***>; mirai-mamori/Sakurairo ***@***.***> 抄送: Comment ***@***.***> 主题: Re: [mirai-mamori/Sakurairo] 介绍一种让 Sakurairo 随侧边栏的出现，使其中的布局自动变色的方案 (Discussion #842) 提就完事啦获取 Outlook for iOS<https://aka.ms/o0ukef>

________________________________ 发件人: PolarisSdesu ***@***.***> 发送时间: Wednesday, January 31, 2024 10:23:41 AM 收件人: mirai-mamori/Sakurairo ***@***.***> 抄送: 染川瞳 ***@***.***>; Comment ***@***.***> 主题: Re: [mirai-mamori/Sakurairo] 介绍一种让 Sakurairo 随侧边栏的出现，使其中的布局自动变色的方案 (Discussion #842) 草，可以提 PR 吗 ― Reply to this email directly, view it on GitHub<#842 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AOUJUFWJQKU7BBWSN7RDH2TYRGTK3AVCNFSM6AAAAABCQTIS2CVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DGMJUGA4TC>. You are receiving this because you commented.Message ID: ***@***.***>

0 replies

PolarisSdesu · 2024-01-31T02:32:54Z

PolarisSdesu
Jan 31, 2024
Author

彳亍，我先加一下 QQ 群获取Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: 染川瞳 ***@***.***> Sent: Wednesday, January 31, 2024 10:25:01 AM To: mirai-mamori/Sakurairo ***@***.***> Cc: PolarisSdesu ***@***.***>; Author ***@***.***> Subject: Re: [mirai-mamori/Sakurairo] 介绍一种让 Sakurairo 随侧边栏的出现，使其中的布局自动变色的方案 (Discussion #842) 还有你QQ群加了吗获取 Outlook for iOS<https://aka.ms/o0ukef>

________________________________ 发件人: 染川瞳 ***@***.***> 发送时间: Wednesday, January 31, 2024 10:24:21 AM 收件人: mirai-mamori/Sakurairo ***@***.***>; mirai-mamori/Sakurairo ***@***.***> 抄送: Comment ***@***.***> 主题: Re: [mirai-mamori/Sakurairo] 介绍一种让 Sakurairo 随侧边栏的出现，使其中的布局自动变色的方案 (Discussion #842) 提就完事啦获取 Outlook for iOS<https://aka.ms/o0ukef>

________________________________ 发件人: PolarisSdesu ***@***.***> 发送时间: Wednesday, January 31, 2024 10:23:41 AM 收件人: mirai-mamori/Sakurairo ***@***.***> 抄送: 染川瞳 ***@***.***>; Comment ***@***.***> 主题: Re: [mirai-mamori/Sakurairo] 介绍一种让 Sakurairo 随侧边栏的出现，使其中的布局自动变色的方案 (Discussion #842) 草，可以提 PR 吗 D Reply to this email directly, view it on GitHub<#842 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AOUJUFWJQKU7BBWSN7RDH2TYRGTK3AVCNFSM6AAAAABCQTIS2CVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DGMJUGA4TC>. You are receiving this because you commented.Message ID: ***@***.***> ― Reply to this email directly, view it on GitHub<#842 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AODGFLWYKDRKBB6TR3CLRODYRGTP3AVCNFSM6AAAAABCQTIS2CVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DGMJUGEYDE>. You are receiving this because you authored the thread.Message ID: ***@***.***>

0 replies

PolarisSdesu · 2024-01-31T03:32:54Z

PolarisSdesu
Jan 31, 2024
Author

好了，PR 已提

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

介绍一种让 Sakurairo 随侧边栏的出现，使其中的布局自动变色的方案 #842

{{title}}

Replies: 5 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

介绍一种让 Sakurairo 随侧边栏的出现，使其中的布局自动变色的方案 #842

PolarisSdesu Jan 30, 2024

引言

开始

对于🔍搜索按钮 i、🔗顶栏中的标签元素 a

对于🍔移动端的汉堡菜单 iconflat

解决方法

对它魔改一下......？

接下来是 JavaScript 的部分：

结语

Replies: 5 comments · 2 replies

mirai-mamori Jan 31, 2024 Maintainer

PolarisSdesu Jan 31, 2024 Author

PolarisSdesu Jan 31, 2024 Author

mirai-mamori Jan 31, 2024 Maintainer

mirai-mamori Jan 31, 2024 Maintainer

PolarisSdesu Jan 31, 2024 Author

PolarisSdesu Jan 31, 2024 Author

PolarisSdesu
Jan 30, 2024

对于🔍搜索按钮 `i`、🔗顶栏中的标签元素 `a`

对于🍔移动端的汉堡菜单 `iconflat`

Replies: 5 comments 2 replies

mirai-mamori
Jan 31, 2024
Maintainer

PolarisSdesu Jan 31, 2024
Author

PolarisSdesu Jan 31, 2024
Author

mirai-mamori
Jan 31, 2024
Maintainer

mirai-mamori
Jan 31, 2024
Maintainer

PolarisSdesu
Jan 31, 2024
Author

PolarisSdesu
Jan 31, 2024
Author