Giter Site home page Giter Site logo

did321 / hexo-theme-chic Goto Github PK

View Code? Open in Web Editor NEW

This project forked from siricee/hexo-theme-chic

0.0 1.0 0.0 6.87 MB

An elegant, powerful, easy-to-read Hexo theme.

Home Page: https://siricee.github.io/hexo-theme-Chic/

License: Other

HTML 27.93% CSS 69.80% JavaScript 2.26%

hexo-theme-chic's Introduction

Chic theme

Chic ,French word means 'Elegant' in English.

Author node.js Hexo Build Status Build Status

Doc language

Contents

Introduction

An elegant,powerful,easy-to-read Hexo theme.

Demo

Features

  • Appropriate blank blocks,elegant but not simple.

  • Light/Dark theme,just one click.

  • Abundant highlight mode.

  • elaborately selected fonts,best reading experience. * 'Microsoft Jhenghei' especially recommended.

  • Auto fit Mobile and Screen responsively.

  • Support MathJax,Support Formula written in LaTeX.

Installation

cd your-blog/themes
git clone https://github.com/Siricee/hexo-theme-Chic.git Chic
// Modify theme setting in _config.yml to Chic.

Configuration

click here to spread
# html lang
language: en

# Header
navname: Bentham's Blog

# navigatior items
nav:
  Posts: /archives
  Categories: /category
  Tags: /tag
  About: /about

# favicon
favicon: /favicon.ico

# Profile
nickname: Jeremy Bentham

### this variable is MarkDown form.
description: Lorem ipsum dolor sit amet, **consectetur adipiscing elit.** <br>Fusce eget urna vitae velit *eleifend interdum at ac* nisi.
avatar: /image/avatar.jpeg

# main menu navigation
## links key words should not be changed.
## Complete url after key words.
## Unused key can be commented out.
links:
  Blog: /
#  Category:
#  Tags:
#  Link:
#  Resume:
#  Publish:
#  Trophy:
#  Gallary:
#  RSS:
#  AliPay:
  ZhiHu: https://www.zhihu.com/people/sirice
#  LinkedIn:
#  FaceBook:
#  Twitter:
#  Skype:
#  CodeSandBox:
#  CodePen:
#  Sketch:
#  Gitlab:
#  Dribble:
  Instagram:
  Reddit:
#  YouTube:
#  QQ:
#  Weibo:
#  WeChat:
  Github: https://github.com/Siricee

# how links show: you have 2 choice--text or icon.
links_text_enable: false
links_icon_enable: true

# Post page
## Post_meta
post_meta_enable: true

post_author_enable: true
post_date_enable: true
post_category_enable: true
## Post copyright
post_copyright_enable: true

post_copyright_author_enable: true
post_copyright_permalink_enable: true
post_copyright_license_enable: true
post_copyright_license_text: Copyright (c) 2019 <a href="http://creativecommons.org/licenses/by-nc/4.0/">CC-BY-NC-4.0</a> LICENSE
post_copyright_slogan_enable: true
post_copyright_slogan_text: Do you believe in <strong>DESTINY<strong>?
## toc
post_toc_enable: true

# Page
page_title_enable: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: MMMM D, YYYY
time_format: H:mm:ss

# stylesheets loaded in the <head>
stylesheets:
  - /css/style.css

# scripts loaded in the end of the body
scripts:
  - /js/script.js
  - /js/tocbot.min.js
    # tscanlin/tocbot: Build a table of contents from headings in an HTML document.
    # https://github.com/tscanlin/tocbot


# plugin functions
## Mathjax: Math Formula Support
## https://www.mathjax.org
mathjax:
  enable: true
  import: demand # global or demand
  ## global: all pages will load mathjax,this will degrade performance and some grammers may be parsed wrong.
  ## demand: Recommend option,if your post need fomula, you can declare 'mathjax: true' in Front-matter

Add 'Tag','Category' Page

There is no 'tag' or 'category' page in initialized site. If you need it, please follow the steps below.

  1. execute command
hexo new page tag
hexo new page category
  1. enter the dictionary
cd source/tag
  1. add 'layout' key
// source\tag\index.md
---
title: Tag
layout: tag
---
  1. So do the category page.please set keyword 'layout' category.

MathJax (Render LaTeX Formula)

Related config file(Chic/_config.yml):

# plugin functions
## Mathjax: Math Formula Support
## https://www.mathjax.org
mathjax:
  enable: true
  import: global # global or demand
  ## global: all pages will load mathjax,this will degrade performance and some grammers may be parsed wrong.
  ## demand: if your post need fomula, you can declare 'mathjax: true' in Front-matter

mathjax has keywords below:

  • enable: valuetrue enable mathjax(default set true); valuefalse disable.
  • import:this key sets mathjax load method,option could be global or demand.
    • global:global import,all pages will load script.It's convenient,but it may cause some MarkDown grammers parsed wrong.for example, consecutive $$ will be rendered as a formula;Besides,global import will waste performance in pages without any formula.
    • demand【Recommended】:import mathjax when you need.After you set this value,if you need use formula,just declare it in post Front-matter.Here is an example below.
      ---
      title: MathJax Test
      date: 2019-07-05 21:27:59
      tags:
      mathjax: true # add this statement,MathJax will enable in this post.
      ---

LaTeX grammers will not be illustrated in this doc. In Chic theme, Single '$' rounded statement is regarded as inline formula like $f(x)=ax+b$ ; Double '$' rounded statement is regarded as block formula like $$f(x)=ax+b$$.More information please read LaTeX doc and Formula test page in Demo Site.

Customize

  • Highlight Style: Enter hexo-theme-Chic\themes\Chic\source\css\style.styl change stylesheet with key word _highlight in link in _highlight dictionary.

  • Customize stylesheets in path below.(stylus)

    hexo-theme-Chic\themes\Chic\source\css\custom.styl

  • Customize javascripts in dictionary below.

    hexo-theme-Chic\themes\Chic\source\js

    Then add declareation in _config.yml key word 'script'

FAQ

  1. I deployed my site on second-level url(such as username.github.io/Blog), why my css,avatar and other sources missed(404 error)?

    Answer: You need change some URLs in root config url keyword. For instance:

    # (blog/_config.yml)
    
    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: https://siricee.github.io/hexo-theme-Chic/  # this is your deploy url.
    root: /hexo-theme-Chic/  # this is your root folder url.
    permalink: :year/:month/:day/:title/
    permalink_defaults:
  2. More questions is waiting to be supplied...

Gallary

screely-1560228577821.png screely-1560228791041.png screely-1560228621288.png screely-1560228761180.png

smartmockups_jwrd4ru3.png

smartmockups_jwrd9y4r.png

LICENSE

Chic © @Sirice

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

hexo-theme-chic's People

Contributors

siricee avatar evilcult avatar

Watchers

James Cloos 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.