Hexo NexT 使用中的小细节

| | |
| 1,815 | 8

Hexo NexT 应用中的小技巧，使用过程中不定期更新。



中文模式

站点：
language: zh-Hans

更新生效

主题配置和文章，修改后刷新浏览器可以直接生效；站点配置更改需要重新生成才能生效。

本地搜索

  • 安装 hexo-generator-searchdb 插件，执行 npm install hexo-generator-searchdb --save

  • 增加站点配置，如下：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

创建分类

  • 创建分类页 hexo new page categories
  • 分类页 index.md 增加 type: "categories" 实现分类跳转

创建 tag 页

  • 创建 tag 页 hexo new page tags
  • tag 页 index.md 增加 type: "tags" 实现 tag 跳转

more 字段

  • 使用 NexT 主题可以在文章中增加 <!--more--> ，more 字段上的为摘要。

修改模版

scaffolds 文件夹中 post.md page.md draft.md 文件为模版文件

1
2
3
4
5
6
7
8
---
title: {{ title }} 
categories: 
tags: 
comments: false 
--- 
<!--more-->

多 tag

  • tag: [Hexo,NexT] 英文符号，中间有个空格。

创建草稿

  • hexo new draft Hello 在 source/-drafts 下生成 Hello.md 文件
  • 默认不预览，网站配置 render_drafts 节点更改渲染/预览。
  • 或使用 hexo server --drafts 开启临时预览。

发布草稿

  • hexo publish Hello

    多个分类

  • 同一篇文章不支持两个分类

    字数统计

  • 更改 \themes\next\ _config.yml 中 busuanzi_count 节点

  • 执行npm install hexo-wordcount --save 插件名后加 @2.0.1 指定版本

    打赏禁止动画

  • next/source/css/_common/components/post/post-reward.styl 中注释 alipay 和 wechart 动画

内链颜色

  • themes\next\source\css\_common\components\post\post.styl 中自定义样式 
    1
    2
    3
    4
    5
    6
    7
    8
    .post-body p a{
      color: #0593d3;
      border-bottom: none;
      &:hover {
        color: #0477ab;
        text-decoration: underline;
      }
    }

查看版本

  • 使用 hexo -v

卸载

  • npm uninstall hexo-cli -g # 未实践过
    npm remove hexo-generator-searchdb

置顶

  • 使用 npm install --save hexo-generator-index 插件，多个置顶按等级和时间顺序。
  • 更改 ../node_modules/hexo-generator-index/lib/generator.js 文件
  • 文章中增加 top: true 配置

版权所有者：Netcan_Space :
解决 Hexo 置顶问题

ico 转换

网站标签页

站点地图

插件

$ npm install hexo-generator-baidu-sitemap --save
$ npm install hexo-generator-sitemap --save

网站配置中增加节点

1
2
3
4
sitemap: 
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

生成，预览

1
2
`$ hexo g`
`$ hexo s`

Google 收录

使用 Google Webmaster tools 方式收录

四种方式：
Google Analytics（分析）

HTML 文件上传

域名提供商

Google 跟踪代码管理器

HTML 标记

百度收录

谷歌分析

注册谷歌分析账号并关联 Google 账号
配置主题 google_analytics 值

Google 站点地图

生成并添加 sitemap.xml

爬虫

GitHub 屏蔽了百度爬虫，默认域名下文件验证会失败。

百度自动推送
主题配置 baidu_push 字段为 true 。

安装 sitemap 插件

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

站点配置

1
2
3
4
sitemap:
	path: sitemap.xml
baidusitemap:
	path: baidusitemap.xml

创建 robots.txt 文件，配置到站点中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: https://Xxx.github.io/sitemap.xml
Sitemap: https://Xxx.github.io/baidusitemap.xml # 目前该配置未生效，push 生效了。

添加 nofollow 标签

设计的自定义太多，未修改。

【搜索优化】Hexo-next百度和谷歌搜索优化

