hexo设置的一些坑

题记:

在设置hexo的时候遇见了一些坑,在此记录一下,以防忘记。

themes

hightlight (代码高亮)

我用的是 Hexo-Prism-Plugin
需要在对应hexo所在文件夹中运行terminal:

npm i -S hexo-prism-plugin

需要在hexo所在文件夹的_config.yml中设置,

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'twilight'
  line_number: false    # default false
  #custom_css: 'path/to/your/custom.css'     # optional  

文档提示:

After that, check highlight option in _config.yml. Make sure that default code highlight plugin is disabled.

设置:

运行了一遍 hexo g hexo s
发现竟然不能正常高亮???

于是乎,整理了一遍_config.yml最后发现,bool类的表达都是true or false
最后更改设置:

highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace:

显示的内容整齐了但是还没有高亮!

最后在GitHub上发现需要在后加上language

并且设置_config.yml

prism: coy

ok~

导航栏按钮

主题插件错误

我想把导航栏按钮部分的按钮给替换掉,没有给出相应方法,而且我下载的主题与开发者在Github上边的ReadME文件介绍并不相同,
github.readme:

icon: # 导航栏上的图标
        github:
            use: true # 是否启用
            link: https://github.com/miccall # 点击地址
        Twitter:
            use: false
            link:
        Facebook:
            use: false
            link:
        Instagram:
            use: false
            link:

我本地的:

icon:
        github: https://github.com/miccall

只好打开chromeVSCode联合调试,最后貌似找到了设置所在:

page-gallery.ejs:

    <header id="gallery_header">
                        <h1><%- config.title %></h1>
                        <p><%-theme.Gallery.description %>    author : <a href="<%- config.root%>" style="border-bottom: none;"><%- config.author%></a></p>
                        <ul class="gallery_icons">
                    <% if(theme.Nav.icon.github.use === true) { %>
                        <li><a href="<%= theme.Nav.icon.book.link %>" class="gallery_icon fa-github"><span class="label">Github</span></a></li>
                    <% } %>
                ……
                        </ul>
    </header>

后得知在此使用了一个css样式库,很强大,名字叫 Font Awesome ,然后修改后:

    <header id="gallery_header">
                        <h1><%- config.title %></h1>
                        <p><%-theme.Gallery.description %>    author : <a href="<%- config.root%>" style="border-bottom: none;"><%- config.author%></a></p>
                        <ul class="gallery_icons">
                    <% if(theme.Nav.icon.book.use === true) { %>
                        <li><a href="<%= theme.Nav.icon.book.link %>" class="gallery_icon fa-book"><span class="label">Book</span></a></li>
                    <% } %>

                   。。。。

                        </ul>
     </header>

感觉应该是在ul中初始化了几个按钮,那么我这么设置应该可以实现需求,于是 hexo clean / hexo g / hexo s之后,报错:

Unhandled rejection TypeError: /Users/liuyonghu/Desktop/myblogs/themes/MicTheme/layout/index.ejs:11
 9|         <!-- Header 头部logo end -->
    10|         <!-- Nav 导航条 start -->
 >> 11|         <%- partial('_partial/nav' , {}, {cache: true} ) %>
    12|         <!-- Nav 导航条 end -->
    13|         <!-- Main 主要部分 start -->
    14|         <% if( (page.current === 1) && (is_home()) ) { %>

/Users/liuyonghu/Desktop/myblogs/themes/MicTheme/layout/_partial/nav.ejs:53
    51|                     <% for (var i in theme.Nav.icon) { %>
    52|                     <li>
 >> 53|                         <a title="<%= i %>" href="<%- url_for(theme.Nav.icon[i]) %>" target="_blank" rel="noopener">
    54|                             <i class="icon fa fa-<%= i %>"></i>
    55|                         </a>
    56|                     </li>

看样子是在layout/index.ejs文件和layout/_partial/nava.ejs出错了,找到文件后发现:

  <%- partial('_partial/nav' , {}, {cache: true} ) %>

此处有_partial/nav 而项目结构中恰好存在这样的层级目录,

那么问题就应该存在于此了,

打开文件找到代码如下:

<!-- icons 图标   -->
            <ul class="icons">
                    <% for (var i in theme.Nav.icon) { %>
                    <li>
                        <a title="<%= i %>" href="<%- url_for(theme.Nav.icon[i]) %>" target="_blank" rel="noopener">
                            <i class="icon fa fa-<%= i %>"></i>
                        </a>
                    </li>
                    <% } %>
            </ul>

很显然这是一个for循环,其中

<a title="<%= i %>" href="<%- url_for(theme.Nav.icon[i]) %>" 

这句话是关键,因为我的配置修改成了

    icon:
        book:
            use: true
            link: https://www.cnblogs.com/tig666666/

所以应该修改此处代码如下:

<ul class="icons">
                    <% for (var i in theme.Nav.icon) { %>
                    <li>
                        <a title="<%= i %>" href="<%- url_for(theme.Nav.icon[i].link) %>" target="_blank" rel="noopener">
                            <i class="icon fa fa-<%= i %>"></i>
                        </a>
                    </li>
                    <% } %>
            </ul>

再次在终端,启动hexo,clean -> g ->s

终端不报错,
最终修改如下:

_config.yml

 icon:
        book:
            use: true
            link: https://www.cnblogs.com/tig666666/
        git:
            use: true
            link: https://gitee.com/liuyonghu    
        weibo:
            use: true
            link: https://weibo.com/gexingyuming666666
        github:
            use: true
            link: https://github.com/liuyonghu  

page-gallery.ejs

<ul class="gallery_icons">
                    <% if(theme.Nav.icon.book.use === true) { %>
                        <li><a href="<%= theme.Nav.icon.book.link %>" class="gallery_icon fa-book"><span class="label">Book</span></a></li>
                    <% } %>
                    <% if(theme.Nav.icon.git.use === true) { %>
                        <li><a href="<%= theme.Nav.icon.git.link %>" class="gallery_icon fa-git"><span class="label">Git</span></a></li>
                    <% } %>
                    <% if(theme.Nav.icon.weibo.use === true) { %>
                        <li><a href="<%= theme.Nav.icon.weibo.link %>" class="gallery_icon fa-weibo"><span class="label">Weibo</span></a></li>
                    <% } %>

                    <% if(theme.Nav.icon.github.use === true) { %>
                        <li><a href="<%= theme.Nav.icon.github.link %>#" class="gallery_icon fa-github"><span class="label">Github</span></a></li>
                    <% } %>
</ul>

运行:

完美~

不能正确上传服务器,上传了全部项目而不是deploy文件夹

deploy文件夹中的信息被修改,删除项目分支hexo,deploy文件夹,重新生成deploy文件夹,添加项目hexo分支

front-matter 分类的顺序性

分类方法的分歧
如果您有过使用WordPress的经验,就很容易误解Hexo的分类方式。WordPress支持对一篇文章设置多个分类,而且这些分类可以是同级的,也可以是父子分类。但是Hexo不支持指定多个同级分类。下面的指定方法:
categories:

  • Diary
  • Life
    会使分类Life成为Diary的子分类,而不是并列分类。因此,有必要为您的文章选择尽可能准确的分类。

参考文档

hexo.io

本站所有文章除特殊声明外均为原创,未经允许禁止转载!
换个声音
停止播放