笔者博客源代码

号外号外!! 笔者对博客修改的源码已放到 github 上。匆匆来匆匆去你是何意?来了就上去看看呗。问君何处去?尽在不言中。“浅浅水,长悠悠,来无尽,去无休。曲曲折折向东流,山山岭岭难阻留。问伊奔腾何时歇,不到大海不回头。”实验性的加入了(坑比较多^_~):InstantClick,大家可以体验一下文章的加载速度


github地址:https://github.com/ngudream/N-Hexo-Blog

修改自 MOxFIVEyelee 主题

安装 Node.js

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

安装 hexo

sudo npm install hexo -g

插件安装

(1)安装 hexo-deployer-Git

npm install hexo-deployer-git --save

(2)字数统计插件

npm install hexo-wordcount --save

(3)用于生成搜索引擎网站地图

npm install hexo-generator-sitemap --save

(4)博客备份请参考

https://github.com/coneycode/hexo-git-backup

npm install hexo-git-backup --save

(5)右下角的站内搜索

https://github.com/androiddevelop/hexo-search

(6)左边拦的站内搜索优化

http://www.tuicool.com/articles/ZRZnErq

http://gaomf.cn/2016/10/10/为Hexo博客Yilia主题添加本地站内搜索功能/

笔者修改的 Hexo\node_modules\hexo-generator-search 下的文件 index.js、search.ejs 已附上,可以减少生成的 search.xml 文件大小。

(7)代码高亮

http://ngudream.com/2016/09/13/hexo-install-prettify/

(8)css、js、image 等压缩

http://luckykun.com/work/2016-07-10/hexo-faster.html?utm_source=tuicool&utm_medium=referral

笔者修改的 gulpfile.js 文件也已附上。

(9)博客图片文件夹,hexo new page 的时候同时在 _post 目录下生成一个同名的文件夹,这样每篇文章用到的图片就是单独放在相应的文件夹下,方便寻找、处理。

http://www.jianshu.com/p/c2ba9533088a

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

(10)优化 seo,a 标签添加 nofollow 属性

<a href="www.ooxx.com/1234.html" rel="nofollow"> 我是外部链接</a>
<a href="www.ooxx.com/1234.html" rel="external nofollow"> 我是外部链接</a>

插件已经开源: https://github.com/liuzc/hexo-autonofollow
并上传到npm: https://www.npmjs.com/package/hexo-autonofollow

npm install hexo-autonofollow --save

https://liuzhichao.com/2016/hexo-auto-nofollow.html

如果使用有问题,可以参照笔者修改的,已兼容本主题 hexo-autonofollow

(11)自動替你在網頁中所有的中文字和半形的英文、數字、符號之間插入空白

<script src="//cdn.bootcss.com/pangu/3.3.0/pangu.min.js"></script><!-- 不能异步加载,会报错 -->
<script>
 pangu.spacingPage();
</script>

https://github.com/vinta/pangu.js

(12)Hexo插件之百度主动提交链接

安装方法:

npm install hexo-baidu-url-submit --save

然后,同样在根目录下,把以下内容配置到 _config.yml 文件中:

baidu_url_submit:
 count: 3 ## 比如3,代表提交最新的三个链接
 host: www.hui-wang.info ## 在百度站长平台中注册的域名
 token: your_token ## 请注意这是您的秘钥, 请不要发布在公众仓库里!
 path: baidu_urls.txt ## 文本文档的地址, 新链接会保存在此文本文档里

其次,记得查看_config.ym文件中url的值,必须包含是百度站长平台注册的域名(一般有www), 比如:

# URL
url:http://www.hui-wang.info
root:/
permalink::year/:month/:day/:title/

最后,加入新的deployer:

deploy:
- type: baidu_url_submitter

执行 hexo deploy 的时候,新的连接就会被推送了。

返回顶部

右下角随着滚动条滑动而出现的计数,请参考:http://suninuni.com/2015/11/27/frontend/hexo/back-to-top/

网页加速(实验性)

趁快放假这两天,工作上没什么事做(其实是不想做*÷*),实验性的加入了 InstantClick,它可以大大加速你的网站响应速度。原理就是在访问者点击一个链接之前,鼠标会悬停在链接上面,这两个事件之间通常有200ms~300ms的间隔,InstantClick 利用这个时间间隔预加载页面。

