Hexo 个人博客搭建 --持续优化

Hexo是一个开源的静态博客生成器，用node.js开发，作者是台湾大学生tommy351。

Hexo 安装

Git 安装

git下载地址

Node.js 安装

Node.js下载地址

Hexo 安装

Hexo 官方文档

npm install -g hexo-cli

创建项目及主题安装

创建项目

具体方法参考官网 建站

安装主题

安装方法

主题github地址: https://github.com/litten/hexo-theme-yilia

cd 项目
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
修改 根目录的 _config.yml 文件
    theme: yilia

其他主题介绍

其他hexo主题

插件选择安装

更多插件介绍

更多hexo插件

持续优化

设置Yilia菜单

打开 themes/_config.yml
# Header

menu:
  主页: /
  阅读笔记: /tags/阅读笔记/
  电影观感: /tags/电影观感/
  专业知识: /tags/专业知识/
  关于更多: /aboutme
对文章设置标签tag,从而使点击按钮时。自动筛选出相应文章列表.
关于更多,可以自定义页面。

设置tags

npm install --save hexo-generator-tag  框架默认已经安装

post 文章部分设置

tag: 
  - 开发方式

设置目录

npm install --save hexo-generator-tag  框架默认已经安装

post 结构
 
  title: Hexo 个人博客搭建 --持续优化 
  data: 2017年8月17日10:00:09
  tag: 
      - 开发方式
  toc: true // 是否显示目录

RSS 设置

正确设置RSS

设置展示更多

<!--more-->

主题设置

themes/yilia/_config.yml
# 文章太长，截断按钮文字
excerpt_link: 展开全文
# 文章卡片右下角常驻链接，不需要请设置为 false
# show_all_link: '展开全文'
show_all_link: false

文章排序

文章按照更新时间排序: 项目根目录/_config.yml

index_generator:
  path: ''
  per_page: 10
  #order_by: -date
  order_by: -updated

参考：

hexo-generator-index

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

Installation

$ npm install hexo-generator-index --save

Options

index_generator:
  path: ''
  per_page: 10
  order_by: -date

• path: Root path for your blogs index page. (default = ‘’)
• per_page: Posts displayed per page. (0 = disable pagination)
• order_by: Posts order. (Order by date descending by default)

自定义打赏功能

yilia打赏功能默认是支付宝和微信支付，也可以自定义其他。

此次定义的是 thanks。仅表示谢谢

打开主题 themes/yilia/layout/article.ejs

<div class="reward-box">
<% if(theme.alipay) {%>
<div class="reward-box-item">
    <img class="reward-img" src="<%= theme.alipay%>">
    <span class="reward-type">支付宝</span>
</div>
<% } %>
<% if(theme.thanks) {%>
<div class="reward-box-item">
    <img class="reward-img" src="<%= theme.thanks%>">
    <span class="reward-type">谢谢你哦</span>
</div>
<% } %>
<% if(theme.weixin) {%>
<div class="reward-box-item">
    <img class="reward-img" src="<%= theme.weixin%>">
    <span class="reward-type">微信</span>
</div>
<% } %>
</div>

google 分析 GA 代码的添加

链接跳转

主题中添加天气

step1：找到需要安装插件的位置

step2：我使用的是 新知天气的一个扩展插件 https://www.seniverse.com/widget/get

step3：配置新知天气的展示效果，以达到自己的期望效果

step4：将生成的代码放置到想要 展示html的位置

复制下面代码粘贴到页面代码的合适位置。第一行的div为插件的容器元素，你也可以通过自定义的CSS来控制其样式和位置，但请不要手动修改其id，否则插件将无法正常使用。
<div id="tp-weather-widget"></div>
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {
    "flavor": "slim",
    "location": "WX4FBXXFKE4F",
    "geolocation": "disabled",
    "language": "zh-chs",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "uid": "U508924FF9",
    "hash": "278ad0b97e8ff0ba0e30d331e8b45478"
});
tpwidget("show");
</script>

step5：修改主题 themes/yilia/layout/_partial/left-col.ejs

实现效果：

百度和谷歌收录文章

具体内容：参考让Baidu和Google收录Hexo博客

yilia主题添加gitment评论

上传到github命令

hexo clean
hexo g
hexo d

赏

感谢对我的支持，让我们一起努力吧

谢谢你哦