dreamer-paul / hingle Goto Github PK

View Code? Open in Web Editor NEW

64.0 4.0 3.0 93 KB

🎈 一个简洁大气，含夜间模式的 Hexo 博客主题

Home Page: https://hingle-theme-demo.vercel.app

License: MIT License

EJS 11.74% CSS 65.68% JavaScript 22.58%

hexo-theme hexo hexo-blog-theme hexo-blog

hingle's Introduction

Hingle

一个简洁大气，含夜间模式的 Hexo 博客模板。

使用方法

Star 本项目
从这里下载主题源码
将文件夹重命名为 hingle 并放置在 Hexo 目录的 themes 目录下
修改 Hexo 目录下 _config.yml 文件的 theme 字段，更换成 hingle 即可
修改主题目录下的 _config.yml 文件，可参考 _config.example.yml 文件和主题文档进行设置

主题故事

该主题基于 Typecho 主题 Single 进行开发，在使用上可能部分效果差异，后期会慢慢兼容和调整。

开发历程：Single 主题与单身狗
帮助文档 & 常见问题：传送门

主题亮点

简洁大气、夜间模式（暂时有些问题）、文章目录、图片灯箱、代码高亮、平滑滚动、无 JQ 库。

开源协议

本项目采用 MIT 开源协议进行授权，并在其基础上须保留原作者的版权注释（CSS、JS 等文件），当然能在页尾写上主题地址就是最好的啦~

原创不易！如果喜欢本项目，请 Star 它以示对我的支持~

同时欢迎前往我的小窝为我提供赞助，谢谢您！

感谢

感谢来自开源社区提供的解决方案，简化了本项目的不少工作！

hingle's People

Contributors

Stargazers

Watchers

Forkers

cloudnzk biboyang bot-wxt1221

hingle's Issues

文章中使用代码块，在文章元数据中显示出了文章中不包含的数字

文章中使用代码块，在下方文章元数据post-meta中会显示出代码块前面的1234567...

自動夜間模式的替代做法(利用sessionStorage)

這樣修改可以根據瀏覽器設置預設日間或夜間模式，在指定時間一律預設夜間模式，切換頁面時會保持當前模式
hingle.js中這一段改成

// 如果开启自动夜间模式
if(config.night){
    var sessiondarklight = sessionStorage.getItem('dark or light');
    var hour = new Date().getHours();
    if(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches){
        if(sessiondarklight == 'dark'){
            document.body.classList.add("dark-theme");
        }
        else if(sessiondarklight == 'pre') {
            document.body.classList.add("dark-theme");
            sessionStorage.setItem('dark or light','dark');
        };
    }
    else {
        if(hour <= 6 || hour >= 21) {
            if(sessiondarklight == 'dark') {
                document.body.classList.add("dark-theme");
            }
            else if(sessiondarklight == 'pre') {
               document.body.classList.add("dark-theme");
               sessionStorage.setItem('dark or light','dark');
            };
        }
    }
}

還有這一段加入sessionStorage.setItem('dark or light', 'light');

// 关灯切换
this.night = function () {
    if(body.classList.contains("dark-theme")){
        body.classList.remove("dark-theme");
        document.cookie = "night=false;" + "path=/;" + "max-age=21600";
        sessionStorage.setItem('dark or light', 'light');
    }
    else{
        body.classList.add("dark-theme");
        document.cookie = "night=true;" + "path=/;" + "max-age=21600";
        sessionStorage.setItem('dark or light', 'dark');
    }
};

layout.ejs中在<body>下加入這段

<body>
    <script>
        var sessiondarklight = sessionStorage.getItem('dark or light');
        if (sessiondarklight == 'dark'){
            document.body.classList.add("dark-theme");
        }
        else if (!sessiondarklight) {
            sessionStorage.setItem('dark or light','pre');
        }
    </script>

这个怎么那么像Single

这个怎么那么像Single 。。

站内搜索开发建议

站内搜索可以尝试使用这个：https://github.com/christian-fei/Simple-Jekyll-Search

minimize后大概只有4.3kb，不依赖jq

只需要在站内生成包含如下内容的search.json：

[
   {
      "title"    : "标题",
      "category" : "分类",
      "tags"     : "标签",
      "url"      : "链接",
      "date"     : "时间",
      "content"  : "内容"
    },
    ...
}

然后引入simple-jekyll-search.js，并初始化：

new SimpleJekyllSearch({
    searchInput: document.getElementById('search-input')),
    resultsContainer: document.getElementById('menu-list'),
    searchResultTemplate: '<li><a href="{url}">{title}</a></li>',
    json: '/search.json'
})

结果就会被填充进ul：

<input id="search-input" class="search">
<ul id="menu-list">
    <li><a href="/">结果1</a></li>
    <li><a href="/">结果2</a></li>
    ...
</ul>

希望支持站内搜索功能

hexo提供了许多生成搜索索引数据的插件,例如hexo-generator-searchdb,基于此可以提供与Single一致的站内搜索功能.希望作者加油!

显示没有标题

非常感谢你的主题，很喜欢！简约而不简单

我使用的时候遇到一个问题不知道该怎么做

在点击关于我和朋友们时会显示没有标题，如上图
我尝试使用

---
title: About Me
---

# About Me

但是还是显示没有标题

Todo List

此处列出主题接下来会陆陆续续增加的一些功能，做个备忘：

Gallery Post 文章不支持 photos 字段
Tag Plugins 文章不支持 With caption 模式
奇趣框架的 em 元素应该是斜体
word-break: break-word; 从 break-all 替换过来（两个主题都需要改）
不支持百度以外的搜索功能
不支持预设评论组件引入
夜间模式的 Bug（替换成根据系统适配）