sumimakito / hexo-theme-typography

Rediscover the beauty of typography.

hexo-theme-Typography

点击这里阅读简体中文版使用文档

Installing

Prerequisite – Ensure the dependencies

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

Yarn users

yarn remove hexo-generator-category # we'll use hexo-generator-category-enhance instead
yarn add hexo-renderer-pug hexo-generator-archive hexo-generator-category-enhance hexo-generator-feed hexo-generator-tag
yarn add hexo-prism-plugin # for syntax highlighting

Npm users

npm uninstall --save hexo-generator-category # we'll use hexo-generator-category-enhance instead
npm install --save hexo-renderer-pug hexo-generator-archive hexo-generator-category-enhance hexo-generator-feed hexo-generator-tag
npm install --save hexo-prism-plugin # for syntax highlighting

Installing the theme

git clone https://github.com/SumiMakito/hexo-theme-typography themes/typography
cd themes/typography
npm install
yarn install # for yarn users

Modifying the config file

To use Typography, some modifications on the your blog's root-level _config.yml is necessary.

theme: typography

highlight:
  enable: false # we will use the prism plugin instead

plugin:
  - hexo-generator-category-enhance
  - hexo-generator-feed
  - hexo-asset-image
  - hexo-prism-plugin
  - hexo-toc
  # ... other plugins you'd like to enable

# 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: ' '

# For syntax highlighting
prism_plugin:
  mode: 'preprocess'
  theme: 'default'
  line_number: true 

Updating

cd themes/typography
git pull
npm run build
yarn run build # for yarn users

You may encounter the error modified: themes/typography if 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.

Customizing

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, title_primary, and title_secondary. The title is defined in the _config.yml inside the Hexo blog's root directory while the title_primary and title_secondary are defined in Typography's _config.yml.

• title: The <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

Modify the .yml files in themes/typography/languages or add new files according to your need.

Auto truncate

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.

e.g. truncate_len: 160

Changing the color scheme

You can find this option in theme's _config.yml.

Currently, there are two color schemes available:

• light
• dark

themeStyle: light

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.

Currently, Typography supports comment services provided by Disqus and LiveRe. The only thing you need to do is to set the corresponding key for the comment service that you would like to use.

e.g. disqus: disqus_shortname OR livere: livere_data_uid

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.

showPageCount: true

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 _config.yml:

showCategories: true
showTag: true

Set website favicon

Prepare favicon.png file and put in themes/typography/source/images/favicon.png

Embed Google Analytics in your blog

Find the line below in themes/typography/source/js/google-analytics.js:

ga('create', 'UA-73442912-1', 'auto');

Replace 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.">

If desc is 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:

• Twitter
• GitHub
• Instagram
• 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.

Customize²

Please edit scss files instead of css files. We recommend you to run npm run watch (or yarn run watch) to watch changes on scss files. But plesae be noted that npm run watch does not provide auto-prefixing support on compiled css files. Running npm run build (or yarn run build), which has support for CSS compressing and auto-prefixing, after you have done your modifications and before deploying your blog is recommended.

Typography uses node-sass and 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 .css files:

cd themes/typography
npm run build
yarn run build # for yarn users

.scss files are located in theme/typography/raw/scss.

Customize³

As for the pug templates inside theme/typography/layout, just edit them and remember to add some pepper as you like it.

Contributors

• Makito
• pmtao

Support me

I am a freelance student developer. (with bloody little income)

Please consider buy me a cup of caramel macchiato if you really like my work. _(:з」∠)_

Thank you very much.

WeChat and Alipay are both accepted.

License

© 2017-2018 Makito

Typography is released under the MIT license.

hexo-theme-typography's Issues

Appearance of scrollbar in Firefox 52

Hi, there.
Thank you for awesome theme. I use this theme on my blog.
I found the issue in Firefox v52.

the theme sets the -moz-scrollbars-none to overflow-y of .main-container.
It seems that the value is not available to overflow-y. it is overflow.
However , you can use -moz-hidden-unscrollable instead of it.

Cheers.

能不能支持latex公式的渲染？

