美文网首页
hexo-theme-bmw

hexo-theme-bmw

作者: 随遇而安_27e7 | 来源:发表于2018-12-19 15:24 被阅读0次

    Theme-BMW 中文文档

    主题地址:

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

    1. 快速开始

    1.1 下载主题代码

    $ hexo init your-blog
    $ cd your-blog/
    $ git clone git@github.com:dongyuanxin/theme-bmw.git themes/bmw
    

    注:如果克隆出错,就下载ZIP文件,解压到theme文件夹里面

    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:
    

    注:sitesdisabled字段的值请参考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

    1.png

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

    2.png

    配置默认即可(如下图所示),名字根据自己喜好取:

    3.png

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

    4.png
    1. 为评论系统开通Class: 名称必须是Comment, ACL权限选择“限制写入”,如下图

      5.png
    2. 为文章统计插件开通Class: 名称必须是Timer, ACL权限选择“无限制”,如下图

      6.png

    4.2 配置密钥

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

    7.png

    注意:请保存好您的密钥,关于安全问题,请阅读最后一部分!!!

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

    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>提供统计服务'
    

    注:startmore字段请加上单引号',防止被yml转义。more字段支持html格式

    5.3 自定义样式和脚本文件")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规避了后端部署,傻瓜式一键启动相关功能。但随之而来的是,暴露在浏览器环境下的appidappkey带来的安全问题。

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

    8.png

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

    9.png

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

    10.png

    文章转自: https://godbmw.com/passages/2018-11-15-theme-bmw-docs-zh/

    相关文章

      网友评论

          本文标题:hexo-theme-bmw

          本文链接:https://www.haomeiwen.com/subject/sdudkqtx.html