Skip to content
A Hikaru theme inspired by Kalafina's song ARIA.
CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
languages
srcs
LICENSE Initial commit. Sep 4, 2018
README.md Updated README.md. Oct 16, 2019
themeConfig.yml Updated to add rel attr when resolving external link. Sep 14, 2019

README.md

ARIA

A Hikaru theme inspired by Kalafina's song ARIA.

Live Demo: 喵's StackHarbor

Feature

  • Elegant responsive double column layout with css animation.

  • Comment system (currently supprt Disqus, commentjs and Valine).

  • Busuanzi counting.

  • Hikaru local search support.

  • Multi-languages support (currently zh-Hans, zh-Hant-HK, zh-Hant-TW and en, PR welcome).

  • Image display powered by Lightgallery.

  • RSS feed supported.

Before Using

  • Using a static website generator needs some basic knowledge, if you know nothing, Hikaru and ARIA are not your best choice. Please be sure you know Hikaru, 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.

Coding Style

You don't need to keep 80-chars a line in templates and style files, you should keep them in good structure.

Don't forget to add space after English puctuation.

Stylus

They should look like CSS, don't remove {, } and ;.

Use 2-spaces indent.

Nunjucks

Nunjucks tags should not be indented, which means they should be in the same level as their inner HTML. Consider them as HTML comment.

Use 2-spaces indent.

JavaScript

JavaScript inside scripts tags shoule have a 2-spaces indent to it's parent <script> tag.

Most JavaScript code should use jQuery's $(document).ready().

Consider not to use ES6, most of those functions can be written in ES5.

Prefer to use Array.join() instead of + to concat strings.

Prefer to use " and escaping instead of '.

Don't remove ;.

Write functions like function name(arg1, arg2) {}, keep space after function, , and before {, but not after function name.

Use 2-spaces indent.

YAML

Use camelCase.

Don't use inline array and object.

If you need an array to iterate, don't use object with it's key and value, use array of objects.

Use 2-spaces indent.

Usage

Clone This Repo

Clone it to themes/aria:

$ git clone https://github.com/AlynxZhou/hikaru-theme-aria themes/aria

Or if you already have a git repo in your site dir, you can add this as a submodule:

$ git submodule add https://github.com/AlynxZhou/hikaru-theme-aria themes/aria

Edit Site Config

Following needs to be changed in your siteConfig.yml.

Change Theme to aria

themeDir: aria

Language Settings

Available values are zh-Hans, zh-Hant-HK, zh-Hant-TW and en. default is an alias of en.

language: zh-Hans

Search Settings

search:
  enable: true
  path: search.json

RSS Settings

feed:
  enable: true
  path: atom.xml
  limit: 20
  hub:
  content: false
  contentLimit: 140

Highlight Settings

If you want to add line numbers, set gutter: true.

highlight:
  gutter: true
  hljs: true

Copy ARIA's Config

Copy theme config to your site dir:

$ cp themes/aria/themeConfig.yml themeConfig.yml

Edit Theme Config

Following needs to be changed in themeConfig.yml, not all config needs customization, you just change what you need:

Zone Settings

Different posts may use different timezone as their local time, if you don't want they show in different timezone but want display in a single timezone (with converting), uncomment this option and set a zone:

zone: Asia/Shanghai

But you should consider of different different zone of posts first, just keep this option as a comment to make this.

Menu Settings

You should already have srcs/categories/index.md and srcs/tags/index.md when you creating your site with Hikaru, if not, create them and set front matter layout: categories or layout: tags, and set them like following:

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 srcs/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 creativeCommons. 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 Hikaru'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 srcs/css/ dir (just create a css/ dir in srcs/ that you store site source files, you can also put it into theme's srcs/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 customInfo 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 srcs/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 googleVerification 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 added 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 libCdn 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, clientID and clientSecret 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).

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.

Add reward: false to disable reward in some pages.

Auto Excerpt

If you want to generate post excerpt at homepage automatically, you can use this. For example, autoExcerpt: 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 customFont 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:

customFont:
  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.

Center Quote

Just add .center-quote class to your HTML code, you will get a center-aligned quote with top and bottom border. Recommended for <blockquote></blockquote> tag:

<blockquote class="center-quote">Centerquote Example</blockquote>

It looks like:

Centerquote Example

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:

Alert Example

Custom CSS and JavaScript

If you need to cover some CSS style of ARIA, just edit themes/aria/srcs/css/custom.styl which will be added last.

If you need some custom JavaScript, just edit themes/aria/srcs/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 themeConfig.yml in site's dir and theme's dir, then apply changes in example to your themeConfig.yml in site's dir 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 says they are "simple/simpler/simplest" but infact they are ugly or other themes have so many functions and some of them in fact has little people using or just keep default, I don't want them.

For example, I will only add local search (it generates a xml of data and just use JavaScript code to query it without buying database service) to my theme because it works fine. Is there really someone paid 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 noob or beginners! if you dislike local search you can disable it (Really? You hate a simple search frame in your site?).

And refuse something like I added a config to make avatar a square instead a circle!, what will help if we make avatar available from TRIANGLE to HEPTADECAON? Do we really need six or more schemes in one theme? If you like, you can fork your own, but I will keep them six themes. This makes developers easy to find where to edit codes instead finding bug in some total unrelated scheme codes with {% if schemeA %}{{ xxxxxxxxxblockxxxxxXXXXXxxxxx }}{% elif schemeB %}{{ xxxxxxxspanxxxxximgxxxxx }}{% endif %} or if (config(schemeA)) { .cls { a { &:hover { background: #333; } } } }, I used to work with those codes and I know how they hurt your eyes while finding some code...

Plus, if you want add comment system, choose what people uses 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 choice. If only 15% or less users need a custom option, just write it into code instead of leaving a option in config file.

You can’t perform that action at this time.