Skip to content
This repository has been archived by the owner on Mar 6, 2024. It is now read-only.

Latest commit

 

History

History
925 lines (620 loc) · 26.2 KB

中文文档.md

File metadata and controls

925 lines (620 loc) · 26.2 KB
Raw

Now，花了几天的时间，终于把我的主题从 Vuejs 迁移到了 Hexo。这是官方的配置文档，如果您喜欢这个主题，欢迎Star ✨

主题地址：

请注意: 非常推荐使用Hexo，配合主题提供的SEO优化服务和Github等平台的Pages服务，您可以免去DDoS、搭建服务器等方面的烦恼和费用！！！

Now，花了几天的时间，终于把我的主题从 Vuejs 迁移到了 Hexo。这是官方的配置文档，如果您喜欢这个主题，欢迎Star ✨

主题地址：

PS: 非常推荐使用Hexo，配合主题提供的SEO优化服务和Github等平台的Pages服务，您可以免去DDoS、搭建服务器等方面的烦恼和费用！！！

1. 快速开始

1.1 下载主题代码

$ hexo init your-blog
$ cd your-blog/
$ git clone [email protected]:dongyuanxin/theme-bmw.git themes/bmw

1.2 修改HEXO配置文件

修改hexo的配置文件：your-blog/_config.yml:

# ... 

# 位置：大概位于 6 ～ 12 行
title: 您自己的网站标题
subtitle: # 不需要填写
description: 您自己的网站描述
keywords: 您自己的网站关键词
author: 您的姓名
language: zh-Hans # 目前仅支持中文
timezone: # 不需要填写

# 位置：大概位于 18 行
permalink: passages/:title/ # 如果您需要开启评论和文章统计，请修改此配置

# 位置：大概位于 76 行
theme: bmw # 启用 "bmw" 主题

# ...

1.3 修改主题配置文件

theme-bmw 的配置文件：your-blog/themes/bmw/_config.yml

请注意，初始阶段您并不需要修改本主题的配置文件，请继续往下看。

1.4 启动博客

$ hexo s

hexo默认监听4000端口, 此时, 请使用Chrome等主流浏览器打开 http://localhost:4000/ ，查看博客。

2. 文章页面

BMW主题针对文章提供了目录渲染、数学公式渲染、音乐组件、版权保护、多平台分享和用户打赏功能。您可以根据个人需求进行设置，以提高用户体验。

2.0 文章格式

BMW主题针对文章的SEO做了相关优化，并且支持摘要内容渲染。如果您想让您的博客SEO更高，浏览体验更高，那么请注意文章格式。

下面是一个标准的文章格式：

---
title: 文章标题
date: 文章创建日期
categories: 文章分类
tags:
  - 文章标签1
  - 文章标签2
  - ...
---

在`<!-- more -->`之前编写文章的摘要内容！！！

<!-- more -->

在`<!-- more -->`之后编写文章的正式内容！！！

注：请为您的文章撰写摘要，否则首页看起来会很空洞

2.1 目录渲染 | 数学公式渲染

默认是开启目录渲染和数学公式渲染，并且做了移动端兼容。如果您想关闭目录渲染或数学公式渲染，在配置文件大概27～29行左右：

toc: true

mathjax: true

2.2 插入音乐

是滴，您可以为每篇文章自定义音乐。对于一篇文章，需要开头加上playlist字段：

playlist:
  -
    name: Where are you
    artist: AniFace
    url: "//music.163.com/song/media/outer/url?id=453843751.mp3"
    cover: "//p1.music.126.net/AUfXMljLBgB3PBV731IzRg==/109951162857118370.jpg?param=130y130"
  -
    name: END THEME
    artist: 天門
    url: "http://music.163.com/song/media/outer/url?id=528306.mp3"
    cover: "//p1.music.126.net/1sw_ptPeI_GNm58VBW1udQ==/2504687488135369.jpg?param=130y130"

注：此功能不需要修改配置文件

2.3 版权保护

在配置文件60～63行，您可以自定义您的文章版权信息：

