本文所用代碼大部分來源于此文：hexo（sakura）給博客增添側邊欄（回到頂部，跳轉評論，深色模式，播放音樂），以及大佬 Sanarous 的網站原始碼，我只是基于這些代碼，結合我自己的喜好，就 next 主題做出些簡陋的改變，
下面先給出實際操作，
操作
很簡單，把如下代碼放入根目錄/source/_data/body-end.njk檔案中即可，（body-end.njk 內的代碼經 next 主題的注入功能后會添加至靜態網頁 </body>標簽上方）
{# 添加小組件 #}
<div id="RightDownBtn">
<a id="btn" href="javascript:void(0)" target="_self" style="" title="回到頂部">
<svg style=" width: 1.5em;height: 1.5em;" class="icon" aria-hidden="true">
<use xlink:href="#icon-xuanfufanhuidingbu">
<svg id="icon-xuanfufanhuidingbu" viewBox="0 0 1024 1024">
<path d="M0 512c0 282.624 229.376 512 512 512s512-229.376 512-512S794.624 0 512 0 0 229.376 0 512z"
fill="#1989FA"></path>
<path
d="M736.768 263.68H287.232c-12.288 0-23.04 10.752-23.04 23.04s10.752 23.04 23.04 23.04H737.28c12.288 0 23.04-10.752 23.04-23.04s-10.752-23.04-23.552-23.04m-207.872 105.472c-1.536-1.536-4.608-4.608-7.68-4.608-3.072-1.536-6.144-1.536-7.68-1.536-3.072 0-6.144 0-7.68 1.536-3.072 1.536-4.608 3.072-7.68 4.608l-186.368 186.368c-9.216 9.216-9.216 23.04 0 32.768 9.216 9.216 23.04 9.216 32.768 0l145.92-145.92V737.28c0 12.288 10.752 23.04 23.04 23.04s23.04-10.752 23.04-23.04V442.368l145.92 145.92c4.608 4.608 10.752 6.144 16.896 6.144 6.144 0 12.288-1.536 16.896-6.144 9.216-9.216 9.216-23.04 0-32.768l-187.392-186.368z"
fill="#FFFFFF"></path>
</svg>
</use>
</svg>
</a>
<a onclick="scrollToComment()" target="_self" title="轉至評論區">
<svg style=" width: 1.5em;height: 1.5em;" class="icon" aria-hidden="true">
<use xlink:href="#icon-ketangtaolun">
<svg t=1592151989892 id=icon-ketangtaolun viewBox="0 0 1025 1024" version=1.1
xmlns="http://www.w3.org/2000/svg" p-id=36645>
<path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FF5A20" p-id=36646></path>
<path
d="M238.481236 628.415011V378.631347c1.130243-2.260486 2.260486-3.390728 2.260486-5.651215 12.432671-42.949227 48.600442-72.335541 93.810154-72.33554 122.066225-1.130243 244.13245-1.130243 366.198676 0 45.209713 0 81.377483 28.256071 93.810154 72.33554 1.130243 2.260486 2.260486 4.520971 2.260486 5.651215v252.04415l-3.390728 10.172185c-13.562914 41.818985-47.470199 67.81457-91.549669 67.81457h-66.684327c-102.852097-1.130243-202.313466 19.214128-297.253863 57.642384-4.520971 2.260486-10.172185 3.390728-15.8234 5.651214v-64.423841c-14.693157-6.781457-28.256071-11.302428-39.558499-18.083885-24.865342-11.302428-36.16777-35.037528-44.07947-61.033113z m291.602649-81.377483c20.344371 0 36.16777-16.953642 36.167771-37.298014 0-19.214128-15.8234-32.777042-39.558499-32.777042-19.214128 0-33.907285 14.693157-33.907285 33.907285 1.130243 20.344371 18.083885 37.298013 37.298013 36.167771z m-126.587196 0c18.083885 0 33.907285-15.8234 32.777042-35.037528 0-20.344371-16.953642-36.16777-37.298014-35.037528-18.083885 0-32.777042 16.953642-32.777042 37.298014 2.260486 18.083885 18.083885 32.777042 37.298014 32.777042z m285.951435-33.907285c0-20.344371-15.8234-36.16777-37.298014-35.037528-18.083885 0-32.777042 16.953642-32.777042 36.167771 0 18.083885 16.953642 32.777042 36.167771 32.777042 18.083885 0 33.907285-15.8234 33.907285-33.907285z"
fill="#FFFFFF" p-id=36647></path>
</svg>
</use>
</svg>
</a>
<a onclick="switchNightMode()" title="深色模式">
<svg style=" width: 1.5em;height: 1.5em;" class="icon" aria-hidden="true">
<use id="modeicon" xlink:href="#icon-_moon">
</use>
</svg>
</a>
<svg aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;">
<symbol id="icon-sun" viewBox="0 0 1024 1024">
<path
d="M511.99976 511.99976m-511.99976 0a511.99976 511.99976 0 1 0 1023.99952 0 511.99976 511.99976 0 1 0-1023.99952 0Z"
fill="#91D2F2"></path>
<path
d="M144.623932 868.455593C237.679889 964.327548 367.831828 1023.99952 511.99976 1023.99952c269.983873 0 490.99977-209.007902 510.455761-474.031778C956.991551 535.703749 887.559584 527.999753 815.623618 527.999753c-309.535855 0-572.895731 142.055933-670.999686 340.45584z"
fill="#198058"></path>
<path
d="M979.623541 575.99973c-351.319835 0-647.791696 155.655927-741.279653 368.639827A509.359761 509.359761 0 0 0 511.99976 1023.99952c260.839878 0 475.967777-195.111909 507.799762-447.31979a1194.34344 1194.34344 0 0 0-40.175981-0.68z"
fill="#1E9969"></path>
<path
d="M69.711967 769.831639C158.503926 921.815568 323.271848 1023.99952 511.99976 1023.99952a509.455761 509.455761 0 0 0 269.631874-76.783964C657.111692 828.375612 464.271782 751.999648 247.623884 751.999648c-61.575971 0-121.183943 6.271997-177.911917 17.831991z"
fill="#6AA33A"></path>
<path
d="M487.887771 1023.39152c-86.543959-122.151943-236.911889-214.679899-417.591804-252.543881 85.11996 144.919932 239.415888 244.279885 417.591804 252.543881z"
fill="#95E652"></path>
<path
d="M394.159815 167.999921l-45.255979 45.255979L303.647858 167.999921l45.255978-45.255979zM394.159815 503.999764l-45.255979 45.255979L303.655858 503.999764l45.247978-45.247979z"
fill="#FFF8E6"></path>
<path
d="M180.879915 290.719864l45.247979 45.247979-45.255979 45.255978-45.255979-45.255978zM516.903758 290.719864l45.247978 45.247979-45.247978 45.247978-45.247979-45.247978z"
fill="#FFF8E6"></path>
<path d="M198.087907 185.207913h63.99997v63.99997h-63.99997zM435.671796 422.791802h63.99997v63.99997h-63.99997z"
fill="#FFF8E6"></path>
<path d="M198.087907 422.791802h63.99997v63.99997h-63.99997zM435.671796 185.207913h63.99997v63.99997h-63.99997z"
fill="#FFF8E6"></path>
<path
d="M348.879836 335.999843m-183.999913 0a183.999914 183.999914 0 1 0 367.999827 0 183.999914 183.999914 0 1 0-367.999827 0Z"
fill="#FFEAB3"></path>
<path
d="M348.879836 335.999843m-159.999925 0a159.999925 159.999925 0 1 0 319.99985 0 159.999925 159.999925 0 1 0-319.99985 0Z"
fill="#FFDC80"></path>
</symbol>
<symbol id="icon-_moon" viewBox="0 0 1024 1024">
<path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#323232"></path>
<path
d="M512 512m-407.005867 0a407.005867 407.005867 0 1 0 814.011734 0 407.005867 407.005867 0 1 0-814.011734 0Z"
fill="#494A4A"></path>
<path
d="M748.1344 633.9584c0-1.143467 0.085333-2.286933 0.085333-3.413333a69.512533 69.512533 0 0 0-8.823466-33.979734q-1.058133-1.911467-2.2528-3.7376l-0.187734-0.3072a70.485333 70.485333 0 0 0-5.2736-7.099733l-0.238933-0.273067q-1.3312-1.536-2.730667-3.003733l-0.3072-0.324267a70.894933 70.894933 0 0 0-6.417066-5.819733l-0.5632-0.443733q-1.467733-1.160533-3.003734-2.235734l-0.494933-0.341333q-1.706667-1.2288-3.6352-2.3552l-0.256-0.136533q-1.706667-0.989867-3.413333-1.8944l-0.887467-0.4608q-1.604267-0.802133-3.242667-1.536l-0.6144-0.273067q-1.928533-0.836267-3.9424-1.553067l-0.8192-0.273066a54.8864 54.8864 0 0 0-3.242666-1.024l-1.143467-0.324267a85.248 85.248 0 0 0-3.601067-0.887467l-0.546133-0.119466a67.345067 67.345067 0 0 0-4.1984-0.733867l-1.143467-0.136533q-1.706667-0.2048-3.2768-0.341334l-1.245866-0.1024a74.786133 74.786133 0 0 0-4.386134-0.1536 69.8368 69.8368 0 0 0-20.48 3.037867 104.106667 104.106667 0 0 0-12.1344-11.076267 258.696533 258.696533 0 0 0-449.9456-248.763733 183.1424 183.1424 0 0 1 106.939734-34.2528c5.12 0 10.24 0.221867 15.36 0.631467a183.125333 183.125333 0 0 1 50.5344 11.52h0.170666q3.874133 1.501867 7.68 3.157333l0.256 0.1024 7.441067 3.413333 0.273067 0.136534q3.669333 1.826133 7.253333 3.805866l0.221867 0.119467q3.618133 2.013867 7.133866 4.164267a184.610133 184.610133 0 0 1 26.760534 20.036266h0.085333q2.986667 2.696533 5.870933 5.5296l0.324267 0.3072q2.781867 2.7648 5.461333 5.632l0.443734 0.477867q2.6112 2.833067 5.12 5.768533l0.494933 0.580267q2.4576 2.9184 4.795733 5.956267l0.494934 0.648533q2.321067 3.037867 4.522666 6.178133l0.426667 0.6144q2.2016 3.1744 4.283733 6.4512l0.324267 0.529067q2.116267 3.413333 4.078933 6.826667l0.170667 0.3072c1.553067 2.7136 3.0208 5.495467 4.437333 8.2944a56.149333 56.149333 0 0 0-12.578133 2.304 82.824533 82.824533 0 0 0-134.007467 18.039466 42.530133 42.530133 0 0 0-53.009066 41.079467 104.277333 104.277333 0 0 0-42.2912 80.110933 13.653333 13.653333 0 0 0 0 1.4336v0.426667c0 0.136533 0.1024 0.682667 0.187733 1.024s0 0.3072 0.1024 0.4608 0.2048 0.733867 0.324267 1.092267l0.1024 0.3072a15.36 15.36 0 0 0 0.580266 1.416533l0.1024 0.187733a16.520533 16.520533 0 0 0 0.648534 1.211734l0.221866 0.3584c0.221867 0.3584 0.4608 0.733867 0.7168 1.092266l0.221867 0.3072a26.333867 26.333867 0 0 0 2.338133 2.798934l0.119467 0.119466q0.6144 0.631467 1.297067 1.262934l0.2048 0.187733q0.7168 0.648533 1.501866 1.297067 1.706667 1.416533 3.720534 2.781866c0.6656 0.4608 1.348267 0.904533 2.065066 1.348267 26.914133 16.7936 87.995733 28.535467 159.044267 28.535467 19.3536 0 37.956267-0.8704 55.3472-2.474667l-0.494933 0.750933-0.426667 0.6144q-2.2016 3.140267-4.539733 6.178134l-0.477867 0.631466q-2.338133 3.037867-4.795733 5.956267l-0.494934 0.580267q-2.491733 2.935467-5.12 5.7856l-0.443733 0.477866q-2.679467 2.884267-5.461333 5.649067l-0.3072 0.290133q-2.884267 2.833067-5.870934 5.546667a184.8832 184.8832 0 0 1-26.7776 20.036267q-3.515733 2.167467-7.150933 4.181333l-0.187733 0.1024q-3.584 1.979733-7.2704 3.805867l-0.256 0.136533q-3.6864 1.826133-7.458134 3.413333l-0.238933 0.1024q-3.805867 1.706667-7.68 3.157334h-0.136533a183.057067 183.057067 0 0 1-50.551467 11.52c-5.12 0.4096-10.24 0.631467-15.36 0.631466a183.159467 183.159467 0 0 1-106.939733-34.2528 258.5088 258.5088 0 0 0 180.138666 107.093334 109.550933 109.550933 0 0 0-3.259733 26.453333 16.520533 16.520533 0 0 0 0.1024 1.706667v0.529066c0 0.170667 0.136533 0.853333 0.221867 1.262934l0.136533 0.5632 0.392533 1.365333 0.136534 0.4096a13.892267 13.892267 0 0 0 0.733866 1.706667l0.119467 0.238933c0.238933 0.512 0.512 1.006933 0.802133 1.501867l0.273067 0.443733q0.4096 0.682667 0.887467 1.365333l0.273066 0.375467a33.0752 33.0752 0 0 0 2.9184 3.413333l0.1536 0.1536 1.5872 1.553067 0.273067 0.256 1.8432 1.621333q2.116267 1.706667 4.625067 3.413334l2.56 1.706666c33.467733 20.8896 109.431467 35.4816 197.802666 35.4816 119.330133 0 216.046933-26.606933 216.046934-59.409066a131.413333 131.413333 0 0 0-56.285867-102.058667z"
fill="#323232"></path>
<path
d="M573.8496 401.8176v-2.781867a56.200533 56.200533 0 0 0-72.6016-53.725866 82.824533 82.824533 0 0 0-134.007467 18.039466 42.530133 42.530133 0 0 0-53.009066 41.079467 104.277333 104.277333 0 0 0-42.257067 80.0768c0 26.385067 77.7728 47.786667 173.7216 47.786667s173.7216-21.384533 173.7216-47.786667a105.659733 105.659733 0 0 0-45.568-82.688z"
fill="#CDCCCA"></path>
<path
d="M293.768533 506.2656a104.277333 104.277333 0 0 1 42.2912-80.110933 42.530133 42.530133 0 0 1 53.009067-41.079467 82.807467 82.807467 0 0 1 134.007467-18.039467 56.32 56.32 0 0 1 43.758933 4.642134 56.2176 56.2176 0 0 0-65.518933-26.4192 82.824533 82.824533 0 0 0-134.007467 18.039466 42.530133 42.530133 0 0 0-53.009067 41.079467 104.277333 104.277333 0 0 0-42.325333 80.128c0 8.413867 7.936 16.3328 21.845333 23.210667a13.294933 13.294933 0 0 1-0.0512-1.450667z"
fill="#E8E9EC"></path>
<path
d="M453.4784 166.912a258.338133 258.338133 0 0 0-210.944 108.919467 183.995733 183.995733 0 1 1 0 299.451733 258.6624 258.6624 0 1 0 210.944-408.388267z"
fill="#DDAE2A"></path>
<path
d="M364.834133 608.9216q7.594667 0.631467 15.36 0.648533a183.995733 183.995733 0 0 0 0-367.9744q-7.748267 0-15.36 0.631467a183.995733 183.995733 0 0 1 0 366.6944z"
fill="#EDC849"></path>
<path
d="M794.7776 605.969067c0-1.143467 0.085333-2.286933 0.085333-3.413334a69.973333 69.973333 0 0 0-90.299733-66.833066 102.997333 102.997333 0 0 0-166.656 22.4256 52.906667 52.906667 0 0 0-65.928533 51.0976 129.706667 129.706667 0 0 0-52.599467 99.6352c0 32.8192 96.733867 59.409067 216.046933 59.409066s216.046933-26.606933 216.046934-59.409066a131.413333 131.413333 0 0 0-56.695467-102.912z"
fill="#CDCCCA"></path>
<path
d="M446.481067 735.914667a129.706667 129.706667 0 0 1 52.599466-99.6352 52.906667 52.906667 0 0 1 65.928534-51.080534 102.997333 102.997333 0 0 1 166.6048-22.442666 69.973333 69.973333 0 0 1 54.408533 5.7856 69.973333 69.973333 0 0 0-81.476267-32.853334 102.997333 102.997333 0 0 0-166.656 22.4256 52.906667 52.906667 0 0 0-65.928533 51.0976 129.706667 129.706667 0 0 0-52.599467 99.6352c0 10.478933 9.864533 20.309333 27.170134 28.859734a17.408 17.408 0 0 1-0.0512-1.792z"
fill="#E8E9EC"></path>
</symbol>
</svg>
<a onclick="music_on();" id="musicmobbtn" title="播放背景音樂">
<svg style=" width: 1.5em;height: 1.5em;" id="music" aria-hidden="true">
<use id="modeicon" xlink:href="#icon-icon-music">
<svg id="icon-icon-music" viewBox="0 0 1024 1024">
<path
d="M997.45185173 512A485.45185173 485.45185173 0 1 1 26.54814827 512a485.45185173 485.45185173 0 0 1 970.90370346 0"
fill="#9025FC"></path>
<path
d="M478.56450347 602.59745173S403.9869632 545.19277013 369.03442987 537.78962987c-82.1020448-17.41558507-136.47265173 35.8020736-133.37789654 106.192592 4.36906667 100.42785173 127.37042987 123.85090347 194.66619307 111.3505184 67.3564448-12.37902187 101.09534827-57.04059307 108.86257707-111.83597014 7.76722987-54.79537813 46.84610347-263.9037632 46.84610346-263.9037632s66.26417813 61.28829653 85.2574816 82.3447712c26.4571264 29.3698368-0.1820448 79.85682987-0.18204373 79.8568288s72.39300693-12.07561493 90.23336213-104.97896213c12.31834027-64.1403264-23.36237013-76.64071147-65.71804373-110.37961493-82.76954027-65.7787264-121.2416-90.2940448-145.63555627-95.45197014-24.27259307-5.0972448-45.02565973 4.42974827-45.8145184 81.4952288-0.84954027 77.0654816-25.60758507 290.1181632-25.60758506 290.1181632"
fill="#FFFFFF"></path>
</svg>
</use>
</svg>
</a>
<audio id="bg_music" src="{{theme.bg_music}}" loop="loop"></audio>
<script>
function music_on() {
var audio1 = document.getElementById('bg_music');
if (audio1.paused) {
audio1.play();
$("svg#music").addClass("xuanzhuan");
}else{
audio1.pause();
$('svg#music').removeClass("xuanzhuan");
audio1.currentTime = 0;//音樂從頭播放
}
}
function BackTOP() {
$("#btn").hide();
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$("#btn").fadeIn(200);
} else {
$("#btn").fadeOut(200);
}
});
$("#btn").click(function () {
$('body,html').animate({
scrollTop: 0
},
500);
return false;
});
})
}
function scrollToComment() {
var t = $("#valine-comments").offset().top;
$("html,body").animate({ scrollTop: t }, 500);
}
function switchNightMode() {
$(
'<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>'
).appendTo($("body")),
setTimeout(function () {
var DarkMode =
document.cookie.replace(
/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/,
"$1"
) || "0";
DarkMode == "0"
? ($("html").addClass("DarkMode"),
(document.cookie = "DarkMode=1;path=/"),
console.log("夜間模式開啟"),
$("#modeicon").attr("xlink:href", "#icon-sun"))
: ($("html").removeClass("DarkMode"),
(document.cookie = "DarkMode=0;path=/"),
console.log("夜間模式關閉"),
$("#modeicon").attr("xlink:href", "#icon-_moon")),
setTimeout(function () {
$(".Cuteen_DarkSky").fadeOut(1e3, function () {
$(this).remove();
});
}, 2e3);
}),
50;
}
function checkNightMode() {
if ($("html").hasClass("n-f")) {
$("html").removeClass("day");
$("html").addClass("DarkMode");
$("#modeicon").attr("xlink:href", "#icon-sun");
return;
}
if ($("html").hasClass("d-f")) {
$("html").removeClass("DarkMode");
$("html").addClass("day");
$("#modeicon").attr("xlink:href", "#icon-_moon");
return;
}
if (
document.cookie.replace(
/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/,
"$1"
) === ""
) {
if (new Date().getHours() >= 23 || new Date().getHours() < 7) {
$("html").addClass("DarkMode");
document.cookie = "DarkMode=1;path=/";
console.log("夜間模式開啟");
$("#modeicon").attr("xlink:href", "#icon-sun");
} else {
$("html").removeClass("DarkMode");
document.cookie = "DarkMode=0;path=/";
console.log("夜間模式關閉");
$("#modeicon").attr("xlink:href", "#icon-_moon");
}
} else {
var DarkMode =
document.cookie.replace(
/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/,
"$1"
) || "0";
if (DarkMode == "0") {
$("html").removeClass("DarkMode");
$("#modeicon").attr("xlink:href", "#icon-_moon");
} else if (DarkMode == "1") {
$("html").addClass("DarkMode");
$("#modeicon").attr("xlink:href", "#icon-sun");
}
}
}
BackTOP();
checkNightMode();
</script>
</div>
此外，我們還要加入自己的 css 樣式，把如下代碼放入 根目錄/source/_data/styles.styl中即可，
/****************************************/
/*************懸浮組件 begin*************/
/****************************************/
/* 整體 begin */
#RightDownBtn > a {
width: 1.5em;
height: 1.5em;
margin: 0.3125rem 0;
transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border-bottom: none !important;
}
#RightDownBtn svg.icon,
#RightDownBtn svg#music,
#RightDownBtn a {
width: 21px !important;
height: 21px !important;
}
#RightDownBtn {
position: fixed;
right: 32px;
bottom: 64px;
padding: 0.3125rem 0.5rem;
background: #fff;
border-radius: 0.1875rem;
box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.4);
transition: 0.3s ease all;
z-index: 1000;
align-items: flex-end;
flex-direction: column;
display: -moz-flex;
display: flex;
float: right;
}
/* 組件部分 end */
/* 深色模式 begin */
.DarkMode .blogroll,
.DarkMode #RightDownBtn,
.DarkMode strong,
.DarkMode .note,
.DarkMode img {
filter: brightness(0.7) !important;
-webkit-filter: brightness(0.7) !important;
}
.DarkMode #RightDownBtn {
background: #222c;
}
.DarkMode body {
background: #12121c !important;
}
/*主體 main-inner */
.DarkMode .main-inner {
background: rgba(40, 44, 52, 0.5); /*區分陰影度*/
}
.DarkMode .post-block, /*文章*/
.DarkMode .main-menu, /*header上部分顏色*/
.DarkMode .sub-menu, /* 設定二級標題 */
.DarkMode .popup, /*搜索*/
.DarkMode .search-result-container {
background: #282c34 !important; /*背景顏色*/
}
/* 文章塊 post-block */
.DarkMode .post-block {
opacity: 1;
}
.DarkMode .post-block, /*文章*/
.DarkMode .menu-item a, /*menu*/
.DarkMode .site-author-name, /*側欄作者*/
.DarkMode .site-description, /*側欄描述*/
.DarkMode .site-state-item-count, /*側欄分類數*/
.DarkMode .site-state-item-name, /*側欄分類名*/
.DarkMode .links-of-author-item a, /*社交*/
.DarkMode .sidebar-nav li, /*側欄分類標題*/
.DarkMode .post-toc ol a, /*背景關系顏色*/
.DarkMode .post-nav-item a, /*側欄文章標題*/
.DarkMode .footer, /*頁腳顏色*/
.DarkMode .search-input, /*搜索*/
.DarkMode .search-result-container,
.DarkMode .search-result-list a,
.DarkMode .back-to-top,
.DarkMode #waifu-tips,
.DarkMode a.vlogin-btn,
.DarkMode .vright .vheader .vnick,
.DarkMode .vmail,
.DarkMode .vlink,
.DarkMode .veditor,
.DarkMode .vcol button,
.DarkMode .vcount,
.DarkMode .vempty,
.DarkMode .vpreview p,
.DarkMode .vpreview h1,
.DarkMode .vpreview h2,
.DarkMode .vpreview h3,
.DarkMode .vpreview ol,
.DarkMode .vcontent p,
.DarkMode .vcontent h1,
.DarkMode .vcontent h2,
.DarkMode .vcontent h3,
.DarkMode .vcontent ol {
/* live2d 文字顏色 */
color: rgba(255, 255, 255, 0.6) !important;
}
/* header上部*/
.DarkMode .main-menu {
border-radius: 0 0 $myradius $myradius; /*設定圓角*/
}
/* 設定 brand 背景 */
.DarkMode .site-brand-container {
background: url(https://cdn.jsdelivr.net/gh/WillCAI2020/cdn/images/header-bg1.webp);
background-repeat: repeat;
background-position: 70% 20%;
background-size: cover;
}
/* 設定header下部 */
.DarkMode .sidebar-inner {
background: #282c34;
}
.DarkMode a.menu-item-active {
border-radius: $myradius;
background: #382d2d; /* 選中時顯現顏色*/
}
.DarkMode .menu-item a:hover {
border-radius: $myradius;
background: #382d2d; /* 移動至所顯現顏色*/
color: aqua !important;
}
.DarkMode .site-state-item-count,
.DarkMode .site-state-item-name,
.DarkMode .links-of-author-item a {
&:hover {
background: #382d2d;
color: aqua !important;
}
}
.DarkMode .post-toc ol a {
&:hover {
border-bottom-color: #fc6423;
color: #fc6423 !important;
}
}
.DarkMode .sidebar-toc-active .sidebar-nav-toc, /*側欄選中時*/
.DarkMode .sidebar-overview-active .sidebar-nav-overview
.DarkMode .post-toc .nav .active > a {
color: aqua !important;
border-bottom-color: aqua !important;
}
/* 文章尾部背景關系 */
.DarkMode .post-nav-item a:hover {
color: #fc6423 !important; /* 移動至所顯現顏色*/
}
/* 設定二級標題 */
.DarkMode .sub-menu {
background: #282c34;
}
.DarkMode .search-header {
background: #353232 !important;
}
/* 搜索頁面滑鼠劃入變化 */
.DarkMode .search-result-list a {
border-bottom: 1px solid white;
&:hover {
color: aqua !important;
border-bottom: 1px solid aqua;
}
}
.DarkMode #waifu-tips span {
color: purple; /* live2d 注意顏色 */
}
/* 設定超鏈接 */
.DarkMode .post-meta-item a,
.DarkMode .post-body p a {
color: rgba(0, 255, 255, 0.6);
border-bottom: 1px solid rgba(0, 255, 255, 0.6);
&:hover {
color: #fc6423 !important;
border-bottom: 1px solid #fc6423;
}
}
/* 評論區 */
.DarkMode .comments {
background: #282c34;
}
.DarkMode a.vlogin-btn {
&:hover {
color: #fc6423;
border-bottom-color: #fc6423 !important;
}
}
.DarkMode .vcol button {
&:hover {
color: #fc6423 !important;
border-color: #fc6423 !important;
}
}
.DarkMode .vcol span.vicon,
.DarkMode .vcol svg.markdown {
fill: currentColor;
color: rgba(255, 255, 255, 0.6);
}
.DarkMode .posts-collapse .post-content .post-title a{ /* 歸檔 */
color: rgba(255, 255, 255, 0.6);
&:hover {
color: #fc6423;
}
}
.DarkMode .breadcrumb a{
color: rgb(170,145,145,0.6);
border-bottom-color: rgb(170,145,145,0.6);
}
.DarkMode .posts-collapse .post-content .post-header,
.DarkMode .breadcrumb a{
&:hover {
color: #fc6423 !important;
border-color: #fc6423 !important;
}
}
/* pagination-當前頁碼 */
.DarkMode .pagination .page-number.current {
background: rgba(255, 255, 255, 0.6);
color: black;
}
/* pagination-頁碼按鈕 */
.DarkMode .pagination .prev,
.DarkMode .pagination .next,
.DarkMode .pagination .page-number {
color: rgba(255, 255, 255, 0.6);
&:hover {
color: black !important;
background: rgba(255, 255, 255, 0.6);
}
}
/* 深色模式 end */
/* sun and noon */
.Cuteen_DarkSky,
.Cuteen_DarkSky:before {
content: "";
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 88888888;
}
.Cuteen_DarkSky {
background: linear-gradient(#feb8b0, #fef9db);
}
.Cuteen_DarkSky:before {
transition: 2s ease all;
opacity: 0;
background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed);
}
.DarkMode .Cuteen_DarkSky:before {
opacity: 1;
}
.Cuteen_DarkPlanet {
z-index: 99999999;
position: fixed;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
-webkit-animation: CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1);
animation: CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1);
transform-origin: center bottom;
}
@-webkit-keyframes CuteenPlanetMove {
0% {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@keyframes CuteenPlanetMove {
0% {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.Cuteen_DarkPlanet:after {
position: absolute;
left: 35%;
top: 40%;
width: 9.375rem;
height: 9.375rem;
border-radius: 50%;
content: "";
background: linear-gradient(#fefefe, #fffbe8);
}
/* sun and noon.end */
/* 音樂-旋轉 */
.xuanzhuan {
-webkit-animation: rotate 3s linear infinite;
-moz-animation: rotate 3s linear infinite;
-o-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0);
}
to {
-moz-transform: rotate(359deg);
}
}
@-o-keyframes rotate {
from {
-o-transform: rotate(0);
}
to {
-o-transform: rotate(359deg);
}
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(359deg);
}
}
/****************************************/
/*************懸浮組件 end***************/
/****************************************/
上述樣式檔案中，深色模式部分代碼基本上是我根據自己的喜好及頁面相關布局而撰寫的，若有人使用，希望能視自身情況加以洗掉或修改，否則就可能不大好看了喔🙃！
注意：
-
把 scrollToComment() 函式中的 valine-comments 切換為評論區容器對應的id（若為 class 則把 # 換為 . ），當然如果你用的也是 valine 評論，那大概率是不用換的啦，
-
樣式檔案中設定圓角我選擇使用引數
$myradius，這個引數的值放在根目錄/source/_data/variables.styl中，即在 variables.styl 檔案中添加這么一行即可（引數的值為圓角半徑大小，根據喜好修改即可）：//radius $myradius = 12px;當然直接把
$myradius修改為 12px 或其它你喜歡的大小也可😂！ -
在主題組態檔 _config.yml 中加入：（我組態檔采用的方法為主題與站點組態檔二合一）
bg_music: https://cdn.jsdelivr.net/gh/WillCAI2020/cdn/music/慵懶的貓.mp3以設定音樂的地址，
原理
代碼實作的原理此文已經講的很清楚了，接下來的講解只是個人探索程序中的學習筆記，
首先是使用<div id="RightDownBtn"></div>容器添加懸浮組件，組件各部分以<a></a>標簽包裹，共有四個部分，故而共有四個<a></a>標簽，每個部分所使用的圖形是 svg 格式，故而容器內還有<svg></svg>標簽，同時給不同部分均設立了不同的點擊事件，即點擊該組件部分將會執行對應的函式，從而產生相應的效果，
回到頂部
function BackTOP() {
$("#btn").hide();
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$("#btn").fadeIn(200);
} else {
$("#btn").fadeOut(200);
}
});
$("#btn").click(function () {
$('body,html').animate({
scrollTop: 0
},
500);
return false;
});
})
}
該功能的實作依靠 BackTOP() 函式完成，該函式能監聽滾動條，若滾動條所處的高度達不到函式中 if 設定的要求，則將隱藏 id 為 btn 的回到頂部按鈕（$("#btn").hide();），當 click 此按鈕后，將設定滾動條高度為 0，即實作回到頂部，最后寫上一行 BackTOP();即為呼叫此函式，
跳轉評論區
function scrollToComment() {
var t = $("#valine-comments").offset().top;
$("html,body").animate({ scrollTop: t }, 500);
}
當該按鈕經歷 onclick 事件后，會呼叫 scrollToComment() 函式，此函式執行的效果就是跳轉至錨點 #valine-comments，而不同的評論組件，其對應的id很大可能是不同的，這個時候修改一下就行了，
切換深色模式
function switchNightMode() {
$(
'<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>'
).appendTo($("body")),
setTimeout(function () {
var DarkMode =
document.cookie.replace(
/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/,
"$1"
) || "0";
DarkMode == "0"
? ($("html").addClass("DarkMode"),
(document.cookie = "DarkMode=1;path=/"),
console.log("夜間模式開啟"),
$("#modeicon").attr("xlink:href", "#icon-sun"))
: ($("html").removeClass("DarkMode"),
(document.cookie = "DarkMode=0;path=/"),
console.log("夜間模式關閉"),
$("#modeicon").attr("xlink:href", "#icon-_moon")),
setTimeout(function () {
$(".Cuteen_DarkSky").fadeOut(1e3, function () {
$(this).remove();
});
}, 2e3);
}),
50;
}
function checkNightMode() {
if ($("html").hasClass("n-f")) {
$("html").removeClass("day");
$("html").addClass("DarkMode");
$("#modeicon").attr("xlink:href", "#icon-sun");
return;
}
if ($("html").hasClass("d-f")) {
$("html").removeClass("DarkMode");
$("html").addClass("day");
$("#modeicon").attr("xlink:href", "#icon-_moon");
return;
}
if (
document.cookie.replace(
/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/,
"$1"
) === ""
) {
if (new Date().getHours() >= 23 || new Date().getHours() < 7) {
$("html").addClass("DarkMode");
document.cookie = "DarkMode=1;path=/";
console.log("夜間模式開啟");
$("#modeicon").attr("xlink:href", "#icon-sun");
} else {
$("html").removeClass("DarkMode");
document.cookie = "DarkMode=0;path=/";
console.log("夜間模式關閉");
$("#modeicon").attr("xlink:href", "#icon-_moon");
}
} else {
var DarkMode =
document.cookie.replace(
/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/,
"$1"
) || "0";
if (DarkMode == "0") {
$("html").removeClass("DarkMode");
$("#modeicon").attr("xlink:href", "#icon-_moon");
} else if (DarkMode == "1") {
$("html").addClass("DarkMode");
$("#modeicon").attr("xlink:href", "#icon-sun");
}
}
}
onclick 呼叫的是 switchNightMode() 函式，該函式會先在<body></body>中加個一個屬性 Cuteen_DarkSky 的div 容器，結合樣式檔案中的設計，最終效果即為切換前的影片，然后還會為 html（body 的外層容器） 加一個類 DarkMode，我們便可以通過 DarkMode 選擇器來實作深色模式下的樣式設計，還有個 checkNightMode() 函式是直接呼叫的，此函式實作的功能有通過 cookie 來記錄當前狀態（DarkMode 為1則為深色模式），以及通過if (new Date().getHours() >= 23 || new Date().getHours() < 7)做到當時間為23~7 點時，自動設定深色模式，
我對這些的具體實作一竅不通，也只能靠作者的講解稍微了解了一下大概的含義，
這里再談談深色模式下的樣式，首先最主要的是把 body 的背景顏色設定為深色（background: #12121c !important;），其次還有如 post-block、main-menu 等容器背景，我將其設為淺一點的深色（#282c34），然后是各容器的文字顏色，比如post-block、footer等，普遍設定為淺白色（color: rgba(255, 255, 255, 0.6) !important;），其中 0.6 表示透明度，表現為顏色沒那么亮，還有利用屬性 filter: brightness(.7);來降低元素的亮度，其中 .7 可修改，普遍適用于 RightDownBtn、img、note 等，此外還可以設定深色模式下超鏈接的表現、搜索界面的表現等等，具體可見我的樣式檔案，
播放背景音樂
function music_on() {
var audio1 = document.getElementById('bg_music');
if (audio1.paused) {
audio1.play();
$("svg#music").addClass("xuanzhuan");
}else{
audio1.pause();
$('svg#music').removeClass("xuanzhuan");
audio1.currentTime = 0;//音樂從頭播放
}
}
onclick 事件呼叫 music_on() 函式，其中有著簡單的判斷，若音樂停止（paused），則播放（play）它，反之亦然，
音樂的實作則利用 html 對應的元素 <audio></audio>，此處即為<audio id="bg_music" src="{{theme.bg_music}}" loop="loop"></audio>，audio 具體可見此文：HTML 5 視頻/音頻參考手冊，此處有個地方很關鍵，src 的地址是一個引數，其值放在組態檔中，因而我們需要在組態檔中設定這個引數，即為音樂的地址，
在把此功能搬到 next 主題時，我遇到問題 “<” 報錯，原代碼為 <%= theme.bg_music%>，意思也是呼叫主題內設定的引數，但是我直接搬運可不行，我得找出如何表達呼叫主題引數的方法，自己試了好幾個引數表示方法，都不成功，然后想到 next 主題用 Nunjucks 引擎來渲染檔案，去搜了下 Nunjucks 引數的表示形式，發現了 {{}}，于是嘗試成功，
此外，原代碼并未有旋轉功能，我看到大佬Sanarous的博客，點擊音樂按鈕有旋轉的功能，于是我也想加一個，于是打開 F12，選中該元素，發現當音樂播放的時候，元素會加上類 xuanzhuan，又看到深色模式中代碼也涉及了添加類，于是馬上操作起來，即$("選擇器").addClass("類名");以及$('選擇器').removeClass("類名");，實作播放時加類，停止時去除類，然后就是 F12 、 ctrl + F 找到 xuanzhuan 的樣式配置來，發現通過 rotate 實作，于是我 copy 了相關代碼放入我的樣式檔案中，成功實作旋轉功能，
總結
經過這次探索，我更加熟悉如何利用 F12 尋找資源以及修改樣式，還學到了很多的 css 屬性，當然也只不過是留下了個映像，等要用的時候再查尋具體用法😂，總而言之，識訓良多，也很開心又實作了一個個小功能！😁
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272503.html
標籤：其他
上一篇：jQuery