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
Hexo折腾记--小白修改新主题的更多相关文章
- Hexo折腾记
如果时间可以静止,我希望就停在此刻. 前言 博主之前也有折腾wordpress和jekyll可对于一个前端er来说,wordpress让人没法尽兴,因为不知道该如何添加自己的代码.而jekyll就太麻 ...
- Atom编辑器折腾记
http://blog.csdn.net/bomess/article/category/3202419/2 Atom编辑器折腾记_(1)介绍下载安装 Atom编辑器折腾记_(2)基础了解使用 Ato ...
- 开源介绍·新款简约、实用与大气的Hexo新主题:BMW
这是一个简约.大气.实用的Hexo新主题:BMW
- hexo修改Next主题的样式
Next主题默认对超链接只有下划线样式,很容易被忽略,就想着怎么修改下 主题样式是在\hexoBlog\themes\next\source\css,这里面保存了Muse,Mist和Pisces三个主 ...
- 斐讯N1折腾记
斐讯N1折腾记:运行 Linux 及优化 2018-06-23 37条评论 4,445次阅读 11人点赞 最后更新时间:2019年03月10日 咳咳咳,上篇教程教大家给斐讯 N1 降级并且刷了 ...
- 修改Coney主题之侧边栏移位
title: 修改Coney主题之侧边栏移位 date: 2014-12-15 18:09:54 categories: Hexo tags: [hexo,css] --- Coney是一个非常漂亮的 ...
- Hexo博客搭建以及Next主题美化的经验之谈
这并不是一篇博客搭建教程.内容主要包含个人对于Hexo博客搭建的心得,Next6.0主题美化的部分建议,以及摘录一些各种用于博客搭建的link. 在博客园3年6个月,确实也学到了很多,博客园也是目前为 ...
- Hexo博客Next v7.X 主题升级,美化警示录
本文转载于:Hexo博客Next v7.X 主题升级,美化警示录丨奥怪的小栈 前言 经历了好几天(懒癌晚期懒得数了)的与主题升级斗争后,我终于完成基本上完成了next主题的升级!升到了V7.3!哈哈哈 ...
- Linux下使用 github+hexo 搭建个人博客07-next主题接入搜索和站点管理
这是搭建个人博客系统系列文章的最后一篇,如果你是从第一篇一路跟下来的,那么恭喜你,即将完成整个博客网站的搭建.OK,话不多说,开始我们的收官之战. 不知你想过没有,如果我们的文章少,一眼看完整个目录, ...
随机推荐
- win10windows无法创建快捷方式 请检查磁盘
这个是因为文件没有权限造成的 打开"我的电脑",菜单栏里选择"工具"-"文件夹选项"-"查看",把里面" ...
- SQL-W3School-高级:SQL FULL JOIN 关键字
ylbtech-SQL-W3School-高级:SQL FULL JOIN 关键字 1.返回顶部 1. SQL FULL JOIN 关键字 只要其中某个表存在匹配,FULL JOIN 关键字就会返回行 ...
- kotlin异常类
kotlin中所有的错误异常类都是throwable的自雷,没各一次都能带有一个错误消息,调用堆栈,以及可选的错误原因,要抛出异常,可以使用throw表达式 throw myException(&qu ...
- Jmeter之分布式部署测试
在使用Jmeter进行性能测试时,因受单机电脑的配置限制,可能无法支持较大数量的并发,此时就需要使用Jmeter提供的分布式测试的功能. jmeter分布式测试的执行原理是选择一台作为调度机,其他机器 ...
- SyncToy
• synchronize :在这个模式下,SyncToy会使得两个文件夹完全一致,无论在哪一个文件夹中操作,对应的操作相当于都在另一个文件夹中执行了一次.(也就是我们所说的“同步”).• echo: ...
- iptables之精髓(一)
防火墙相关概念 从逻辑上讲.防火墙可以大体分为主机防火墙和网络防火墙. 主机防火墙:针对于单个主机进行防护. 网络防火墙:往往处于网络入口或边缘,针对于网络入口进行防护,服务于防火墙背后的本地局域网. ...
- 使用 mencoder 制作幻灯片
首先安装相关依赖: sudo apt-get install mencoder sudo apt-get install imagemagick 编辑 test.sh 脚本如下: #!/bin/bas ...
- JDBC获得DB2表结构并且将表中数据脱敏后转移的程序示例
完整项目地址:https://github.com/zifeiy/totomi 代码示例: import java.io.File; import java.io.FileInputStream; i ...
- unity读取灰度图生成三维地形mesh
准备灰度图 IGray.png及草地贴图 IGrass.jpg ,放入Assets下StreamingAssets文件夹中. 创建空材质,用作参数传入脚本. 脚本如下,挂载并传入材质球即可 ...
- 图像欧拉数计算 matlab实现
EUL = C - H 其中EUL表示欧拉数 C表示对象数 H表示孔洞数 欧拉数常用来识别数字: 识别数字 8 ,8 的欧拉数为 -1 ,不同于0,1,2,3,4,5,6,7,9 close all ...