hexo搭建博客
This commit is contained in:
结发受长生
parent
c9ffdece08
commit
a4b8069109
@ -80,6 +80,13 @@ pagination_dir: page
|
||||
## Themes: https://hexo.io/themes/
|
||||
theme: hexo-theme-xups
|
||||
|
||||
#----------------------------
|
||||
# 搜索
|
||||
#----------------------------
|
||||
search:
|
||||
path: search.xml
|
||||
field: all
|
||||
|
||||
# Deployment
|
||||
## Docs: https://hexo.io/docs/deployment.html
|
||||
deploy:
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 2.2、shell编程(3)-流程控制&函数
|
||||
title: 2.2、shell编程(3)-流程控制与函数
|
||||
date: 2018-5-6 00:52:22
|
||||
tags:
|
||||
- linux
|
||||
108
source/_posts/前端杂烩/Hexo搭建个人博客.md
Normal file
108
source/_posts/前端杂烩/Hexo搭建个人博客.md
Normal file
@ -0,0 +1,108 @@
|
||||
---
|
||||
title: Hexo搭建个人博客
|
||||
date: 2018-5-9 09:43:01
|
||||
tags:
|
||||
- Hexo
|
||||
categories:
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
> Hexo 是一个快速、简洁且高效的博客框架，需要nodejs环境运行
|
||||
使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可生成静态网页。
|
||||
|
||||
<!-- more -->
|
||||
### 安装nodejs
|
||||
由于hexo是使用JavaScript编写
|
||||
所以首先需要nodejs环境 , 可以在官网下载运行包, 或者下载源代码在linux下编译
|
||||
|
||||
### 安装脚手架工具与初始化
|
||||
```bash
|
||||
npm install -g hexo-cli
|
||||
hexo init my_blog
|
||||
```
|
||||
这是hexo官方提供的脚手架工具 , 可以实现快速生成一个博客模板
|
||||
其中的`_config.yml`是博客的基础配置文件
|
||||
|
||||
### 启动服务
|
||||
服务默认在4000端口启动 , 如果要修改启动端口 , 需要在`config.yml`当中添加
|
||||
```yml
|
||||
server:
|
||||
port: 6603
|
||||
compress: true
|
||||
header: true
|
||||
```
|
||||
启动服务
|
||||
```bash
|
||||
hexo server
|
||||
```
|
||||
|
||||
之后就可以用浏览器访问了
|
||||
|
||||
### 编写文章
|
||||
Hexo 有三种默认布局：post、page 和 draft，它们分别对应不同的路径
|
||||
| 布局 | 路径 |
|
||||
|-----|----|
|
||||
|post|source/_posts|
|
||||
|page|source|
|
||||
|draft|source/_drafts|
|
||||
|
||||
博客目录初始化完成之后 , 其中的source就是文章目录
|
||||
我们可以直接在其中创建文件 , `_posts`里面就是正式提交的文章
|
||||
实际访问的路径可以在_config.yml当中的`permalink`定义
|
||||
可以有下列值
|
||||
| 变量 | 描述 |
|
||||
|----|----|
|
||||
|:title|标题（小写，空格将会被替换为短杠）|
|
||||
|:year|建立的年份，比如， 2015|
|
||||
|:month|建立的月份（有前导零），比如， 04|
|
||||
|:i_month|建立的月份（无前导零），比如， 4|
|
||||
|:day|建立的日期（有前导零），比如， 07|
|
||||
|:i_day|建立的日期（无前导零），比如， 7|
|
||||
|
||||
创建一篇新文章
|
||||
```bash
|
||||
hexo new [layout] <title>
|
||||
#比如
|
||||
hexo new post 测试文章
|
||||
```
|
||||
执行之后会自动在_posts下面创建一个新文件`测试文章.md`
|
||||
> 这里的操作只是创建一个文件 , 我们当然也可以手动创建文件
|
||||
|
||||
这里实际是使用`scaffolds`里面的`post.md`模板来创建文件的
|
||||
我们可以修改这个模板的内容 , 或者创建自定义的布局模板
|
||||
|
||||
|
||||
#### 自定义页面
|
||||
可以在source当中创建一个目录作为自定义的目录
|
||||
比如创建一个about目录 , 其中写一个`index.md`文件
|
||||
实际访问的路径就是`http://localhost:4000/about/`
|
||||
|
||||
#### 图片引用
|
||||
可以把图片直接放在source下面的某个目录当中
|
||||
比如有图片`source/image/test.png`
|
||||
就可以在md文件中这样引用
|
||||
```markdown
|
||||
|
||||
```
|
||||
在实际访问的时候就能产生正确的图片访问路径
|
||||
|
||||
#### 标签与分类
|
||||
在每篇文章开头的描述信息当中 , 除了标题 日期之外 , 可以指定该文章的分类和标签 ( 注意开头不能有空行 )
|
||||
```yml
|
||||
---
|
||||
title: 测试文章
|
||||
date: 2018-5-9 09:43:01
|
||||
tags:
|
||||
- 标签1
|
||||
- 标签2
|
||||
categories:
|
||||
- 分类1
|
||||
- 子分类
|
||||
---
|
||||
```
|
||||
hexo不支持多个同级分类 , 分类当中若有多项会被处理成子分类
|
||||
|
||||
### 主题
|
||||
hexo支持自定义主题 , 官方有很多开源的主题
|
||||
可以直接放在`themes`目录下
|
||||
然后在_config.yml当中修改`theme`为对应的名称即可
|
||||
175
source/_posts/前端杂烩/Hexo站点实现站内搜索.md
Normal file
175
source/_posts/前端杂烩/Hexo站点实现站内搜索.md
Normal file
@ -0,0 +1,175 @@
|
||||
---
|
||||
title: Hexo站点实现站内搜索
|
||||
date: 2018-5-9 14:44:53
|
||||
tags:
|
||||
- Hexo
|
||||
categories:
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
在hexo博客中 , 可以添加站内文章搜索的支持
|
||||
但是需要生成所有文章的索引
|
||||
安装hexo官方提供的插件
|
||||
```bash
|
||||
npm install hexo-generator-search --save
|
||||
```
|
||||
<!-- more -->
|
||||
默认只索引post , 要索引所有文章 , 需要在_config.yml当中配置
|
||||
```yml
|
||||
search:
|
||||
path: search.xml
|
||||
field: all
|
||||
```
|
||||
|
||||
之后访问`/search.xml`就可以获取到文章的索引了
|
||||
大致是如下结构
|
||||
```xml
|
||||
<search>
|
||||
<entry>
|
||||
<title>CSS布局(4)-grid</title>
|
||||
<link href="/文章URL地址/"/>
|
||||
<url>/文章URL地址/</url>
|
||||
<content type="html">
|
||||
<![CDATA[
|
||||
<p>这里是文章内容</p>
|
||||
]]>
|
||||
</content>
|
||||
<categories>
|
||||
<category>分类1</category>
|
||||
</categories>
|
||||
<tags>
|
||||
<tag>标签1</tag>
|
||||
<tag>标签2</tag>
|
||||
</tags>
|
||||
</entry>
|
||||
...
|
||||
</search>
|
||||
```
|
||||
其中的一个entry是一篇文章的信息
|
||||
可以在JS当中使用ajax获取到这段XML文本 , 然后进行解析处理 , 从而做出站内搜索的功能
|
||||
需要注意的是content部分是html文本 , 在处理当中需要把html标签去除
|
||||
|
||||
以下是借助Vue实现的自动渲染搜索结果列表的代码
|
||||
```javascript
|
||||
(function(){
|
||||
var articleDatas = null;
|
||||
var resultDiv = null;
|
||||
new Vue({
|
||||
el: "#search-box",
|
||||
data: {
|
||||
queryText: null, //搜索的关键字文本
|
||||
searchResult: [] //搜索结果
|
||||
},
|
||||
mounted: function() {
|
||||
axios({ //调用ajax获取文章索引信息
|
||||
url: "/search.xml"
|
||||
}).then(function(response){
|
||||
var xmlDoms = null
|
||||
if(window.DOMParser) {
|
||||
var parser = new DOMParser()
|
||||
xmlDoms = parser.parseFromString(response.data, "application/xml")
|
||||
} else { // IE浏览器
|
||||
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
|
||||
xmlDoc.async = false;
|
||||
xmlDoms = xmlDoc.loadXML(response.data);
|
||||
}
|
||||
//找出所有文章的标题 正文 URL
|
||||
articleDatas = Array.prototype.map.call(xmlDoms.getElementsByTagName("entry"), function(item){
|
||||
return {
|
||||
title: item.getElementsByTagName("title")[0].innerHTML,
|
||||
content: item.getElementsByTagName("content")[0].innerHTML,
|
||||
url: item.getElementsByTagName("url")[0].innerHTML,
|
||||
}
|
||||
})
|
||||
resultDiv = document.getElementById("search-result-box")
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
queryText: function(newVal, oldVal) {
|
||||
this.searchResult.length = 0;
|
||||
// 控制搜索结果框的显示与隐藏
|
||||
if(newVal && newVal.trim() && articleDatas) {
|
||||
resultDiv.style.display = "block"
|
||||
} else {
|
||||
resultDiv.style.display = "none"
|
||||
return
|
||||
}
|
||||
//多关键字分别匹配
|
||||
var keywords = newVal.trim().toLowerCase().split(/[\s\-]+/);
|
||||
var _this = this;
|
||||
articleDatas.forEach(function(article){
|
||||
var isMatch = true;
|
||||
var title = article.title.trim().toLowerCase();
|
||||
var content = article.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
|
||||
var index_title = -1;
|
||||
var index_content = -1;
|
||||
var first_occur = -1; //关键字在正文当中第一次出现的位置
|
||||
if(title && content) {
|
||||
keywords.forEach(function(keyword, i) {
|
||||
index_title = title.indexOf(keyword);
|
||||
index_content = content.indexOf(keyword);
|
||||
if( index_title < 0 && index_content < 0 ){
|
||||
isMatch = false;
|
||||
} else {
|
||||
if (index_content < 0) {
|
||||
index_content = 0;
|
||||
}
|
||||
if (i == 0) {
|
||||
first_occur = index_content;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
if (isMatch) {
|
||||
var resultItem = {};
|
||||
resultItem.url = article.url;
|
||||
resultItem.title = article.title;
|
||||
if (first_occur >= 0) {
|
||||
// 截取关键字前后的一段文字
|
||||
var start = first_occur - 6;
|
||||
var end = first_occur + 15;
|
||||
if(start < 0){
|
||||
start = 0;
|
||||
}
|
||||
if(start == 0){
|
||||
end = 10;
|
||||
}
|
||||
if(end > content.length){
|
||||
end = content.length;
|
||||
}
|
||||
var matchContent = content.substring(start, end);
|
||||
// 高亮关键字
|
||||
keywords.forEach(function(keyword){
|
||||
var keywordReg = new RegExp(keyword, "gi");
|
||||
matchContent = matchContent.replace(keywordReg, "<strong class=\"search-keyword\">"+keyword+"</strong>");
|
||||
})
|
||||
resultItem.matchContent = matchContent
|
||||
}
|
||||
_this.searchResult.push(resultItem)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
```
|
||||
这里借助axios实现ajax请求 , 当然也可以用别的 , 或者使用原生的写法
|
||||
然后在页面的适当位置中编写搜索input与搜索结果框的html
|
||||
```html
|
||||
<div id="search-box">
|
||||
<div class="icon"><span class="icon-search"></span></div>
|
||||
<div class="input-box"><input type="text" id="search-input" v-model="queryText" placeholder="站内搜索"/></div>
|
||||
<!-- 搜索结果区 -->
|
||||
<div id="search-result-box" >
|
||||
<ul class="search-result-list" v-if="searchResult.length">
|
||||
<li v-for="(article,index) in searchResult" :key="index">
|
||||
<a :href='article.url' class='search-result-title' target='_blank'>{{article.title}}</a>
|
||||
<p class="search-result" v-html="article.matchContent"></p>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 无匹配时显示 -->
|
||||
<p class="search-result" v-else>没有搜索到任何结果</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
之后编写相应的样式就可以了
|
||||
BIN
source/images/前端杂烩/hexo_server.png
Normal file
BIN
source/images/前端杂烩/hexo_server.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@ -52,13 +52,6 @@ feed:
|
||||
content_limit_delim: ' '
|
||||
|
||||
#----------------------------
|
||||
# 搜索
|
||||
#----------------------------
|
||||
search:
|
||||
path: search.xml
|
||||
field: all
|
||||
|
||||
#----------------------------
|
||||
# Favicon
|
||||
#----------------------------
|
||||
favicon: /favicon.ico
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user