diff --git a/_config.yml b/_config.yml index e980624..d1ae6cd 100644 --- a/_config.yml +++ b/_config.yml @@ -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: diff --git a/source/_posts/linux/2.2、shell编程(3)-流程控制&函数.md b/source/_posts/linux/2.2、shell编程(3)-流程控制与函数.md similarity index 98% rename from source/_posts/linux/2.2、shell编程(3)-流程控制&函数.md rename to source/_posts/linux/2.2、shell编程(3)-流程控制与函数.md index 8ea26c2..5e51434 100644 --- a/source/_posts/linux/2.2、shell编程(3)-流程控制&函数.md +++ b/source/_posts/linux/2.2、shell编程(3)-流程控制与函数.md @@ -1,5 +1,5 @@ --- -title: 2.2、shell编程(3)-流程控制&函数 +title: 2.2、shell编程(3)-流程控制与函数 date: 2018-5-6 00:52:22 tags: - linux diff --git a/source/_posts/前端杂烩/Hexo搭建个人博客.md b/source/_posts/前端杂烩/Hexo搭建个人博客.md new file mode 100644 index 0000000..11abe2c --- /dev/null +++ b/source/_posts/前端杂烩/Hexo搭建个人博客.md @@ -0,0 +1,108 @@ +--- +title: Hexo搭建个人博客 +date: 2018-5-9 09:43:01 +tags: + - Hexo +categories: + - 前端杂烩 +--- + +> Hexo 是一个快速、简洁且高效的博客框架，需要nodejs环境运行 +使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可生成静态网页。 + + +### 安装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 server](/images/前端杂烩/hexo_server.png) +之后就可以用浏览器访问了 + +### 编写文章 +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] +#比如 +hexo new post 测试文章 +``` +执行之后会自动在_posts下面创建一个新文件`测试文章.md` +> 这里的操作只是创建一个文件 , 我们当然也可以手动创建文件 + +这里实际是使用`scaffolds`里面的`post.md`模板来创建文件的 +我们可以修改这个模板的内容 , 或者创建自定义的布局模板 + + +#### 自定义页面 +可以在source当中创建一个目录作为自定义的目录 +比如创建一个about目录 , 其中写一个`index.md`文件 +实际访问的路径就是`http://localhost:4000/about/` + +#### 图片引用 +可以把图片直接放在source下面的某个目录当中 +比如有图片`source/image/test.png` +就可以在md文件中这样引用 +```markdown +![test](/images/test.png) +``` +在实际访问的时候就能产生正确的图片访问路径 + +#### 标签与分类 +在每篇文章开头的描述信息当中 , 除了标题 日期之外 , 可以指定该文章的分类和标签 ( 注意开头不能有空行 ) +```yml +--- +title: 测试文章 +date: 2018-5-9 09:43:01 +tags: + - 标签1 + - 标签2 +categories: + - 分类1 + - 子分类 +--- +``` +hexo不支持多个同级分类 , 分类当中若有多项会被处理成子分类 + +### 主题 +hexo支持自定义主题 , 官方有很多开源的主题 +可以直接放在`themes`目录下 +然后在_config.yml当中修改`theme`为对应的名称即可 \ No newline at end of file diff --git a/source/_posts/前端杂烩/Hexo站点实现站内搜索.md b/source/_posts/前端杂烩/Hexo站点实现站内搜索.md new file mode 100644 index 0000000..3298419 --- /dev/null +++ b/source/_posts/前端杂烩/Hexo站点实现站内搜索.md @@ -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 + + /文章URL地址/ + + 这里是文章内容

+ ]]> + + + 分类1 + + + 标签1 + 标签2 + + + ... + +``` +其中的一个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, ""+keyword+""); + }) + resultItem.matchContent = matchContent + } + _this.searchResult.push(resultItem) + } + }) + } + } +}) +})() +``` +这里借助axios实现ajax请求 , 当然也可以用别的 , 或者使用原生的写法 +然后在页面的适当位置中编写搜索input与搜索结果框的html +```html + +``` +之后编写相应的样式就可以了 diff --git a/source/images/前端杂烩/hexo_server.png b/source/images/前端杂烩/hexo_server.png new file mode 100644 index 0000000..283ca65 Binary files /dev/null and b/source/images/前端杂烩/hexo_server.png differ diff --git a/themes/hexo-theme-xups/_config.yml b/themes/hexo-theme-xups/_config.yml index d1b4fb1..ea17c53 100644 --- a/themes/hexo-theme-xups/_config.yml +++ b/themes/hexo-theme-xups/_config.yml @@ -52,13 +52,6 @@ feed: content_limit_delim: ' ' #---------------------------- -# 搜索 -#---------------------------- -search: - path: search.xml - field: all - - #---------------------------- # Favicon #---------------------------- favicon: /favicon.ico