基于windows10-hexo-github搭建个人博客(4)

阅读数:0次

安装nvm

https://github.com/coreybutler/nvm-windows/releases
https://github.com/coreybutler/nvm-windows

安装npm

https://blog.csdn.net/qq_31594665/article/details/135750276

查看已经安装库
npm list --depth 0

git

https://gist.github.com/laispace/666dd7b27e9116faece6

其它主题

https://www.cnblogs.com/v1coder/p/16368938.html

安装icarus【建议直接新安装+迁移博客】

https://github.com/ppoffice/hexo-theme-icarus
https://baldstrong.github.io/2022/02/21/hexo使用icarus主题/
https://github.com/ppoffice/hexo-theme-icarus/discussions/1091
https://github.com/npm/cli/releases/tag/v6.14.18
https://github.com/ppoffice/hexo-theme-icarus/discussions/1091
https://blog.csdn.net/chengliang666/article/details/119572250
https://blog.csdn.net/Desiy/article/details/107172844
https://github.com/ppoffice/hexo-theme-icarus/releases

card

https://blog.csdn.net/gitblog_00288/article/details/144237534

hexo重要文件介绍

1、search.xml 【hexo-generator-search】生成的索引文件, 通过http://localhost:4000/search.xml可以访问
位置：blog\public\search.xml
生成的检索内容

2、content.json 【hexo-generator-json-content】生成的索引文件
位置：blog\public\content.json
用于检索的文件

3、silder
源码：blog\themes\yilia\source-src\js\slider.js
编译后：blog\themes\yilia\source\slider.e37972.js
前端：blog\themes\yilia\layout_partial\tools.ejs

4、blog配置：blog_config.yml

5、yilia配置：blog\themes\yilia_config.yml
smart_menu:
innerArchive: ‘search’ #kzy yilia自带的search

yilia 搜索【亲测ok】

  • 逻辑：
    1、blog\themes\yilia_config.yml 开启text, 让content.json存储text字段
1
2
jsonContent:
    text: true

2、blog\public\content.json 博客内容会缓存在这
3、修改
3.1 blog\themes\yilia\source-src\js\slider.js 【修改源码，没用】
3.2 blog\themes\yilia\source\slider.e37972.js 【修改编译后的代码，有用】

1
2
3
var r=!1;e.title.toLowerCase().indexOf(t)>-1&&(r=!0);
修改为
var r=!1;e.title.toLowerCase().indexOf(t)>-1&&(r=!0);e.text.toLowerCase().indexOf(t)>-1&&(r=!0);

search方法一【亲测不ok，搜索没反应】

0、参考：
https://yansheng836.github.io/article/915f21c1.html
https://github.com/barretlee/hexo-search-plugin-snippets
https://waxadesign.com/playground/web/hexo-local-search/
1、安装hexo-generator-search，生成search.xml索引

1
npm install hexo-generator-search --save

2、配置全局_config.yml 【不配置也行】

1
2
3
4
5
_config.yml添加
search:  
  path: search.xml  
  field: post  /all/page
  content: true

3、layout添加搜索框
在blog\themes\yilia\layout\layout.ejs的

’后面添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="page-header" style="">
    <script type="text/javascript" src="/js/search.js"></script>
    <span id="local-search" class="local-search local-search-plugin" style="">
      <input type="search" placeholder="站内搜索" id="local-search-input" class="local-search-input-cls" style="">
      <i id="local-search-icon-search" class="icon" aria-hidden="true" title="站内搜索">🔍</i>
      <div id="local-search-result" class="local-search-result-cls"></div>
    </span>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        if ($('.local-search').size()) {
          $.getScript('/js/search.js', function() {
            searchFunc("/search.xml", 'local-search-input', 'local-search-result');
          });
        }
    </script>
</div>

4、添加引入样式：
4.1、blog\themes\yilia\source下新建样式文件search.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
.local-search {
    position: absolute;
    text-align: left;
    display:inline-block;
    margin-bottom: 0px;
    right:10%;
}
.local-search-input-cls {
    width: 200px;
    /* margin: 10px 0; */
    padding: 8px 12px;
    border-radius: 4px;
    border: 2px solid #5ad1ed;
    color: #666;
    font-size: 14px
}
.local-search-input-cls::-webkit-input-placeholder {
    color: #2d2626;
}
.local-search-input-cls::-moz-input-placeholder {
    color: #2d2626;
}
.local-search-input-cls::-ms-input-placeholder {
    color: #2d2626;
}
#local-search-close {
    content:'x';
    position: absolute;
    right: 10px;
    top: 10px;
    background: #fff;
    color: #888;
    border-radius: 100%;
    line-height: 16px;
    text-align: center;
    font-size: 16px;
    font-family: consolas;
    border: 1px solid #ccc;
    display: block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-style: normal;
    font-weight: 400;
    transform: rotateZ(0);
    transition: all .3s
}
#local-search-close:hover {
    border-color: #666;
    color: #222;
    transform: rotateZ(180deg);
    transition: all .3s
}
.local-search-result-cls {
    position: absolute;
    z-index: 99;
    width: 400px;
    /* top: 50px; */
    right: -16px;
}
.local-search-result-cls .local-search-empty {
    color: #888;
    line-height: 44px;
    text-align: center;
    display: block;
    font-size: 16px;
    font-weight: 400
}
.local-search-result-cls ul {
    width: 360px;
    max-height: 450px;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 3px 4px 10px #7dc3d8;
    margin-top: 20px;
}
.local-search-result-cls ul li {
    text-align: left;
    border-bottom: 1px solid #bdb7b7;
    padding-bottom: 20px;
    margin-bottom: 20px;
    line-height: 30px;
    font-weight: 400
}
.local-search-result-cls ul li:last-child {
    border-bottom: none;
    margin-bottom: 0
}
.local-search-result-cls ul li a {
    margin-top: 20px;
    font-size: 16px;
    text-decoration:none;
    transition: all .3s
}
.local-search-result-cls ul li a:hover {
    text-decoration:underline;
}
.local-search-result-cls ul li p {
    margin-top: 10px;
    font-size: 14px;
    max-height: 124px;
    overflow: hidden
}
.local-search-result-cls ul li em.search-keyword {
    color: #e58c7c;
    font-weight:bold;
}
.local-search-plugin .local-search-input-cls {
    opacity: .6;
    width: 160px;
    transition: all .3s
}
.local-search-plugin .local-search-input-cls:hover {
    opacity: 1;
    width: 200px;
    transition: all .3s
}
.local-search-plugin .icon {
    position: relative;
    left: -30px;
    color: #999;
    cursor: pointer
}

4.2、在页面引入样式文件，在blog\themes\yilia\layout_partial\css.ejs添加如下代码：

1
<link rel="stylesheet" type="text/css" href="<%=config.root%>./search.css">

4.3、在themes\yilia\source\main.0cf68a.css，添加如下代码（为了挪位置）

1
2
3
4
5
6
7
8
9
10
11
12
/* 页面头部：站内搜索 */
.page-header {
    position: relative;
    border: 1px solid #fff;
    margin: 5px 30px 4px 30px;
    background: #fff;
    -webkit-transition: all 0.2s ease-in;
    height:45px;
    font-family: '微软雅黑';
    border-radius:5px;
    padding-left:10px;
}

5、在blog\themes\yilia\source\下新建js\search.js，添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
// A local search script with the help of hexo-generator-search
// Copyright (C) 2015 
// Joseph Pan <http://github.com/wzpan>
// Shuhao Mao <http://github.com/maoshuhao>
// This library is free software; you can redistribute it and/or modify
// it under the terms of the GNU Lesser General Public License as
// published by the Free Software Foundation; either version 2.1 of the
// License, or (at your option) any later version.
// 
// This library is distributed in the hope that it will be useful, but
// WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
// Lesser General Public License for more details.
// 
// You should have received a copy of the GNU Lesser General Public
// License along with this library; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
// 02110-1301 USA
// 

var searchFunc = function (path, search_id, content_id) {
    'use strict';
    var BTN = "<i id='local-search-close'>x</i>";
    $.ajax({
        url: path,
        dataType: "xml",
        success: function (xmlResponse) {
            // get the contents from search data
            var datas = $("entry", xmlResponse).map(function () {
                return {
                    title: $("title", this).text(),
                    content: $("content", this).text(),
                    url: $("url", this).text()
                };
            }).get();

            var $input = document.getElementById(search_id);
            var $resultContent = document.getElementById(content_id);

            $input.addEventListener('input', function () {
                var str = '<ul class=\"search-result-list\">';
                var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                $resultContent.innerHTML = "";
                if (this.value.trim().length <= 0) {
                    return;
                }
                // perform local searching
                datas.forEach(function (data) {
                    var isMatch = true;
                    var content_index = [];
                    if (!data.title || data.title.trim() === '') {
                        data.title = "Untitled";
                    }
                    var data_title = data.title.trim().toLowerCase();
                    var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
                    var data_url = data.url;
                    var index_title = -1;
                    var index_content = -1;
                    var first_occur = -1;
                    // only match artiles with not empty contents
                    if (data_content !== '') {
                        keywords.forEach(function (keyword, i) {
                            index_title = data_title.indexOf(keyword);
                            index_content = data_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;
                                }
                                // content_index.push({index_content:index_content, keyword_len:keyword_len});
                            }
                        });
                    } else {
                        isMatch = false;
                    }
                    // show search results
                    if (isMatch) {
                        str += "<li><a href='" + data_url +
                            "' class='search-result-title'>" + data_title + "</a>";
                        var content = data.content.trim().replace(/<[^>]+>/g, "");
                        if (first_occur >= 0) {
                            // cut out 100 characters
                            var start = first_occur - 20;
                            var end = first_occur + 80;

                            if (start < 0) {
                                start = 0;
                            }

                            if (start == 0) {
                                end = 100;
                            }

                            if (end > content.length) {
                                end = content.length;
                            }

                            var match_content = content.substr(start, end);

                            // highlight all keywords
                            keywords.forEach(function (keyword) {
                                var regS = new RegExp(keyword, "gi");
                                match_content = match_content.replace(regS,
                                    "<em class=\"search-keyword\">" +
                                    keyword + "</em>");
                            });

                            str += "<p class=\"search-result\">" + match_content +
                                "...</p>"
                        }
                        str += "</li>";
                    }
                });
                str += "</ul>";
                if (str.indexOf('<li>') === -1) {
                    return $resultContent.innerHTML = BTN +
                        "<ul><span class='local-search-empty'>没有找到内容，更换下搜索词试试吧~<span></ul>";
                }
                $resultContent.innerHTML = BTN + str;
            });
        }
    });
    $(document).on('click', '#local-search-close', function () {
        $('#local-search-input').val('');
        $('#local-search-result').html('');
    });
    $(document).on('focus', '#local-search', function () {
        $('#local-search-icon-search').html('❌');
        $('#local-search-icon-search').attr('id', 'local-search-icon-close');
        //console.log("66666");
    });
    $(document).on('click', '#local-search-icon-close', function () {
        $('#local-search-input').val('');
        $('#local-search-result').html('');
        $('#local-search-icon-close').html('🔍');
        $('#local-search-icon-close').attr('id', 'local-search-icon-search');
        //console.log("1111");
    });
}

第一种风格

search方式二【亲测ok】【有点丑】

1、hexo new page find
2、修改blog\source\find\index.md
type: “find”
layout: “find”
3、修改blog\themes\yilia_config.yml
find: /find
4、新建blog\themes\yilia\layout\find.ejs，添加搜索框
5、添加引入样式：
5.1、blog\themes\yilia\source下新建样式文件search.css【同第一种步骤4.1】
5.2、在页面引入样式文件，在blog\themes\yilia\layout_partial\css.ejs添加如下代码【同第一种步骤4.2】：

1
<link rel="stylesheet" type="text/css" href="<%=config.root%>./search.css">

6、在blog\themes\yilia\source\下新建js\search.js【同第一种步骤5】

第二种风格

github配置多个hexo网站

  • 本地新建项目
  • github新建项目
  • _config.yaml配置+hexo d
  • github打开项目->setting->page->修改source->出现&编辑Custom domain->访问失败->删除Custom domain->出现https://AAA.github.io/BBB/
  • github打开项目->setting->page->修改branch->出现Custom domain->访问失败->出现https://AAA.github.io/BBB/

使用matery主题

修改1、参考说明修改

https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md

  • 配置页面：categories、tags、about、contact、friends、404页面
  • 配置friends内容：
    • 博客的source/_data/friends.json
  • 代码高亮【未研究】
  • 搜索【ok】
    • 安装npm install hexo-generator-search --save
    • 博客的_config.yml修改
  • 中文链接转拼音【未研究】
  • 添加emoji表情支持【未研究】
  • 添加 RSS 订阅支持【未研究】
  • 在线聊天功能【未研究】
  • 修改网站页脚【未研究】
    • 主题的/layout/_partial/footer.ejs
  • 添加中文繁简转换【未研究】
  • 修改社交链接，修改主题的_config.yml的socialLink内容
    • 主题的/layout/_partial/social-link.ejs
  • 添加note【未研究】
  • 文章Front-matter介绍【部分研究】
    • summary: 卡片
    • top: true首页推荐区域放置文章
    • hide: true首页不出现文章
    • toc: false关闭目录
    • password: 该值必须是用 SHA256 加密后的密码【没成功】
    • cover: true表示该文章加入到首页轮播封面
    • coverImg: 表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
  • 主题颜色
    • 主题的/source/css/matery.css 搜索 .bg-color 来修改背景颜色
      /* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
      .bg-color {
      background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
      }
      #4cbf30 -> #df933c
      #0f9d58 -> #d39013
      #42b983 -> #b97b42
      #5cb85c -> #b8935c
    • 主题的/source/css/poss.css 修改目录颜色
  • 修改banner图：
    • 主题的/source/medias/banner，每天一张7张即可

修改2、修改themes/matery/_config.yaml

  • 图片位置：【ok】
    • 打赏：主题的source/medias/reward/weixin_pay.png
    • 头像：主题的source/medias/avatar.jpg
    • 个人相册myGallery: 主题的source/medias/featureimages 前3张？
    • 封面视频：
    • 文章封面图片：
      • featureImages【ok】修改文章特色图，用于轮播和封面
      • 主题的/source/medias/featureimages，24张，选哟在_config.yml做同步修改featureImages
  • 二级菜单【ok】
  • 站点运行时间【ok】
  • 首页封面轮播图的相关配置【ok】
  • 配置首页显示"梦想"的语句【ok】
  • 音乐播放器 【ok】
  • video 【未启用】
  • recommend 【未启用】
  • 第二个按钮的配置 【ok】
  • 首页banner的配置 【ok】
  • 代码块相关 【未启用】
  • reward 【ok】
  • copyright 【未启用】
  • mathjax 【未启用】
  • 文章信息 【ok】
    • 文章字数统计，要安装npm i --save hexo-wordcount
  • 点击效果 【ok】
  • 个人页面【ok】
  • 个人项目【未启用】
  • 个人技能【ok】
  • 个人相册【ok】
  • 归档-日历显示【ok】
  • 评论【未启用】
  • 右上角连接githubLink【ok】
  • 文章加密verifyPassword【未激活】:
    • 和文章front信息,password有关
  • 人数统计【？】
  • 谷歌、百度搜索【未启用】
  • 百度搜索资源平台提交链接【ok】
  • 文章封面图片【ok】
  • 转载规则【未启用】
  • 文章分享模块【ok】
  • 副标题【ok】
  • 手机二级菜单【未启用】
  • 网页预加载【ok】
  • banner每日切换【ok?】
    • enable使用banner图片,random使用featureimages图片
  • 中文繁简转换开关【未启用】
  • 网站背景图【未启用】

  • Hexo 根目录下的 _config.yml 文件
    说明：https://github.com/wzpan/hexo-generator-search
    search:
    path: search.xml
    field: post
    content: true
    template: ./search.xml

  • 找到Hexo 主题目录下的 layout/search.xml (或 layout/search.json) 文件，这是生成搜索文件的模板。
    没找到

  • hexo clean & hexo g 生成新的缓存文件

  • public\search.xml

    <link> <url> <content> <categories> <tags> 添加： <summary> <date> <img> </date></summary></tags></categories></content></url>

  • 对比themes\hexo-theme-matery\layout\category.ejs

    • img
      • 正常逻辑：找img标签，找不到就从轮播图找
      • 搜索逻辑：search.xml的文章第一个img，找不到就从轮播图找
      • 最终搜索逻辑：找img标签，找不到就从轮播图找
    • summary
      • 正常逻辑：找summary标签，没有就前120字（0字）
        • 改了不显示：<%- strip_html(post.content).substring(0, 0) %>
      • 搜索逻辑：search.xml的文章前几行
      • 最终搜索逻辑：找summary标签
    • tag、category、title、url
      • 和其它一样，提取内容
      • category
        • 正常逻辑：如果没有，则显示author
        • 搜索逻辑：只显示category， category少了链接，搜索使用span，正常使用a
        • 最终搜索逻辑：补充点击跳转
      • tag
        • 搜索逻辑：tag少了链接，搜索使用span，正常使用a
        • 最终搜索逻辑：补充点击跳转
    • updated
      • 和其它一样，提取内容, search.xml没有
      • 最终搜索逻辑：改成date

  • 修改

    • 1、修改模板 cookbook\node_modules\hexo-generator-search\templates\search.xml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    {% if post.summary and post.summary.length>0 %}
        <summary>
            {{ post.summary }}
        </summary>
      {% endif %}

      {% if post.date %}
        <date>
            {{ post.date }}
        </date>
      {% endif %}

      {% if post.img %}
        <img>
            {{ url + post.img }}
        </img>
      {% endif %}
    • 2、hexo clean & hexo g
    • 3、查看生成文件 cookbook\public\search.xml
    • 4、修改实现 cookbook\themes\hexo-theme-matery\layout\find.ejs
      • 对比：cookbook\themes\hexo-theme-matery\layout\category.ejs

  • 待完善

    • 搜索
      • 新建搜索页面 【ok】
      • 搜索实现 【ok】
      • 博文属性配置 【ok】
      • 搜索翻页【不会】
      • 长度不一致【不会】
    • 目录
      • 目录颜色 post.css修改【ok】
      • 手机目录【ok】cookbook\themes\hexo-theme-matery\layout_partial\post-detail-toc.ejs 把属性hide-on-med-and-down去掉
    • 其它
      • 去到底部 【不会】
赏

谢谢你请我吃糖果

微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家