hello hexo

本篇文章介绍了如何使用hexo博客以及配置相关的内容（包括统计插件，评论插件等）：

安装并发布hexo

安装hexo：npm install -g hexo-cli
检查是否安装成功：hexo -v
初始化网址：hexo init
接着输入 npm install 来安装这个网址所需要的依赖插件：npm install
生成静态网页：hexo g
开启本地服务器：hexo s
自动部署插件：npm install hexo-deployer-git –save
自动更新文件：hexo clean && hexo g && hexo d
Hexo常用命令

hexo new "一个新的文章"    #这是创建新的文章的命令
hexo g    #生成静态网页
hexo s    #启动本地服务
hexo d    #部署到github或别地方

More info: Writing
More info: Server
More info: Generating
More info: Deployment

配置统计信息

然后接下来就是配置一下如何进行在线观看人数的配置
我们会使用到LeanCloud进行移动应用的配置
1.注册创建一个leanCloud的应用
2.配置LeanCloud
进入新创建好的应用，点击存储，这时需要创建名为Counter的class用来存储访问博客的数据，例如：访问次数，最新访问时间等信息。class类名必须为Counter，主要为了与next主题相兼容，否则无法接收到相关数据。为了避免后续因为权限的问题导致次数统计显示不正常，ACL权限选择无限制（所有人可读可写）
3.​ 在所有应用中获取当前新建应用的app_id和app_key
4.修改博客根目录->themes->next->_config.yml文件，app_id和app_key是上图获取到的，找到如下代码替换app_id和app_key并将enable改为true，代码如下：

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: #AppID
  app_key: #AppKey //注意这里一定要是字符串类型的

配置完成后重新部署hexo即可

hexo generate
hexo deploy

5.此处配置完成之后还要配置一下卜算子的这个主题插件的配置
对于leancloud_count，你必须设置appid、appkey；对于busuanzi_count，你只需要开启它即可。

# post_count
leancloud_count:
+   enable: true
+   appid: 'dXz'
+    appkey: 'wzG'
    like_post:
        enable: true
+   visit_post:
        enable: true
    topN_post: 
        enable: true #param1 for topN_post
        limit: 10 #param2 for topN_post
busuanzi_count:
    enable: true

参考资料

配置评论插件Gitalk

下面我们开始配置评论插件Gitalk
1.首先我们需要设置一个github仓库用来存放评论
2.然后用申请一个Oauth application链接申请之后拿到Client ID以及Client secrets
3.然后对hexo中themes中对_config.yml进行简单的配置

gitalk:
    enable: true
    clientID: '' 
    clientSecret: '' 
    repo: [之前创建的仓库名]
    owner: 创建的仓库的owner
    admin: 创建的仓库的admin
    distractionFreeMode: true
    #去除 more、index.html、?query=123等格式尾部 
    hrefTrimend: '#.*$,\\?.*$,index.html$' 

注意的是这个可能建立之后不能立即评论，需要初始化一下评论，简单的来说就是管理员和仓库owner都登陆一遍差不多就可以了
issues

live2d插件（动态2d效果）

1.安装Live2D插件：npm install –save hexo-helper-live2d
然后安装喜欢的动画：npm install xxxxxx
下面是安装的列表

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

2.修改配置文件

#Live2D动画
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-shizuku
  display:
    position: right 
    width: 150
    height: 300
  mobile:
    show: true

主要参数说明

enable //是否使用
model:
use: live2d-widget-model-shizuku //要使用的模型名称
display:
position: right //显示的位置
width: 150 //宽度
height: 150 //高度
mobile:
show: true //移动端是否显示

其他使用的命令

创建分类页：hexo new page categories

title: categories
date: 2019-03-30 19:25:34
+ layout: categories
+ type: categories

创建标签页：hexo new page tags

title: tags
date: 2019-03-30 19:25:34
+ layout: tags
+ type: tags

创建关于页：hexo new page about

title: about
date: 2019-03-30 19:25:34
+ layout: about
+ type: about

创建相册页：hexo new page gallery

title: gallery
date: 2019-03-30 19:25:34
+ layout: gallery
+ type: gallery

打开文件data.json（Annie/source/plugin/gallerypage/data.json）, 按照json语法在数组[……]中添加gallery的图片数据，请设置合适的eWidth、eHeight的值。

[
{}, 
{
        "thumbnail": "https://img.jpg",    	 		//小图路径
        "enlarged": "https://img.jpg",			 	//大图路径（可与小图一致）
        "title": "百里守约",						//图片标题
        "categories": [{
                "id": 9,							//根据id来进行分类
                "title": "百里玄策",
                "photo_count": 41787,				 //可忽略
                "links": {							//可忽略
                    "self": "https://img.jpg",
                    "photos": "https://img.jpg"
                }
            }
        ],
        "tWidth": 800.6130030959752,				//小图相对宽度
        "tHeight": 500,							   //小图相对高度
        "eWidth": 3630,							   //大图相对宽度
        "eHeight": 2907							   //大图相对高度
    },
    {}
 ]

当然，你可以将该文件data.json移至其他目录，相应地修改路径gallery_data

# gallery page
# gallery_format: natural | square
gallery_format: natural
# one time to load 4 rows or other count, 0 to load img automatically when scrolling.(0,1,2,3,4,5,6......)
gallery_limit: 0
# data url
+ gallery_data: plugin/gallerypage/data.json

创建站内搜索：npm install hexo-generator-search-zip –save
编辑站点目录下的_config.yml，添加如下语句

search:
  path: search.json
  zipPath: search.zip
  versionPath: searchVersion.txt
  field: post
  #field: post, page or all（3个可选参数）

编辑主题目录下的_config.yml，添加如下语句

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
    enable: true
    # if auto, trigger search by changing input
    # if manual, trigger search by pressing enter key or search button
    trigger: auto
    # show top n results per article, show all results by setting to -1
    top_n_per_article: 2

下面描述一下博客md文档生成时会出现的错误

1.首先是图片问题，可能出现图片上传然后渲染不出来的情况
下面是解决方法
第一步（简单配置）：
（1）把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true
（2）在你的hexo目录下执行这样一句话npm install hexo-asset-image –save，这是下载安装一个可以上传本地图片的插件
（3）等待一小段时间后，再运行hexo n “xxxx”来生成md博文时，/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹
第二步（如何使用）：
（4）最后在xxxx.md中想引入图片时，先把图片复制到xxxx这个文件夹中，然后只需要在xxxx.md中按照markdown的格式引入图片：!【你想输入的替代文字】(xxxx/图片名.jpg)
注意： xxxx是这个md文件的名字，也是同名文件夹的名字。只需要有文件夹名字即可，不需要有什么绝对路径。你想引入的图片就只需要放入xxxx这个文件夹内就好了，很像引用相对路径
（5）最后检查一下，hexo g生成页面后，进入public\2017\02\26\index.html文件中查看相关字段，可以发现，html标签内的语句是

<img src="2017/02/26/xxxx/图片名.jpg">

而不是

<img src="xxxx/图片名.jpg">

这很重要，关乎你的网页是否可以真正加载你想插入的图片。

经过一段时间的努力，上面的操作没有奏效qwq
于是开始想用另外一种方法，将图片存放在云上以http网址访问，这种还没开始弄，以后弄好后会更新
另外一种比较朴素的方法是将所要使用的图片保存到source目录下，新建一个images文件夹，然后在这里面存放，经过编译以后，这个文件会直接放在根目录上面，以后调用的时候直接用 /images/xxx.jpg 的路径就可以了

【完结撒花】