404 页面

目前在主题中配置，站点中好像也可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>

远程仓库更改

  • 仓库地址查看 git remote -v
  • 更换仓库 git remote set-url origin <repo>
  • 空仓库添加仓库 git remote add origin <repo>
  • 本地仓库改名 git remote rename [current name] [new name]
  • 移除本地仓库名 git remote rm origin 此操作所有 origin 均会被移除

可视化操作

插件

`npm install hexo-hey --save`

site config：

1
2
3
4
5
admin:
    name: hexo
    password: hey
    secret: hey hexo
    expire: 60*1

访问：

localhost:4000/admin

插件地址
参考

移动设备易用性

谷歌检测屏幕适配显示有问题。

内容宽度超过了屏幕显示范围
请确保您的网页无需横向滚动即可显示所有内容。
如何更改内容区域的宽度
但是感觉方案并不好，所以没有修改。

Google 默认字符串

{google:baseURL}search?q=%s&{google:RLZ}{google:originalQueryForSuggestion}{google:assistedQueryStats}{google:searchFieldtrialParameter}{google:iOSSearchLanguage}{google:searchClient}{google:sourceId}{google:instantExtendedEnabledParameter}{google:contextualSearchVersion}ie={inputEncoding}

锚点

使用
<a href="#xxx">使用</a>
定义
<a name="xxx">定义</a>

锚点

图片 音乐 视频

Hexo 博客添加图片、音乐、视频

图片语法： ![text](url)

代码：

1
2
3
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
	src="https://music.163.com/outchain/player?type=2&id=25706282&auto=0&height=66">
</iframe>

效果：

居中代码：

1
2
3
4
5
<center> 
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
	src="https://music.163.com/outchain/player?type=2&id=25706282&auto=0&height=66">
</iframe>  	
</center>

居中效果：(设置失败)



Idina Menze 和 Caleb Hyles 激情对唱 Let It Go： 

1
2
3
4
5
<iframe 
	height=498 width=510 
	src="http://player.youku.com/embed/XNjcyMDU4Njg0" 
	frameborder=0 allowfullscreen>
</iframe>

效果：
Idina Menze 和 Caleb Hyles 激情对唱 Let It Go：

采用 https 协议

域名绑定（失败告终）

四大一级免费域名： tk cf ml ga

步骤：

域名查询可用

域名注册
个人网站添加 CNAME 文件或其他类型，内容是域名，注意文件无扩展名
域名解析商网站添加待解析的域名（即域名注册商处指定域名解析地址）
域名注册商处修改域名地址为域名解析商提供的解析名

全球递归DNS服务器刷新等待 24h ~ 72h 生效

域名解析流向： 域名注册商–> 域名解析商–> 个人域名

Freenom
十大免费DNS域名解析服务
参考
DNSPod/Tencent DNS 解析
DNS 原理

经实践：阿里云解析 cf 域名失败，有的网页甚至不识别 cf 域名，不明白具体的是怎么回事，有说 freenom 不支持第三方解析的，未知。

错误警告

warning: LF will be replaced by CRLF in XXXXXXXXXXXXXX.的警告。
git config --global core.autocrlf false

unix/Linux/mac/windows 不同系统对应回车、换行的定义不一样，Git 存储时，有针对于 不同平台间的转换，是某种操作导致了这种转换被开启，与二进制存储时是否可逆有关系，具体的不是十分明白。

全面教程
格子林ll 简书

自动构建

安装和设置部分：
ruby -v # ruby 2.2.6p396 (2016-11-15 revision 56800) [x64-mingw32]
gem install travis -v 1.8.8 –no-rdoc –no-ri
travis version # 1.8.8 –> travis is ok

设置 Travis CI Hook 的 github name 和 travis token

部署： 待进行……

持续集成
Ruby
Windows Ruby

坚持原创技术分享，您的支持将鼓励我继续创作！