精华内容
下载资源
问答
  • hexo教程-Next主题安装

    2019-02-14 16:57:59
    安装 NexT 主题2. 一些基本的使用方法2.1 首页显示摘要2.2 删除文章2.3 附件文件夹管理2.4 如何添加草稿 本文是我搭建博客中学习到的一些知识。 Hexo的官网说明文档讲解的非常齐全,我只按照我学习的顺序来介绍。 1...


    本文是我搭建博客中学习到的一些知识。
    Hexo的官网说明文档讲解的非常齐全,我只按照我学习的顺序来介绍。

    1. 安装 NexT 主题

    创建 Hexo 主题非常容易,您只要在 themes 文件夹内,新增一个任意名称的文件夹,并修改 _config.yml 内的 theme 设定,即可切换主题。

    Hexo的主题非常多,知乎上的问题:“有哪些好看的 Hexo 主题”的回答给出了非常多的漂亮的主题。

    我个人非常喜欢 NexT 主题。同实验室的两位大神也都使用的这个主题,现把两位大神的博客地址放在这里:Bulus 钢东哥

    按照GitHub上的NexT项目的 README 文档的步骤,就可以安装好了。
    NexT官方网址为:http://theme-next.iissnan.com/

    2. 一些基本的使用方法

    2.1 首页显示摘要

    在 NexT 的设置文件里做如下更改:
    在这里插入图片描述

    在文章中添加一行 <!-- more --> 进行截断, <!-- more --> 以上的都是摘要,都是可以显示在主页中的。如果没有截断,就按默认150.

    2.2 删除文章

    删除文章的过程一样也很简单,先删除本地文件,然后通过生成和部署命令进而将远程仓库中的文件也一并删除。
    首先进入到 source/_post 文件夹中,找到需要删除的.md文件,在本地直接执行删除,同时需要删除文章附带的图片文件。然后依次执行hexo g,hexo d,再去主页查看你就会发现你的博客上面已经空空如也了,这就是如何删除文章的方法。

    2.3 附件文件夹管理

    参考博客:https://www.jianshu.com/p/c2ba9533088a

    1. 首先确认_config.yml 中有 post_asset_folder:true。
      Hexo 提供了一种更方便管理 Asset 的设定:post_asset_folder
      当您设置post_asset_folder为true参数后,在建立文件时,Hexo
      会自动建立一个与文章同名的文件夹,您可以把与该文章相关的所有资源都放到那个文件夹,如此一来,您便可以更方便的使用资源。
    2. 在hexo的目录下执行

    npm install https://github.com/CodeFalling/hexo-asset-image --save

    (需要等待一段时间)。

    1. 完成安装后用hexo新建文章的时候会发现_posts目录下面会多出一个和文章名字一样的文件夹。图片就可以放在文件夹下面。

    注意:
    通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo2时代,社区创建了很多插件来解决这个问题。但是,随着Hexo3的发布,许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。

    {% asset_path slug %}
    {% asset_img slug [title] %}
    {% asset_link slug [title] %}
    

    2.4 如何添加草稿

    草稿相当于私密文章,文章不会显示在页面上。

    1. 输入命令
      hexo new draft "new draft"
      会新生成一个_drraft文件夹,里面有个 new-draft.md文件。
      如果你希望强行预览草稿,更改配置文件:
      render_drafts: true
      或者,如下方式启动server:
      hexo server --drafts

      npm uninstall hexo-renderer-marked --save
      npm install hexo-renderer-kramed --save
      

    2.5 行内公式渲染的问题

    此时行内公式的渲染还是有问题,因为hexo-renderer-kramed引擎也有语义冲突的问题。

    1. 到博客根目录下,找到node_modules\kramed\lib\rules\inline.js,把第11行的escape变量的值做相应的修改。这一步是在原基础上取消了对\,{,}的转义(escape)。同时把第20行的em变量也要做相应的修改。

      //  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
      escape: /^\\([`*\[\]()#$+\-.!_>])/
      
      
      //  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
      em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/
      
    2. 在主题中开启mathjax开关。进入到主题目录,找到_config.yml配置问题,把mathjax默认的false修改为true,具体如下:

       # MathJax Support
       mathjax:
         enable: true
         per_page: true
      
    3. 在文章的Front-matter里打开mathjax开关。之所以要在文章头里设置开关,是因为考虑只有在用到公式的页面才加载 Mathjax,这样不需要渲染数学公式的页面的访问速度就不会受到影响了。如下:

       ---
       title: index.html
       date: 2016-12-28 21:01:30
       tags:
       mathjax: true
       --
      
    4. 重新启动hexo(先clean再generate),问题完美解决。

    展开全文
  • 安装 官网 github 终端进入到博客目录,使用以下命令克隆 next 主题到 themes/next 目录下 git clone ...主题的配置文件就是刚刚安装next 目录下的 _config.yml 文件 参阅Hexo配置NexT

    安装

    官网
    github
    终端进入到博客目录,使用以下命令克隆 next 主题到 themes/next 目录下
    git clone https://github.com/next-theme/hexo-theme-next.git themes/next
    在这里插入图片描述
    安装成功
    在这里插入图片描述
    更改博客目录下的 _config.yml 里的 theme 为 next 即可启用
    使用 hexo s 查看

    主题配置

    官方配置文档
    主题的配置文件就是刚刚安装的 next 目录下的 _config.yml 文件
    参阅Hexo配置NexT主题教程

    ❀❀❀❀❀❀完结散花❀❀❀❀❀❀

    展开全文
  • 欢迎加入博客搭建交流群(QQ群号60429576)&amp;gt;...amp;lt; 写在最前面: ...1.在修改时请注意博客配置文件与主题配置...主题配置文件是指/themes/主题名/路径下的_config.yml文件,例如我使用的主题为next主题...

    原文链接https://www.lixint.me/hexo-theme-diy.html

    欢迎加入博客搭建交流群(QQ群号60429576)>点击加入<

    写在最前面:
    1.在修改时请注意博客配置文件主题配置文件的区别:博客配置文件是指博客根目录下的_config.yml文件,
    主题配置文件是指/themes/主题名/路径下的_config.yml文件,例如我使用的主题为next主题,主题配置文件/themes/next/_config.yml
    2.文内所有命令行命令全部是在博客根目录打开命令行下输入的。根目录下目录结构为:

    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes
    

    默认情况下,命令行输入命令ls显示如下:
    1543541234579

    目录

    设置作者头像 设置作者昵称与站点描述 设置代码高亮主题 侧边栏社交链接
    开启打赏功能 修改打赏字体不闪动 开启友情链接or侧边栏推荐阅读 设置RSS
    设置网站图标 实现全站及文章字数统计及阅读时长 添加顶部加载条 自定义鼠标样式
    实现点击出现桃心 修改网页底部的小图标 去掉页面底部的强力驱动信息及设置备案信息 添加动态背景
    增加波浪背景动画 在右上角实现fork me on github按钮 增加回到顶部按钮及显示当前浏览进度 修改顶部菜单与下方信息栏的间隙大小
    网站标题栏背景颜色 为博客加上萌萌的 添加DaoVoice实现在线联系 主页文章添加阴影效果
    增加本地搜索功能 修改语言 修改菜单及创建分类页 修改主题风格

    主题选择

    可以到Nexo官方主题页选择自己喜欢的主题,每个主题的使用方法略有不同,所以如果你是跟我一样的小白,建议使用流行热门的主题,这样出现问题网上基本都可以搜到解决方法。
    推荐Next主题,我的博客使用的就是Next的主题

    Next主题修改

    主题安装

    Next主题文档页面
    目前Next主题的项目分成了两个项目,一个是5.1.4版本以下的,一个是一直更新的,现在已经更新到了6.5,建议直接用最新的,最新版本的主题已经把很多常用的功能集成了,用起来很方便。本篇文章是基于Next 6.5进行的修改与展示。
    Next主题项目页面(v5.1.4)
    v6.5版本页面
    方法1:项目页面点击releases,找到最新版本的主题zip包并下载,解压放到博客根目录/themes重命名文件夹为next,两版本通用。
    blog20181128193847
    方法2:博客根目录打开命令行,用5.1版本输入命令

    git clone https://github.com/iissnan/hexo-theme-next themes/next
    

    6.5版本输入命令:

    git clone https://github.com/theme-next/hexo-theme-next themes/next
    

    blog20181128194258安装完成后,打开博客配置文件修改最上方的theme项为next
    1543498259558
    主题配置文件根目录/themes/next目录下的_config.yml文件。
    修改完成后命令行输入hexo s本地运行一下看是否生效。

    主题修改

    修改语言

    修改博客配置文件下的language项为zh-CN
    blog20181128200611
    这里要注意一下,看一下主题文件夹内的languange文件夹中中文的配置文件叫什么名字,Next主题有些版本的叫zh-Hans那这里就填zh-Hans,Next最新版本中用的是zh-CN,故这里填写zh-CN

    修改菜单及创建分类页

    修改主题配置文件下的menu项,按需要打开菜单。例如我需要把标签页面打开,就把tags项前面的#去掉就行了。
    1543498503630
    Hexo s运行一下可以看到菜单多了一个标签项。但是此时还不行,只是有了入口。点击标签菜单,会显示:
    1543498782215
    因为只有了入口,但还没有标签页面,需要在命令行输入如下命令:hexo new page tags新建出标签页。
    1543498826765
    同样的道理,开启分类页的时候要输入hexo new page categories来新建出分类页。

    修改主题风格

    Next自带四种主题风格,可以在主题配置文件搜索Scheme项,将需要的风格前的#去掉,注意只能开启一个风格。
    blog20181128201721

    设置作者头像

    编辑主题配置文件,搜索修改字段 avatar, 值设置成头像的链接地址。可以设置成在线的图片地址。也可以把图片放在本地。
    方法1:
    在线图片设置:现在有一张网络图片, 使用百度上随便搜的。
    avatar

    方法2:
    本地设置:放置在source/images目录下,设置为url: /images/avatar.jpg

    这个rounded项可以设置头像为圆形,设置为ture后会自动根据头像的尺寸将头像变化为圆形或者椭圆,头像图片为正方形的话则为圆形。长方形的话长宽相差越大,椭圆越明显。
    设置opacity的值控制头像的透明度,值为0 - 1。
    rotated项为头像旋转,设置为true,则鼠标指到头像时头像会旋转。

    设置作者昵称与站点描述

    这个比较简单。设置博客配置文件中的author为昵称,description为描述。
    同理,subtitle为副标题,keywords为关键词,timezone为时区,可以按需求填写。

    设置代码高亮主题

    NexT 使用 Tomorrow Theme作为代码高亮,共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题,可选的值有 normalnightnight bluenight brightnight eighties
    更改 主题配置文件中的highlight_theme 字段,将其值设定成你所喜爱的高亮主题即可。

    侧边栏社交链接

    侧栏社交链接的修改包含两个部分, 配置在 主题配置文件 中。social字段为连接,格式为显示文本: 链接地址 || Font Awesome图标名称
    例如:

    图标名称 是 Font Awesome 图标的名字(不必带 fa- 前缀)。enable 选项用于控制是否显示图标,你可以设置成 false 来去掉图标。例如: 百度: https://baidu.com || firefox
    Font Awesome图标可以到Font Awesome查看

    开启打赏功能

    主题自带支付宝跟微信及比特币打赏功能,只需要主题配置文件 中填入 微信支付宝 收款二维码图片地址即可开启该功能。
    搜索reward字段,将wechatpayalipay字段前面的#去掉即可。在source文件夹中放置支付宝跟微信收款码并修改文件名字即可。reward_comment自带为打赏按钮上方的文字,不需要的话可以在前面加#注释掉。


    修改打赏字体不闪动

    鼠标一指就疯狂抖动。

    修改文件next/source/css/_common/components/post/post-reward.styl,然后注释其中的函数#QR > div:hover p函数即可。css文件注释用/* 和 */ 包裹代码即可。
    在这里插入图片描述
    这个post-reward.styl文件是跟按钮及图片相关的,如果需要修改关于打赏的其他属性,例如按钮大小,样式,图片大小等,都可以修改post-reward.styl文件实现。我也不太懂。在这就不展开讲了。有兴趣的可以网上搜css的语法自己尝试改。

    开启友情链接 or 侧边栏推荐阅读

    主题配置文件 中搜索links_title字段,修改links_iconlinks_titlelinks_layoutlinks四个字段的内容实现自定义风格。
    link_icon是title前面的图标,用法跟之前的社交链接的图标用法是一样的, 用Font Awesome图标。
    links_title为标题,如果是作为友情链接使用,可以设置为
    links_title: 友情链接
    links字段设置友情链接名字及链接

    links:
      友联1: http://example.com/
      友联2: http://example.com/
    

    例如:

    links:
      谷歌: https://google.com/
      百度: http://baidu.com/
    

    links_layout为各个友情链接的布局,默认是block,也可以用#注释掉这一行用下一行的inline布局。

    这个模块的自由度比较高,可以用来放置友情链接,也可以放置推荐阅读。

    设置 RSS

    NexT 中 RSS 有三个设置选项,满足特定的使用场景。 更改主题配置文件,设定 rss 字段的值:

    false:禁用 RSS,不在页面上显示 RSS 连接。

    留空:默认就是留空的,使用 Hexo 生成的 Feed 链接。 你可以需要先安装 hexo-generator-feed 插件。

    安装方法:根目录下命令行输入npm install hexo-generator-feed --save
    在这里插入图片描述

    具体的链接地址:适用于已经烧制过Feed的情形。
    建议直接使用插件,比较省事。

    设置网站图标

    EasyIcon中分别找一张(16 * 16与32 * 32)的ico图标,或者去别的网站下载或者制作,并将图标名称改为favicon16.icofavicon32.ico,然后把图标放在/themes/next/source/images或者放在根目录的/source/images文件夹里。
    主题配置文件内搜索favicon字段,把 smallmedium字段的地址修改为/images/favicon16.ico/images/favicon32.ico

    实现全站及文章字数统计及阅读时长

    根目录命令运行

    npm install hexo-symbols-count-time --save
    

    博客配置文件底部添加如下内容,保存。

    symbols_count_time:
      symbols: true
      time: true
      total_symbols: true
      total_time: true
    


    重新hexo s看一下,文章页面已经有字数跟阅读时长的统计了。网站底部也显示了网站总字数跟总阅读时长。

    添加顶部加载条


    最新版本的Next主题是内置了加载条功能的。
    根目录打开命令行,输入如下命令:

    git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace
    

    blog20181129162054
    然后主题配置文件搜索pace字段,修改pace: falsepace: true即可开启加载条功能,修改下方的pace-theme字段还可以修改加载条的样式。

    自定义鼠标样式

    打开themes/next/source/css/_custom/custom.styl,在里面写下如下代码

    // 鼠标样式
      * {
          cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
      }
      :active {
          cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
      }
    

    EasyIcon中找一张16 * 16的ico图,放在/source/images/中,修改上述代码中的链接为/images/xxx.ico,如果不放在本地的话,可以把图片放在图床,直接替换链接即可。
    第一行的链接是默认状态下的鼠标样式,第二行的是鼠标按下时的样式。

    在这里插入图片描述

    实现点击出现桃心 以及 爆炸效果



    1.在/themes/next/source/js/src下新建文件love.js并填入如下代码:

    !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
    

    建一个叫fireworks.js的文件并写入如下代码:

    "use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
    

    然后打开themes/next/layout/_layout.swig,在</body>上面写下如下代码:

      {% if theme.fireworks && not theme.love %}
       <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
       <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
       <script type="text/javascript" src="/js/src/fireworks.js"></script>
      {% endif %}
    
      {% if theme.love && not theme.fireworks %}
        <script type="text/javascript" src="/js/src/love.js"></script>
      {% endif %}
    


    最后在主题配置文件最下方加入如下代码:

    # Fireworks and love
    fireworks: true
    love: false
    

    fireworks是爆炸效果,love是心形效果。两个不能同时开。

    修改网页底部的小图标


    主题配置文件搜索footer字段,修改下方的icon字段下的name字段。name字段后的名字是 Font Awesome 图标的名字(不必带 fa- 前缀)。

    animated自动为闪动开关,设置为true后图标会闪动。
    以及可以设置图标颜色,color处填入16进制颜色代码即可。注意保留原来的双引号。

    去掉页面底部的强力驱动信息及设置备案信息

    主题配置文件搜索copyright字段,修改powered下的enable字段的truefalse即可去掉强力驱动部分的内容。
    在这里插入图片描述
    在这里插入图片描述
    同样的theme下的enable设置为false的话可以去掉页面底部的主题信息。
    blog20181129172232
    enable设置为trueversion设置为false的话,则不显示版本号。
    在这里插入图片描述
    如果博客有备案的话,下方beian字段设置为trueicp后填写备案号。

    添加动态背景


    根目录打开命令行,输入:

    git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest
    

    主题配置文件搜索canvas-nest字段,enable项设置为true

    其他配置项说明:

    • color :线条颜色, 默认: '0,0,0';三个数字分别为(R,G,B)
    • opacity: 线条透明度(0~1), 默认: 0.5
    • count: 线条的总数量, 默认: 150
    • zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1
    • onmobile:是否在手机端显示。

    增加波浪背景动画


    根目录打开命令行,输入

    git clone https://github.com/theme-next/theme-next-three themes/next/source/lib/three
    

    主题配置文件搜索three_waves字段,设置为true
    在这里插入图片描述
    three_wavescanvas_linescanvas_sphere三个的效果各不相同,可以自己尝试一下选一个喜欢的。

    在右上角实现fork me on github按钮


    最新的Next主题已经内置了增加右上角的Fork me on github按钮功能,只需要在主题配置文件搜索github_banner字段,去掉前面的#,把||前面的github链接替换成自己的即可。

    ||后的参数为按钮的title,为鼠标指在按钮上时显示的文本。

    增加回到顶部按钮及显示当前浏览进度

    主题配置文件搜索b2t字段,将b2t字段的false修改为true即可,(注意此功能只能用于Pisces和Gemini主题)。

    将下方的scrollpercent字段设置为true即可实现当前浏览进度的显示。
    在这里插入图片描述

    修改顶部菜单与下方信息栏的间隙大小


    主题配置文件搜索offset字段,将offset的像素数大小设置为需要的值,默认为12。
    在这里插入图片描述

    网站标题栏背景颜色

    打开 themes/next/source/css/_custom/custom.styl ,在里面写下如下代码:

    // 网站标题栏背景颜色
    .site-meta {
      background: #FF0033; //修改为自己喜欢的颜色
    }
    

    颜色的值可以自行网上搜索16进制颜色进行修改。

    为博客加上萌萌的


    首先安装插件,根目录命令行输入npm install --save hexo-helper-live2d
    主题配置文件最下方添加如下代码:

    # Live2D
    ## https://github.com/xiazeyu/live2d-widget.js
    ## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
    live2d:
      model:
        scale: 1
        hHeadPos: 0.5
        vHeadPos: 0.618
      display:
        superSample: 2
        width: 150
        height: 300
        position: right
        hOffset: 0
        vOffset: -20
      mobile:
        show: true
        scale: 0.5
      react:
        opacityDefault: 0.7
        opacityOnHover: 0.2
    

    更多设置可以查看官方文档

    添加DaoVoice 实现在线联系


    本功能可以实现在线留言,作者会收到邮件,如果绑定了微信,作者还会收到微信通知。
    首先到DaoVoice注册一个Daovioce账号。
    注册完成后会进到DaoCloud,重新访问连接即可。进到Daovoice面板,点击左侧边栏的应用设置-- 安装到网站。在下方的代码中会看到app_id: "xxxx"字样。


    打开 themes/next/layout/_partials/head/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(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(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('update');
      </script>
    {% endif %}
    

    主题配置文件 _config.yml,添加如下代码:

    # DaoVoice 
    daovoice: true
    daovoice_app_id: 这里输入前面获取的app_id
    

    回到Daovoice控制面板,点击聊天设置可以对聊天图标的颜色及位置进行设置。


    最后到右上角选择管理员,微信绑定,可以绑定你的微信号。这样收到消息后可以通过小程序进行回复。

    主页文章添加阴影效果

    打开\themes\next\source\css\_custom\custom.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);
      }
    

    可以自行修改代码来修改阴影效果。

    增加本地搜索功能

    首先安装插件,根目录命令行输入

    npm install hexo-generator-searchdb --save
    


    编辑博客配置文件,新增以下内容到任意位置:

    search:
      path: search.xml
      field: post
      format: html
      limit: 10000
    

    1543541568512
    主题配置文件搜索local_search字段,设置enabletrue

    # Local search
    local_search:
      enable: true
    


    配置完成后保存,hexo ghexo s查看。

    未完待续

    展开全文
  • next主题优化

    2019-03-30 09:55:25
    NEXT主题安装 下载next主题 $ cd your-hexo-site` $ git clone https://github.com/iissnan/hexo-theme-next themes/next 修改站点配置文件 找到hexo中的_config.yml文件 # Extensions ## Plugins: ...

    NEXT主题安装

    下载next主题

    $ cd your-hexo-site`
    $ git clone https://github.com/iissnan/hexo-theme-next themes/next
    

    修改站点配置文件

    找到hexo中的_config.yml文件

    # Extensions
    ## Plugins: http://hexo.io/plugins/
    ## Themes: http://hexo.io/themes/
    theme: landscape
    

    至此,NexT主题就安装好了,非常方便,在Hexo中切换主题只需修改站点配置文件中theme属性来配置,想换就换。

    选择Scheme

    next通过scheme提供主题中的主题。

    # Schemes
    scheme: Mist  #去掉默认的注释即可切换为Mist主题
    

    我的博客使用的为mist主题

    菜单设置

    next主题的菜单设置,用于设置博客上方导航栏可以在主题配置中进行修改。

    menu:
      home: /                       #主页
      categories: /categories	#分类页(需手动创建)
      #about: /about		#关于页面(需手动创建)
      archives: /archives		#归档页
      tags: /tags			#标签页(需手动创建)
      #commonweal: /404.html        #公益 404 (需手动创建)
    

    但要注意只在menu选项中设置不能让标签页生效,这些页面需要我们手动创建。

    标签页面

    运行hexo new page "tags"可在/source目录下生成一个tags文件,里面包含有index.md文件这时把上方的tags注释掉,在平时建的博客中加入tags就会形成分类,在标签页可以看到。

    分类页面

    与标签页面同理,但要创建的是categories。

    侧边头像设置

    在主题配置文件中找到_config.yml,搜索avatar字段,增加avatar: /images/avatar.png可以使用本地字段但要注意图片名称。

    设置头像边框为圆形

    打开位于themes/next/source/css/_common/components/sidebar/sidebar-author.syl文件修改为

    .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: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
    }
    

    特效:鼠标放置头像上旋转

    .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: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      // 设置旋转
      transition: 1.4s all;
    }
    // 可旋转的圆形头像,`hover`动作
    .site-author-image:hover {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -transform: rotate(360deg);
    }
    

    侧边栏设置

    设置侧边栏社交连接

    打开_config.yml文件搜索social,添加社交站点名称与地址即可。

    # ---------------------------------------------------------------
    # Sidebar Settings
    # ---------------------------------------------------------------
    
    # Social Links.
    # Usage: `Key: permalink || icon`
    # Key is the link label showing to end users.
    # Value before `||` delimeter is the target permalink.
    # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
    social:
      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
      # 等等
    

    设置侧边栏社交图标

    在_config.yml中搜索social_icons,添加社交站点名称(注意大小写)图标,可以全网图标下载找图标地,非常方便。

    友情链接

    打开_config.yml搜索Blog rolls

    # Blog rolls
    links_title: 友情链接 #标题
    links_layout: block #布局,一行一个连接
    #links_layout: inline
    links: #连接
      baidu: http://example.com/
      google: http://example.com/
    

    代码块自定义样式

    // 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;
    }
    

    在右上或左上实现fork me on github

    选择样式github-ribbons注意修改<a href="https://github.com/you">将这里换为你自己的GitHub主页。打开themes/next/layout/_layout.swig文件,把代码复制到<div class="headband"></div>下面。

    文章顶部显示更新时间

    打开_config.yml,搜索update_at设置为true:

    # Post meta display settings
    post_meta:
      item_text: true
      created_at: true
      updated_at: ture
      categories: true
    

    有空续更。

    展开全文
  • hexo安装next主题的步骤

    千次阅读 2017-08-25 10:20:02
    1、下载主题,在你的blog目录下执行命令,然后你的themes会多出next主题(默认的主题是landscape)git clone https://github.com/iissnan/hexo-theme-next themes/next2、与所有 Hexo 主题启用的模式一样。...
  • 文章目录NexT主题安装安装部署配置文件NexT主题、插件个性化配置字数统计代码高亮Valine评论系统+阅读数博客搜索服务 NexT主题安装 安装 进入blog目录,使用npm install hexo-theme-next@latest来安装最新的NexT...
  • hexo next主题配置

    2017-10-21 11:01:40
    原文链接hexo next主题配置前言由于各种原因,网站会有各种变化以及配置的增加,以日志记下改动2017年10月21日更新修改链接样式修改文件source\css_common\components\post\post.styl 增加内容.post-body p a{ ...
  • Next主题美化

    2019-09-16 11:58:38
    写作目的 网上关于Hexo的主题美化的博客已经很多也很全面了,但是在作者去一一尝试的时候,却发现有很多博客中提供的方法...Hexo支持很多主题风格,Hexo博客支持很多主题风格,其中Next主题是Github上Star最多的...
  • NexT主题进阶

    2019-09-30 13:08:23
    文章目录安装主题主题核心配置主题优化RSS支持Creative Commons阅读进度和书签网站图标(favicon)SEO支持字数统计和阅读时长文章热度相关热门帖子背景动画第三方服务数学公式评论系统聊天服务自定义样式支持文本结束...
  • hexo的next主题设置

    2018-09-03 13:00:20
    hexo的next主题设置 这篇文章主要说明的是怎么把hexo的主题设成next,不涉及详细的优化。 安装主题 安装的过程就一行代码,进入博客根目录下面的themes文件夹,右键空白处git bash,出现命令行窗口输入以下命令...
  • NexT主题优化

    千次阅读 2018-04-05 20:57:45
    前言 这算是各种文章的集合了,如果你有耐心就看完吧(T▽T) 如果是明确想要哪一种功能的童鞋,那就直接查找吧( • ̀ω•́ )✧ ...本篇博文是使用next主题的进击版本,主要是有以下内容 域名绑定,...
  • Hexo配置使用Next主题

    2017-03-06 19:26:41
    $ cd F:\Code\Hexo 从Gihub获取Next主题 $ git clone https://github.com/iissnan/hexo-theme-next themes/next 如果提示 'git' 不是内部或外部命令 , 也不是可运行的程序或批处理文件 , 那么需要下载安装Git : ...
  • Hexo博客优化之Next主题美化

    万次阅读 多人点赞 2019-01-26 21:42:19
    前言 有了前面几篇博客的介绍,我们就...Hexo博客支持很多主题风格,其中Next主题是Github上Star最多的主题,其一直在更新维护,支持非常多的外部插件和功能选项。我目前使用的是Next6.0版本,下面我会介绍基于Ne...
  • Hexo的Next主题配置

    万次阅读 2016-11-17 18:33:40
    采用的Hexo主题是Next主题,使用该主题的原因是:该博客整体布局效果个人很喜欢,而且配套的文档资料非常好,文档资料可直接参考官网链接。ps:建议下载主题的稳定版本,可以避免很多没必要的麻烦。 本文主要介绍...
  • NexT 是一个高质量并且优雅的Hexo 主题。这是精心制作做出来的 hexo 主题。 如果你对此主题非常喜欢,欢迎Star &amp;amp;amp;amp;amp;amp; Fork,非常感谢。 预览界面 首页 底部 相册 文章 搜索 安装 ...
  • Hexo Next 主题中添加本地搜索功能

    千次阅读 2019-02-27 13:25:07
    next 主题侧边列表有一个 搜索 菜单,但是点击之后页面会处于卡死状态,后台显示是 404,需要添加搜索插件才可以。 1、安装本地搜索插件 hexo-generator-search # 安装插件,用于生成博客索引数据(在博客根目录...
  • Hexo 主题配置 - NexT

    2020-03-14 09:18:29
    1 安装 NexT 主题 参考 hexo-theme-next 主题官网 1.1 下载 NexT 主题 建议你使用 克隆最新版本 的方式,之后的更新可以通过 git pull 来快速更新, 而不用再次下载压缩包替换。 cd blog git clone ...
  • 一、安装Hexo 在某个盘下新建一个目录,例如hqblog 然后先安装node.js,去官网下载安装 ...二,下载next主题 然后在这里目录下接着执行 git clone https://github.com/iissnan/hexo-theme-n...
  • Hexo+next主题配置踩的坑

    千次阅读 2020-03-29 14:23:24
    下载安装next主题后才发现一堆的坑。由于next的版本不同。所以有的配置文件和网上的教程不大一样。自己踩了N多坑,于是打算记录一下。于是自己试了好几天才差不多配置好。但是网站图标就是显示不出来。我是真哭辽...
  • hexo安装themia/next主题记录&进坑指南

    千次阅读 2016-12-19 21:55:44
    在运行过程中无法使用该主题时,报了cannot find module 'hexo-util' 之类的错,请进入该主题目录,安装依赖: $ npm install $ bower install 不过这样还无法运行,需要在对主题进行build(参见...
  • NexT主题添加音乐

    千次阅读 2018-09-24 14:40:39
    安装插件可以完美的解决上面的问题,并且用插件,有显示歌词功能,也美观,建议使用这种方法。 安装插件 首先在 站点文件夹根目录 安装插件: 所在目录: ~/blog/ npm install hexo-tag-aplayer --save ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,233
精华内容 10,093
关键字:

next主题安装