https://github.com/HCLonely/hexo-theme-webstack
A hexo theme based on webstack. | 一个基于webstack的hexo主题。
https://github.com/HCLonely/hexo-theme-webstack
hexo hexo-theme webstack
Last synced: about 1 month ago
JSON representation
A hexo theme based on webstack. | 一个基于webstack的hexo主题。
- Host: GitHub
- URL: https://github.com/HCLonely/hexo-theme-webstack
- Owner: HCLonely
- License: mit
- Created: 2020-06-04T10:55:14.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-19T03:14:33.000Z (about 2 years ago)
- Last Synced: 2024-05-20T09:21:40.126Z (11 months ago)
- Topics: hexo, hexo-theme, webstack
- Language: CSS
- Homepage: https://webstack.hclonely.com/
- Size: 2.7 MB
- Stars: 423
- Watchers: 5
- Forks: 119
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-hexo-themes - HCLonely/hexo-theme-webstack
README
# hexo-theme-webstack
[中文文档](https://github.com/HCLonely/hexo-theme-webstack/blob/master/README_CN.md)
> A Hexo theme based on [WebStackPage](https://github.com/WebStackPage/WebStackPage.github.io).
## Installation
### hexo >= 4.0
```shell
git clone https://github.com/HCLonely/hexo-theme-webstack themes/webstack
```
### hexo >= 5.0
```shell
npm install hexo-theme-webstack -S
```
or
```shell
cnpm install hexo-theme-webstack -S
```
## Configuration
### hexo >= 4.0
Copy the `_config.example.yml` file in the `themes/webstack/` directory to the `rootDir/source/_data/` directory and rename it to `webstack.yml`.
Configure it by editing `webstack.yml`.
### hexo >= 5.0
- If this theme is newly installed, a `_config.webstack.yml` file will be generated in the root directory after the installation is complete, and you can directly edit the `_config.webstack.yml` file for configuration.
- If it is a theme upgrade, you can use the configuration method of hexo >= 4.0, or you can move the original configuration file to the root directory and rename it to `_config.webstack.yml`.
> Note: Please keep only one of `rootDir/_config.webstack.yml` and `rootDir/source/_data/webstack.yml`!
### favicon
> Website icon.
Examples:
```yml
favicon: /favicon.ico
```
### banner
> [Optional] Banner when sharing website to twitter and facebook.
Examples:
```yml
banner: /images/webstack_banner_cn.png
```
### logo
> Website logo.
- `expanded`: The logo in the upper left corner of the expanded sidebar.
- `collapsed`: The logo in the upper left corner of the retractable sidebar.
- `dark`: The logo in the upper left corner when the top bar is dark, only the `about` page takes effect.
Examples:
```yml
logo:
expanded: /images/[email protected]
collapsed: /images/[email protected]
dark: /images/[email protected]
```
### flag
> Language identifier, multi-language please cooperate with [Subpage](#Subpage-configuration) use.
- icon: Language icons, by default only `flag-cn` and `flag-us`, other icons please look for and store in `theme directory/source/images/flags/`.
- name: Language name
- default: Whether the language is the default language
- index: The page link
Examples:
```yml
flag:
- name: Chinese
default: true
icon: flag-cn
index: /index.html
```
### search
> Whether to show search box
Examples:
```yml
search: true
```
### userDefinedSearchData
> Custom search engine
- custom: Whether to enable custom configuration
- thisSearch: Current search engine search link
- thisSearchIcon: Current search engine icon link, format: `url(图片链接)`
- hotStatus: Whether to enable hot word search function
- data: Multiple search engine configurations
- name: Search engine name
img: Search engine search link
url: Search engine icon link, format: `url(图片链接)`
示例：
```yml
userDefinedSearchData:
custom: true
thisSearch: https://www.baidu.com/s?wd=
thisSearchIcon: url(https://www.baidu.com/favicon.ico)
hotStatus: true
data:
- name: 百度
img: url(https://www.baidu.com/favicon.ico)
url: https://www.baidu.com/s?wd=
- name: 谷歌
img: url(https://www.google.com/favicon.ico)
url: https://www.google.com/search?q=
```
### githubCorner
> [Github corner](http://tholman.com/github-corners/) in the upper right corner.
Examples:
```yml
githubCorner: '.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}'
```
### since
> Year of site establishment, shown at the bottom of the page.
Examples:
```yml
since: 2020
```
### menu
> **[Main] Sidebar menu settings**
- name: Group name
- icon: Group icon
- config: [Main] Grouped content (see [Config](#config) for detailed settings), if there is a submenu, this item is not needed!
- submenu: If there is a submenu, `config` is not required, this option contains `name`, `icon`, `config` options.
Examples:
```yml
menu:
- name: 常用工具
icon: far fa-star
config: hotTools
- name: 其他工具
icon: fas fa-tools
submenu:
- name: 开发工具
icon: fas fa-tools
config: devTools
- name: 我的博客
icon: fas fa-blog
config: myBlog
```
### expandAll
> Whether to expand the sidebar.
示例：
```yml
expandAll: true
```
### about
> About this site in the sidebar.
- url: The link of about page.
- name: Text displayed in the sidebar.
- icon: Icon.
Examples:
```yml
about:
url: /about/
icon: far fa-heart
name: 关于本站
```
### aboutPage
> About page settings.
1. Generate about page.
```shell
hexo new page about
```
2. Edit `source/about/index.md` and add `type:'about'`
```yml
---
title: about
date: 2020-06-04 18:11:54
type: 'about'
---
```
3. Editing `aboutPage` in theme configuration files.
- website: The content of about this site.
- head: Headline.
- html: Content, support `html` syntax.
- webmaster: The content of about webmaster.
- head: Headline.
- name: Webmaster's name
- url: Link.
- img: Avatar.
- description: Description.
- html: Content, support `html` syntax.
Examples:
```yml
aboutPage:
website:
head: 关于本站
html: '
本站是hexo主题hexo-theme-webstack的demo站。
'
webmaster:
head: 关于站长
name: HCLonely
url: https://blog.hclonely.com/
img: /images/logos/myblog.png
description: 懒人一个
html: '
本站是HCLonely基于WebStackPage项目做的一款Hexo主题。
'
```
### busuanzi
> Website statistics by busuanzi.
- enable: Whether to enable this feature.
- position: The number of visits is displayed, `footer` is displayed in the footer, and `sidebar` is displayed in the sidebar.
- pv: The number of visits displayed by the traffic, `$pv` will be replaced by the number of visits.
- uv: The number of visitors displayed, `$uv` will be replaced by the number of visitors.
Examples:
```yml
busuanzi:
enable: true
position: sidebar
pv: 本站总访问量$pv
uv: 本站总访客数$uv
```
### custom
> Customize `html` content.
- head: Content inserted into the `` tag.
- body: Content inserted before the `