A responsive, clean and simple Hexo theme for a personal website.
🌵 Demo
- Version : 3.0
- Compatibility : Hexo 3 or later
- Fully responsive
- Multiple color schemes
- Pick your own code highlighting scheme
- Configurable navigation menu
- Support for local search
- Projects list
- I18n support
- Disqus / Utterances
- Google analytics / Baidu Tongji / Umami Analytics
- Font Awesome icons
- Simplicity
-
In order to use this theme you must have installed hexo.
-
Create the
rootdirectory for the blog by initializing it with hexo:$ hexo init my-blog
-
Navigate into the new directory:
$ cd my-blog
-
In the
rootdirectory:$ git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus
-
Change the
themeproperty in the_config.ymlfile.# theme: landscape theme: cactus
See below for more information on how to customize this theme.
-
Create pages and articles with the
hexo new [layout] <title>command. For example, to create an "about me" page, run:$ hexo new page about
This will create a new file in
source/about/index.mdSimilarly, you can create a new article with$ hexo new post "hello world"and add some interesting content in
source/_posts/hello-world.md. -
Run:
hexo generateandhexo server
You can (and should) modify a couple of settings. An overview of all settings can be found in _config.yml. The most important ones are discussed below.
There are two possible methods to override the defaults. As a first option,
you could fork the theme and maintain a custom branch with your settings.
Alternatively, you can configure it from your site's primary configuration
file. Therefore, define your custom settings under the theme_config variable.
For example:
# _config.yml
theme_config:
colorscheme: white# themes/cactus/_config.yml
colorscheme: darkThis will override the default black colorscheme in themes/cactus/_config.yml.
Currently, this theme is delivered with four color schemes: dark, light,
white and classic. Set your preferred color scheme in the _config.yml file.
colorscheme: lightAlternatively, you can easily create your own color scheme by creating a new
file in source/css/_colors.
Set up the navigation menu in the _config.yml:
nav:
home: /
about: /about/
articles: /archives/
projects: http://github.com/probberechts
LINK_NAME: URLYou have two options for the list of blog posts on the home page:
-
Show only the 5 most recent posts (default)
posts_overview: show_all_posts: false post_count: 5
-
Show all posts
posts_overview: show_all_posts: true
Create a projects file source/_data/projects.json to show a list of your projects on the index page.
[
{
"name":"Hexo",
"url":"https://hexo.io/",
"desc":"A fast, simple & powerful blog framework"
},
{
"name":"Font Awesome",
"url":"http://fontawesome.io/",
"desc":"The iconic font and CSS toolkit"
}
]Cactus can automatically add links to your social media accounts.
Therefore, update the theme's _config.yml:
social_links:
-
icon: github
link: your-github-url
-
icon: twitter
label: "@your-twitter-handle"
link: your-twitter-url
-
icon: NAME
label: LABEL
link: your-NAME-urlwhere NAME is the name of a Font Awesome icon, and LABEL is an optional value used as a title attribute on the link (NAME value is used if LABEL is missing).
By default, Cactus will use current year in your copyright year information.
If there is a need to customize, please update _config.yml:
copyright:
start_year: 2016
end_year:If you are new to Hexo and internationalization (i18n), please read Hexo documentation - internationalization (i18n) section
Currently, the theme is delivered with support for:
- English (en), default
- Arabic (ar)
- Brazilian Portuguese (pt-BR)
- Catalan (ca)
- Chinese (Simplified, PRC) (zh-CN)
- Dutch (nl)
- French (fr)
- German (de)
- Italian (it)
- Korean (kr)
- Persian (fa)
- Polish (pl)
- Russian (ru)
- Spanish (es)
- Taiwanese (Taiwanese Mandarin) (zh-TW)
- Turkish (tr)
- Ukrainian (ua)
- Vietnamese (vi)
If you would like to use one the languages listed above, simply set language
to the desired language (e.g., fr) in _config.yml.
Otherwise, you can follow the steps below (E.g., to add a Japanese (ja) translation):
- Set
languagetojain Hexo configuration file_config.yml - Create a
ja.ymlfile in thethemes/cactus/languages/folder - Copy the content of
themes/cactus/languages/default.ymland paste it it into theja.ymlfile - Replace all English strings by their Japanese translation
Note: Cactus does not support multi-language sites.
This theme support RTL languages for Persian and Arabic language.
If you would like to use RTL layout, change direction attribute in _config.yml to rtl.
Note that this also will change the font to Vazir, which is a Persian font.
direction: rtl
Set the rss field in the _config.yml to one of the following values:
rss: falsewill totally disable rss (default).rss: atom.xmlsets a specific feed link.rss:leave empty to use the hexo-generator-feed plugin.
Add you Google, Baidu, Cloudflare or Umami Analytics tracking_id to the _config.yml.
google_analytics:
enabled: true
id: 'UA-49627206-1'
baidu_analytics:
enabled: true
id: 2e6da3c375c8a87f5b664cea6d4cb29c
cloudflare_analytics:
enabled: true
id: 0dabb6e21848405483a237e6a7b6ed04
umami_analytics:
enabled: false
id: e77e68be-f6e4-4br3-9365-2b76b57cd571
host: https://analytics.domain.com
script_name: umami.jsLoad Javascript and CSS resources from a CDN. Enabled by default, loads all resources from cdnjs.
cdn:
enable: true
jquery: 'url'
clipboard: 'url'
font_awesome: 'url'
justified_gallery_css: 'url'
justified_gallery_js: 'url'Set enable: false to completely disable CDN and load all resources from your domain. If you want to disable it only for specific resource(s) then just remove the corresponding entry(s).
cdn:
enable: true
jquery: 'url'Only JQuery will be loaded from the specified CDN.
Cactus supports two commenting systems: Disqus and Utterances.
First, create a site on Disqus: https://disqus.com/admin/create/.
Next, update the _config.yml file:
disqus:
enabled: true
shortname: SITENAMEwhere SITENAME is the name you gave your site on Disqus.
First, follow the instructions on the oficial website to setup an issue tracker Utterances will connect to.
Next, update the _config.yml file:
utterances:
enabled: true
repo: owner/githubrepo
issue_term: pathname
label: utteranc
theme: themenamewhere each of the parameters are the respective values provided during the configuration of the Utterances:
repo: the repository Utterances will connect to.issue_term: the mapping between blog posts and GitHub issues.label: the label that will be assigned to issues created by Utterancestheme: the selected Utterances theme.
Pick one of the available colorschemes and add it to the _config.yml:
highlight: COLORSCHEME_NAMETags and categories can be included in the front-matter of your posts. For example:
title: Tags and Categories
date: 2017-12-24 23:29:53
tags:
- Foo
- Bar
categories:
- Baz
---
This post contains 2 tags and 1 category.You can create a page with a tag cloud by running:
$ hexo new page tagsNext, add type: tags to the front-matter of source/tags/index.md. You can also
add a tag cloud to the home page by setting the tags_overview option to true.
Similarly, you can create a page with an overview of all categories by running:
$ hexo new page categoriesand adding type: categories to the front-matter of source/categories/index.md.
Finally, don't forget to create a link to these pages, for example in the navigation menu:
nav:
tag: /tags/
category: /categories/First, install the hexo-generate-search plugin, which will generate a search index file.
$ npm install hexo-generator-search --save
Next, create a page to display the search engine:
$ hexo new page searchand put type: search in the front-matter.
title: Search
type: search
---Finally, edit the _config.yml and add a link to the navigation menu.
nav:
search: /search/MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent