Code Monkey home page Code Monkey logo

hexo-theme-yuzu's Introduction

Hexo-Theme-Yuzu

本项目从 hexo-theme-orange fork 出来,鉴于无法找到原作者联系方式,本项目将由Cerallin继续维护。

当前分支为 v3.x 版本,使用pug代替ejs作为模板引擎。

注意 从v2.x迁移到v3.x,请参考迁移指南。鼠标悬停在网页页脚Theme Yuzu上可以查看当前主题版本。

安装使用

  1. 安装主题与必要的依赖
# 在hexo网站源码目录下执行
$ npm i hexo-renderer-pug
$ mkdir -p themes && cd themes
$ git clone https://github.com/Cerallin/hexo-theme-yuzu
  1. 修改网站根目录下的 config.yml

config.ymltheme 字段改为 hexo-theme-yuzu。将主题文件夹下 _root_config_example.yml 的内容添加到 config.yml 中。

  1. 根据自己的需要修改主题配置

In case you didn't know 你可以创建一个_config.[theme name].yml文件来覆盖主题的默认设置。对于上述安装方法来说,就是_config.hexo-theme-yuzu.yml

示例网站

什么?你问我小说站在哪?我才不会告诉你呢(/ω•\*)。

特色

  • 黑白色调,风格质朴简约。
  • 针对文章创作优化,学术博客也是可以的 (?)。
  • 支持深色模式,自适应电脑/手机深浅色模式。

功能

  • 支持分页(hexo-generator-*)
  • 适配搜索(hexo-generator-search)
  • 支持显示 CC(Creative Commons)版权声明
  • 文章文字两端对齐
  • 适配学术写作(pandoc)

禁止用户复制粘贴网页内容

本选项仅为君子协定,通过插件可以轻易破解。 将主题配置文件中的selectable值改为false

深色模式

将主题配置文件中的dark_mode值改为true

学术写作指南

注意 如果不想做交叉引用可以跳过本章。

首先安装hexo-renderer-pandoc,然后安装pandocpandoc-crossref

_config.yml里相关配置如下:

pandoc:
  pandoc_path: pandoc
  extra:
    - filter: pandoc-crossref
    - csl: ieee.csl
    - citeproc: # Just leave it here
  meta:
    - link-citations: true
    - crossrefYaml: _crossref.yml

其中最后一行的意思是_crossref.ymlpandoc-crossref的配置文件,部分内容如下。

# Options for pandoc-crossref
# Docs: http://lierdakil.github.io/pandoc-crossref/
# Source: https://github.com/lierdakil/pandoc-crossref

titleDelim: ":"

figureTitle: ""
figPrefix: ""
# 图1: 图标题
figureTemplate: $$figureTitle$$$$i$$$$titleDelim$$ $$t$$
figPrefixTemplate: $$p$$$$i$$

tableTitle: ""
tblPrefix: ""
# 表1: 表标题
tableTemplate: $$tableTitle$$$$i$$$$titleDelim$$ $$t$$
tblPrefixTemplate: $$p$$$$i$$

eqnTitle: ""
eqnPrefix: ""
# 式(1)
eqnTemplate: $$eqnTitle$$($$i$$)
eqnPrefixTemplate: $$p$$($$i$$)
# 公式template
equationNumberTeX: \\tag
eqnIndexTemplate: $$i$$

linkReferences: true
nameInLink: true

一些有用的cheatsheets

推荐插件

  • hexo-filter-mathjax: 渲染生成mathjax公式;
  • hexo-filter-text-autospace: 为中文段落中的英文自动添加间距。
  • hexo-clean-css:缩小生成的CSS文件的体积。由于Stylus自身的限制,本主题的CSS文件大小有很大的缩减空间。

本主题提供了一些类似tailwind css的辅助工具类。

例如,通过text-{left|right|justify}控制文字对齐,使用 m{t|r|b|l}-{size} 功能类控制元素一侧的外边距等等。

详细介绍请移步这里

TODOs

  • 整理主题变量
  • 重构模板布局,优化模板缓存
  • 开发“关于”页的模板
  • 更多动画
  • 更多的helpers类

License

This project is under MIT License.

Copyright (c) 2021-2024 Cerallin   <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Bootstrap icons

Part of Bootstrap opensource SVG icon library is used in this project, which is under MIT license.

Clipboard.js

Clipboard.js is used in this project, which is under MIT license.

Smooth-corners.js

Smooth-corners.js is used in this project, which is under MIT license.

hexo-theme-yuzu's People

Contributors

cerallin avatar orange-way avatar paran3xus avatar nevadacities avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.