这个主题很好看，但是我的文章里面有很多latex公式，这个主题无法支持。想问下，能够支持下mathjax来渲染latex公式？

怎么开启评论

我已经按照 README 设置了 livere 的 data-uid。

可是博客依然不显示评论图标

文章页底部也没有评论区

您好，您的博客主题特别漂亮，请问可以开源吗？

您好，之前有给您发过邮件，您博客https://keep.moe 博客主题特别漂亮，请问可以开源一下吗，谢谢啦

[feature request] add friends links

Hope we can add friend links in blog.

请问如何安装node-sass?

(base) [root@VM-84-23-xxx typography]# yarn install
yarn install v1.22.19
warning ../../package.json: No license field
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=14". Got "10.24.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

我的 node 版本是：v14.17.0

themestyle issues

当我切换themestyle:dark又再次切换回light后出现bug
如图:

css没有成功切换.

这是你的博客主题么

单页面关闭评论功能

官方提供的变量中page.comments可以开启/关闭评论，而我设置了却仍然出现评论功能

Google Analytics doesn't seem to work for me

Hi there.

• I followed the instructions in README and updated my blog:
  
• Went to analytics.google.com and set everything up

Somehow what I'm getting are:

• Nothing happened on the GA dashboard (Everything still at 0, while I did visit my blog a few times)

• When I was trying to add my blog on Google Search Console, I got these errors:

  Verification method:
  Google Analytics

  Failure reason:
  We could not find any Google Analytics tracking codes on the index page of your site.

Wondering if anyone else's having the same issue.

This is the link to my blog: https://heavenlychorus.github.io/

Thanks in advance.

请问网格背景要怎么修改呢

请问网格背景是怎么描绘出来的，如果想改网格颜色的话要去哪里呢，看了一下scss没有找到。

lug.ustc.edu.cn 字体镜像失效

建议还是把Source Sans Pro下到本地吧

使用来必力 livere 做评论系统时，首页不显示评论图标

激活 disqus 时

激活 livere 时

代码高亮和首页部分内容预览问题

这是个很漂亮的主题，很喜欢，不过我碰到两个问题，能教教我吗？

代码好像不能设置高亮？不知道怎么设置或在哪里可以设置？因为我不会定制 html，所以你能指引一下吗？

第二个是的内容预览部分如果碰到代码，显示效果就不太好了：

页面有video在播放时，切换页面视频声音还在

页面用html5的video在播放视频，切换到别的页面时，依旧能听到视频声音

添加多级分类支持 Add support for multi-level categories

Hi there,

I'm using your Hexo theme and I'm really enjoying it so far. However, I've noticed that the theme doesn't currently support multi-level categories. This means that if I want to organize my posts into sub-categories, I have to resort to workarounds like using tags or creating separate parent categories for each sub-category.

I would like to request that you add support for multi-level categories in the theme. This would allow me to create a more organized and intuitive structure for my posts, and would make it easier for readers to navigate and find content on my site.

Ideally, I would like to be able to create categories like this:

- Programming
  - JavaScript
    - Node.js
    - React
  - Python
  - Ruby
- Design
  - UI/UX
  - Graphic design
- Photography

This would allow me to create a hierarchy of categories that reflects the structure of my content and makes it easier for readers to browse related topics.

If possible, it would also be great to have control over the display of sub-categories in the sidebar, so that readers can easily see the parent categories and expand/collapse the sub-categories as needed.

I understand that this might be a significant change to the theme's codebase, but I believe that it would add a valuable feature to the theme and make it more flexible and customizable for a wider range of use cases.

Thank you for considering my request. Let me know if you have any questions or if there's anything else I can do to help.

Best regards!

---

您好，

我正在使用您的 Hexo 主题，并且到目前为止我非常喜欢它。但是，我注意到该主题目前不支持多级分类。这意味着如果我想将我的帖子组织成子分类，我必须采用其他解决方法，例如使用标签或为每个子分类创建单独的父分类。

我想请求您在主题中添加多级分类支持。这将允许我创建更有组织且直观的帖子结构，并使读者更容易浏览和查找我的站点上的内容。

理想情况下，我希望能够创建以下类别：

