给博客增点功能

hexo 博客暗夜模式

工具

发布日期: 2022-04-24

更新日期: 2023-04-07

文章字数: 936

阅读时长: 4 分

阅读次数:

正在加载一言...

今天整了整博客，之前一直想给博客整个黑夜模式，今天终于安排上了。

0.暗夜深色模式

没重复造轮子，网上找了一个代码，然后自己改了改，这个是文章链接关于给hexo博客适配全局暗夜深色模式大家可以去看看。因为用的主题不太一样，所以自己改了些地方。

旁边导航栏不能够跟随改变。
// 修改 blog/themes/hexo-theme-matery/layout/_partial/post-detail-toc.ejs 文件中的
```
<div class="toc-widget card" style="background-color: white;">

<div class="toc-widget card">
```

白天模式没有图标显示

/*增加如下样式，是个小太阳。*/
.fa-sun-o:before {
  content: "\f185";
  color: rgb( 242,141,0)!important;
}
/*小太阳的位置*/
#sma .fa-sun-o  {
  position: absolute;
  right: 14px;
  bottom: 13px;
  font-size: 1.5rem!important;
}

// 深色模式设置
function switchNightMode() {
    var body = document.body;
    if(body.classList.contains('dark')){
        document.body.classList.remove('dark');
        localStorage.setItem('dark','0');
        // modify start
        $('#nightMode').removeClass("fa-sun-o").addClass("fa-moon-o");
        $('#sma').css("background","black");
        // modify end
        return;
    } else {
        document.body.classList.add('dark');
        localStorage.setItem('dark','1');
        // modify start
        $('#nightMode').removeClass("fa-moon-o").addClass("fa-sun-o");
        $('#sma').css("background","gray");
        // modify end
        return;
    }
}

移动端打开是未知有点错乱

// 如果是移动端，侧边栏按钮消失，所以按钮下移
$(function(){
	if (navigator.userAgent.match(/mobile/i)) {
		$("#sma").css({ 'bottom': '76px'});
	}
})

本地运行时屏蔽百度统计和评论拉取
调试的时候仍会统计和拉取评论，会造成数据并不是很准确，所以增加判断。如果是本地运行，进行这些请求，保证数据准确，减少资源浪费。
```
var url = window.location.href;
if(url.indexOf("localhost") < 0 && url.indexOf("127.0.0.1") < 0){
	console.log("Now Is Product Mode");  
}else{
	console.log("Now Is Debug Mode");
}
```

1.成果展示

移动端

PC端

20220510 Update

感觉切换按钮放在旁边不够优雅，所以这次修改到上方显示。

想法是在上方的导航栏里加个切换按钮，这样会显的不会那么的不优雅

修改themes/hexo-theme-matery/layout/_partial/navigation.ejs这个文件

<ul class="right nav-menu">
  <% Object.keys(theme.menu).forEach(function(key) { %>
  <li class="hide-on-med-and-down nav-item">
    <% if(!theme.menu[key].children) { %>
      <!-- 此处为修改 start -->
      <% if (key == "Mode") { %>
        <a onclick="switchNightMode()" class="waves-effect waves-light" id="sma">
        <% } else { %>
          <a href="<%- url_for(theme.menu[key].url) %>" class="waves-effect waves-light">
        <% } %>   
    	<!-- 此处为修改 end -->
      <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %>
           <!-- 此处为修改 start --> 
          <% if (key == "Mode") { %>
          <i id="nightMode" aria-hidden="true" class="fa fa-moon-o" style="zoom: 0.8;"></i>
          <% } else { %>
          <i class="<%- theme.menu[key].icon %>" style="zoom: 0.6;"></i>
          <% } %> 
            <!-- 此处为修改 start -->
      <% } %>
      <span><%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %></span>
    </a>
    <% } else { %>
    <a href="<%- theme.menu[key].url %>" class="waves-effect waves-light">

      <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %>
      <i class="<%- theme.menu[key].icon %>" style="zoom: 0.6;"></i>
      <% } %>
      <span><%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %></span>
      <i class="fas fa-chevron-down" aria-hidden="true" style="zoom: 0.6;"></i>
    </a>
    <ul class="sub-nav menus_item_child ">
      <% for(let childrenLink of theme.menu[key].children){ %>
      <li>
        <a href="<%- url_for(childrenLink.url)%>">
          <% if (childrenLink.icon && childrenLink.icon.length > 0) { %>
          <i class="<%- childrenLink.icon %>" style="margin-top: -20px; zoom: 0.6;"></i>
          <% } %>
          <span><%- childrenLink.name %></span>
        </a>
      </li>
      <% } %>
    </ul>
    <% } %>
  </li>
  <% }); %>
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="<%= __('search') %>" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>