copyright: 
  enable: true # 是否开启版权保护
  author: GODBMW # 您的名字
  license: '本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议。转载请注明出处！'

注：license字段支持html渲染

2.4 多平台分享

在配置文件36～39行，您可以自定义分享的平台（默认开启了qq空间、qq、微信、google、推特等平台）：

social_share: 
  enable: true # 是否开启平台分享
  sites: qzone, qq, weibo, wechat, douban, google, facebook, twitter
  disabled:

注：sites和disabled字段的值请参考share.js

2.5 用户打赏

在配置文件42行左右，您可以开启打赏功能，并且打赏文字、按钮文字和多个支付方式：

# 是否开启 打赏功能
reward: 
  enable: true
  meta: 知识 & 情怀 | 二者兼得 # 提示文字
  button_meta: 投食 # 按钮文字
  qrcodes: 
    # 支持多个支付方式
    # src: 二维码位置
    # meta: 二维码提示信息
    -
      src: /images/wechat.png 
      meta: "微信扫一扫, 向我投食"
    -
      src: /images/alipay.png
      meta: "支付宝扫一扫, 向我投食"

注：qrcodes属性是个数组，您可以为每个平台设置图片src和对应的提示信息meta

3. 更多页面

BMW 主题在HEXO默认界面的基础上，额外提供了标签归档、 分类归档、 关于介绍 和 友链界面。如果您想自定义更多页面，请看“进阶内容”。

3.1 标签页面

生成标签页面：

$ hexo new page tags

修改标签归档页面的markdown文件(文件路径：your-blog/source/tags/index.md)的内容：

---
title: tags
date: <!-- 自动生成，无需修改 -->
type: "tags"
categories:
tags:
---

查看标签归档页面：浏览器中打开 http://localhost:4000/tags/

注：type字段的值是tags

3.2 分类页面

生成分类页面：

$ hexo new page categories

修改分类归档页面的markdown文件(文件路径：your-blog/source/categories/index.md)的内容：

---
title: categories
date: <!-- 自动生成，无需修改 -->
type: "categories"
categories:
tags:
---

查看标签归档页面：浏览器中打开 http://localhost:4000/categories/

注：type字段的值是categories

3.3 关于页面

生成分类页面：

$ hexo new page about

修改关于页面的markdown文件(文件路径：your-blog/source/about/index.md)的内容：

---
title: about
date: <!-- 自动生成，无需修改 -->
type: "about"
categories:
tags:
---

这里编写您的网站/博客的相关介绍：联系方式、更新日志、甚至是您的个人简历。

BMW 主题会自动渲染此篇markdown，并且在 `http://localhost:4000/about/` 展示给您！

查看关于页面：浏览器中打开 http://localhost:4000/about/

注：type字段的值是about

3.4 友链界面

友链界面除了要编写相关markdown文件，还需要更改 BMW主题的配置文件，以更好地方式展示您的友链！

3.4.1 生成友链界面

$ hexo new page friends

修改友链页面的markdown文件(文件路径：your-blog/source/friends/index.md)的内容：

---
title: friends
date: <!-- 自动生成，无需修改 -->
type: "friends"
categories: 
tags:
---

这里编写您的友链声明，您可以陈述您的友链申请规则。

BMW 主题会自动渲染此篇markdown，并且在 `http://localhost:4000/friends/` 展示给您！

注：type字段的值是friends

3.4.2 展示更多友链

请打开 BMW主题 的配置文件：your-blog/themes/bmw/_config.yml。您会发现在大概118行左右，有相关友情链接的配置：

# ...

# 友链详细信息
friends: # 这是一个数组, 每个元素是一个obj对象
  -
    nickname: 友链名称
    avatar: 友链头像
    site: 友链地址
    meta: 友链信息
  -
    nickname: 友链名称2
    avatar: 友链头像2
    site: 友链地址2
    meta: 友链信息2
  # ...

查看友链页面：浏览器中打开 http://localhost:4000/friends/

