# hexo-theme-webstack **Repository Path**: asddfdf/hexo-theme-webstack ## Basic Information - **Project Name**: hexo-theme-webstack - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2022-02-28 - **Last Updated**: 2023-02-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # hexo-theme-webstack > 一款基于[WebStackPage](https://github.com/WebStackPage/WebStackPage.github.io)的 Hexo 主题。 ![screenshot](https://github.com/HCLonely/hexo-theme-webstack/raw/master/screenshot/screenshot.png) ## 安装 ### 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 ``` ## 配置 ### hexo >= 4.0 将`themes/webstack/`目录内的`_config.example.yml`文件复制到`博客根目录/source/_data/`目录内,并重命名为`webstack.yml`. 通过编辑`webstack.yml`进行配置。 ### hexo >= 5.0 - 如果是新安装本主题,安装完成后会在根目录生成一个`_config.webstack.yml`文件,直接编辑`_config.webstack.yml`文件进行配置即可。 - 如果是主题升级,可以使用 hexo >= 4.0 的配置方法,也可以将原来的配置文件移动到根目录,并重命名为`_config.webstack.yml`. > 注意:`博客根目录/_config.webstack.yml`和`博客根目录/source/_data/webstack.yml`请只保留一个! ### favicon > 网站图标 示例: ```yml favicon: /favicon.ico ``` ### banner > [可选]分享网站到 twitter 和 facebook 时的图片。 示例: ```yml banner: /images/webstack_banner_cn.png ``` ### logo > 网站 logo - `expanded`: 侧边栏展开式左上角的 logo - `collapsed`: 侧边栏收起式左上角的 logo - `dark`: 顶栏为暗色时左上角的 logo, 仅 `about` 页面生效 示例: ```yml logo: expanded: /images/logo@2x.png collapsed: /images/logo-collapsed@2x.png dark: /images/logo_dark@2x.png ``` ### flag > 语言标识,多语言请配合[子页面](#子页面配置)使用 - icon: 语言图标,默认仅有`flag-cn`和`flag-us`, 其他图标自行寻找存放于`主题目录/source/images/flags/` - name: 语言名称 - default: 该语言是否为默认语言 - index: 页面链接 示例: ```yml flag: - name: Chinese default: true icon: flag-cn index: /index.html ``` ### search > 是否显示搜索框 示例: ```yml search: true ``` ### userDefinedSearchData > 自定义搜索引擎 - custom: 是否启用自定义配置 - thisSearch: 当前搜索引擎的搜索链接 - thisSearchIcon: 当前搜索引擎的图标链接,格式为`url(图片链接)` - hotStatus: 是否启用搜热词功能 - data: 多搜索引擎配置 - name: 搜索引擎名字 img: 搜索引擎的搜索链接 url: 搜索引擎的图标链接,格式为`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/) 示例: ```yml githubCorner: '' ``` ### since > 建站年份,显示在页面底部 示例: ```yml since: 2020 ``` ### menu > **[主要]侧边栏菜单设置** - name: 分组名 - icon: 分组图标 - config: [主要]分组内容(详细设置查看[Config](#config)),如果有二级菜单则不需要此项! - submenu: 二级菜单,如果有二级菜单则不需要`config`, 此选项内容包含`name`, `icon`, `config`选项 示例: ```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 > 是否将侧边栏全部展开 示例: ```yml expandAll: true ``` ### about > 侧边栏的关于本站 - url: 关于页面链接 - name: 在侧边栏显示的文字 - icon: 图标 示例: ```yml about: url: /about/ icon: far fa-heart name: 关于本站 ``` ### aboutPage > 关于页面设置 1. 生成关于页面 ```shell hexo new page about ``` 2. 编辑`source/about/index.md`, 添加`type: 'about'` ```yml --- title: about date: 2020-06-04 18:11:54 type: 'about' --- ``` 3. 编辑主题配置文件的`aboutPage` - website: 关于本站内容 - head: 标题 - html: 内容,支持`html`语法 - webmaster: 关于站长内容 - head: 标题 - name: 站长名字 - url: 链接 - img: 头像 - description: 描述 - html: 其他内容,支持`html`语法 示例: ```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 > 不蒜子统计 - enable: 是否启用不蒜子统计 - position: 访问量显示位置, `footer`显示在页脚, `sidebar`显示在侧边栏 - pv: 访问量显示的内容, `$pv`会被替换为访问量 - uv: 访客数显示的内容, `$uv`会被替换为访客数 示例: ```yml busuanzi: enable: true position: sidebar pv: 本站总访问量$pv uv: 本站总访客数$uv ``` ### custom > 自定义`html`内容 - head: 插入到``标签内的内容 - body: 插入到``标签之前的内容 示例: ```yml custom: head: |- # 以下内容插入到标签内,可设置多行,注意每行开头至少四个空格 body: |- # 以下内容插入到标签之前,可设置多行,注意每行开头至少四个空格
custom text
``` ## config > [主要]网站内容设置 ### 参数 - name: 网站名称 - url: 网站链接 - img: 网站图标 - description: 网站描述 示例: ```yml - name: HCLonely Blog url: https://blog.hclonely.com/ img: /images/logos/myBlog.png description: 一个懒人的博客。 ``` ### 关联设置名称并添加网站 在`menu`和`submenu`中设置的`config`的内容为此选项的名称。 例`menu`: ```yml menu: - name: 常用工具 icon: far fa-star config: hotTools ``` 则`常用工具`分组里的网站有以下两种添加方式: - 在主题的`_config.yml`里添加: ```yml hotTools: - name: HCLonely Blog url: https://blog.hclonely.com/ img: /images/logos/myBlog.png description: 一个懒人的博客。 - name: Github url: https://github.com/ img: /images/logos/github.png description: 面向开源及私有软件项目的托管平台。 ``` - 在`站点根目录/source/_data/`(没有自行创建)内新建`hotTools.yml`文件,文件内容如下: ```yml - name: HCLonely Blog url: https://blog.hclonely.com/ img: /images/logos/myBlog.png description: 一个懒人的博客。 - name: Github url: https://github.com/ img: /images/logos/github.png description: 面向开源及私有软件项目的托管平台。 ``` > 以上两种方式任选一种即可,建议使用第二种。 [配置详情](https://blog.hclonely.com/posts/3cd4fb34/) ## 子页面配置 ### 创建子页面 使用`hexo new page xxx`创建子页面,这里包括下面的说明都以`hexo new page child`为例。 ### 修改子页面配置文件 使用上面的命令生成子页面后,打开`根目录/source/child/index.md`文件(子页面配置文件),在两个`---`之间添加一行`type: 'child'`使此配置文件生效,子页面默认使用主页的配置,子页面优先使用子页面配置文件两个`---`之间的配置,各配置项和主页的配置功能相同。 示例请看[https://github.com/HCLonely/hexo-theme-webstack/tree/gh-pages/source/child/index.md](https://github.com/HCLonely/hexo-theme-webstack/tree/gh-pages/source/child/index.md) > 由于子页面在很久之前就基本做完了,后来比较忙就鸽了,可能有些配置或 bug 给忘了,有问题请及时反馈!