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