4. 评论系统 && 文章统计

theme-bmw的评论系统采用的是Valine，并且提供了基于Leancloud的文章统计插件。您只需要按照以下步骤进行简单的配置，便可以提供更好的用户体验！

如果您不想开启评论系统和文章统计插件，请跳过这一部分

4.1 配置Leancloud

进入leancloud.cn

注册账户，并且登录您的账户，然后在右上角进入“控制台”。并且创建一个新应用。

配置默认即可（如下图所示），名字根据自己喜好取：

进入刚刚创建的应用，在左上方屏幕，点击创建新Class。接下来，我们就要为评论系统和文章统计插件分别创建2个应用。

  1. 为评论系统开通Class: 名称必须是Comment, ACL权限选择“限制写入”，如下图
  2. 为文章统计插件开通Class: 名称必须是Timer, ACL权限选择“无限制”，如下图

4.2 配置密钥

进入左边导航栏 -> 设置 -> 应用Key：

注意：请保存好您的密钥，关于安全问题，请阅读最后一部分！！！

Now，切回BMW主题的配置文件your-blog/themes/bmw/_config.yml。在大概74行，有一项关于leancloud的配置，按照上图中的appId和appKey，复制并且粘贴到配置项即可。

4.3 开启评论系统

请先确保您按照前面步骤配置了leancloud，并且正确修改了配置文件中的相关配置。

进入配置文件，在大概77行左右，请将leancloud.comment修改为true.

重启hexo服务即可生效。

4.4 开启文章统计

请先确保您按照前面步骤配置了leancloud，并且正确修改了配置文件中的相关配置。

进入配置文件，在大概78行左右，请将leancloud.timer修改为true.

重启hexo服务即可生效。

5. 进阶设定

5.1 自定义导航栏

配置文件的默认导航配置，大概在81～115行左右的nav属性中。

# 推荐：填写您的网站名称
nav_name: GODBMW.com 

nav:
  # -
  #   name: 名称
  #   path: 网址
  #   blank: 是否在新页面打开，默认是false
  #   children: 子导航(数组)，默认为空
  #     ... 
  - 
    name: 关于
    path: /about/
  - 
    name: 抓到我
    children:
      -
        name: Github
        path: "https://github.com/dongyuanxin"
        blank: true
      -
        name: "知乎"
        path: "https://www.zhihu.com/people/godbmw/activities"
        blank: true

注：导航栏最多支持2级导航，name的长度避免超过7个汉字

5.2 自定义页脚

在配置文件68行～70行左右，可以根据您的需要自定义页脚信息：

footer:
  start: '2018-01-01' # 网站创建时间，格式: YYYY-MM-DD
  more: '<a href="https://www.google.com/analytics/" target="_blank">Google Analytics</a>提供统计服务'

注：start和more字段请加上单引号'，防止被yml转义。more字段支持html格式

5.3 自定义样式和脚本文件

在配置文件12行左右，您可以自定义样式文件：

custom_style: # 样式文件的路径

在配置文件18行左右，您可以自定义javascript脚本：

custom_script: # 数组
  -
    src: # 脚本文件的路径
    load: # script加载和执行方式：默认 | async | defer

注：custom_script支持多个自定义脚本，每个脚本会以<script>标签插入到</body>标签之前

6. ⚠️警告⚠️

6.1 尊重原创

  1. 您可以根据个人需要修改页面底部的说明信息，但请不要去除theme-bmw主题的版权声明
  2. 评论系统采用了Valine，请不要去除Valine的版权声明
  3. 尊重原创，也祝您在开源社区玩得开心(*^▽^*)

6.2 Web安全问题

如果您开启了评论系统和文章统计插件，请仔细阅读此节！

借助了Leancloud规避了后端部署，傻瓜式一键启动相关功能。但随之而来的是，暴露在浏览器环境下的appid和appkey带来的安全问题。

请进入leancloud中您的应用 => 左侧导航栏 => 设置 => 安全中心，进行相关配置：

