新浦京81707con > 功能介绍 > Hexo七牛插件安装与使用,NexT配置超炫网页效果

原标题:Hexo七牛插件安装与使用,NexT配置超炫网页效果

浏览次数:171 时间:2020-04-27

前言

本篇博客首要解说七牛云插件安装与运用,博客中获取七牛云存储的图样重要有三种办法,一种是在七牛调节新北上传图片然后取图片外链地址,其余一种是用七牛云插件 标签语法将图片上传到七牛云并呈现到大家所写的博客中,这里关键介绍第三种方式。相关网站

  • hexo-qiniu-sync
  • 七牛云

一.计划事业

1、安装 Node.js: https://nodejs.org/en/

2、安装 Git: https://github.com/waylau/git-for-win

Git教程 https://github.com/waylau/git-for-win廖雪峰先生的科目,相当好。

3、安装完结后,在起始菜单里找到“Git”->“Git Bash”,名称和信箱是Github上的。

图片 1

git_1.png

4、安装 Hexo。全数须要的应用程序安装到位后,就可以使用 npm 安装 Hexo。

$ npm install -g hexo-cli

4.1 安装hexo出错:

unable to verify the first certificate(无法验证第一证书)

图片 2

hexo_1.png

查究到施工方案:

图片 3

hexo_2.png

参照网站:npm报错

据他们说设计方案所述,在命令行输入如下命令,来撤消ssl验证:

npm config set strict-ssl false

今后安装就能中标了,显示如下:

图片 4

hexo_3.png

前言

Hexo安装过后,暗许的大旨是landscape,即使不爱好,大家也足以张开转移。本文首要解说NexT宗旨的选用。先看下我博客网址的作用呢:blogwenbo.com

挂号七牛个人账号

  • 第一须求到七牛云官方网址注册个人账号。
  • 跻身调节台创造存款和储蓄空间,如下图所示:

    图片 5创设存款和储蓄空间.png

  • 将融合CDN默许域名加多到万网中,配置格式如下图所示:图片 6增加到万网.png

二、配置Github

率先注册、登入 https://github.com/

难忘自身的Username(很要紧)

接下来右上角选拔 Create a new repository https://github.com/new

