精华内容
下载资源
问答
  • 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
    

    有空续更。

    展开全文
  • NexT主题优化

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

    前言

    这算是各种文章的集合了,如果你有耐心就看完吧(T▽T)
    如果是明确想要哪一种功能的童鞋,那就直接查找吧( • ̀ω•́ )✧

    本篇文章是在已经搭建好gitpage+hexo的博客的前提下(不懂怎么搭建的可以参考我的另一篇博文:极简搭建博客 或者Hexo和Git搭建博客,这两篇博文都教了大家最基础的怎么将博客搭建起来。本篇博文是使用next主题的进击版本,主要是有以下内容

    • 域名绑定,将github博客和你的独有域名绑定
    • 添加更多的menu内容
    • 添加头像
    • 定义网站个性logo
    • 自定义样式,重写默认样式,个性化定制你的博客
    • 炫酷动态背景制作
    • 添加网易云音乐
    • 添加网易云跟帖
    • 添加leancloud阅读次数统计功能
    • 添加wordcount页面字数统计
    • 添加fork me on github功能

    要想最快的知道这些功能的效果,请移步我的个人博客:https://rainyxy.github.io/,顺便求个forkヽ(●´ε`●)ノ

    首先要说一下我使用的版本,这个是很重要的,好多版本都已经进行了更新,特别是next主题集成了更多的插件,简直不要太爽\(@ ̄∇ ̄@)/

    hexo v3.2.2

    next v5.1.0

    node v4.5.0

    在改成自己想要的效果之后,对整体的hexo的next主题我有了一个大概的了解,其实next主题的最新版(5.1)已经集成了大部分我们需要的插件,只需要在主题配置文件中将默认的false改为true即可,但是我们也仍然需要知道都有哪些新的功能,最有效的方法是直接去查看官网的api:next官网
    Alt text

    授之于鱼不如授之于渔
    希望我们都能够理解其源码,制作出属于自己专属的个性化博客(•̀ᴗ•́)

    我们需要改的文件其实也就那么几个,大部分是不需要更改,next都已经帮我们配置好了~
    默认目录结构:

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

    • deploy:执行hexo deploy命令部署到GitHub上的内容目录
    • public:执行hexo generate命令,输出的静态网页内容目录
    • scaffolds:layout模板文件目录,其中的md文件可以添加编辑
    • scripts:扩展脚本目录,这里可以自定义一些javascript脚本
    • source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
      • drafts:草稿文章
      • posts:发布文章
      • themes:主题文件目录
    • _config.yml:全局配置文件,大多数的设置都在这里
    • package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮

    我们最先修改的应该是在hexo根目录下的配置文件_config.yml文件,这里是配置整个站点的配置信息,在文章的最后贴出我的配置文件,有兴趣的朋友可以参考一下~
    其次就是我们的主题配置文件

    在对应的主题下的_config.yml因为我使用的是next主题,所以目录的路径为C:\Hexo\themes\next\_config.yml 这里配置的是使用主题的配置文件,这个配置文件的东西就有点多了,我们大部分的修改也是在这个文件下完成的。比如说使用集成的第三方插件,默认为false,我们需要将其改为true并且配置相应的app_key就可以使用该插件了~有木有很方便(^ ◕ᴥ◕ ^)

    然后我们需要修改样式的话是需要设置css和甚至是修改模板,
    页面展现的全部逻辑都在每个主题中控制,源代码在hexo\themes\你使用的主题\中,以next主题为例:

    ├── .github #git信息
    ├── languages #多语言
    | ├── default.yml #默认语言
    | └── zh-Hans.yml #简体中文
    | └── zh-tw.yml #繁体中文
    ├── layout #布局,根目录下的*.ejs文件是对主页,分页,存档等的控制
    | ├── _custom #可以自己修改的模板,覆盖原有模板
    | | ├── _header.swig #头部样式
    | | ├── _sidebar.swig #侧边栏样式
    | ├── _macro #可以自己修改的模板,覆盖原有模板
    | | ├── post.swig #文章模板
    | | ├── reward.swig #打赏模板
    | | ├── sidebar.swig #侧边栏模板
    | ├── _partial #局部的布局
    | | ├── head #头部模板
    | | ├── search #搜索模板
    | | ├── share #分享模板
    | ├── _script #局部的布局
    | ├── _third-party #第三方模板
    | ├── _layout.swig #主页面模板
    | ├── index.swig #主页面模板
    | ├── page #页面模板
    | └── tag.swig #tag模板
    ├── scripts #script源码
    | ├── tags #tags的script源码
    | ├── marge.js #页面模板
    ├── source #源码
    | ├── css #css源码
    | | ├── _common #*.styl基础css
    | | ├── _custom #*.styl局部css
    | | └── _mixins #mixins的css
    | ├── fonts #字体
    | ├── images #图片
    | ├── uploads #添加的文件
    | └── js #javascript源代码
    ├── _config.yml #主题配置文件
    └── README.md #用GitHub的都知道

    公益404页面

    GitHub Pages 自定义404页面非常容易,直接在根目录下创建自己的404.html就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的。

    其实,404页面可以做更多有意义的事,来做个404公益项目吧。现在,看下我的404页面一个ibruce.info上不存在的页面,做点有意义的事情,也对得起这个域名。
    目前有如下几个公益404接入地址,我选择了腾讯的。404页面,每个人可以做的更多。

    开启打赏功能

    越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。 只需要 主题配置文件 中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。

    打赏功能配置示例
    reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
    wechatpay: /path/to/wechat-reward-image
    alipay: /path/to/alipay-reward-image

    友情链接

    编辑 主题配置文件 添加:

    友情链接配置示例

    title
    links_title: Links
    links:
    MacTalk: http://macshuo.com/
    Title: http://example.com/

    站点建立时间

    这个时间将在站点的底部显示,例如 © 2013 - 2015。 编辑 主题配置文件,新增字段 since。

    配置示例

    since: 2013

    加入站点内容搜索功能

    本站点使用的是Local Search。加入站点内容搜索功能步骤如下:

    • 安装hexo-generator-searchdb

    $ npm install hexo-generator-searchdb --save
    注意:安装时应在站点根目录下,即myBlog目录下

    • 添加search字段

    在站点

    search:
    path: search.xml
    field: post
    format: html
    limit: 10000
    主题颜色
    NexT主旨在于简洁优雅且易于使用,主题本身提供了三种样式供用户选择,但色彩过于单一,今天为大家介绍如何修改主题的颜色和增加背景图片。
    打开```hexo/themes/next/source/css/_variables/base.styl```找到Colors代码段,如下:
        // Colors
        // colors for use across theme.
        // --------------------------------------------------
          $whitesmoke   = #f5f5f5
          $gainsboro    = #eee  //这个是边栏头像外框的颜色,
          $gray-lighter = #ddd  //文章中插入图片边框颜色
          $grey-light   = #ccc  //文章之间分割线、下划线颜色
          $grey         = #bbb  //页面选中圆点颜色
          $grey-dark    = #999
          $grey-dim     = #666 //侧边栏目录字体颜色
          $black-light  = #555 //修改文章字体颜色
          $black-dim    = #333
          $black-deep   = #495a80  //修改主题的颜色,这里我已经改成老蓝色了。
          $red          = #ff2a2a
          $blue-bright  = #87daff
          $blue         = #0684bd
          $blue-deep    = #262a30
          $orange       = #F39D01 //浏览文章时,目录选中的颜色
    其他的可以自行更改,看看效果
    # 图床
    考虑到博客的速度,同时也为了便于博客的迁移,图床是必须的。我墙裂推荐七牛,访问速度极快,支持日志、防盗链和水印。
    免费用户有每月10GB流量+总空间10GB+PUT/DELETE 10万次请求+GET 100万次请求,这对个人博客来说足够,不够的话点这个活动页面,也可通过邀请好友获得奖励,我也求一下七牛邀请。有一点要说明的是,七牛没有目录的概念,但是文件名可以包含/,比如2013/11/27/reading/photos-0.jpg,参考这里关于key-value存储系统。
    七牛除了作为图床还可以作为其他静态文件存储空间,比如我的个人站点首页有个字库文件和JS文件下载较慢,有时间会把它弄到七牛上去,以提高首页打开速度。请看这篇Linux中国采用七牛云存储支撑图片访问。
    如果非要说不足的话,就是文件管理界面不是很友好,不支持CNAME到分配的永久链接,也不能绑定未备案的自有域名,必须备案才可以。
    如果你对七牛web版的文件管理界面不满意,可以用官方的七牛云存储工具。
    您还可以使用如下图床服务 FarBox,Dropbox,又拍云。
    # 主题背景
    打开```hexo/themes/next/source/css/_schemes/Pisces/index.styl```(Pisces为NexT提供的三种主题之一,根据使用的主题选择)修改```body{}```内的值,如下:
    背景颜色直接更改即可:```body { background: #F0F0F0; }
    

    添加背景:

    { background: url(’/images/background.jpg’); }(将背景图片放到hexo/source/images“`中即可。

    加入数据统计与分析功能

    本站点使用的是百度统计。加入数据统计与分析功能步骤如下:
    - 注册站长账号并登陆

    在这里注册站长账号,并填写信息,网站域名和网站首页以下图为例来填写,注册完成后并登陆。
    这里写图片描述
    - 在跳转的页面中会显示下图,复制hm.js后的id值

    这里写图片描述
    - 添加baidu_analytics字段
    在站点myBlog/_config.yml中添加search字段,值为上步复制的id值
    至此,该功能已成功加入,大约过20min后在百度统计上可以看到站点的访问情况,如下图:
    这里写图片描述

    隐藏网页底部powered By Hexo / 强力驱动

    打开hexo/themes/next/layout/_partials/footer.swig,使用”

    绑定域名

    绑定域名的思路如下:
    - 在万网购买自己喜欢的域名(.com的会贵一点,.site和.xyz的相对便宜一些,有的只需要几块钱一年就可以)
    - 解析DNS
    - 在hexo中添加CNAME文件

    购买域名

    之前没有买域名的时候我想使用网易云跟帖,发现在注册网易云跟帖的时候使用原来的域名提示“url已被使用”,这是因为网易云跟帖不认可二级域名,所以要自己买域名。
    我选择的是万网,阿里下面的。我选择了一个.site的域名,原价8元,使用阿里云app支付还优惠5元,等于3元到手一个域名(一年)~
    按照官网的步骤一步一来就可以了~

    解析DNS

    购买完域名之后我们需要解析DNS地址,在管理控制台中的左侧有域名选项,然后找到你的域名,点击后面的“解析”
    这里写图片描述

    点击添加解析,记录类型选A或CNAME,

    A记录的记录值就是ip地址,github(官方文档)提供了两个IP地址,192.30.252.153和192.30.252.154,这两个IP地址为github的服务器地址,两个都要填上,
    解析记录设置两个www和@,线路就默认就行了,CNAME记录值填你的github博客网址。如我的是rainyxy.github.io。

    在hexo中添加CNAME文件

    接下来在你的hexo文件夹下source文件夹下新建一个CANME文件,里面加上你刚刚购买的域名比如我的cherryblog.site
    这里写图片描述
    然后你就可以hexo clean,hexo ghexo d 发布你的博客看看效果啦~
    这里写图片描述
    在这里我出现一个问题,就是单独输入域名是可以访问的,但是前面加上www之后就访问不了了

    添加菜单页

    添加菜单页的思路(添加菜单页就是添加一个页面,有两种方式):第一种是使用git命令hexo new page "photo" 就直接创建了C:\Hexo\source\photo\index.md
    文件,然后编辑index.md 文件就可以了~
    这里写图片描述
    第二种:手动创建上面的文件= =
    - 在主题的配置文件添加menu索引路径(根路径是hexo/source),所以你如果想要更改页面的内容就去hexo/source下找到对应的文件夹,默认内容是在其index.md文件下
    - 在hexo的source文件下添加对应的文件夹
    - 在主题的配置文件添加menu_icon字段设置对应的icon
    - 修改language文件下zh-hans语言包
    - 在发表文章的时候添加对应的menu字段就可以看到

    刚开始的时候不理解怎么添加分类页和添加文章的区别,公司有一个项目用到了wordpress,然后发现两者有相似的地方,不同的就是wordpress是有可视化的操作后台,而hexo是需要git bash自己创建首先我们要分清什么是页面,什么是文章,
    在hexo中menu下的内容都是新的页面我们可以通过hexo new page "pagename" 创建,hexo默认的页面只有home,archives,tags 三个,之后我们写的博文就是文章,通过hexo new "name" 创建的name.md 文件在根目录的source\_posts 下,在每一个文章的头部,我们可以配置其tags或者categories内容,相当于文章是页面的下一级

    在配置文件中添加menu索引路径

    我们可以在主题配置的_config文件下找到相应的字段,字段前加# 表示被注释掉,我们也可以自己添加menu的内容,比如我又新增了两个menulifephoto
    这里写图片描述
    这里添加的字段其实是加上文件索引的路径,这里hexo设置的根路径是hexo/source 接下来我们在这个根路径下建立相应的文件夹就可以实现点击mune跳转到相应的页面上了
    这里写图片描述,
    没有明白什么意思的同学看下图

    在source文件添加menu文件夹

    我们需要在这个路径下自己建立对应的页面,比如说我新建了menulifephotos,然后再source文件夹下面新建两个名字为lifephoto 的文件夹,里面添加一个index.md markdown文件,内容是类似这样的

    title: photo
    date: 2017-04-04 22:14:07
    type: “photo”
    comments: false

    啦啦啦~
    这里写图片描述
    这是一个markdown文件,你可以自己编写

    给menu添加icon

    如果只是上面的步骤,那么你可能会创建出一个新的页面,但是显示的效果会是这样:这里写图片描述
    怎么icon没有换???其实hexo中换icon是一个很简单的事情,因为hexo集成了FontAwsome 所以我们只需要在主题的配置文件中加入相应的icon名字即可
    这里写图片描述

    查找FontAwsome icon

    这时候你想要换一个自己喜欢的icon怎么办,这就需要自己动手,丰衣足食了,你需要自己到FontAwsome官网,然后鼠标往下拉,在图标集中选择自己喜欢的icon,然后记住名字,保存在上面的menu_icon字段中就可以啦~
    这里写图片描述tips :在字段中只需要填写icon-name后面跟的name即可,不需要加上前面的”icon-“

    在language添加zh-hans翻译字段

    上面的步骤完成之后你会发现,在你的博客首页显示的仍然是英文名,而我们想要有一个中文的名字,并且想要个性化定制我们的页面,我们可以在主题的language文件下的zh-hans(中文)语言包下增加相应的字段(做过翻译的童鞋应该都知道什么意思~)还可以修改其他的字段,这样就可以定制我们的博客了呢~
    这里写图片描述

    在发表文章的时候添加对应的menu字段

    在我们写文章的时候只要在头部信息添加相应的字段就在tags页面和categories中显示相应的分类,例如:

    title: Git使用中的报错情况
    date: 2017-03-11 23:54:11
    tags: [git,实战经验]
    categories: git

    tags、categories都是支持数组的形式的,可以添加多个tags、categories。这样我们在tags、categories页面就可以看见相应的分类了
    这里写图片描述

    添加头像

    我使用的主题头像是位于侧边栏,显示的效果如下,
    这里写图片描述要添加一个这个的头像要怎么操作呢,其实思路就是将你要上传的头像放在你的文件夹中,然后再配置文件中引用正确的路径即可,当然也可以上传绝对路径。在你的主题配置文件找到avatar字段,然后将你得图片路径写在后面,我是新建了一个uploads文件夹,将图片放在下面
    # Sidebar Avatar
    # in theme directory(source/images): /images/avatar.jpg
    # in site directory(source/uploads): /uploads/avatar.jpg
    avatar: /uploads/avatar.png
    这里写图片描述
    或者是一种比较简单的方法
    在主题下的source/images/下放置头像文件avatar.gif即可。

    跟设置头像其实是一个思路,都是在配置文件中引入正确的地址就可以了,不过网站的logo是对图片有要求的,我们需要在Favicon在线制作工具中制作32*32的.ico图片,然后放在source/images下面。然后在主题配置文件下添加主题配置文件中添加:favicon: images/favicon.ico

    自定义样式

    不得不说next还是很人性化的,你可以个性化定制你的网站,你所有的改动(css)需要放在主题文件的source/css/_costum/costum.styl文件中,会覆盖原来的css,所以只要你不想要你修改的样式,只需要删除这个文件夹就可以了,再也不用担心还原不回去了~
    这里写图片描述

    炫酷动态背景

    之前做过一个类似的canvas-nest的效果。新版本的next已经支持canvas-nest了,但是效果不怎么样,就不用了,但是也介绍一下,毕竟简单,只有两步就可以了。
    添加修改代码next/layout/_layout.swig</body>之前加上
    {% if theme.canvas_nest %}

    {% endif %}
    打开next/_config.yml,添加以下代码就可以了:

    # Canvas-nest
    canvas_nest: true
    

    这种虽然简单,但是我认为效果不够好,于是我决定添加原生的js来仿知乎的登录界面做背景,这就需要修改模板来实现了。首先我们要知道next文件的结构,这样我们想改什么就知道在什么位置了~
    这里写图片描述
    所以我们需要在layout下面的_layout.swig 添加一个canvas
    然后使用原生js写一个仿知乎页面,详情script代码可以从github上
    - clone:
    - https://github.com/sunshine940326/canvas-nest
    内容我放在附录2里了,大家可以去看最下面(^__^)

    添加网易云音乐

    HTTP环境

    这次主要分两类来讲,一类是http环境
    也就是网址格式为”http://www.xxx.com“或”http://xxx.com“的网站
    在知道了页面的结构之后,你就可以将你的播放器添加在页面的任意位置,开始我是放在了首页,然后发现一上来就自动播放太吵了,于是就放在了侧边栏,想要听得朋友可以手动点击播放,
    我们可以直接在网易云音乐中搜索我们想要插入的音乐,然后点击生成外链播放器
    这里写图片描述
    然后可以根据你得设置生成相应的html代码,将获得的html代码插入到你想要插入的位置即可
    这里写图片描述
    我放在了layout/_macro/sidebar.swig 文件下

    <div id="music163player">
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="//music.163.com/outchain/player?type=2&id=38358214&auto=0&height=66">
        </iframe>
    </div>
    

    然后就可以在侧边栏看见我的播放器了~
    这里写图片描述
    但是上面介绍的方法,都只能在某一个页面播放,如某一篇文章或者留言板等。
    一旦页面跳转则没有了…不像WP可以全站背景音乐

    HTTPS环境

    现在使用https的网站越来越多,像百度、淘宝等等都是如此
    另外使用github搭建hexo的同学们,现在gh-pages已经强制要求全站https啦
    这种网站格式一般为”https://xxx.github.io
    然后…发现网易云音乐已经不能正常使用了
    由于网易云目前并不支持https,所以我们只能通过插件来实现音乐播放
    这里需要使用到163music-APlayer-you-get-docker项目
    在github项目文档上我们可以看见,参数实在是太多,再加上版本迭代和英文介绍,我一脸懵逼…
    但是在iframe用法里面,我发现有一个demos
    https://music.daoapp.io/iframe?song=287749&qnarrow=1&qssl=1
    格式非常像上文介绍的网易云外链,于是我尝试直接替换为

    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.daoapp.io/iframe?song=287749&qssl=1&qlrc=0&qnarrow=0&autoplay=1"></iframe>
    

    也就是把src=””里面的链接换掉,其他保持不变
    接着来分析这段代码

    width和height是播放器的宽度和高度
    287749这串数字是网易云音乐的歌曲编号
    qlrc=0代表不显示歌词
    autoplay=1代表自动播放

    这样如果没有特殊要求的话,每次只需在网易云找好歌曲编号,然后替换这串数字即可
    粘贴到.md文件里面

    这个项目的玩法非常多,如果需要显示歌词的话
    修改qlrc=1为再调整下播放器宽度(width)高度(height)数值

    网易云跟帖

    之前用的是多说,但是多说在2017年6月1日就关闭评论服务了= =,很忧伤,于是转到了网易云跟帖。由于最新版(5.1)版本的next已经集成了网易云跟帖,所以只需要在主题的设置文件中配置你的productKey就可以了。获取productKey也很简单,在官网网易云跟帖中注册,然后在获取代码>通用代码中拿到productKey,之后在你的主题配置文件中的gentie_productKey字段后添加即可~

    添加Fork me on GitHub

    去网址https://github.com/blog/273-github-ribbons 挑选自己喜欢的样式,并复制代码,添加到themes\next\layout_layout.swig的body标签之内即可
    记得把里面的url换成自己的!

    hexo-wordcount实现统计功能

    这里写图片描述
    wordcount可以实现字数统计,阅读时常还有总字数的统计功能
    只需要npm install hexo-wordcount –save 就可以安装wordcount插件,
    主要功能
    字数统计:WordCount
    阅读时长预计:Min2Read
    总字数统计: TotalCount
    安装完插件之后在主题的配置文件中开启该功能就可以~

    # Post wordcount display settings
    # Dependencies: https://github.com/willin/hexo-wordcount
    post_wordcount:
      item_text: true
      wordcount: true
      min2read: true
    

    leancloud阅读次数统计

    next也集成了leancloud,在leancloud官网
    中注册账号等一步一步的操作就不说了哈~,我们主要是为了拿到app_key和app_id,然后在主题配置文件做一下配置

    # Show number of visitors to each article.
    # You can visit https://leancloud.cn get AppID and AppKey.
    leancloud_visitors:
      enable: true
      app_id: yourapp_id
      app_key: yourapp_key
    

    然后再leancloud的控制台中的存储添加一个counter的class就可以检测到我们的浏览量了,同时在你文章的副标题也可以看到有阅读次数的显示

    个人网站地址:https://rainyxy.github.io/,顺便求个fork
    致谢
    在这里我聚集了很多人的教程,也希望能让能多的人知道如何去做,还有NexT官网可以参照,希望大家能美化好自己的博客♪(^∇^*)

    附录1:站点配置文件

    # Hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/
    
    # Site                  站点信息
    title: Rainy's Blog     #站点名字 
    subtitle:               #副标题
    description: 奔跑不单是一种能力,更是一种态度,决定你人生高度的态度。                   #站点描述,在侧边栏显示
    author: Rainy           #博主名字
    language: zh-Hans       #使用的语言包,语言包在主题文件的language文件夹下,可以更改网站显示出的文案
    timezone:
    
    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://RainyXY.github.io
    root: /
    permalink: :year/:month/:day/:title/
    permalink_defaults:
    
    # Directory
    source_dir: source
    public_dir: public
    tag_dir: tags
    archive_dir: archives
    category_dir: categories
    code_dir: downloads/code
    i18n_dir: :lang
    skip_render:
    
    # Writing
    new_post_name: :title.md # File name of new posts
    default_layout: post
    titlecase: false # Transform title into titlecase
    external_link: true # Open external links in new tab
    filename_case: 0
    render_drafts: false
    post_asset_folder: true         #新建一个页面后自动生成一个同名文件夹(默认为false)
    relative_link: false
    future: true
    highlight:
      enable: true
      line_number: true
      auto_detect: false
      tab_replace:
    
    # Category & Tag
    default_category: uncategorized
    category_map:
    tag_map:
    
    # Date / Time format
    ## Hexo uses Moment.js to parse and display date
    ## You can customize the date format as defined in
    ## http://momentjs.com/docs/#/displaying/format/
    date_format: YYYY-MM-DD
    time_format: HH:mm:ss
    
    # Pagination
    ## Set per_page to 0 to disable pagination
    per_page: 10
    pagination_dir: page
    
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next
    
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000
    
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: git@github.com:RainyXY/RainyXY.github.io.git
      branch: master
    

    附录2:背景脚本

    <script>
    class Circle {
        //创建对象
        //以一个圆为对象
        //设置随机的 x,y坐标,r半径,_mx,_my移动的距离
        //this.r是创建圆的半径,参数越大半径越大
        //this._mx,this._my是移动的距离,参数越大移动
        constructor(x, y) {
            this.x = x;
            this.y = y;
            this.r = Math.random() * 10 ;
            this._mx = Math.random() ;
            this._my = Math.random() ;
    
        }
    
        //canvas 画圆和画直线
        //画圆就是正常的用canvas画一个圆
        //画直线是两个圆连线,为了避免直线过多,给圆圈距离设置了一个值,距离很远的圆圈,就不做连线处理
        drawCircle(ctx) {
            ctx.beginPath();
            //arc() 方法使用一个中心点和半径,为一个画布的当前子路径添加一条弧。
            ctx.arc(this.x, this.y, this.r, 0, 360)
            ctx.closePath();
            ctx.fillStyle = 'rgba(204, 204, 204, 0.3)';
            ctx.fill();
        }
    
        drawLine(ctx, _circle) {
            let dx = this.x - _circle.x;
            let dy = this.y - _circle.y;
            let d = Math.sqrt(dx * dx + dy * dy)
            if (d < 150) {
                ctx.beginPath();
                //开始一条路径,移动到位置 this.x,this.y。创建到达位置 _circle.x,_circle.y 的一条线:
                ctx.moveTo(this.x, this.y);   //起始点
                ctx.lineTo(_circle.x, _circle.y);   //终点
                ctx.closePath();
                ctx.strokeStyle = 'rgba(204, 204, 204, 0.3)';
                ctx.stroke();
            }
        }
    
        // 圆圈移动
        // 圆圈移动的距离必须在屏幕范围内
        move(w, h) {
            this._mx = (this.x < w && this.x > 0) ? this._mx : (-this._mx);
            this._my = (this.y < h && this.y > 0) ? this._my : (-this._my);
            this.x += this._mx / 2;
            this.y += this._my / 2;
        }
    }
    //鼠标点画圆闪烁变动
    class currentCirle extends Circle {
        constructor(x, y) {
            super(x, y)
        }
    
        drawCircle(ctx) {
            ctx.beginPath();
            //注释内容为鼠标焦点的地方圆圈半径变化
            //this.r = (this.r < 14 && this.r > 1) ? this.r + (Math.random() * 2 - 1) : 2;
            this.r = 8;
            ctx.arc(this.x, this.y, this.r, 0, 360);
            ctx.closePath();
            //ctx.fillStyle = 'rgba(0,0,0,' + (parseInt(Math.random() * 100) / 100) + ')'
            ctx.fillStyle = 'rgba(255, 77, 54, 0.3)'
            ctx.fill();
    
        }
    }
    //更新页面用requestAnimationFrame替代setTimeout
    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let w = canvas.width = canvas.offsetWidth;
    let h = canvas.height = canvas.offsetHeight;
    let circles = [];
    let current_circle = new currentCirle(0, 0)
    
    let draw = function () {
        ctx.clearRect(0, 0, w, h);
        for (let i = 0; i < circles.length; i++) {
            circles[i].move(w, h);
            circles[i].drawCircle(ctx);
            for (j = i + 1; j < circles.length; j++) {
                circles[i].drawLine(ctx, circles[j])
            }
        }
        if (current_circle.x) {
            current_circle.drawCircle(ctx);
            for (var k = 1; k < circles.length; k++) {
                current_circle.drawLine(ctx, circles[k])
            }
        }
        requestAnimationFrame(draw)
    }
    
    let init = function (num) {
        for (var i = 0; i < num; i++) {
            circles.push(new Circle(Math.random() * w, Math.random() * h));
        }
        draw();
    }
    window.addEventListener('load', init(60));
    window.onmousemove = function (e) {
        e = e || window.event;
        current_circle.x = e.clientX;
        current_circle.y = e.clientY;
    }
    window.onmouseout = function () {
        current_circle.x = null;
        current_circle.y = null;
    
    };
    </script>
    
    展开全文
  • Hexo-next主题优化

    2021-04-23 20:14:31
    Hexo-next主题优化

    注:下面说到的主题配置文件站点配置文件分别在你的博客目录下的themes/next/_config.yml和_config.yml
    更多详细的内容可以访问我的个人博客时莫如初

    1. 主题设定

    next 集成了4种内置主题,可在主题配置文件中搜索scheme

    # Schemes
    scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    #scheme: Gemini
    

    想使用那种主题去掉前面的#号即可,可自行尝试更换
    每次更改完都需要执行hexo cleanhexo g, hexo s 即可在本地观察效果。

    2. 设置语言

    站点配置文件中将language设置成为对应的语言

    • 英文是en
    • 简体中文是zh-CN

    3. 设置菜单并添加页面

    • 主题配置文件中找到menu想添加什么页面去掉相应的注释即可
    menu:
      home: / || home
      #about: /about/ || user
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
    

    上面去掉哪行的注释就需要添加那个页面,执行下面的命令即可添加页面。

    hexo n page tags
    hexo n page categorie
    hexo n page archives

    4. 设置头像

    • 主题配置文件中搜索Avatar找到如下配置
    avatar:
      # 图片的路径 如果是在本地的话 是以主题目录下source开始的 比如我的在themes/next/source/images/head2.jpg  
      url: /images/head2.jpg  
      # If true, the avatar will be dispalyed in circle.
      rounded: true
      # If true, the avatar will be rotated with the cursor.
      rotated: true
    

    5. 添加侧边栏社交链接

    • 主题配置文件中搜索social找到你需要显示的社交链接,去掉注释,b并修改为你的链接。(#为注释)
    social:
      GitHub: https://github.com/sudo-li || fab fa-github
      Gitee: https://gitee.com/sudo-li || fab fa-git
      #GitHub: https://github.com/yourname || github
      #E-Mail: mailto:yourname@gmail.com || envelope
      #Weibo: https://weibo.com/yourname || weibo
      #Google: https://plus.google.com/yourname || google
      #Twitter: https://twitter.com/yourname || twitter
      #FB Page: https://www.facebook.com/yourname || facebook
      #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
      #RSS: /atom.xml || rss
    

    6. 添加友情链接

    1. 主题配置文件中搜索linksTitle后面添加你的友情链接

    7. 开启文章打赏功能

    1. 主题配置文件中搜索Reward 去掉前面相应的注释 然后添加你的二维码路径 路径同头像路径一样,是以主题目录下source开始的.

    8. 添加fork github

    9. 修改文章内连接样式

    • 在/themes/next/source/css/_common/components/post.styl 最后添加 如下代码
    // 文章内链接文本样式
    .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;
      }
    }
    

    10. 修改文章标签的小图标

    11. 添加评论系统

    • 主题配置文件中找到Valine
    valine:
      enable: true
      appid: SSB0Uv6SphdWF73z************ # Your leancloud application appid
      appkey: 1wlBhfILAIsNU********** # Your leancloud application appkey
    
    • enable 改为true
    • appid 和 appkey 可在https://www.leancloud.cn/这里获取
    • 点击上面链接前往leancloud注册一个账号,然后随便注册一个应用
    • 在设置中打开应用key,就可以找到appid和appkey,填入配置文件即可。

    12. 添加搜索服务

    • 站点配置文件最后添加如下配置
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000
    
    • 然后在主题配置文件中开启
    local_search:
      enable: true
    
    展开全文
  • 针对 hexo 的 NEXT 主题优化

    上篇我们说了 hexo 的优化,针对的站点的优化。

    本篇讲解 next 主题的优化,包括:使用语言、前端页面显示宽度、菜单、侧栏、头像、添加或取消动画效果、打赏功能等等。

    让页面排版更符合我们所要的功能和所想的风格。

    可参考网站

    http://theme-next.iissnan.com/getting-started.html


    主题设定

    选择 Scheme

    修改 next 主题配置文件

    [root@zhangblog next]# pwd
    /app/softinsall/hexo/themes/next
    [root@zhangblog next]# vim _config.yml 
    # Schemes
    #scheme: Muse
    #scheme: Mist
    scheme: Pisces
    #scheme: Gemini
    

    可以自行更换,不用重启 hexo 服务。个人更喜欢 Pisces,将菜单栏放在左侧,而不是原来的顶部。
    Muse 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
    Mist Muse 的紧凑版本,整洁有序的单栏外观
    Pisces 双栏 Scheme,小家碧玉似的清新

    页面宽度设置

    默认情况下,该主题页面两边留白较多,所以如果需要可以把两边留白处减少些。

    当然,此步操作可略。

    [root@zhangblog css]# pwd
    /app/softinsall/hexo/themes/next/source/css
    [root@zhangblog css]# vim _variables/base.styl  # 修改处一
    $main-desktop                   = 1160px
    [root@zhangblog css]# vim _schemes/Pisces/_layout.styl  # 修改处二 
    .content-wrap {
      float: right;
      box-sizing: border-box;
      padding: $content-desktop-padding;
      /* width: $content-desktop; 改为如下信息 */
      width: calc(100% - 252px);
      background: white;
      min-height: 700px;
      box-shadow: $box-shadow-inner;
      border-radius: $border-radius-inner;
    

    设置语言

    页面默认为英文,改为中文显示。

    首先确定该主题支持哪些语言。

    [root@zhangblog languages]# pwd  # 在主题目录,查看 next 主题支持哪些语言
    /app/softinsall/hexo/themes/next
    [root@zhangblog languages]# ll languages/
    total 64
    -rw-r--r-- 1 root root 1669 Jun  7 20:13 default.yml
    -rw-r--r-- 1 root root 1601 Jun  7 20:13 de.yml
    -rw-r--r-- 1 root root 1712 Jun  7 20:13 en.yml
    -rw-r--r-- 1 root root 1553 Jun  7 20:13 fr-FR.yml
    -rw-r--r-- 1 root root 1507 Jun  7 20:13 id.yml
    -rw-r--r-- 1 root root 1688 Jun  7 20:13 it.yml
    -rw-r--r-- 1 root root 1573 Jun  7 20:13 ja.yml
    -rw-r--r-- 1 root root 1596 Jun  7 20:13 ko.yml
    -rw-r--r-- 1 root root 1729 Jun  7 20:13 nl-NL.yml
    -rw-r--r-- 1 root root 1545 Jun  7 20:13 pt-BR.yml
    -rw-r--r-- 1 root root 1583 Jun  7 20:13 pt.yml
    -rw-r--r-- 1 root root 2632 Jun  7 20:13 ru.yml
    -rw-r--r-- 1 root root 1997 Jun  7 20:13 vi.yml
    -rw-r--r-- 1 root root 1781 Jun  7 20:13 zh-Hans.yml  # 中文简体,使用该语言
    -rw-r--r-- 1 root root 1763 Jun  7 20:13 zh-hk.yml
    -rw-r--r-- 1 root root 1763 Jun  7 20:13 zh-tw.yml
    

    站点配置文件使用指定语言。

    [root@zhangblog hexo]# pwd  # 站点目录
    /app/softinsall/hexo
    [root@zhangblog hexo]# vim _config.yml  
    ………………
    language: zh-Hans
    timezone:
    

    重新生成静态文件,然后重启 hexo 服务,再次访问可见是中文显示了。
    在这里插入图片描述

    设置菜单

    菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。

    修改主题配置文件

    [root@zhangblog next]# vim _config.yml 
    menu:
      home: / || home
      archives: /archives/ || archive
      tags: /tags/ || tags
      categories: /categories/ || th
      about: /about/ || user
      #schedule: /schedule/ || calendar
      sitemap: /sitemap.xml || sitemap
      commonweal: /404/ || heartbeat
    
    # Enable/Disable menu icons.
    menu_icons:
      enable: true
    

    home 主页
    archives 归档类
    tags 标签页
    categories 分类页
    about 关于页
    schedule 时间表
    sitemap 网站地图
    commonweal 公益 404

    设置侧栏

    修改主题配置文件

    [root@zhangblog next]# vim _config.yml 
    sidebar:
      # Sidebar Position, available values: left | right (only for Pisces | Gemini).
      position: left
      #position: right
    

    默认不用修改。
    侧边栏位置,可用值::left | right (仅适用于 Pisces | Gemini)。

    设置头像

    修改主题配置文件

    [root@zhangblog next]# vim _config.yml 
    # Sidebar Avatar
    avatar:
      # In theme directory (source/images): /images/avatar.gif
      # In site directory (source/uploads): /uploads/avatar.gif
      # You can also use other linking images.
      url: /uploads/avatar.png
    

    如果是站外,完整的互联网 URI 如:http://example.com/avatar.png

    如果是站内:
    1、将头像放置主题目录下的 source/uploads/ (新建 uploads 目录若不存在),配置为:avatar: /uploads/avatar.png
    2、或者 放置在 source/images/ 目录下,配置为:avatar: /images/avatar.png

    图片路径

    [root@zhangblog next]# pwd  # next 主题目录
    /app/softinsall/hexo/themes/next
    [root@zhangblog next]# ll source/uploads/avatar.png 
    -rw-r--r-- 1 root root 131807 Apr 30 14:39 source/uploads/avatar.png
    

    主题配置

    设置「RSS」

    false:禁用 RSS,不在页面上显示 RSS 连接。
    留空:使用 Hexo 生成的 Feed 链接。 你可以需要先安装 hexo-generator-feed 插件。

    插件地址:https://github.com/hexojs/hexo-generator-feed

    安装插件

    [root@iZ28xbsfvc4Z hexo]# pwd  # 站点目录
    /app/softinsall/hexo
    [root@iZ28xbsfvc4Z hexo]# npm install hexo-generator-feed --save
    

    站点配置文件修改

    [root@zhangblog hexo]# pwd
    /app/softinsall/hexo
    [root@zhangblog hexo]# vim _config.yml 
    #Feed Atom
    feed:
      type: atom
      path: atom.xml
      limit: 20
      hub:
      content:
      content_limit: 140
      content_limit_delim: ' '
    

    参数讲解:
    type: RSS 的类型(atom/rss2)
    path: 文件路径,默认是 atom.xml/rss2.xml
    limit: 展示文章的数量,使用 0 或则 false 代表展示全部
    hub:
    content: 在RSS文件中是否包含内容,有3个值 true/false 默认不填为 false
    content_limit: 指定内容的长度作为摘要,仅仅在上面content设置为 false 和没有自定义的描述出现
    content_limit_delim: 上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志。在达到规定的内容长度之前最后出现的这个分隔符之前的内容,防止从中间截断。

    添加「标签」页面

    新建标签页面

    [root@zhangblog hexo]# pwd  # 定位到 Hexo 站点目录下
    /app/softinsall/hexo
    [root@zhangblog hexo]# hexo new page tags  
    INFO  Created: /app/softinsall/hexo/source/tags/index.md
    

    标签页面设置

    [root@zhangblog tags]# pwd
    /app/softinsall/hexo/source/tags
    [root@zhangblog tags]# ll
    total 4
    -rw-r--r-- 1 root root 79 Jun  7 10:48 index.md
    [root@zhangblog tags]# cat index.md 
    ---
    title: All Tags
    date: 2019-06-07 10:36:52
    type: "tags"
    comments: false
    ---
    

    注意:如果有集成评论服务,页面也会带有评论。 若需要关闭的话,请添加字段 comments 并将值设置为 false。

    使用标签
    在文章中使用标签。

    [root@zhangblog hexo]# pwd
    /app/softinsall/hexo
    [root@zhangblog hexo]# head source/_posts/MarkDown-新手指南.md  # 相关信息如下
    ---
    title: MarkDown 新手指南
    date: 2019-06-04 19:28:51
    tags:
      - MarkDown
    ---
    
    

    浏览器访问
    在这里插入图片描述

    添加「分类」页面

    新建分类页面

    [root@zhangblog hexo]# pwd  # 定位到 Hexo 站点目录下
    /app/softinsall/hexo
    [root@zhangblog hexo]# hexo new page categories 
    INFO  Created: /app/softinsall/hexo/source/categories/index.md
    

    分类页面设置

    [root@zhangblog categories]# pwd
    /app/softinsall/hexo/source/categories
    [root@zhangblog categories]# ll
    total 4
    -rw-r--r-- 1 root root 89 Jun  7 11:04 index.md
    [root@zhangblog categories]# cat index.md  
    ---
    title: 文章分类
    date: 2019-06-07 11:00:17
    type: "categories"
    comments: false
    ---
    

    注意:如果有集成评论服务,页面也会带有评论。 若需要关闭的话,请添加字段 comments 并将值设置为 false。

    使用分类
    在文章中使用分类。

    [root@zhangblog hexo]# pwd
    /app/softinsall/hexo
    [root@zhangblog hexo]# head source/_posts/MarkDown-新手指南.md # 相关信息如下
    ---
    title: MarkDown 新手指南
    date: 2019-06-04 19:28:51
    tags:
      - MarkDown
    categories:
      - MarkDown
    ---
    

    浏览器访问
    在这里插入图片描述

    添加「关于」页面

    新建关于页面

    [root@zhangblog hexo]# pwd  # 定位到 Hexo 站点目录下
    /app/softinsall/hexo
    [root@zhangblog hexo]# hexo new page about
    INFO  Created: /app/softinsall/hexo/source/about/index.md
    

    关于页面编辑

    [root@zhangblog about]# pwd
    /app/softinsall/hexo/source/about
    [root@zhangblog about]# ll
    total 4
    -rw-r--r-- 1 root root 47 Jun  7 16:07 index.md
    [root@zhangblog about]# cat index.md 
    ---
    title: 关于我
    date: 2019-06-07 16:07:36
    ---
    
    # 关于本博客
    本博客诞生于 2019-06,虽然 2015-02 就开始在 CSDN 写博客,但是最开始都是作为自己的笔记记录,因此刚开始那段时间也不怎么重视排版。如果在 CSDN 看了我那些早期的博客,发现排版不好,体验性欠缺,还请多多包涵。
    
    后来该博客经过几次改版,自己发现不怎么适应。因此就转到了博客园。相比前者的经常改版,甚至有段时间广告频繁,博客园就好很多,页面也非常清爽。
    
    ………………
    
    等等,后期可能还会有其他动作,敬请期待…………
    
    # 联系方式
    邮箱:zhanglianghhh@163.com
    QQ: 1369929127
    
    </br>
    
    <center>
    
    **你对本站的捐赠,就是我最大的动力!**
    
    </center>
    
    ---
    
    

    浏览器访问
    在这里插入图片描述

    添加「公益404」页面

    腾讯公益404页面,寻找丢失儿童,让大家一起关注此项公益事业!

    新建关于页面

    [root@zhangblog hexo]# pwd  # 定位到 Hexo 站点目录下
    /app/softinsall/hexo
    [root@zhangblog hexo]# hexo new page 404
    INFO  Created: /app/softinsall/hexo/source/404/index.md
    

    关于页面编辑

    [root@zhangblog 404]# pwd
    /app/softinsall/hexo/source/404
    [root@zhangblog 404]# ll
    total 4
    -rw-r--r-- 1 root root 758 Jun  7 23:19 index.md
    [root@zhangblog 404]# cat index.md 
    ---
    title: 404
    date: 2019-06-07 23:15:22
    ---
    
    <!DOCTYPE HTML>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="robots" content="all" />
      <meta name="robots" content="index,follow"/>
      <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
    </head>
    <body>
      <script type="text/plain" src="http://www.qq.com/404/search_children.js"
              charset="utf-8" homePageUrl="/"
              homePageName="回到我的主页">
      </script>
      <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
      <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
    </body>
    </html>
    
    

    浏览器访问
    在这里插入图片描述

    在这里插入图片描述

    侧边栏社交链接

    侧栏社交链接的修改包含两个部分,第一是链接,第二是链接图标。两者配置均在主题配置文件中。

    [root@zhangblog next]# pwd  # 主题目录
    /app/softinsall/hexo/themes/next
    [root@zhangblog next]# vim _config.yml
    social:
      GitHub: https://github.com/zhanglianghhh || github
      E-Mail: mailto:zhanglianghhh@163.com || envelope
      知乎: https://www.zhihu.com/people/lightzhang-23-69/activities || globe
      CSDN: https://blog.csdn.net/woshizhangliang999 || codiepie
      博客园: https://www.cnblogs.com/zhanglianghhh/p/ || rss-square
    
    social_icons:
      enable: true
      icons_only: false
      transition: false
    

    以如下配置说明:

    GitHub: https://github.com/zhanglianghhh || github

    GitHub: 表示页面显示的文字
    https://github.com/zhanglianghhh : 跳转URL
    github: 使用的图标

    更多图标参见如下网站:

    http://www.fontawesome.com.cn/faicons/

    页面效果
    在这里插入图片描述

    开启打赏功能

    越来越多的平台(微信公众号、新浪博客、简书、百度打赏等)支持打赏功能,付费阅读时代越来越近,因此增加了打赏功能。

    支持微信打赏和支付宝打赏,只需在主题配置文件中填入微信和支付宝收款二维码图片地址,即可开启打赏功能。

    [root@zhangblog next]# pwd  # 在主题目录
    /app/softinsall/hexo/themes/next
    [root@zhangblog next]# vim _config.yml 
    # Reward
    reward_comment: 坚持原创分享,你的支持就是我最大的动力!
    wechatpay: /uploads/weixin_cash_code.png
    alipay: /uploads/alipay_cash_code.png
    

    图片所在位置

    [root@zhangblog next]# pwd  # 在主题目录
    /app/softinsall/hexo/themes/next
    [root@zhangblog next]# ll source/uploads/weixin_cash_code.png 
    -rw-r--r-- 1 root root 27337 Jun  7 19:39 source/uploads/weixin_cash_code.png
    [root@zhangblog next]# ll source/uploads/alipay_cash_code.png 
    -rw-r--r-- 1 root root 58235 Jun  7 19:37 source/uploads/alipay_cash_code.png
    

    页面效果
    在这里插入图片描述

    友情链接

    主题配置文件中修改。

    [root@zhangblog next]# pwd  # 主题目录
    /app/softinsall/hexo/themes/next
    [root@zhangblog next]# vim _config.yml
    # Blog rolls
    links_icon: link
    links_title: Links
    #links_layout: block
    links_layout: inline
    links:
      OpenInfo: http://mp.weixin.qq.com/user1
      stormzhang: http://mp.weixin.qq.com/user2
    

    页面效果
    在这里插入图片描述

    站点建立时间

    这个时间将在站点的底部显示,例如 © 2015- 2019。 编辑主题配置文件,修改字段 since。

    [root@zhangblog next]# pwd  # 主题目录
    /app/softinsall/hexo/themes/next
    [root@zhangblog next]# vim _config.yml
    footer:
      # Specify the date when the site was setup.
      # If not defined, current year will be used.  修改处如下
      since: 2015
    
      # Icon between year and copyright info.
      icon: user
    

    页面效果
    在这里插入图片描述

    订阅微信公众号

    在每篇文章的末尾默认显示微信公众号二维码,扫一扫,轻松订阅。

    编辑主题配置文件,如下:

    [root@zhangblog next]# pwd  # 在主题目录
    /app/softinsall/hexo/themes/next
    [root@zhangblog next]# vim _config.yml
    # Wechat Subscriber
    wechat_subscriber:
      enabled: true
      qcode: /uploads/weixin_pulic_code.png
      description: 欢迎扫一扫,订阅我的微信公众号!
    

    页面样式修改

    [root@zhangblog next]# pwd  # 在主题目录
    /app/softinsall/hexo/themes/next
    [root@zhangblog next]# vim layout/_macro/wechat-subscriber.swig 
    <div id="wechat_subscriber" style="display: block; padding: 10px 0; margin: 20px auto; width: 100%; text-align: center">
    <!-- 
        <img id="wechat_subscriber_qcode" src="{{ theme.wechat_subscriber.qcode }}" alt="{{ theme.author }} wechat" style="width: 200px; max-width: 100%;"/>
        去掉 style 中的 width: 200px;
         -->
        <img id="wechat_subscriber_qcode" src="{{ theme.wechat_subscriber.qcode }}" alt="{{ theme.author }} wechat" style="max-width: 100%;"/>
        <div>{{ theme.wechat_subscriber.description }}</div>
    </div>
    

    页面效果
    在这里插入图片描述

    设置「动画效果」

    Next 主题默认开启动画效果,由于该效果使用 JavaScript 编写,因此只有当 JavaScript 脚本加载完毕后,才会显示页面。
    如果你对加载速度在乎的话,那么可以关闭动画效果。

    编辑主题配置文件,如下:

    [root@zhangblog next]# pwd  # 在主题目录
    /app/softinsall/hexo/themes/next
    [root@zhangblog next]# vim _config.yml
    # Use velocity to animate everything.
    motion:
      # true 开启动画, false 关闭动画
      enable: true
      async: false
    

    设置「背景动画」

    Next 主题自带四种背景动画效果,有兴趣自行体验,不过建议最好别开背景动画,因为会消耗额外的客户端资源。

    编辑主题配置文件,如下:

    [root@zhangblog next]# pwd  # 在主题目录
    /app/softinsall/hexo/themes/next
    [root@zhangblog next]# vim _config.yml
    # Canvas-nest
    canvas_nest: false
    
    # three_waves
    three_waves: false
    
    # canvas_lines
    canvas_lines: false
    
    # canvas_sphere
    canvas_sphere: false
    

    底部版权信息

    修改主题配置文件,如下:

    [root@zhangblog next]# pwd  # 在主题目录
    /app/softinsall/hexo/themes/next
    [root@zhangblog next]# vim _config.yml
    # Declare license on posts
    post_copyright:
      enable: true
      license: CC BY-NC-SA 3.0
      license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/
    

    页面效果
    在这里插入图片描述

    添加文章更新时间

    主题配置文件中进行修改配置。

    [root@iZ28xbsfvc4Z next]# pwd  # 主题目录
    /app/softinsall/hexo/themes/next
    [root@iZ28xbsfvc4Z next]# vim _config.yml 
    # Post meta display settings
    post_meta:
      item_text: true
      created_at: true
      updated_at: true   # 从 false 改为 true
      categories: true
    

    浏览器访问
    在这里插入图片描述

    首页不显示全文(只显示预览)

    主题配置文件中进行修改配置。

    [root@iZ28xbsfvc4Z next]# pwd  # 主题目录
    /app/softinsall/hexo/themes/next
    [root@iZ28xbsfvc4Z next]# vim _config.yml 
    # Automatically Excerpt. Not recommend.
    # Please use <!-- more --> in the post to control excerpt accurately.
    auto_excerpt:
      # 从 false 改为 true
      enable: true
      length: 150
    

    页面效果
    在这里插入图片描述

    文章末尾统一添加“本文结束”标记

    [root@iZ28xbsfvc4Z next]# pwd  # 主题目录
    /app/softinsall/hexo/themes/next
    [root@iZ28xbsfvc4Z next]# vim layout/_macro/passage-end-tag.swig  # 增加该文件
    <div>
        {% if not is_index %}
            <div style="text-align:center;color: #555;font-size:24px;"><-------------The End-------------></div>
        {% endif %}
    </div>
    [root@iZ28xbsfvc4Z next]# vim layout/_macro/post.swig  # 修改该文件,在 <div class="post-body>…………</div> 标签后增加如下信息
        <!-- 文章末尾统一添加“本文结束”标记 -->
        <div>
          {% if not is_index %}
            {% include 'passage-end-tag.swig' %}
          {% endif %}
        </div>
    [root@iZ28xbsfvc4Z next]# vim _config.yml  # 主题配置文件修改
    # 文章末尾添加“本文结束”标记
    passage_end_tag:
      enabled: true
    

    页面效果
    在这里插入图片描述


    推荐阅读

    Linux下使用 github+hexo 搭建个人博客01-hexo搭建

    Linux下使用 github+hexo 搭建个人博客02-hexo部署到Github Pages

    Linux下使用 github+hexo 搭建个人博客03-hexo配置优化

    Linux下使用 github+hexo 搭建个人博客04-next主题优化

    Linux下使用 github+hexo 搭建个人博客05-next主题接入评论系统

    Linux下使用 github+hexo 搭建个人博客06-next主题接入数据统计

    Linux下使用 github+hexo 搭建个人博客07-next主题接入搜索和站点管理


    在这里插入图片描述

    展开全文
  • Hexo之next主题优化

    2020-05-21 22:25:58
    文章目录前言Next主题风格博客自定义图标鼠标点击特效添加动态背景修改标签样式作者头像设置文章结束标志社交设置文章版权信息博客底部布局添加打赏页面宠物博客摘要显示文章链接样式阅读次数/时长和访客数网易云...
  • 特开此贴记录next主题优化过程中遇到的问题,希望对大家有所帮助。 一些说明 前期相关的Hexo安装、本地/远程部署教程可百度在此不再赘述。 基于hexo-next v5.1.4,向上兼容,向下兼容性不确定,特此声明。 我的...
  • Hexo-Next主题优化

    2020-05-15 12:21:02
    只需修改主题配置文件 /themes/next/_config.yml # Canvas-nest canvas_nest: false # three_waves three_waves: false # canvas_lines canvas_lines: true 上面三个,想开哪个背景,就把哪.
  • hexo-next主题优化

    2019-12-14 11:42:40
    在 /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-tr...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 984
精华内容 393
关键字:

next主题优化