首先，关闭不需要的“服务开关” (仅保留“数据存储”服务)：

最后，设置您的“Web”安全域名 (就是您的博客/个人网站地址):

Now，花了几天的时间，终于把我的主题从 Vuejs 迁移到了 Hexo。这是官方的配置文档，如果您喜欢这个主题，欢迎Star ✨

主题地址：

请注意: 非常推荐使用Hexo，配合主题提供的SEO优化服务和Github等平台的Pages服务，您可以免去DDoS、搭建服务器等方面的烦恼和费用！！！

Now，花了几天的时间，终于把我的主题从 Vuejs 迁移到了 Hexo。这是官方的配置文档，如果您喜欢这个主题，欢迎Star ✨

主题地址：

PS: 非常推荐使用Hexo，配合主题提供的SEO优化服务和Github等平台的Pages服务，您可以免去DDoS、搭建服务器等方面的烦恼和费用！！！

1. 快速开始

1.1 下载主题代码

$ hexo init your-blog
$ cd your-blog/
$ git clone [email protected]:dongyuanxin/theme-bmw.git themes/bmw

1.2 修改HEXO配置文件

修改hexo的配置文件：your-blog/_config.yml:

# ... 

# 位置：大概位于 6 ～ 12 行
title: 您自己的网站标题
subtitle: # 不需要填写
description: 您自己的网站描述
keywords: 您自己的网站关键词
author: 您的姓名
language: zh-Hans # 目前仅支持中文
timezone: # 不需要填写

# 位置：大概位于 18 行
permalink: passages/:title/ # 如果您需要开启评论和文章统计，请修改此配置

# 位置：大概位于 76 行
theme: bmw # 启用 "bmw" 主题

# ...

1.3 修改主题配置文件

theme-bmw 的配置文件：your-blog/themes/bmw/_config.yml

请注意，初始阶段您并不需要修改本主题的配置文件，请继续往下看。

1.4 启动博客

$ hexo s

hexo默认监听4000端口, 此时, 请使用Chrome等主流浏览器打开 http://localhost:4000/ ，查看博客。

2. 文章页面

BMW主题针对文章提供了目录渲染、数学公式渲染、音乐组件、版权保护、多平台分享和用户打赏功能。您可以根据个人需求进行设置，以提高用户体验。

2.0 文章格式

BMW主题针对文章的SEO做了相关优化，并且支持摘要内容渲染。如果您想让您的博客SEO更高，浏览体验更高，那么请注意文章格式。

下面是一个标准的文章格式：

---
title: 文章标题
date: 文章创建日期
categories: 文章分类
tags:
  - 文章标签1
  - 文章标签2
  - ...
---

在`<!-- more -->`之前编写文章的摘要内容！！！

<!-- more -->

在`<!-- more -->`之后编写文章的正式内容！！！

注：请为您的文章撰写摘要，否则首页看起来会很空洞

2.1 目录渲染 | 数学公式渲染

默认是开启目录渲染和数学公式渲染，并且做了移动端兼容。如果您想关闭目录渲染或数学公式渲染，在配置文件大概27～29行左右：

toc: true

mathjax: true

2.2 插入音乐

是滴，您可以为每篇文章自定义音乐。对于一篇文章，需要开头加上playlist字段：

playlist:
  -
    name: Where are you
    artist: AniFace
    url: "//music.163.com/song/media/outer/url?id=453843751.mp3"
    cover: "//p1.music.126.net/AUfXMljLBgB3PBV731IzRg==/109951162857118370.jpg?param=130y130"
  -
    name: END THEME
    artist: 天門
    url: "http://music.163.com/song/media/outer/url?id=528306.mp3"
    cover: "//p1.music.126.net/1sw_ptPeI_GNm58VBW1udQ==/2504687488135369.jpg?param=130y130"

注：此功能不需要修改配置文件

2.3 版权保护

在配置文件60～63行，您可以自定义您的文章版权信息：

copyright: 
  enable: true # 是否开启版权保护
  author: GODBMW # 您的名字
  license: '本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议。转载请注明出处！'

