Do not simply copy and paste the whole block of codes, please take a carefully look in advance. :)
cd hexo # cd into the root directory of your Hexo blog npm install --save hexo-renderer-jade hexo-generator-archive hexo-generator-category-enhance hexo-generator-feed hexo-generator-tag npm uninstall --save hexo-generator-category # use hexo-generator-category-enhance instead git clone https://github.com/SumiMakito/hexo-theme-typography themes/typography cd themes/typography npm install
You can skip the second line provided you have already installed
hexo-generator-archivein your Hexo blog's root directory.
Modify the config file
theme: in your
_config.yml at the root directory of your Hexo blog, and change that line into
theme: typography, set
en as you like , then add these lines:
# Generate archive page archive_generator: per_page: 0 # Generate categories index page and each category page category_generator: per_page: 10 enable_index_page: true # Generate tags index page and each tag page tag_generator: per_page: 10 enable_index_page: true # Generator atom feed for you website feed: type: atom path: atom.xml limit: 20 hub: content: content_limit: 140 content_limit_delim: ' '
cd themes/typography git pull npm run scss-compile
We recommend you to run
npm run scss-compileafter each update, although CSS files will also be updated in each commit.
You may encounter the error
modified: themes/typographyif you are managing the whole blog with
git. In that case, instead of using
git push, we recommend you to download the zip and update the theme manually.
Typography has packed up several labor-saving functions, thus you can easily make any change at any time in the
_config.yml file located in the root directory of the theme.
Correctly define the title* Important *
Typography has three titles:
title is defined in the
_config.yml inside the Hexo blog's root directory while the
title_secondary are defined in Typography's
<title>of all the HTML pages.
title_primary: The bigger title to display on nav/side bar.
title_secondary: The smaller title to display on nav/side bar.
Change the language
.yml files in
themes/typography/languages or add new files according to your need.
It is possible to control the length for all the summaries on the index page by setting a value for
truncate_len. The default length is 160.
Changing the color scheme
You can find this option in theme's
Currently, there are two color schemes available:
Set up the comment service
The comment box is a place for readers to exchange their ideas with the author. Typography has integrated two 3rd-party comment services, and they are ready to use at any time.
disqus: disqus_shortname OR
Do not use two comment services at the same time, or the post will be followed by two comment boxes. Just leave blank for the rest of the comment service-related options.
Show/Hide the page indicator
Set to false to hide the page indicator above the page switcher.
Show/Hide categories and tags links behind post title
You can choose whether or not to show categories and tags links behind post title in index and post page by changing the following values in theme's
showCategories: true showTag: true
Set website favicon
favicon.png file and put in
Embed Google Analytics in your blog
Find the line below in
ga('create', 'UA-73442912-1', 'auto');
UA-73442912-1 with your own google analytics id.
SEO-friendly meta description tag
Typography gives you the chance to insert unique SEO-friendly meta description tags for different posts. Also, it is handy. Just add a new line in the head section of your post:
title: Another post date: 1970-01-01 00:00 desc: Description to be inserted into the metadata of the post page. ---
Then the generated HTML file will contain:
<meta name="description" content="Description to be inserted into the metadata of the post page.">
descis not specified, the first 140 words of the post will be used as the description.
Icons for social network accounts
Typography natively supports the following social network accounts:
- Sina Weibo
To use light up those icons, just simply set the values for the corresponding options.
twitter: user_name weibo: user_id/permanent_name instagram: user_name github: user_name
Tips: leave blanks to remove the icons from the site.
scss-compile to generate
.css files for styling. We have provided several options such as background and foreground colors for you to choose. When your editing is finished, do not forget to run the commands below to re-generate the
cd themes/typography npm run scss-compile
.scssfiles are located in
As for the jade templates inside
theme/typography/layout, just edit them and remember to add some pepper as you like it.
I am a freelance student developer. (with bloody little income)
Please consider buy me a cup of cappuccino if you really like my work.
Thank you very much.
WeChat and Alipay are both accepted.
© 2017-2018 Makito
Typography is released under the MIT license.