Code Monkey home page Code Monkey logo

hexo-theme-arch's Introduction

hexo-theme-arch

This theme was forked from hexo-theme-oranges (English | 简体中文).

Demo blog site

Features

  • Original existing functions from hexo-theme-oranges
  • Support the publication of articles in multiple languages
  • Add switch-language icon in the lower right corner
  • Support accessing url with context path suffix

Usage

  1. Enter hexo root directory and download theme via git submodule.
git submodule add -b multilang https://github.com/sissilab/hexo-theme-arch.git themes/arch

To update the theme in the future, just execute the git pull command in the theme root directory.

  1. Remove hexo-generator-* and add hexo-pagination from package.json.
npm uninstall hexo-generator-archive
npm uninstall hexo-generator-category
npm uninstall hexo-generator-index
npm uninstall hexo-generator-tag

npm install hexo-pagination --save
  1. Activate theme.

_config.yml can refer to hexo-theme-arch-sample.

# Set theme to arch in _config.yml
theme: arch
  1. Configure theme.

Copy the _config.yml file in the theme folder to the blog root directory and rename it to _config.arch.yml.

_config.arch.yml can refer to hexo-theme-arch-sample.

Multiple Languages Guide

If you want to support the publication of articles in both English (en) and Simplified Chinese (zh-CN), you can consider the following steps:

  1. Firstly follow the above Usage to complete download and configuration of the theme.
  2. Set language: [en, zh-CN] in _config.yml.
  3. Enable navigation bar in _config.arch.yml. If you enable Categories, Tags, About or Friends, you need create the corresponding files: a. Enable Categories: Create source/en/categories/index.md with the following content:
    ---
    title: categories
    type: "categories"
    lang: en
    ---
    Create source/zh-CN/categories/index.md with the following content:
    ---
    title: categories
    type: "categories"
    lang: zh-CN
    ---
    b. Enable Tags: Create source/en/tags/index.md with the following content:
    ---
    title: tags
    type: "tags"
    lang: en
    ---
    Create source/zh-CN/tags/index.md with the following content:
    ---
    title: tags
    type: "tags"
    lang: zh-CN
    ---
    c. Enable About: Create source/en/about/index.md with the following content:
    ---
    title: about
    type: "about"
    lang: en
    ---
    
    Introduce yourself here!
    Create source/zh-CN/about/index.md with the following content:
    ---
    title: about
    type: "about"
    lang: zh-CN
    ---
    
    在这里介绍你自己吧!
    d. Enable Friends: Create source/en/friends/index.md with the following content:
    ---
    title: friends
    type: "friends"
    lang: en
    ---
    Create source/zh-CN/friends/index.md with the following content:
    ---
    title: friends
    type: "friends"
    lang: zh-CN
    ---
  4. Add post-en.md and post-zh-CN.md under scaffolds folder.
    • post-en.md content:
    ---
    title: {{ title }}
    lang: en
    date: {{ date }}
    tags: []
    categories: 
    ---
    
    • post-zh-CN.md content:
    ---
    title: {{ title }}
    lang: zh-CN
    date: {{ date }}
    tags: []
    categories: 
    ---
    
  5. Now you can create your posts based on the templates defined under scaffolds folder. If you want to create a post in both English version and Simplified Chinese version, you need run commands as follows:
    • Create a new post in English version: hexo new post-en --path en/hello "Hello"
    • Create a new post in Simplified Chinese version: hexo new post-zh --path zh-CN/hello "Hello"
  6. Finally start your hexo service: hexo s --debug.

Demo Screenshot

English (en) Home page: hexo-theme-arch-home-en.png

Chinese (zh-CN) Home page: hexo-theme-arch-home-zh-CN.png

hexo-theme-arch's People

Contributors

zchengsite avatar sissilab avatar yanghaowang avatar ruan4261 avatar lizheming avatar duan-1 avatar zexiplus avatar oilbeater 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.