Repository name(填自身的名字) yourname.github.io(yourname与您的登记客户名相仿,那么些正是您博客的域名了卡塔尔(قطر‎

图片 7

github_1.png

客栈创制完结后,初阶生成增添秘钥。

在终端(cmd)输入:

ssh-keygen -t rsa -C "Github的注册邮箱地址"

一路Enter复苏就好,待秘钥生成终结,会取得七个文件id_rsaid_rsa.pub,用带格式的记事本展开id_rsa.pubCtrl a复制里面包车型地铁全体剧情,然后步入https://github.com/settings/ssh:

图片 8

github_2.png

将复制的内容粘贴到Key的输入框,随意写好Title里面包车型地铁剧情,点击Add SSH key按钮就可以。

若未有布置GitHub,就实行第三步(初始化博客),会产出如下错误:

图片 9

hexo_4.png

Hexo主题相关网站

  • Hexo官网
  • Theme
  • NexT

安装七牛云插件

  • 安装七牛云插件

    npm install hexo-qiniu-sync --save
    

三、初叶化博客

在微型机F盘(本身随意)目录下新建文件夹 test,步向test,按住Shift键点击鼠标右键,点击“在那间打开命令窗口”:

图片 10

blog_1.png

输入

hexo init blog

有一点点等待下,速度有一些慢。成功唤醒:

INFO  Start blogging with Hexo!

因为你伊始化hexo 之后source目录下自带一篇hello world文章, 所以直接履行下方命令:

$ hexo generate
# 启动本地服务器
$ hexo server
# 在浏览器输入 http://localhost:4000/就可以看见网页和模板了
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl C to stop.

访问http://localhost:4000/,便得以见见网址初叶的姿容,不要激动,大家还要把网页揭橥到Github上去。

图片 11

blog_local_server.png

目录

  • NexT安装
  • 切换核心
  • 设置Menu
  • 初步化对应的Menu文件夹
  • 安装动态背景
  • 在右上角依旧左上角实现fork me on github
  • 增添增加凯雷德SS
  • 修正小说内链接文本样式
  • 改革尾部标签样式
  • 在作品末了加多“随笔截止”标志
  • 安装头像并安装动漫效果
  • 修正代码块``自定义样式
  • 侧边栏社交小Logo设置
  • 主页小说增加阴影效果
  • 网址尾巴部分加上访谈量
  • 加上热度
  • 网址尾巴部分字数总括
  • 安装网址的LogoFavicon
  • 落到实处小说总计功效
  • 丰硕网页最上端进度加载条
  • 加多来必力云跟帖作用
  • 底层隐蔽由Hexo强力驱动、大旨--NexT.Mist
  • 去掉底部双重字数总计
  • 添加jiathis分享
  • 博文置顶
  • 校订字体大小
  • 增多DaoVoice在线联系
  • 加上尾部桃心
  • 增长侧栏推荐阅读
  • 在小说尾巴部分扩展版权音讯
  • Hexo博客增添站内搜索
  • 加上国药中国科学技术大学学链今日头条云音乐
  • 切换到Blog文件夹下(就是hexo init的文本夹),查看文件
cd [Blog]ls_config.yml node_modules scaffolds themesdb.json package.json source
  • 经过git安装,前提是你的Computer安装了git.
git clone https://github.com/iissnan/hexo-theme-next themes/next
  • 查阅标签列表
git tag -l输出:...v5.1.3v5.1.4
  • 切换到v5.1.4
git checkout tags/v5.1.4输出:HEAD is now at 4f75fe5... 2018 NY update.
  • 通过curl安装NexT
mkdir themes/nextcurl -s https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1
  • 履新核心NexT
cd themes/nextgit pull
  • 切换到NexT大旨,在hexo根文件夹下,编辑_config.yml文件
theme: next//切换后,用命令清除下缓存hexo clean//执行hexo s本地产看NexT主题效果hexo s
  • 在列表中甄选一款本人喜好的核心风格。
# Schemesscheme: Muse //默认主题#scheme: Mist#scheme: Pisces#scheme: Gemini
  • 暗许唯有五个首页和归档,如下图所示:

    图片 12荧屏快照2018-01-20 早晨6.42.20.png

  • 要是还要加上,编辑themes/next/_config.yml

menu: home: / || home //首页 about: /about/ || user //关于 tags: /tags/ || tags //标签 categories: /categories/ || th //分类 archives: /archives/ || archive //归档 schedule: /schedule/ || calendar //日程表 sitemap: /sitemap.xml || sitemap //站点地图
  • 将须要的Menu前边#号去掉。如下图所示:图片 13显示器快照2018-01-20 中午6.47.17.png
  • 从没开创Menu对应的文本夹,Blog/source文件目录如下:图片 14显示器快照2018-01-20 早晨6.55.51.png
  • 在博客网址点击标签菜单可能会提醒:

    图片 15显示屏快速照相2018-01-20 上午6.50.42.png

  • 譬喻说要创建标签文件夹,终端中输入(前提在Hexo文件路线下):

 hexo new page "tags"输出:INFO Created: ~/Desktop/MyBlog/Blog/source/tags/index.md
  • 成家立业之后目录如下:

    图片 16显示器快速照相2018-01-20 下午6.58.01.png

  • 编辑Blog/source/tagsindex.md文件,添加type: "tags",其余Menu也同理创立。

title: tagsdate: 2018-01-20 18:57:48type: "tags"
  • 主旨安顿文件中找到canvas_nest,设置成ture就OK啦。
# Canvas-nestcanvas_nest: ture
  • 功效图如下图所示:

    图片 17显示屏快速照相2018-01-20 早上7.49.45.png

  • 在GitHub Ribbons或GitHub Corners接受一款你心爱的挂饰,拷贝方框内的代码:

    图片 18显示屏快速照相2018-01-20 清晨7.41.10.png

  • 将刚刚复制的挂饰代码,增多到Blog/themes/next/layout/_layout.swig文件中,增加职位如下图所示(放在<div ></div>下方):

    图片 19显示屏快照2018-01-20 深夜7.39.36.png

  • 切换到Blog文件夹(hexo init的文书夹)下
cd [Blog]
  • 安装Hexo插件
 npm install --save hexo-generator-feed
  • 设置成功未来,编辑Blog/_config.yml文件,在文件末尾加多
# Extensions## Plugins: http://hexo.io/plugins/plugins: hexo-generate-feed
  • 配备核心_config.yml文件,command f搜索rss,在背后加上/atom.xml
# Set rss to false to disable feed link.# Leave rss as empty to use site's feed link.# Set rss to specific value if you have burned your feed already.rss: /atom.xml //注意:有一个空格
  • 未来,终端输入hexo s翻看效果
hexo s

图片 20荧屏快速照相2018-01-20 早晨8.02.19.png

  • 修改Blog/themes/next/source/css/_common/components/post/post.styl,在末尾增加CSS样式:
// 文章内链接文本样式.post-body p a{ color: #0593d3; //原始链接颜色 border-bottom: none; border-bottom: 1px solid #0593d3; //底部分割线颜色 &:hover { color: #fc6423; //鼠标经过颜色 border-bottom: none; border-bottom: 1px solid #fc6423; //底部分割线颜色 }}
  • 安装后,效果如下:

    图片 21荧屏快速照相2018-01-20 上午10.12.30.png

  • 修改Blogthemesnextlayout_macropost.swig中文件,command f搜索rel="tag">#,将#替换成<i ></i>。输入以下命令,查看效果:
hexo cleanhexo s

图片 22显示屏快速照相2018-01-20 晚上10.21.15.png

  • 在路径Blogthemesnextlayout_macro文件夹中新建passage-end-tag.swig文件。
//切换到路径_macrocd [_macro路径]//创建passage-end-tag.swig文件touch passage-end-tag.swig
  • 在passage-end-tag.swig增多以下内容,直接用文件编辑器展开,粘贴以下内容后保存
<div> {% if not is_index %} <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i ></i>感谢您的阅读-------------</div> {% endif %}</div>
  • 打开Blogthemesnextlayout_macropost.swig,在post-body之后,post-footer之前(post-footer在此以前多少个DIV),增加以下代码:
<div> {% if not is_index %} {% include 'passage-end-tag.swig' %} {% endif %}</div>
  • 加上职责,如下图所示:

    图片 23荧屏快速照相2018-01-20 早晨10.40.49.png

  • 改革大旨安插文件_config.yml,在最终增加:

# 文章末尾添加“本文结束”标记passage_end_tag: enabled: true
  • 配备完结未来,效果如下:

    图片 24显示器快照2018-01-20 中午10.43.14.png

  • Blog/_config.yml中增多头像链接地址:
//添加头像地址avatar: [ http://....]
  • 设置头像圆角并旋转,张开Blog/themes/next/source/css/_common/components/sidebar/sidebar-author.styl,加多以下代码:
.site-author-image { display: block; margin: 0 auto; padding: $site-author-image-padding; max-width: $site-author-image-width; height: $site-author-image-height; border: $site-author-image-border-width solid $site-author-image-border-color; /* 头像圆形 */ border-radius: 80px; -webkit-border-radius: 80px; -moz-border-radius: 80px; box-shadow: inset 0 -1px 0 #333sf; /* 设置循环动画 [animation: 动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线为以低速结束 等待1秒然后开始动画 动画播放次数(infinite为循环播放) ]*/ /* 鼠标经过头像旋转360度 */ -webkit-transition: -webkit-transform 1.0s ease-out; -moz-transition: -moz-transform 1.0s ease-out; transition: transform 1.0s ease-out;}img:hover { /* 鼠标经过停止头像旋转 -webkit-animation-play-state:paused; animation-play-state:paused;*/ /* 鼠标经过头像旋转360度 */ -webkit-transform: rotateZ; -moz-transform: rotateZ; transform: rotateZ;}/* Z 轴旋转动画 */@-webkit-keyframes play { 0% { -webkit-transform: rotateZ; } 100% { -webkit-transform: rotateZ; }}@-moz-keyframes play { 0% { -moz-transform: rotateZ; } 100% { -moz-transform: rotateZ; }}@keyframes play { 0% { transform: rotateZ; } 100% { transform: rotateZ; }}
  • 作用如下:

    图片 25Untitled.gif

  • 打开Blogthemesnextsourcecss_customcustom.styl,增多以下代码:
// Custom styles.code { color: #ff7600; background: #fbf7f8; margin: 2px;}// 大代码块的自定义样式.highlight, pre { margin: 5px 0; padding: 5px; border-radius: 3px;}.highlight, code, pre { border: 1px solid #d6d6d6;}
  • 张开大旨安插文件_config.ymlcommand f搜索Social,将您某个社交账号前面包车型客车#号去掉。格式为:
[社交平台名]: [社交地址] || [图标名称]

#social: GitHub: https://github.com/yourname || github 简书: https://www.jianshu.com/u/63445e24e8bf || heartbeat 掘金: https://juejin.im/user/5a371ae551882512d0607108 || spinner #E-Mail: mailto:yourname@gmail.com || envelope #Google: https://plus.google.com/yourname || google #Twitter: https://twitter.com/yourname || twitter #FB Page: https://www.facebook.com/yourname || facebook #VK Group: https://vk.com/yourname || vk #StackOverflow: https://stackoverflow.com/yourname || stack-overflow #YouTube: https://youtube.com/yourname || youtube #Instagram: https://instagram.com/yourname || instagram #Skype: skype:yourname?call|chat || skype
  • 效用图如下:

    图片 26显示屏快照2018-01-20 早上11.40.09.png

  • Logo可以去Font Awesome Icon网址去找,找到后复制名字到对应的职责就能够。

  • 打开Blogthemesnextsourcecss_customcustom.styl,增多以下代码:
// 主页文章添加阴影效果 .post { margin-top: 60px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5); }
  • 作用如下:

    图片 27显示器快照2018-01-20 中午11.44.32.png

  • 打开Blog/themes/next/layout/_partials/footer.swig文件,在copyright增加如下代码:
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

图片 28荧屏快照2018-01-20 晚上11.48.10.png

  • 在合适的职分增添彰显总括代码
<div ><i ></i> 本站访客数:</div>

图片 29荧屏快速照相2018-01-20 晚上11.54.05.png

  • 设置总计方法
//pv的方式,单个用户连续点击n篇文章,记录n次访问量 本站总访问量次//uv的方式,单个用户连续点击n篇文章,只记录1次访客数 本站总访问量次
  • 职能图如下:

    图片 30显示器快速照相2018-01-20 早晨11.57.45.png

  • 跻身LeanCloud官方网站,进行账号注册。登陆后,进入调整台,创制应用,应用名字为Hexo如下图所示:

    图片 31荧屏快速照相2018-01-21 凌晨12.47.11.png

  • 开创应用后,点击存款和储蓄,成立ClassClass命名为Counter,操作如下图所示:

    图片 32荧屏快速照相2018-01-21 中午12.48.03.png图片 33显示器快速照相2018-01-21 中午12.48.48.png

  • 查看AppIDAppKey,如下图所示:

    图片 34显示器快速照相2018-01-21 中午12.52.37.png

  • 打开Blog/themes/next/layout/_macro/post.swigcommand F搜索leancloud-visitors-count,在图纸地方参与,如下图所示:

    图片 35荧屏快速照相2018-01-21 中午12.44.04.png

  • 编写制定宗旨布置文件,command f搜索leancloud_visitors,将其值设为:ture,将AppIDAppKey粘贴到相应地方:

# Show number of visitors to each article.# You can visit https://leancloud.cn get AppID and AppKey.leancloud_visitors: enable: ture app_id: app_id app_key: app_key
  • 成效图如下图所示:

    图片 36显示屏快照2018-01-21 上午12.58.08.png

  • 安装hexo插件,切换成根目录:
npm install hexo-wordcount --save
  • Blog/themes/next/layout/_partials/footer.swig聊起底增添代码:
<div > <div ></div> 博客全站共{{ totalcount }}字</div>
  • 功效图如下图所示:

    图片 37显示屏快照2018-01-21 早上11.33.01.png

  • 在Logo网址找一张你心仪的Logo(大:32x32 小:16x16),图标网址:easyicon或然Alibaba矢量Logo库。将下载下来的小图和中图位居Blog/themes/next/source/images,将默许的两张图纸替换掉。命名和暗中同意的相同也能够和谐定义:图片 38显示屏快照2018-01-21 中午11.44.04.png
  • 改良宗旨安顿文件,倘若你自定义了图片名字,要求做校勘:
# For example, you put your favicons into `hexo-site/source/images` directory.# Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo.favicon: small: /images/favicon-16x16-next.png //16X16小图 medium: /images/favicon-32x32-next.png //32X32大图 apple_touch_icon: /images/apple-touch-icon-next.png //apple-touch-icon safari_pinned_tab: /images/logo.svg #android_manifest: /images/manifest.json #ms_browserconfig: /images/browserconfig.xml
  • 校订后,效果如下:

    图片 39荧屏快照2018-01-21 早上12.01.32.png

  • 安装Hexo插件,参考网址尾部字数总结
  • 编辑宗旨安插文件,配置如下:
# Post wordcount display settings# Dependencies: https://github.com/willin/hexo-wordcountpost_wordcount: item_text: true wordcount: true min2read: true totalcount: true separated_meta: true
  • 效果图:

    图片 40荧屏快照2018-01-21 深夜12.07.11.png

  • 编纂宗旨安插文件,command F搜索pace,将其值改为ture就可以了,选取一款你赏识的样式。
# Progress bar in the top during page loading.pace: ture# Themes list:#pace-theme-big-counter#pace-theme-bounce#pace-theme-barber-shop#pace-theme-center-atom#pace-theme-center-circle#pace-theme-center-radar#pace-theme-center-simple#pace-theme-corner-indicator#pace-theme-fill-left#pace-theme-flash#pace-theme-loading-bar#pace-theme-mac-osx#pace-theme-minimal# For example# pace_theme: pace-theme-center-simplepace_theme: pace-theme-minimal
  • 第一去来必力注册账号,然后步入后台处理连串,如下图所示:图片 41荧屏快速照相2018-01-21 早上12.17.33.png拷贝data-uid,如下图所示:图片 42显示器快速照相2018-01-21 清晨12.21.02.png
  • 编写制定核心布署文件,command F搜索livere_uid,将刚刚拷贝的data-uid粘贴到相应地点:
# Support for LiveRe comments system.# You can get your uid from https://livere.com/insight/myCode (General web site)livere_uid: livere_uid
  • 今后安插查看效果:

    图片 43显示器快照2018-01-21 中午12.51.32.png

  • 打开Blog/themes/next/layout/_partials/footer.swig,注释掉相应代码。
//用下面的符号注释,注释代码用下面括号括起来<!-- --><!--|{% if theme.footer.powered %} <div >{# #}{{ __('footer.powered', '<a target="_blank" href="https://hexo.io">Hexo</a>') }}{##}</div>{% endif %}{% if theme.footer.powered and theme.footer.theme.enable %} |{% endif %}{% if theme.footer.theme.enable %} <div >{# #}{{ __('footer.theme') }} &mdash; {# #}<a target="_blank" href="https://github.com/iissnan/hexo-theme-next">{# #}NexT.{{ theme.scheme }}{# #}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{##}</div>{% endif %}{% if theme.footer.custom_text %} <div >{# #}{{ theme.footer.custom_text }}{##}</div>{% endif %}-->
  • 批注掉后效果如下:

    图片 44显示屏快照2018-01-21 中午1.13.00.png

  • 未去掉前,如下图所示:

    图片 45显示屏快照2018-01-21 下午1.15.30.png

  • 疏解掉如下代码:

<!-- {% if theme.post_wordcount.totalcount %} |  <i ></i>  {% if theme.post_wordcount.item_text %} {{ __('post.totalcount') }}&#58; {% endif %} {# #}{{ totalcount(site, '0,0.0a') }}{# #} {% endif %}-->
  • 编写核心安排文件,将jiathis改为ture即可:
# Share# This plugin is more useful in China, make sure you known how to use it.# And you can find the use guide at official webiste: http://www.jiathis.com/.# Warning: JiaThis does not support https.jiathis: ture ##uid: Get this uid from http://www.jiathis.com/#add_this_id:
  • 功用如下图所示:

    图片 46显示屏快速照相2018-01-21 早上1.25.15.png

  • 修改hexo-generator-index插件,把node_modules/hexo-generator-index/lib/generator.js中代码替换为:
'use strict';var pagination = require('hexo-pagination');module.exports = function{ var config = this.config; var posts = locals.posts; posts.data = posts.data.sort(function { if(a.top && b.top) { // 两篇文章top都有定义 if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排 else return b.top - a.top; // 否则按照top值降序排 } else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233) return -1; } else if(!a.top && b.top) { return 1; } else return b.date - a.date; // 都没定义按照文章日期降序排 }); var paginationDir = config.pagination_dir || 'page'; return pagination('', posts, { perPage: config.index_generator.per_page, layout: ['index', 'archive'], format: paginationDir   '/%d/', data: { __index: true } });};
  • 小说增添Top值,值越大,越靠前:
---title: Hexo-NexT主题配置date: 2018-01-20 20:41:08categories: Hexotags:- Hexo- NexTtop: 100---
  • 编辑Blog/themes/next/source/css/_variables/base.stylcommand F搜索$font-size-base,校正为你想要的深浅:
// Font size$font-size-base = 16px
  • 率先到DaoVoice注册账号,登陆成过后,步入到后台管理,点击应用设置——>安装到网址查阅安装代码和AppID。
  • 将设置代码增多到Blog/themes/next/layout/_partials/head.swig中:
{% if theme.daovoice %} <script> (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement,m=s.getElementsByTagName[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:')   "//widget.daovoice.io/widget/0f81ff2f.js","daovoice") daovoice('init', { app_id: "{{theme.daovoice_app_id}}" }); daovoice; </script>{% endif %}

图片 47显示器快照2018-01-21 早晨1.50.23.png

  • 编排主旨铺排文件,加多如下代码:
# Online contact daovoice: truedaovoice_app_id: daovoice_app_id
  • 成效图如下所示:

    图片 48显示屏快照2018-01-21 清晨1.55.07.png

  • 打开Blog/themes/next/layout/_partials/footer.swig搜索with-love,在fontawesom找到您心爱的Logo,在如下地方沟通就能够:图片 49显示器快照2018-01-21 深夜2.13.15.png
  • 功用如下图所示:

    图片 50显示屏快照2018-01-21 凌晨2.14.33.png

  • 编辑宗旨布置文件,如下配置就能够:
# Blog rollslinks_icon: linklinks_title: 推荐阅读#links_layout: blocklinks_layout: inlinelinks: Swift 4: https://developer.apple.com/swift/ Objective-C: https://developer.apple.com/documentation/objectivec
  • 效益如下图所示:

    图片 51荧屏快速照相2018-01-21 清晨2.25.59.png

  • 在目录Blog/themes/next/layout/_macro/,添Gavin件 my-copyright.swig,内容如下:
{% if page.copyright %}<div > <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script> <!-- JS库 sweetalert 可修改路径 --> <script src="http://www.regboy.com/uploads/allimg/200427/200KC4P-52.jpg"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <p>本文标题:<a href="{{ url_for(page.path) }}">{{ page.title }}</a></p> <p>文章作者:<a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p> <p>发布时间:{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p> <p>最后更新:{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p> <p>原始链接:<a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a> <i data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i> </p> <p>许可协议:<i ></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p> </div><script> var clipboard = new Clipboard('.fa-clipboard'); $(".fa-clipboard").click(function(){ clipboard.on('success', function(){ swal({ title: "", text: '复制成功', icon: "success", showConfirmButton: true }); }); }); </script>{% endif %}
  • 在目录Blog/themes/next/source/css/_common/components/post/下增多文件my-post-copyright.styl,增加以下代码:
.my_post_copyright { width: 85%; max-width: 45em; margin: 2.8em auto 0; padding: 0.5em 1.0em; border: 1px solid #d3d3d3; font-size: 0.93rem; line-height: 1.6em; word-break: break-all; background: rgba(255,255,255,0.4);}.my_post_copyright p{margin:0;}.my_post_copyright span { display: inline-block; width: 5.2em; color: #b5b5b5; font-weight: bold;}.my_post_copyright .raw { margin-left: 1em; width: 5em;}.my_post_copyright a { color: #808080; border-bottom:0;}.my_post_copyright a:hover { color: #a3d2a3; text-decoration: underline;}.my_post_copyright:hover .fa-clipboard { color: #000;}.my_post_copyright .post-url:hover { font-weight: normal;}.my_post_copyright .copy-path { margin-left: 1em; width: 1em;  mobile(){display:none;}}.my_post_copyright .copy-path:hover { color: #808080; cursor: pointer;}
  • Blog/themes/next/source/css/_common/components/post/加上文件my-post-copyright.styl,文件内容如下:
.my_post_copyright { width: 85%; max-width: 45em; margin: 2.8em auto 0; padding: 0.5em 1.0em; border: 1px solid #d3d3d3; font-size: 0.93rem; line-height: 1.6em; word-break: break-all; background: rgba(255,255,255,0.4);}.my_post_copyright p{margin:0;}.my_post_copyright span { display: inline-block; width: 5.2em; color: #b5b5b5; font-weight: bold;}.my_post_copyright .raw { margin-left: 1em; width: 5em;}.my_post_copyright a { color: #808080; border-bottom:0;}.my_post_copyright a:hover { color: #a3d2a3; text-decoration: underline;}.my_post_copyright:hover .fa-clipboard { color: #000;}.my_post_copyright .post-url:hover { font-weight: normal;}.my_post_copyright .copy-path { margin-left: 1em; width: 1em;  mobile(){display:none;}}.my_post_copyright .copy-path:hover { color: #808080; cursor: pointer;}
  • 修改Blog/themes/next/layout/_macro/post.swig,在如图位置增添以下代码:
<div> {% if not is_index %} {% include 'my-copyright.swig' %} {% endif %}</div>

图片 52荧屏快速照相2018-01-21 早上2.54.04.png

  • Blog/themes/next/source/css/_common/components/post/post.styl文本最终进入上边包车型地铁代码:
@import "my-post-copyright"
  • 在Markdown作品中参与copyright : ture
---title: Hexo-NexT主题配置date: 2018-01-20 20:41:08categories: Hexotags:- Hexo- NexTtop: 100copyright: ture---
  • 安排根目录下的_config.yml文件,配置为:
# URL## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'url: https://wenmobo.github.io/ //你的网站地址root: /permalink: :year/:month/:day/:title/permalink_defaults:
  • 效用图如下所示:

    图片 53显示器快照2018-01-21 清晨3.01.04.png

  • NexT宗旨帮助集成 Swiftype、 微寻找、Local Search 和 Algolia。下边介绍Local Search的装置吧。
  • 安装 hexo-generator-search
npm install hexo-generator-search --save
  • 安装 hexo-generator-searchdb
npm install hexo-generator-searchdb --save
  • 编纂站点布局文件,增多以下内容图片 54显示器快速照相2018-01-21 晚上5.39.59.png

search: path: search.xml field: post format: html limit: 10000
  • 编写主旨安排文件,设置Local searchenable为ture
# Local search# Dependencies: https://github.com/flashlab/hexo-generator-searchlocal_search: enable: ture # 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: 1
  • 效能如下图所示:

    图片 55显示屏快照2018-01-21 深夜5.39.59.png

  • 开荒腾讯网云音乐,注册并登入你的账号号,点击右上角步入笔者的主页:图片 56荧屏快照2018-01-21 早晨6.11.50.png
  • 选料一首你欢愉的歌曲大概创设四个中意的歌单,步入详细情况:

    图片 57显示屏快速照相2018-01-21 晚上6.12.46.png

  • 点击生成外链播放器

    图片 58显示器快照2018-01-21 上午6.12.56.png

  • 步入详细情况,设置向往的样式,拷贝代码:

    图片 59荧屏快速照相2018-01-21 早晨6.13.22.png

  • 将代码粘贴到叁个适中之处,小编的黏连在Blog/themes/next/layout/_macro/sidebar.swig文件下:

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=310 height=110 src="//music.163.com/outchain/player?type=0&id=371085186&auto=1&height=90"></iframe>
  • 效果如下:

    图片 60显示屏快速照相2018-01-21 清晨6.29.29.png

配置相关音讯

  • 布置站点文件_config.yml,配置入内容(注意:增多到安排文件时,把//去掉)
#plugins:# - hexo-qiniu-syncqiniu: 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: onlineINFO qiniu sync: trueINFO qiniu local dir: staticINFO qiniu url: http://blogwenbo.com/staticINFO -----------------------------------------------------------INFO Start processingINFO Now start qiniu sync.INFO Need upload file num: 0
    

    就会在static目录下转移imagescssjs四个文本夹。那个时候大家把测量检验图片七牛云.png放在images文件夹下,然后依照如下标签语法书写:

    {% qnimg 七牛云.png title:七牛云 alt:七牛云 'class:' extend:?imageView2/2/w/450 %}
    

图片 61七牛云.png

  • 协同静态能源到七牛云空间,主要有二种艺术,一种是应用hexo命令,还会有一种是应用七牛插件命令,能够参见GitHub文书档案:hexo-qiniu-sync
//1、启用本地服务器.即使用 hexo server 命令(简写为 hexo s)//当以本地服务器模式启动后,会自动监测 local_dir 目录下的文件变化, 会自动将新文件进行上传。如果文件进行了修改,但设置中没有启用 update_exist 配置,则不会更新到七牛空间。hexo shexo server//2、使用命令行命令(sync | s | sync2 | s2)//命令行命令会扫描 local_dir 目录下的文件,同步至七牛空间。hexo qiniu synchexo qiniu shexo qiniu sync2hexo qiniu s2
  • 图片管理可参照官方文书档案图片主题管理

四、配置博客

blog目录下,用sublime/notepad 等公事编辑器展开_config.yml文本,改正参数消息

特意提示,在每一种参数的:后都要加八个空格

主题素材解决

  • 展开根目录,找到如下文件夹:

    图片 62荧屏快照2018-01-21 上午10.46.50.png

  • 编辑index.md文件,添加comments将其值设为false:

---title: tagsdate: 2018-01-20 18:57:48type: "tags"comments: false---
  • 接下来施行,就平素不斟酌框了:
hexo cleanhexo ghexo d

本文由新浦京81707con发布于功能介绍,转载请注明出处:Hexo七牛插件安装与使用,NexT配置超炫网页效果

关键词: 网页 插件 效果 Hexo 博客之旅

上一篇:使用OpenSSH连接越狱设备,越狱概述及基本操作

下一篇:没有了