hexo配置自己的博客站点

最近业余时间利用hexo为自己搭建一个高度自定义的个人站点,站点发布在github上,访问地址为:https://cqhaibin.github.io/。本博客简单介绍实现此站点的过程。效果图如下

 

构建此站点最初的目的主要方便自己使用本人开发的tomato time这个小工具。然后在实施的过程中加入的自己自己琢磨写的vueManager。

hexo的介绍和常用内容总结

hexo实现了通过markdown生成静态站点的能力,提供了高度定制化的能力。

 

1. hexo常用命令

命令名说明
hexo init初始化一个hexo项目
hexo server启动本web服务,用于开发阶段
hexo g生成静态网页
hexo d部署网页
hexo clean清理缓存
hexo new "postName"新建文章
hexo new page "pageName"新建页面

2. hexo模板介绍

archive.ejs归档列表页模板,归档可以按照年份+月份实现的,list_archives显示列表

模板文件名说明
layout.ejs模板的入口文件,也是整个站点的入口文件
index.ejs

首页,布局文件<%- body %>默认输出嵌入的页面

post.ejs文章详细页
page.ejs页面
archive.ejs归档列表页模板,归档可以按照年份+月份实现的,list_archives显示列表
category.ejs分类显示页
tag.ejs标签页

hexo的模板解析,以layout.ejs为入口,所有静态页面(如:文章、页面、首页、标签、归档、分类等)都会以layout.ejs为模板。所以每个页面的公共部分应该在写layout.ejs中(如页头、页脚等)。

3. hexo-asset-image

此插件实现markdown引用的本地图片,在markdown转换为html也能被正确引用。

hexo模板开发

根据上述 “hexo模板介绍”,我们可以很较为轻松的开发出自己的模板,模板文件说明

模板文件夹、配置文件说明
layout相关ejs模板信息,用于生成html时使用
script此文件夹下的.js文件,作为hexo插件 的一种扩展存在,在编译过程中起作用
source此文件下的文件或文件夹,在编译过程中会保持不变,供开发者使用
languages多语言包
_config.yml针对当前模板的配置文件,配置文件中的信息可以被ejs模板访问

说明:

1. 本示例模板使用的stylus作用css的预编译语言。

hexo插件开发

 

1. 插件需要入在node_moduels文件夹下,必须有.js和.package.json文件(也就是一个标准npm包即可).

js文件:

'use strict'
console.log('hexo-filter-list start success....');
var core = {
    findglyph: function(txt, glyph){
        var num = 0;
        while(txt.charAt(num) == glyph){
            num++;
        }
        return num;
    }
}
hexo.extend.filter.register('before_post_render',function(data){
    //正则获取标题,并赋值给data对象
    var regex = new RegExp("(#{1,6})\\s*(.?)(\\S*)", "g");
    var titles = [], tmp;
    while((tmp = regex.exec(data.content)) != null){
        var txt = tmp[0], level = core.findglyph(txt, '#');
        var val = {
            level: level,
            title: txt.substring(level).replace(/(^\s*)/g, '')
        }
        console.log(val);
        titles.push(val); 
    }
    data.headers = titles;
});

package.json文件

{
    "name": "hexo-filter-list",
    "main": "index",
    "version": "1.0.0.0"
}

注意:

1. hexo的事件监听都是有缓存的,内容不变,不会触发相应的事件。

2. 本示例的下载包中不包含node_modules,需要手动放将hexo-filter-list放在node_moduels中

3. 必须在根目录的package.json文件的依赖荐中加入hexo-filter-list包,如下

"dependencies": {
    "hexo": "^3.2.0",
    "hexo-filter-list": "^1.0.0.0",
  }

总结

本文只是hexo使用的初级探索,其中关于hexo的说明存在问题的地方希望各位朋友指正。如果你需要使用hexo,还是建议都看他的官方文档。

下载hexo-filter-list插件                下载hexo示例

转载于:https://www.cnblogs.com/cqhaibin/p/7400333.html

要为 Hexo 博客添加搜索功能,你可以使用第三方搜索引擎,如 Algolia 或 Google Custom Search。这里我们介绍如何使用 Algolia。 Algolia 是一个强大的搜索引擎,提供了易于使用的 API,可以轻松地将搜索功能添加到你的 Hexo 博客中。以下是如何为 Hexo 博客添加 Algolia 搜索的步骤: 1. 注册 Algolia 账户并创建一个应用程序。 2. 安装 Hexo Algolia 插件。 ``` npm install hexo-algolia --save ``` 3. 在博客根目录下创建一个名为 `algolia.json` 的配置文件,并填写以下内容: ``` { "applicationID": "YOUR_APP_ID", "apiKey": "YOUR_API_KEY", "indexName": "YOUR_INDEX_NAME" } ``` 将 `YOUR_APP_ID`、`YOUR_API_KEY` 和 `YOUR_INDEX_NAME` 替换为你在 Algolia 上创建的应用程序的信息。 4. 在你的 Hexo 主题中添加搜索框和搜索结果页面。 在主题的相应文件中添加以下代码: 搜索框: ```html <form class="search-form" method="get" action="/search/"> <input class="search-input" type="text" placeholder="Search" name="query"> <button class="search-submit" type="submit">Search</button> </form> ``` 搜索结果页面: ```html --- title: "Search Results" layout: "search" --- <section class="search-results"> {% for page in page.posts %} <article class="search-result"> <h2 class="search-result-title"><a href="{{ page.url }}">{{ page.title }}</a></h2> <p class="search-result-excerpt">{{ page.excerpt }}</p> </article> {% endfor %} </section> ``` 5. 重新生成站点并上传到你的服务器。 ``` hexo generate ``` 6. 同步你的博客数据到 Algolia 上。 ``` hexo algolia ``` 完成以上步骤后,你的 Hexo 博客就可以使用 Algolia 进行搜索了。当用户在搜索框中输入关键字并提交时,将会跳转到搜索结果页面,显示与关键字匹配的文章列表。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值