美文网首页Hexo程序员iOS Development
Hexo七牛插件安装与使用

Hexo七牛插件安装与使用

作者: WenBo丨星空灬 | 来源:发表于2018-01-24 22:47 被阅读285次

前言

本篇博客主要讲解七牛云插件安装与使用,博客中获取七牛云存储的图片主要有两种方式,一种是在七牛控制台中上传图片然后取图片外链地址,另外一种是用七牛云插件+标签语法将图片上传到七牛云并显示到我们所写的博客中,这里主要介绍第二种方式。
相关网址

注册七牛个人账号

  • 首先需要到七牛云官网注册个人账号。
  • 进入控制台创建存储空间,如下图所示:


    创建存储空间.png
  • 将融合 CDN默认域名添加到万网中,配置格式如下图所示:
    添加到万网.png

安装七牛云插件

  • 安装七牛云插件
    npm install hexo-qiniu-sync --save
    

配置相关信息

  • 配置站点文件_config.yml,配置入内容(注意:添加到配置文件时,把//去掉)
#plugins:
# - hexo-qiniu-sync

qiniu:
  offline: false
  sync: true
  bucket: blogwenbo
  //这里将其注释掉,不注释,执行hexo g报错
  # secret_file: sec/qn.json or C:
  access_key: your access_key
  secret_key: your secret_key
  // 上传的资源子目录前缀.如设置,需与urlPrefix同步
  dirPrefix: static
  //外链前缀
  urlPrefix: http://p2zukkwm9.bkt.clouddn.com/static
  //使用默认配置即可
  up_host: http://upload.qiniu.com
  //本地目录
  local_dir: static
  // 是否更新已经上传过的文件(仅文件大小不同或在上次上传后进行更新的才会重新上传)
  update_exist: true
  image: 
    folder: images
    extend: 
  js:
    folder: js
  css:
    folder: css
  • 生成七牛配置路径,执行下面命令任意一个
    hexo s
    或
    hexo g
    //终端输出
    INFO  -----------------------------------------------------------
    INFO  qiniu state: online
    INFO  qiniu sync:  true
    INFO  qiniu local dir:  static
    INFO  qiniu url:   http://blogwenbo.com/static
    INFO  -----------------------------------------------------------
    INFO  Start processing
    INFO  Now start qiniu sync.
    INFO  Need upload file num: 0
    
    就会在static目录下生成imagescssjs三个文件夹。这时我们把测试图片七牛云.png放在images文件夹下,然后按照如下标签语法书写:
    {% qnimg 七牛云.png title:七牛云 alt:七牛云 'class:' extend:?imageView2/2/w/450 %}
    
七牛云.png
  • 同步静态资源到七牛云空间,主要有两种方式,一种是使用hexo命令,还有一种是使用七牛插件命令,可以参考GitHub文档:hexo-qiniu-sync
//1、启用本地服务器.即使用 hexo server 命令(简写为 hexo s)
//当以本地服务器模式启动后,会自动监测 local_dir 目录下的文件变化, 会自动将新文件进行上传。
如果文件进行了修改,但设置中没有启用 update_exist 配置,则不会更新到七牛空间。
hexo s
hexo server

//2、使用命令行命令(sync | s | sync2 | s2)
//命令行命令会扫描 local_dir 目录下的文件,同步至七牛空间。
hexo qiniu sync
hexo qiniu s
hexo qiniu sync2
hexo qiniu s2

问题解决

结语

自己也参考了一些文章,但讲解的都不是很详细完整,有些博客只讲解了重要的一些步骤,不管怎样,最后自己还是捣腾出来了,还是挺折腾人的,我也是第一次用七牛云存储图片,有些地方可能讲解的不是很完整,也请谅解。希望本篇博客能给你一些帮助,也欢迎大家一起交流学习。成功案例:Hexo七牛插件安装与使用

参考文章

Hexo 七牛同步插件的使用

相关文章

  • Hexo七牛插件安装与使用

    前言 本篇博客主要讲解七牛云插件安装与使用,博客中获取七牛云存储的图片主要有两种方式,一种是在七牛控制台中上传图片...

  • hexo

    hexo 使用images插件 _config.yml设置 blog根目录安装插件

  • Hexo站点的优化方法2

    使用hexo插件 安装在博客根目录下执行npm install hexo-service-worker hexo-...

  • 基于github.io的hexo博客搭建.md

    首先列出搭建的流程: 安装node.js,目的是为了使用npm安装工具 安装hexo和各个插件,hexo本身是为了...

  • hexo启动报YAMLException错误

    故障现象 使用hexo搭建博客,安装完插件后报以下错误。 YAMLException: Specified lis...

  • hexo博客搭建过程(二)

    开启字数统计hexo-wordcount hexo-wordcount 安装hexo-wordcount插件 修改...

  • 文章加密TEST2

    hexo-blog-encrypt 安装插件$ npm install --save hexo-blog-encr...

  • Hexo插入音频

    hexo插入音频 利用hexo插件hexo-tag-aplayer可以方便地插入音频。 安装插件 准备好音频url...

  • 启程-迁移

    RSS 首先,要安装hexo-migrator-rss插件。 $ npm install hexo-migrato...

  • 给hexo静态博客添加RSS

    安装feed插件 hexo博客有一个专门生成RSS xml文件的插件hexo-generator-feed我们来安...

网友评论

    本文标题:Hexo七牛插件安装与使用

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