Hexo折腾记--小白修改新主题

UPDATE 2019.5.28
很差意思我又换了个新主题ARIA啦。。。这回没有我的定制了

前言

若是您曾经来过个人博客,就会发现个人我的博客(https://rye-catcher.github.io/)，抛弃了Next主题换了个更简洁的主题,这个主题叫BlueLake,基于Hexo-Maupassant主题定制,您若是感兴趣能够到这里了解详情:https://github.com/chaooo/hexo-theme-BlueLake

可是为了让这个主题适应一个OIer的做风,我0前端经验只能靠F12和网上博客与问答以及丰富的瞎搞经验魔改了一些配置,在此作一些记录,可能有些幼稚请谅解,以便对这个主题一样感兴趣但不知道从何下手的OIer或其余人能改出本身想要的效果.

开启本地搜索(我的认为这个json本地搜索很是好用)等github文档里已经有的操做就再也不赘述了，这里假设您已经有了Hexo搭建博客经验,以及更改基本配置的姿式水平,若是您没有,建议您能够先按照网上一大堆Next入门教程搭建一个Next主题的博客

然而一开始不当心npm了一些奇奇怪怪的插件(多是jade版本不兼容)致使博客崩了,因而重装了一遍,续了很多时间,所以建议除非你足够大佬知道本身在作什么,魔改博客前务必保留备份

配置Mathjax

这个主题有个比较鬼畜的地方就是它自己是在layout/_partial中是有Mathjax文件的,可是并无在配置中加载相关配置,因而我与Maupassant对比文件,同时感谢一位大佬的博客:http://wudaijun.com/2017/12/hexo-with-mathjax/,成功让博文渲染Mathjax

首先我在BlueLake目录_config配置文件下加入这段代码,来开启Mathjax

mathjax:
  enable: true
  per_page: true
  cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML

结果并无发生什么,而后在博客指引下更改_partial/after_footer.jade,发现并无问题,有

if page.mathjax
  include mathjax.jade

而后与Maupassant主题文件夹对比,发现layout/Index.jade中少了一句话,在include _partial/paginator下加一句include _partial/mathjax就行了,可是jade对缩进极为严格,必定要与前面一句话的缩进一致

而后hexo clean ,hexo g,hexo s,就发现已经渲染了数学公式了

建立新页面

像以前的Next主题下博客同样,我仍是保留了留言板,结果留言板加载出来竟然和"关于"页面效果同样也加载了个人我的信息?!这个看起来很别扭,我研究了layout/page.jade以后想吐槽这个做者真是偷懒,直接把每一个类型为page的界面都加载了我的信息,就是这些:

.author-page
        a.photo(href="javascript:;")
          img(src='#{theme.about.photo_url}')
        .author
          p
            i.fa.fa-user name：
            | #{config.author}
          each item in theme.about.items
            p
              i(class="fa fa-" + item.label) #{item.label}：
              a(href=item.url,target="_blank")= item.title

咋搞呢,咱们在layout目录下再创立一个jade文件page_233.jade或其余名字的玩意,把page.jade中的代码复制进去,而后去掉上述关于我的信息的代码就好了,注意缩进

而后把新页面(e.g 留言版)的front-matter(这是啥?https://hexo.io/zh-cn/docs/front-matter.html)

中加上layout: page_233(就是刚刚那个玩意的名字)

这时候套路操做一波后,发现那个新页面就没了做者信息了

修改代码高亮

这个主题的代码高亮真是无力吐槽,在source/css中找到了一个叫highlight.jade的玩意,感受就是配置代码高亮的,因而用F12和RGB颜色参照表魔改一番,想改为VScode那种很舒服的风格,结果虽然不尽人意,可是比以前的不知道高到哪去了

这里有一份个人配置(包括下面的背景图片和标题配置在style.css/styl中)使用方法:https://github.com/Rye-Catcher/BlueLake-OI-HighLight-Style

怎么修改呢?F12大法好,F12你以为很差的地方,能够直接线上修改来看看效果,而后到/source/css/highlight.styl和/public/css/highlight.css中运用耐心和ctrl+F5找到对应的代码进行修改

颜色编码对照:https://www.114la.com/other/rgb.htm

背景图片设置

感受背景并非很好看,修改后尺寸感人并且不会随屏幕滚动,咋办?仍是F12，找到背景配置是在/source/css/style.styl中,经过F12中的信息ctrl+F5找到background相关代码,修改便可

修改哪些参数?参考了这篇博客https://blog.csdn.net/m0_38099607/article/details/71122165

在style.styl找到这么一大段话:

body
  font-family: "Source Code Pro", Tahoma, "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei Light", "Microsoft YaHei", "Source Han Sans CN", "WenQuanYi Micro Hei", Arial, sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  font-size: 14px
  color: #333
  width:100%
  height:100%
  background: #D8E2EB url(../img/bg.jpg) no-repeat
  background-attachment: fixed           //这里在你的文件中应该是没有的
  background-size: 100%

实际上你把下面background部分改为上述代码这样就行了

注意别忘了在public/css/sytle.css中也要修改

若是你要我现成的(和上面连接同样):https://github.com/Rye-Catcher/BlueLake-OI-HighLight-Style

LOGO字体设置

一开始LOGO字体(也就是左上方你大写的名字)默认是宋体,感受有点老气,怎么修改呢?F12

发现仍是在style.styl中

ctrl+F5找到LOGO,就是这么一大段话:

#logo
  font: bold 42px/1.2 "Comic Sans MS"//"宋体"
  white-space nowrap
  color: #FFF
  text-shadow: 1px 3px 6px #113f6e

而后像我那么改就行了(注意public/css/style.css中也要改),固然你也能够换成你喜欢的字体

若是你要想我现成的:https://github.com/Rye-Catcher/BlueLake-OI-HighLight-Style

本地搜索配置

你会发现默认的本地搜索是会把你的关键字放到文章内容去匹配的,这样结果会很是多,若是咱们只但愿匹配标题和标签的话,在主文件夹(不是主题内)_config文件中本地搜索配置(若是你没有说明你还没配置,看BlueLake文档)改为像我这样就行了

#self-search
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  //标签

后记

原本想搞个像Next主题同样的标签页,可是我对前端一无所知,不知道哪位大佬可来帮我QAQ

准备pull request