- 编程
  - JavaScript
    - Node.js
    - React
  - Python
  - Ruby
- 设计
  - UI/UX
  - 平面设计
- 摄影

这将允许我创建一个类别层次结构，反映我的内容结构，并使读者更容易浏览相关主题。

如果可能，还希望能够控制主题侧边栏中子类别的显示方式，以便读者可以轻松查看父类别，并根据需要扩展/折叠子类别。

我理解这可能是主题代码库的重大变化，但我相信这将为该主题添加一个有价值的功能，并使其更具灵活性和可定制性，适用于更广泛的用例。

感谢您考虑我的请求。如果您有任何问题或需要帮助，请让我知道。

图标问题，icon issue

github 和 rss那几个图标太小了
github's icon is to small

Table style seems not support well

Hello, I've been using your theme for a while and it looks awesome. But there is a thing bugs me quite long time which is the table style.

It seems that the table border cannot be shown and the margin is also too small (There is no margin between "Caption" and "A" where it suppose to be.)

Another issue is it seems that I cannot make tables centering but I am not sure whether I am doing the correct way, shown as following

<center>
table
<\center>

Thank you very much

Cannot Hide Title and Date For Pages

Hi,

Really appreciate your work on this nice and elegant theme. However, I want to hide the title and date attribute in my pages (not posts). I am also relatively new in Hexo. Could anyone provides me some tips? Thank you!

你好，

非常感谢您在这个漂亮而优雅的主题上所做的工作。 但是，我想在我的page（不是post）中隐藏标题和日期属性。 只保留在page/index.md里的内容。我对 Hexo 也比较陌生。 能否给我一些指导？ 谢谢你！

Scroll bar in main-container and figure

The scroll bar is set to be always appear in .main-container and figure and looks incoherent with this elegant theme. Would it be better to change to overlay?

设置首页菜单

是否可以提供在config中配置首页菜单的功能，当我配置404页面的时候，404默认就出现在首页右边的菜单中了。

Prism 插件无法添加代码块一键复制的功能

你好，我发现使用hexo-prism-plugin，除了可以显示line number，其他原生的插件功能并不支持。是否有办法增加copy to clipboard之类的功能呢？我已经在本地对这个主题做了一些调整，大致了解这个主题，如果有办法增加新功能我可以尝试实现，不知道是否可以提供一点思路？ 谢谢！

typography-custom-font.css doesn't exist

/css/typography-custom-font.css is included in the html, but it can not be found in public resources folder, it cause a 404 error.

关于文章页与首页的报错

1. 用 Edge 和 Chrome 访问文章页时，会出现返回顶层按钮没有加载出来的情况。
2. 用 Edge 访问首页时，文章翻页按钮处会出现没有加载出来的情况。
   以上可能为本地网络问题...但也请帮忙排查排查...
3. 访问时会出现一个字体切换的过程，只会在 PC 端出现。

谢谢朵朵！

请问社交网站如何自定义?

我想要自定义社交网站, 请问如何修改.
例如我想要增加 Telegram 和 notion 的图标, 请问在哪里修改?

暗色主题貌似不能开启

icon不显示

Node.js 20 seems unsupported

除主页外，其他页面不能显示favicon.png

你好，我在使用时发现，html页面中的favicon路径都是固定的images/favicon.png。这导致除了和images文件夹在同一级的主页之外，其他页面都不能按照这个路径正常显示标签页栏上的网站图标。
请问可以怎么解决呢？有没有什么方式可以在生成静态文件的时候把它变成正确的路径呢？
谢谢你。

无法使用豆瓣插件

豆瓣插件地址：https://github.com/mythsman/hexo-douban

按照方案配置之后，无法显示，适用这个插件吗

代码高亮与首页文字截断问题 Syntax highlighting & Read More function

1). 代码高亮问题：默认似乎没有代码高亮功能，是否支持高亮插件prism_plugin？如果需要修改可以去哪个位置修改？
2). 首页文字截断问题：无法通过<!--more-->来控制首页文字的展示长度。

1). The Syntax highlighting function doesn't work, and does it support the plugin prism?
2). I can't use <!--more--> to control the content length shown on the homepage.