因为使用 InstantClick 会带来比较多的问题,所以一直没打开这个开关,现在有时间了,偿试着解决了部分问题,但还是有比较多的bug,现在只开放了文章使用 InstantClick,左边栏的分类标签还没有使用,年前没时间修改bug了。欢迎下载试用,并填坑(•‾̑⌣‾̑•)✧˖°N-Hexo-Blog

主要修改点如下:
(1)、在进入文章页面时,要设置以下,要不文章是看不见的:

$(".article").css("opacity", "1.0");

(2)、多说评论在click2show.ejs中要主动调用

if (typeof DUOSHUO !== 'undefined'){
	DUOSHUO.EmbedThread('.ds-thread');
}

(3)、处理文章目录,要在 InstantClick change 后主动调用 toc.js 中的方法,要不然目录的显示隐藏、双击打开等都无法使用。详情见 after-footer.ejs 文件;
(4)、左边栏的搜索,要在 InstantClick change 后主动调用 main.js 中的搜索函数,即 after-footer.ejs 文件中的 leftSearch();
(5)、在文章页面,左边栏的鸟屋弹出菜单,要在 InstantClick change 后主动调用 pc.js 中的搜索函数,即 after-footer.ejs 文件中的 tipBoxFunc();
(6)、还修改了社交图标点击、不蒜子统计、复制功能 clipboard 等,具体可以参考源代码 N-Hexo-Blog
(7)、to-do:年后找时间将博客全部适配 InstantClick

部署

个人博客是同时部署在 github 和 coding,国内走的是 coding,网站的访问速度会快点。方法可以参考:
http://www.jianshu.com/p/7ad9d3cd4d6e

说明

(1)plugins 文件夹里面是放一些博客额外用到的 css、js 文件,笔者现在是放在hexo/source目录下,也可以放在 yelee 主题的 source 目录下,请自行修改资源的相对路径。

  • font 下面的是左边栏 Never Give Up Dream 往下掉
  • hint 是博客用到的提示框 css
  • prettify 是博客用到的代码高亮插件

(2)首页文章概要样式是使用的 semantic-ui,如果不喜欢可以修改y elee/layout/_partial/article.ejs 文件下面的概要div的样式

(3)404 在 pc 端笔者使用的是 iframe 加载网易的,移动端则是使用 yelee/source/publicwelfare 的加载腾讯的

(4)多说样式使用的是 yelee/source/duoshuo/shejidaren.css

个人博客

移动开发 | ngudream

感谢

再次强调本主题是在 hexo-theme-yelee 这款主题的基础上修改的,向原作者表示感谢!同时感谢各位网友提供的修改、优化方法,笔者只是搬运工。

个人使用(可以忽略)

1、压缩插件 gulp

npm install xxx --save命令安装以下插件
gulp
gulp-htmlclean
gulp-htmlmin
gulp-minify-css
gulp-uglify

2、添加 emoji 表情

cd hexo
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save
npm install markdown-it-emoji --save

3、备份插件:https://github.com/coneycode/hexo-git-backup

npm install hexo-git-backup --save

4、还原 hexo 博客

  1. 使用 git clone 拷贝仓库(默认分支为hexo);
  2. 在本地新拷贝的 hexo 文件夹下通过 Git bash 依次执行下列指令:
npm install hexo
npm install
npm install hexo-deployer-git(记得,不需要hexo init这条指令)。

5、压缩 js、css 等插件

npm install hexo-all-minifier --save

然后在 hexo 博客根目录下的 config.yml 文件中加入如下代码

html_minifier:
  enable: true
  exclude:
css_minifier:
  enable: true
  exclude:
    - '*.min.css'
js_minifier:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'
image_minifier:
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false
文章目录
  1. 1. 安装 Node.js
  2. 2. 安装 hexo
  3. 3. 插件安装
  4. 4. 返回顶部
  5. 5. 网页加速(实验性)
  6. 6. 部署
  7. 7. 说明
  8. 8. 个人博客
  9. 9. 感谢
|