由于本人想要建一个自己的博客,在网上狗刨后,敲定选择hexo来建站,由于比较喜欢简约风格的的,所以选择使用Next主题。
使用工具:
1.git
2.github
3.vscode
4.一个勇于探索的心
前置工作:
安装hexo
建议看袁既望的博客,已经很详细介绍了图和安装hexo博客和github pages如何使用了,这里就不再赘述
安装Next
首先,先确认你的文件夹里有以下几个东东:
_config.yml node_modules package-lock.json package.json scaffolds source themes
然后,你就可以开始安装了,我这里使用npm进行安装:
npm config set registry https://registry.npmmirror.com
npm install hexo-theme-next
或者:
git clone https://github.com/next-theme/hexo-theme-next themes/next
请注意:如果你使用git安装的话,以下所说的node_modules/hexo-theme-next是指themes/next文件夹
复制一份主题配置文件:
打开powershell,输入以下命令:
npm:
cp node_modules/hexo-theme-next/_config.yml _config.next.yml
git:
cp themes/next/_config.yml _config.next.yml
以后说的主题配置文件就是复制下来的_config.next.yml文件了
请记住!除非要求更改node_moudle/hexo-theme-next的_config.yml文件,一律说的主题配置文件指的是_config.next.yml!!!!(血泪教训)
再补充一点,说的站点配置文件就是根目录下的_config.yml文件
接下来我们就可以搞事情了
配置主题:
修改站点配置文件,找到如下代码:
theme: landscape
将lanscape改为next即可
修改语言:
修改主题配置文件,找到如下代码:
author:
language:
timezone:
在language后面加上zh-CN
分类页面:
打开主题配置文件,找到 menu 字样:
将你想要加上的界面前的#删除,比如:
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
# schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
commonweal: /404/ || fa fa-heartbeat
不知为什么,弄好这一步后,要运行几行命令
hexo new page "删除#号后的单词"
例如:
hexo new page "about"
找到source目录下的about文件夹(你当时填的是哪个单词就要打开那个文件夹)
将index.md中的内容加上一行(在两个-------------------的中间):
type: about
隐藏底部powered by/强力驱动
打开/node_modules/hexo-theme-next/layout/_partials/footer.njk文件
找到:
{%- if theme.footer.powered %}
<div class="powered-by">
{%- set next_site = 'https://theme-next.js.org' if theme.scheme === 'Gemini' else 'https://theme-next.js.org/' + theme.scheme | lower + '/' %}
{{- __('footer.powered', next_url('https://hexo.io', 'Hexo') + ' & ' + next_url(next_site, 'NexT.' + theme.scheme)) }}
</div>
{%- endif %}
将这段代码首尾分别加上<!--和-->,或者直接删除
文章添加阴影
打开node_modules/hexo-theme-next/source/css/_common/components/index.styl文件
将
.rtl {
&.post-body {
p, a, h1, h2, h3, h4, h5, h6, li, ul, ol {
direction: rtl;
font-family: UKIJ Ekran;
}
}
&.post-title {
font-family: UKIJ Ekran;
}
}
.post-button {
margin-top: 40px;
text-align: center;
}
.use-motion {
if (hexo-config('motion.transition.post_block')) {
.post-block{
visibility: hidden;
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, 1);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, 1);
}
.pagination, .comments {
visibility: hidden;
}
}
if (hexo-config('motion.transition.post_header')) {
.post-header {
visibility: hidden;
}
}
if (hexo-config('motion.transition.post_body')) {
.post-body {
visibility: hidden;
}
}
if (hexo-config('motion.transition.coll_header')) {
.collection-header {
visibility: hidden;
}
}
}
添加到原来那几个@什么东西的前面就行了
对了,你还可以看看这位人的博客:传送门,也介绍了另一种能添加阴影的方法,但我纯粹是想搞高大上(嘻嘻)
显示当前浏览进度
打开主题配置文件,找到"reading_progress"字样
reading_progress:
enable: false
# Available values: left | right
start_at: left
# Available values: top | bottom
position: top
reversed: false
color: "#37c6c0"
height: 3px
把enable:false改为true
效果: