hexo搭建个人博客的问题记录

字数： 3.7k字   |    阅读时长： 18min  |   阅读量： 次

相关链接： Hexo、 documentation、 troubleshooting、GitHub
提示： 该文章较长，可以通过 ctrl + F 搜索想查找的问题或者通过小目录查看

快速开始

创建一个文章

1
$ hexo new "My New Post"

More info: Writing

运行服务器

1
$ hexo server

More info: Server

更新静态文件

1
$ hexo generate

More info: Generating

发布到远程服务器

1
$ hexo deploy

More info: Deployment

问题

1. 如何配置好用户名称？ 用户头像？

作者使用了 yilia 主题，原本以为在 hexo 项目的 _config.yml 就可配置，但是无效，需要在 themes/yilia/_config.yml 中配置。

  1. subnav 中可能出现没有的图标，比如 csdn，此时需要自己到 css 文件中添加（主要找到 main.xxx.css), 按照该主题已经配置的 icon-segmentfault 为例，进行添加。
    icon-csdn。
  2. 图片文件存放在 themes/yilia/source/img/ 目录下面。
  3. 示例配置如下： 
    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
    # Header
    menu:
        主页: /
        所有文章: /archives
        # 随笔: /tags/随笔/

    author: 娴娴子

    # SubNav
    subnav:
        github: "https://github.com/111111111"
        csdn: "https://blog.csdn.net/111111111?spm=11111111"
        mail: "111111111@qq.com"
        weixin: /img/weixin.jpg
        # weibo: "#"

    rss: /atom.xml

    # 打赏
    alipay: /img/alipay.png
    # 微信二维码图片地址
    weixin: /img/weixinpay.png

    # 目录
    # 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
    toc: 2

    favicon: /img/header.png

    #你的头像url
    avatar: /img/header.png

2. 搭建完 Hexo + github 后，编写了第一个 .md，但是发现本项目没有上传库，此代码无法同步编辑？

github 再搞个库，上传代码，同步代码

3. 文章点击进入，图片显示不出来？

  1. 在 hexo 的项目 _config.yml 中 post_asset_folder 改成 true，该项设置好后，在运行 hexo new "文章名" 时候，会创建一个相应名称的文件夹，图片文件可放到此处。
  2. npm install --save https://github.com/CodeFalling/hexo-asset-image.git，本人安装了比较久，主要是 github 网站 ping 不上
  3. 将图片和文件夹名称改成 英文+字母，引用即可。

4. 预览时怎么切断 md 文章内容，点击展示更多才显示？

md 文件中加入 <!-- more --> 即可，如果不想要展示 more>> , 可以到 themes/yilia/layout/_partial/article.ejs 中找到 <a class="article-more-a" 这样的标签，修改为：

1
<a class="article-more-a" style="display: none;" href="<%- url_for(post.path) %>#more">

5. 怎么删除文章？

直接到 source/_posts/ 下面删除不想要的md文件，运行 hexo g & hexo d 即可

6. md 站内文章怎么相互引用？

通过 {% post_link 文章文件名（不要后缀） 文章标题（可选） %},比如：{% post_link First-Three.js 第一个 Three.js 程序！ %}

7. 怎么进行站内文章分类？

首先，上效果：
效果

  1. hexo new page "categories"
  2. 在 catagories/index.md 下：
    1
    2
    3
    4
    5
    6
    7
    ---
     title: 文章分类
     date: 2021-08-31 10:39:41
     type: "categories"
     layout: "categories"
     comments: false
    ---
  3. 在yilia 主题下面 _config.yml 配置 menu ：
    1
    分类: /categories
  4. 修改 yilia 主题文件和样式配置，source/main.xxxx.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
    .category-all-page {
        margin: 30px 40px 30px 40px;
        position: relative;
        min-height: 70vh;
    }

    .category-all-page h2 {
        margin: 20px 0;
    }

    .category-all-page .category-all-title {
        text-align: center;
    }

    .category-all-page .category-all {
        margin-top: 20px;
    }

    .category-all-page .category-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .category-all-page .category-list-item-list-item {
        margin: 10px 15px;
    }

    .category-all-page .category-list-item-list-count {
        color: grey;
    }

    .category-all-page .category-list-item-list-count:before {
        display: inline;
        content: " (";
    }

    .category-all-page .category-list-item-list-count:after {
        display: inline;
        content: ") ";
    }

    .category-all-page .category-list-item {
        margin: 10px 10px;
    }

    .category-all-page .category-list-count {
        color: grey;
    }

    .category-all-page .category-list-count:before {
        display: inline;
        content: " (";
    }

    .category-all-page .category-list-count:after {
        display: inline;
        content: ") ";
    }

    .category-all-page .category-list-child {
        padding-left: 10px;
    }
    在 yilia/layout 下面新建文件 categories.ejs, 然后添加以下文本： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <article class="article article-type-post show">
        <header class="article-header" style="border-bottom: 1px solid #ccc">
            <h1 class="article-title" itemprop="name">
                <%= page.title %>
            </h1>
        </header>

        <% if (site.categories.length){ %>
            <div class="category-all-page">
                <h2>共计&nbsp;
                    <%= site.categories.length %>&nbsp;个分类</h2>
                <%- list_categories(site.categories, {
            show_count: true,
            class: 'category-list-item',
            style: 'list',
            depth: 2,
            separator: ''
        }) %>
            </div>
            <% } %>
    </article>
  5. hexo clean & hexo g & hexo s，大功告成。
  6. 发现点击小标签类似的分类时候导航多一个 / ，到 yilia/layout 中的模板引擎中寻找，在 yilia/layout/_partial/post/category.ejs 中 a 标签 href 属性的多余的 / 删除即可。

8. 怎么显示文章小目录？

主题下面配置文件 _config.yml 中 toc: 2 即可。

9. 不知道咋弄的，部署之后本地访问 Cannot GET / ??

出现 Cannot GET /xxx 说明文件没找到，hexo server 返回了一个 404 错误。

  1. 检查public 目录下面 index.html 是否存在
  2. 如果 index.html 不存在，依次执行 npm install, hexo clean, hexo generate，这个时候应该可以看到 index.html, 访问即可。

10. 配置 tags ？

请查看 问题7，其中 .ejs (模板文件) 和 .css (样式) 可以自己定义，本人使用如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<article class="article article-type-post show">
  <header class="article-header" style="border-bottom: 1px solid #ccc">
    <h1 class="article-title" itemprop="name">
      <%= page.title %>
    </h1>
  </header>
  <% if (site.tags.length){ %>
  <div class="tag-cloud">
    <h2 class="tag-cloud-subtitle">
      总计：
      <%- site.tags.length %>
    </h2>
    <div class="tag-cloud-tags">
      <%- tagcloud({
            min_font: 16,
            max_font: 30,
            amount: 200
            }) %>
    </div>
  </div>
  <% } %>
</article>
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

.tag-cloud {
  text-align: left;
  background-color: #fff;
  padding: 30px 40px 30px 40px;
}

.tag-cloud a {
  display: inline-block;
  margin: 10px;
}

.tag-cloud-subtitle {
  margin-bottom: 20px;
}

.tag-cloud-tags {
  margin-top: 15px;
}

.tag-cloud-tags a {
  display: inline-block;
  text-decoration: none;
  font-weight: normal;
  font-size: 16px;
  color: #191919;
  line-height: normal;
  padding: 5px 5px 5px 10px;
  position: relative;
  border-radius: 0 5px 5px 0;
  border: 1px solid #ccc;
  font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
}

.tag-cloud-tags a:hover {
  opacity: 0.8;
  background-color: #ccc;
}

另外，可能点击文章的标签没有跳转，修改 yilia/layout/_partial/post/tag.ejs 中 a 标签的 href 属性为 <%= config.root %><%= tag.path %> , 运行命令npm i hexo-generator-json-content --save, 在项目的 _config.yml 中配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

11. 配置 gitalk 评论？

  1. 创建一个 OAuth App ： https://github.com/settings/applications/new
    新建一个 OAuth App
    新建完成之后会跳转到如下页面，可以看到 clientID , 需要新建一个 client secrets，复制保存下来
    OAuth App 的详情页面
    这个页面底部可以修改相关的 Homepage URL 和 Authorization callback URL，如果之后报错可以试着修改修改这两个值。

  2. 在 yilia/layout/_partial/post/ 下面新建 gitalk.ejs: 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div id="gitalk-container" style="padding: 0px 30px 0px 30px;"></div>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
    <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
    <script type="text/javascript">
      var gitalk = new Gitalk({
        clientID: '<%=theme.gitalk.ClientID%>',
        clientSecret: '<%=theme.gitalk.ClientSecret%>',
        repo: '<%=theme.gitalk.repo%>',
        owner: '<%=theme.gitalk.githubID%>',
        admin: ['<%=theme.gitalk.adminUser%>'],
        id: md5(location.pathname),
        distractionFreeMode: '<%=theme.gitalk.distractionFreeMode%>'
      })
      gitalk.render('gitalk-container')

    </script>

    其中变量需要在 yilia 的配置文件 _config.yml 中添加

  3. yilia/layout/_partial/article.ejs 最后一行 <% } %> 之前插入下面代码： 

    1
    2
    3
    4
    5
    6
    7
    <% if(theme.gitalk.enable){ %>
      <%- partial('post/gitalk', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
      }) %>
    <% } %>

  4. 配置 yilia 下面的 _config.yml,加入以下代码： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    #6. Gitalk
    gitalk:
      enable:  true  
      githubID:  xxxx  #自己的 github 名称   
      repo:  blog_comments  #评论库的地址名称
      ClientID:  app_ClientID   #第一个步骤存下来的 ClientID
      ClientSecret:  app_ClientSecret   #第一个步骤存下来的 ClientSecret
      adminUser:  xxxx   #自己的 github 名称
      distractionFreeMode: true

    其中评论库的地址名称这里本人改了几回，看网上有的说可以用部署博客的仓库，本人测试了之前创建的两个非空仓库，最后也不晓得是第一步中配置的 Url 的问题还是这边评论仓库找不到的问题，反正报的错是 Not Found（见下图），
    Error: not Found
    主要问题就是仓库的 issues 接口返回 404，所以最后保险起见新建了一个 public 的空仓库 blog_comments，新建好之后需要确保 issues 功能打开了, 到仓库的 settings 下面查看，
    blog_comments

  5. 以上都配置好后，本地部署可以看到如下图：
    github 登录
    点击使用 github 登录按钮授权即可。

  6. 第五步的时候即可部署查看，hexo cl & hexo g & hexo d
    如果还有问题，请仔细查看 第四步中配置的评论仓库地址 和 第一步中 Homepage URL 和 Authorization callback URL，可以尝试修改，本人就是不停修改之后才可以的 (一把心酸┳＿┳, 开心的是搞好啦，嘿嘿)，评论一个，见下图：
    效果图
    查看 blog_comments仓库的 issues 页面：
    仓库 issues

12. 添加字数统计？

  1. 安装 hexo-wordcount: npm install --save-dev hexo-wordcount
  2. yilia/layout/_partial/left-col.ejs 中添加： 
    1
    <nav class="header-other"> <span class="post-count">文章/字数:<%=site.posts.length%>/<%= totalcount(site, '0,0.0a') %></span></nav>
    样式自行在 css 中设置，效果如图：
    全站文章字数统计
  3. yilia/layout/_partial/article.ejs 中添加： 
    1
    2
    3
    4
    5
    <div class="post-count">
        字数：
        <%= wordcount(post.content) %>字 | 预计阅读时长：
            <%= min2read(post.content) %>分钟
    </div>
    效果如图：
    单个文章字数统计

13. 利用不蒜子显示阅读量、站点访问数？

  1. 引入不蒜子 js， 在 yilia/layout/_partial/footer.ejs 中加入：
    1
    2
    3
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
    </script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">
    在 .foot-right 下面加入：
    1
    <i class="fa fa-eye" aria-hidden="true"></i> : <span id="busuanzi_value_site_pv"></span> | <i class="fa fa-user" aria-hidden="true"></i>: <span id="busuanzi_value_site_uv"></span>
    效果如下：
  2. 在 yilia/layout/_partial/article.ejs 中 .article-header 加入： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <% if(!index) { %>
      <div class="post-count">
        <i class="fa fa-book" aria-hidden="true"></i> 字数：
        <%= wordcount(post.content) %>字&nbsp;&nbsp; | &nbsp;&nbsp;<i class="fa fa-hourglass-start" aria-hidden="true"></i>
        阅读时长：
        <%= min2read(post.content) %>min&nbsp; | &nbsp;<i class="fa fa-user" aria-hidden="true"></i> 阅读量：
        <span id="busuanzi_value_page_pv"><i class="fa fa-spinner fa-spin"></i></span> 次
      </div>
      <% } %>
    效果如下：

    14. 配置个性签名或者激励语

    相信通过以上的几次操作之后，都知道了基本修改哪里的步骤，yilia 这里用了 ejs 的模板引擎，ejs 主要是将 json 配置编译渲染到编写好的模板引擎上，这里修改样式到 mian.xxx.css 中，相关的 html 结构修改在 ejs 文件中，我们新建的 md 文档，指定 layout 就是指定的某个 ejs 文件模板。
    打开 left-col.ejs 文件，看到 theme.subtitle 是 对应的显示结构，在 主题 yilia 下面的 _config.yml 中配置即可。 
    1
    2
    #激励语
    subtitle: 瞄准方向！朝着那里奔去~

15. 想要把编写的代码传到 github 仓库上，但是发现 yilia 主题中文件并没有上传？

搞了快一天时间，总是遇到 github push 的问题，
不停地 git config --global http.sslVerify "false" ,但是没有用了，虽然themes 下面的 Yilia 文件夹文件上传不上去，但是 复制了一个 yilia_，上传完好，
然后想了想，将项目中的主题配置 改成了 yilia_ ，哈哈哈哈哈，可以！！！！

16. yilia 主题微信分享异常，二维码出不来？

将 share.ejs 中 //pan.baidu.com/share/qrcode?url= 改成 //api.qrserver.com/v1/create-qr-code/?size=150x150&data=

17. 设置版权声明

  • 步骤1：yilia 主题中
    在 layout/_partial/post/declare.ejs 中添加：
    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
    <!-- 《添加版权声明 -->
    <!--添加版权声明https://github.com/JoeyBling/hexo-theme-yilia-plus/commit/c1215e132f6d5621c5fea83d3c4f7ccbcca074a3-->
    <%
      var sUrl = url.replace(/index\.html$/, '');
      sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
    %>

    <!-- #版权基础设定：0-关闭声明； 1-文章对应的md文件里有declare: true属性，才有版权声明； 2-所有文章均有版权声明 -->
    <% if ((theme.declare.declare_type === 2 || (theme.declare.declare_type === 1 && post.declare)) && !index){ %>
      <div class="declare">
        <strong class="author">本文作者：</strong>
        <% if(config.author != undefined){ %>
          <%= config.author%>
        <% }else{%>
          <font color="red">请在博客根目录“_config.yml”中填入正确的“author”</font>
        <%}%>
        <br>
        <strong class="create-time">发布时间：</strong>
        <%- date(post.date, 'YYYY-MM-DD') %>
        <br>
        <strong class="update-time">最后更新：</strong>
        <%- date(post.updated, 'YYYY-MM-DD') %>
        <br>
        <strong class="article-titles">本文标题：</strong>
        <a href="<%= config.url %>/<%= post.path %>" title="<%= post.title %>" target="_blank"><%= post.title %></a>
        <br>
        <strong class="article-url">本文链接：</strong>
        <a href="<%= config.url %>/<%= post.path %>" title="<%= post.title %>" target="_blank"><%= config.url %>/<%= post.path %></a>
        <br>
        <strong class="copyright">版权声明：</strong>
        本作品采用
        <a rel="license" href="<%= theme.declare.licensee_url%>" title="<%= theme.declare.licensee_alias %>"><%= theme.declare.licensee_name%></a>
        许可协议进行许可。转载请注明出处！
        <% if(theme.declare.licensee_img != undefined){ %>
          <br>
          <a rel="license" href="<%= theme.declare.licensee_url%>"><img alt="知识共享许可协议" style="border-width:0" src="<%= theme.declare.licensee_img%>"/></a>
        <% } %>
      </div>
    <% } else {%>
      <div class="declare" hidden="hidden"></div>
    <% } %>
    <!-- 添加版权声明》 -->
    在 layout/_partial/article.ejs 中设置：
    1
    2
    3
    4
    5
    6
    7
    <%- post.content %>
      <% } %>
    <!-- 《添加版权声明 -->
    <% if(theme.declare){%>
        <%- partial('post/declare') %>
    <% } %>
    <!-- 添加版权声明》 -->
    css 添加：
    1
    2
    3
    4
    5
    6
    7
    /* 版权声明 */
    .declare {
        background-color: #eaeaea;
        margin-top: 2em;
        border-left: 3px solid #ff1700;
        padding: .5em 1em;
    }
  • 步骤2：在 md 的文章最上面的设置里面配置 declare: true

18. 提供本地下载功能

比如需要给用户下载 jquery.js 文件。

  • 步骤1 : 将文件放到 /source/_post/博客文件夹/jquery.js
  • 步骤2 ：md 文件中直接编写 -> [点击下载](jquery.js)
本文作者： jeneen
发布时间： 2021-08-01
最后更新： 2023-05-09
本文标题： hexo搭建个人博客的问题记录
本文链接： https://zx1001011.github.io/2021/08/01/hello-world/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！
知识共享许可协议
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

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>谢谢大家