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