注：license字段支持html渲染

2.4 多平台分享

在配置文件36～39行，您可以自定义分享的平台（默认开启了qq空间、qq、微信、google、推特等平台）：

social_share: 
  enable: true # 是否开启平台分享
  sites: qzone, qq, weibo, wechat, douban, google, facebook, twitter
  disabled:

注：sites和disabled字段的值请参考share.js

2.5 用户打赏

在配置文件42行左右，您可以开启打赏功能，并且打赏文字、按钮文字和多个支付方式：

# 是否开启 打赏功能
reward: 
  enable: true
  meta: 知识 & 情怀 | 二者兼得 # 提示文字
  button_meta: 投食 # 按钮文字
  qrcodes: 
    # 支持多个支付方式
    # src: 二维码位置
    # meta: 二维码提示信息
    -
      src: /images/wechat.png 
      meta: "微信扫一扫, 向我投食"
    -
      src: /images/alipay.png
      meta: "支付宝扫一扫, 向我投食"

注：qrcodes属性是个数组，您可以为每个平台设置图片src和对应的提示信息meta

3. 更多页面

BMW 主题在HEXO默认界面的基础上，额外提供了标签归档、 分类归档、 关于介绍 和 友链界面。如果您想自定义更多页面，请看“进阶内容”。

3.1 标签页面

生成标签页面：

$ hexo new page tags

修改标签归档页面的markdown文件(文件路径：your-blog/source/tags/index.md)的内容：

---
title: tags
date: <!-- 自动生成，无需修改 -->
type: "tags"
categories:
tags:
---

查看标签归档页面：浏览器中打开 http://localhost:4000/tags/

注：type字段的值是tags

3.2 分类页面

生成分类页面：

$ hexo new page categories

修改分类归档页面的markdown文件(文件路径：your-blog/source/categories/index.md)的内容：

---
title: categories
date: <!-- 自动生成，无需修改 -->
type: "categories"
categories:
tags:
---

查看标签归档页面：浏览器中打开 http://localhost:4000/categories/

注：type字段的值是categories

3.3 关于页面

生成分类页面：

$ hexo new page about

修改关于页面的markdown文件(文件路径：your-blog/source/about/index.md)的内容：

---
title: about
date: <!-- 自动生成，无需修改 -->
type: "about"
categories:
tags:
---

这里编写您的网站/博客的相关介绍：联系方式、更新日志、甚至是您的个人简历。

BMW 主题会自动渲染此篇markdown，并且在 `http://localhost:4000/about/` 展示给您！

查看关于页面：浏览器中打开 http://localhost:4000/about/

注：type字段的值是about

3.4 友链界面

友链界面除了要编写相关markdown文件，还需要更改 BMW主题的配置文件，以更好地方式展示您的友链！

3.4.1 生成友链界面

$ hexo new page friends

修改友链页面的markdown文件(文件路径：your-blog/source/friends/index.md)的内容：

---
title: friends
date: <!-- 自动生成，无需修改 -->
type: "friends"
categories: 
tags:
---

这里编写您的友链声明，您可以陈述您的友链申请规则。

BMW 主题会自动渲染此篇markdown，并且在 `http://localhost:4000/friends/` 展示给您！

注：type字段的值是friends

3.4.2 展示更多友链

请打开 BMW主题 的配置文件：your-blog/themes/bmw/_config.yml。您会发现在大概118行左右，有相关友情链接的配置：

# ...

# 友链详细信息
friends: # 这是一个数组, 每个元素是一个obj对象
  -
    nickname: 友链名称
    avatar: 友链头像
    site: 友链地址
    meta: 友链信息
  -
    nickname: 友链名称2
    avatar: 友链头像2
    site: 友链地址2
    meta: 友链信息2
  # ...

查看友链页面：浏览器中打开 http://localhost:4000/friends/

4. 评论系统 && 文章统计

theme-bmw的评论系统采用的是Valine，并且提供了基于Leancloud的文章统计插件。您只需要按照以下步骤进行简单的配置，便可以提供更好的用户体验！

