A responsive, dark and simple Hexo theme
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
layout
scripts
source
.gitignore
LICENSE
README.md
_config.yml

README.md

KosmoKot

A responsive, dark and simple Hexo theme for a personal website based on Cactus-dark theme 2.0

Summary

General

  • Version : 1.0 (Based on Cactus dark 2.0)
  • Compatibility : Hexo 3+

Features

  • Fully responsive
  • Disqus
  • Googe analytics
  • Font Awesome icons
  • Pick your own code highlighting scheme
  • Configurable navigation menu
  • Support for local search
  • Github issues as comments
  • Additional layouts (Download/Tag cloud)
  • Simplicity

Install

  1. In the root directory:

    $ git clone https://github.com/Tym17/KosmoKot.git themes/KosmoKot
    $ npm install hexo-pagination --save
    $ npm install hexo-reading-time --save
    
  2. Change the theme property in the config.yml file.

    # theme: landscape
    theme: KosmoKot
  3. Configuration

  4. Run: hexo generate and hexo server

Configuration

Navigation

Setup the navigation menu in the theme's _config.yml:

# ...
nav:
  Home: /
  About: /about/
  Writing: /archives/
  Projects: http://github.com/probberechts
  LINK_NAME: URL
# ...

Blog posts list on home page

You have two options for the list of blog posts on the home page:

  • Show only the 5 most recent posts (default)
# ...
customize:
  show_all_posts: false
  post_count: 5
# ...
  • Show all posts
# ...
customize:
  show_all_posts: true
# ...

Projects list

Create a projects file source/_data/projects.json.

[
    {
       "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"
    }
]

Social media links

Cactus Dark can automatically add links to your social media accounts. Therefore, update the theme's _config.yml:

# ...
customize:
  social_links:
    github: your-github-url
    twitter: your-twitter-url
    NAME: your-NAME-url
# ...

where NAME is the name of a Font Awesome icon.

RSS

Set the rss field in the theme's _config.yml to the url you defined in the configuration of the hexo-generator-feed plugin. or leave it empty.

Analytics

Add you Google Analytics tracking_id to the theme's _config.yml.

# ...
plugins:
    gooogle_analytics: 'UA-49627206-1'            # Format: UA-xxxxxx-xx
# ...

Disqus Comments

First, create a site on Disqus: https://disqus.com/admin/create/.

Next, update the theme's _config.yml file:

# ...
plugins:
    disqus_shortname: SITENAME
# ...

where SITENAME is the name you gave your site on Disqus.

Github issues as comments

  1. Change the theme's __config.yml file according to your needs:

    # ...
    plugins:
        # Github Issues -> comments
        github_comments: Tym17/KosmoKot # Github repo for mirroring Issues to comments
        github_admins:
        - Tym17 # add your Github name or more if you want admin highlight on comments
    # ...
  2. Pick which issue to mirror on which post. Add gh_issue: 7 to load comments from issue #7 on the post like so at the beginning of a Markdown post in the Front Matter section:

    ---
    title: Making my own blog
    date: 2018-07-01 14:07:18
    author: You
    gh_issue: 7
    tags:
    - CSS
    - HTML
    ---
    # Markdown post content
  3. Additionally add gh_mods to the Front Matter to have moderator highlight on comments:

    ---
    title: Making my own blog
    date: 2018-07-01 14:07:18
    author: You
    gh_issue: 7
    gh_mods:
    - Buddy17
    - Friend2
    tags:
    - CSS
    - HTML
    ---
    # Markdown post content

Code Highlighting

Pick one of the available colorschemes and add it to the theme's _config.yml:

# ...
customize:
    highlight: COLORSCHEME_NAME
# ...

Local search

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 Search

and put search: true in the front-matter.

Finally, edit the theme's _config.yml and add a link to the navigation menu.

# ...
nav:
  # ...
  Search: /Search/
  # ...
# ...

Change the colors

Edit source/css/_variables.styl to your liking:

// ...

// Colors
$color-background = #1d1f21
$color-date = #666
$color-text = #c9cacc
$color-light = #cccccc
$color-lightest = #eeeeee
$color-accent = #AE54FE
$color-link = desaturate($color-accent, 55%) // vimeo: :selection with alpha=1
$color-shadowbackground = mix(tint($color-background, 30), $color-accent, 60)

// ...

Layouts

Tag cloud

Add a layout: tags line in your Front Matter when writing a Markdown page like so:

---
title: Tag clouds 
layout: tags
---
Here you can see all the tags I used!

The content will be shown before the tag cloud is shown.

Download page

  1. Add a layout: download line in your Front Matter when writing a Markdown page like so:

    ---
    title: MySoft
    layout: download
    ---
    This is a super description of the software I made that is avaible for download!
  2. Add a non-numbered list in the Markdown:

    ---
    title: MySoft
    layout: download
    ---
    This is a super description of the software I made that is avaible for download!
    
    * [Windows Version](https://your/soft/windows)
    * [Linux Version](https://your/soft/Linux)
    * [OSX Version](https://your/soft/OSX)

    It will automatically render as a list in the middle of the page with colored download icons next to them.

License

MIT