hexo-theme-aria
A Hexo theme inspired by Kalafina's song ARIA.
Live Demo: 喵's StackHarbor
Donate
I am a collage student and I don't have a job, I just code this theme in my spare time with my passion. If you like my theme or this theme and code help you, you can donate me for my work via WeChatPay or AliPay or PayPal to support my development, here are my qrcodes and links:
-
WeChatPay
-
AliPay
-
PayPal:
Feature
-
Elegant responsive double column layout with css animation.
-
Comment system (currently supprt Disqus, commentjs and Valine). (Removed HyperComments because it needs to pay now.)
-
Busuanzi counting.
-
Hexo local search support (need to install
hexo-generator-search
and set config as its README). -
Multi-languages support (currently zh_CN, zh_HK, zh_TW and en, PR welcome).
-
Image display powered by Lightgallery.
-
RSS supported (need to install
hexo-generator-feed
and set config as its README). -
Automatically convert Markdown asset folder links and images to absolute path. (No need for
hexo-asset-image
plugin.)
Before Using
-
Using a static website generator needs some basic knowledge, if you know nothing, Hexo and ARIA are not your best choice. Please be sure you know Hexo, YAML, git, Markdown and Web before continuing.
-
ARIA uses FlexBox layout to place elements, and Internet Explorer before version 9 has no way to support it. So if you use IE, upgrade to IE 11 or later, or use a modern browser like Google Chrome or Mozilla Firefox. Or if you know how to fallback FlexBox in elder IE, please send PRs, thanks.
Usage
Install Plugins
First change to your Hexo website dir. Use hexo-renderer-njucks
instead of hexo-renderer-nunjucks
or hexo-renderer-njk
or hexo-renderer-njks
, those three plugins are not maintained and cannot support Nunjucks 3.
$ npm install --save hexo-renderer-njucks hexo-renderer-stylus hexo-generator-search hexo-generator-feed
Clone This Repo
Clone it to themes/aria
:
$ git clone https://github.com/AlynxZhou/hexo-theme-aria themes/aria
Edit Site Config
Following needs to be changed in your site's _config.yml
.
aria
Change Theme to theme: aria
Language Settings
Available values are zh_CN
, zh_HK
, zh_TW
and en
. If you are from other themes like old versions of NexT, please note there are no zh-Hans
but zh_CN
. default
is an alias of en
.
language: zh_CN
Hexo Search Plugin Settings
# Hexo local search
search:
path: search.xml
field: all
Hexo RSS Plugin Settings
# Hexo feed
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
Highlight Settings
Hexo's highlight doesn't add hljs-
prefix to highlight class, but by default highlight.js project's CSS file uses this prefix. To keep compatibility with CSS files from highlight.js project, you need to add hljs: true
like this:
highlight:
enable: true
hljs: true # Add this line!
line_number: true
auto_detect: true
tab_replace:
Copy ARIA's Config
Copy _config.yml.example
to _config.yml
:
$ cp themes/aria/_config.yml.example themes/aria/_config.yml
Edit Theme Config
Following needs to be changed in theme's _config.yml
in ARIA's dir, not all config needs customization, you just change what you need:
Menu Settings
If you want to add "Categories" and "Tags" page, uncomment categories
and tags
, then run hexo new page categories
and hexo new page tags
, then add layout: categories
and layout: tags
to those pages' front-matter. If you want a about page, just hexo new page about
and uncomment it:
menu:
- name: home
link: /
icon: <i class="fas fa-home"></i>
- name: archives
link: archives/
icon: <i class="fas fa-archive"></i>
- name: categories
link: categories/
icon: <i class="fas fa-th-list"></i>
- name: tags
link: tags/
icon: <i class="fas fa-tags"></i>
- name: about
link: about/
icon: <i class="fas fa-user-edit"></i>
Generating Favicon
First prepare a image of your favicon then go to https://realfavicongenerator.net/ to generate favicons for different browsers, then download the zip file and extract it into website's source/favicons
dir (create it first). ARIA will load them.
Website Keywords
Set the value of keywords
to a list of keywords.
CreativeCommons Licenses
Set it in creative_commons
. To keep it simple ARIA will show a link in footer. You can choose one of by
, by-sa
, by-nd
, by-nc
, by-nc-sa
, by-nc-nd
. Go to https://creativecommons.org/licenses/ to learn more.
Code Highlight
ARIA has 4 highlight theme. You can choose the value of highlight
in one of atom-one-dark
, atom-one-light
, solarized-dark
, solarized-light
. ARIA uses Hexo's internal highlight.js, so if you want to add more highlight theme, go to highlight.js' style repo and download CSS file you need to your site's source/css/
dir (just create a css/
dir in source/
that you store Markdown files, you can also put it into theme's source/css/
but it will make git workspace dirty), then set here to your downloaded file name (without .css
suffix, it will be add automatically).
Custom Info
The value of custom_info
will be shown in footer. You should not use a long string because it will break footer's format.
Avatar
Set the value of avatar
to your avatar's link, for example, you set avatar: images/myavatar.png
then you needs to put you avatar to source/images/myavatar.png
.
Custom Logo
Set it like avatar, and your logo will be shown in header, which by default shows ARIA
, or leave it blank to hide logo.
Custom Theme Color
Theme color color
will be used in header and footer background, and also in some browsers' title bar like Android Chrome, by default it's theme's dark. Because color starts with #
, you need to use double quote to prevent YAML from making it a comment. If you are not sure, don't change here.
Google Site Verification
If you want to let Google collect your website, you need to show that this is your website. When verifying, choose "Use tag" and copy the value of property content
to google_verification
then re-generate and re-deploy your website.
Website Start Year
Set since
to your start year,if blank or the same as current year, it will only show current year, else it will show start - current
.
Searching Settings
To enable search, first keep sure that you installed hexo-generator-search
and add config like the 2nd step, then set search
to true
, it will be placed on the top of sidebar.
Sidebar Settings
Choose between left
, right
and false
, if false, sidebar will be hidden.
Animation
Set animate
to true
will enable the flipping of cards (Not recommended because it's slow in some old browsers and computers).
Busuanzi Counting
If you want to disable Busuanzi, set busuanzi
to false
, or it will display website visit counting
, website visit persion counting
, page visit counting
.
MathJax
MathJax is a library of displaying math formula in webpage, because it is large, ARIA does not contain it. If you need it, first set enable
of mathjax
to true
and set cdn
to your MathJax CDN, then add mathjax: true
to the page's front-matter in which you has formula. Set global
to true
can enable MathJax in all pages but it will let other pages slow.
Library CDN
You can use CDN with ARIA's internal lib. First set lib_cdn
to enable: true
, then add CDN link to the library. If you don't know what you are doing, just skip it.
Social Links
First set enable
of social
to true
, then add your social links under links
like following:
social:
enable: true
links:
- name: Display Name
link: Link Address
icon: Font Awesome icon tag you want to use
- name: Display Name
link: Link Address
icon: Font Awesome icon tag you want to use
Get icons in Font Awesome.
Blogrolls
First set enable
of blogroll
to true
, then add links under links
like following:
blogroll:
enable: true
links:
- name: Display Name
link: Link Address
icon: Font Awesome icon tag you want to use
- name: Display Name
link: Link Address
icon: Font Awesome icon tag you want to use
Get icons in Font Awesome.
Comment Support
First set comment
to enable: true
to enable comment in all pages (except Home, Archives, Categories, Tags), then fill your Disqus Shortname. If you want to disable comment in some pages, add front-matter comment: false
(comment
NOT comments
!).
If you use commentjs, first set enable
to true
, then set type
according to your host service between github
and oschina
, user
is your user name of the host, repo
is your repo name, client_id
and client_secret
needs you go to github or oschina to create an application, and copy your token.
If you use Valine, read its docs and fill options apiID
, apiKey
, set enable
to true
and custom other options.
If you enable more than one comment services, only the one shows in front of the queue will be shown (queue: Disqus, commentjs, Valine).
Tips:If you want to edit all new pages' front-matter, just edit files in your website's scaffolds
dir, Hexo uses them as template when create new page or post.
Reward
Set enable
of reward
to true
to use it, then set your comment in comment
, and set QRCode of WeChat Pay, AliPay, BitCoin like avatar. Leave blank to disable a QRCode.
Auto Excerpt
If you want to generate post excerpt at homepage automatically, you can use this. For example, auto_excerpt: 200
will use first 200 chars (without HTML tags) as excerpt. However, if you want to get a better look, it is recommended to place a <!--more-->
tag to where you want, words before this tag will be used as except.
Custom Fonts
Set enable
of custom_font
to true
, then go to a webfont server like Google Fonts (If you cannot open it, choose another), select all fonts you need, then copy the href
property of generated <link>
tag to link
option. Then set different fonts to different parts.
Example like:
custom_font:
enable: true
link: //fonts.googleapis.com/css?family=Lato|Roboto+Condensed|Skranji|Ubuntu|Ubuntu+Mono
all: Ubuntu # Font of <body>.
title: Roboto Condensed # Font of title.
subtitle: Roboto Condensed # Font of subtitle.
main: Ubuntu # Font of main part (after the menu and before the footer).
code: Ubuntu Mono # Font of code.
Internal Style for Writing
Markdown will be compiled to HTML, and you can write HTML in a valid Markdown file. In order to help you organize your article better, here are some internal custom style class that you can use while writing.
Centerquote
Just add .centerquote
class to your HTML code, you will get a center-aligned quote with top and bottom border. Recommended for <blockquote></blockquote>
tag:
<blockquote class="centerquote">Centerquote Example</blockquote>
It looks like:
Colorful Alert
Just add .alert-red
, .alert-green
or .alert-blue
to your HTML code:
<div class="alert-red">Alert Red Example</div>
<div class="alert-green">Alert Green Example</div>
<div class="alert-blue">Alert Blue Example</div>
It looks like:
Google Analytics
Add google_analytics
with tracking ID to config.
google_analytics:
Custom CSS and JavaScript
If you need to cover some CSS style of ARIA, just edit themes/aria/source/css/custom.styl
which will be added last.
If you need some custom JavaScript, just edit themes/aria/source/js/custom.js
which will be added last.
Update Theme
If you use custom CSS or JavaScript, please use Git to commit them first. You can only pull when your workspace is clean.
Then use git pull
to get the newest commit, if there is a conflict, merge it manually.
Don't forget to compare _config.yml
and _config.yml.example
, then apply changes in example to your own config manually.
License
Apache-2.0
Note
I created this theme with less configurations and beautiful styles. You can send PRs if you want to add some functions, if those functions are useful they will be merged soon.However, some themes say they are simple, simpler, or even the simplest, but in fact they are ugly. Some themes claim that they are equipped with many functions, but most of them will not be used by the users. They just remain in default values. I do not want to add them into my theme.
Like what I say, I will only add Hexo local search, which generates a xml of data and just use JavaScript code to query it without buying database service, to my theme because it works fine. Are there any people pay to use Swift search or Algolia? So never send PR like I added swift search and let some beginners use it and pay for it because they know little! because I think local search is better for noobs or beginners! if you dislike local search you can disable it (Really? You hate a simple search frame in your site?).
And also,do not bother me with something like I added a config to make avatar a square instead of a circle!, even if we make avatar available to choose from TRIANGLE to HEPTADECAON, where can it help? Do we really need six or more schemes in one theme? If you wish, you can fork your own, but I would rather separate them into six themes. This will make developers to find where to edit codes more easier rather than finding bug in some totally unrelated schemes codes with {% if schemeA %}{{ xxxxxxxxxblockxxxxxXXXXXxxxxx }}{% elif schemeB %}{{ xxxxxxxspanxxxxximgxxxxx }}{% endif %}
or if (hexo-config(schemeA)) { .cls { a { &:hover { background: #333; } } } }
, I used to work with those codes and I know how they will hurt your eyes while finding somewhere to edit...
Finally, if you want add comment system, choose what people use most like Gitment or Valine or LiveRe, no more Duoshuo or Changyan or Netease Cloud Comment because they are unstable and can make people confused or send your privacy to the government of "Other Country". I want ARIA to be easy to use, not a mess of needless choices. If only 15% or less users need a custom option, just write it into code instead of leaving a option in config file.