如果您不想开启评论系统和文章统计插件，请跳过这一部分

4.1 配置Leancloud

进入leancloud.cn

注册账户，并且登录您的账户，然后在右上角进入“控制台”。并且创建一个新应用。

配置默认即可（如下图所示），名字根据自己喜好取：

进入刚刚创建的应用，在左上方屏幕，点击创建新Class。接下来，我们就要为评论系统和文章统计插件分别创建2个应用。

  1. 为评论系统开通Class: 名称必须是Comment, ACL权限选择“限制写入”，如下图
  2. 为文章统计插件开通Class: 名称必须是Timer, ACL权限选择“无限制”，如下图

4.2 配置密钥

进入左边导航栏 -> 设置 -> 应用Key：

注意：请保存好您的密钥，关于安全问题，请阅读最后一部分！！！

Now，切回BMW主题的配置文件your-blog/themes/bmw/_config.yml。在大概74行，有一项关于leancloud的配置，按照上图中的appId和appKey，复制并且粘贴到配置项即可。

4.3 开启评论系统

请先确保您按照前面步骤配置了leancloud，并且正确修改了配置文件中的相关配置。

进入配置文件，在大概77行左右，请将leancloud.comment修改为true.

重启hexo服务即可生效。

4.4 开启文章统计

请先确保您按照前面步骤配置了leancloud，并且正确修改了配置文件中的相关配置。

进入配置文件，在大概78行左右，请将leancloud.timer修改为true.

重启hexo服务即可生效。

5. 进阶设定

5.1 自定义导航栏

配置文件的默认导航配置，大概在81～115行左右的nav属性中。

# 推荐：填写您的网站名称
nav_name: GODBMW.com 

nav:
  # -
  #   name: 名称
  #   path: 网址
  #   blank: 是否在新页面打开，默认是false
  #   children: 子导航(数组)，默认为空
  #     ... 
  - 
    name: 关于
    path: /about/
  - 
    name: 抓到我
    children:
      -
        name: Github
        path: "https://github.com/dongyuanxin"
        blank: true
      -
        name: "知乎"
        path: "https://www.zhihu.com/people/godbmw/activities"
        blank: true

注：导航栏最多支持2级导航，name的长度避免超过7个汉字

5.2 自定义页脚

在配置文件68行～70行左右，可以根据您的需要自定义页脚信息：

footer:
  start: '2018-01-01' # 网站创建时间，格式: YYYY-MM-DD
  more: '<a href="https://www.google.com/analytics/" target="_blank">Google Analytics</a>提供统计服务'

注：start和more字段请加上单引号'，防止被yml转义。more字段支持html格式

5.3 自定义样式和脚本文件

在配置文件12行左右，您可以自定义样式文件：

custom_style: # 样式文件的路径

在配置文件18行左右，您可以自定义javascript脚本：

custom_script: # 数组
  -
    src: # 脚本文件的路径
    load: # script加载和执行方式：默认 | async | defer

注：custom_script支持多个自定义脚本，每个脚本会以<script>标签插入到</body>标签之前

6. ⚠️警告⚠️

6.1 尊重原创

  1. 您可以根据个人需要修改页面底部的说明信息，但请不要去除theme-bmw主题的版权声明
  2. 评论系统采用了Valine，请不要去除Valine的版权声明
  3. 尊重原创，也祝您在开源社区玩得开心(*^▽^*)

6.2 Web安全问题

如果您开启了评论系统和文章统计插件，请仔细阅读此节！

借助了Leancloud规避了后端部署，傻瓜式一键启动相关功能。但随之而来的是，暴露在浏览器环境下的appid和appkey带来的安全问题。

请进入leancloud中您的应用 => 左侧导航栏 => 设置 => 安全中心，进行相关配置：

首先，关闭不需要的“服务开关” (仅保留“数据存储”服务)：

最后，设置您的“Web”安全域名 (就是您的博客/个人网站地址):