hexo主题配置

1.hexo+Github主题配置参见教程

2.个性化个人页面

git clone 主题后效果如图:
这里写图片描述
另附该主题的说明
ps:下载好主题后记得把主题文件夹下的config文件去掉后面的example

这里写图片描述

默认为德语,修改为英文的需要将hexo文件夹根目录(不是主题目录)的config文件修改

# Site
title: Hexo
subtitle:
description:
keywords:
author: John Doe
language: en
timezone:

改为中文即为:

language: zh-CN

接下来就是配置config文件:

1.首先添加menu

menu:
    Home: /
    Categories:
    About: /about/index.html

如果想增加导航页,可以增加条目:

menu:
    Home: /
    Categories:
    One:
    Two:
    ...
    About: /about/index.html

2.接下来修改个人Logo:

这里写图片描述

customize:
    logo:
        width: 165
        height: 60
        url: images/logo-header.png

宽和高都是以像素为单位的,只有数字,没有单位。

图片是存放在themes\temp\source\css\images中,只需要将自己想要的图
存在该文件夹下,并修改config文件

url: images/example.png

接下来的配置,推荐默认,颜色可按个人喜好修改:

theme_color: '#006bde'
highlight: androidstudio
sidebar: left # sidebar position, options: left, right
thumbnail: true # enable posts thumbnail, options: true, false

3.添加网站的缩略图,步骤如下:

  • 制作一张32*32的ico缩略图,推荐比特虫
  • 将制作好的图片放入之前的图片地址themes\temp\source\css\images
  • 修改congfig
favicon: css/images/favicon.ico

4.添加社交链接:

twitter: /
facebook: /
google-plus: /
github: https://github.com/ppoffice/hexo-theme-hueman
weibo: /
rss: /

可根据自己需要添加

但问题是,这些提供的链接大都是国外的网站,没有梯子的童鞋非常难办。但改为国内的一些网站链接后,会出现无图标的情况

这里写图片描述

这是因为该主题图标使用了fontawesome,而在fontawesome中并没有提供国内一些网站的图标

可以寻找与你的社交网站图标类似的图标作为代替

在\source\libs\font-awesome\css中有两个文件font-awesome.css和font-awesome.min.css

用文本编译器打开后是下面的画风:

.fa-commenting:before {
  content: "\f27a";
}
.fa-commenting-o:before {
  content: "\f27b";
}
.fa-houzz:before {
  content: "\f27c";

其中,fa后面的就是图标的名称,我们可以在这里
找到图标对应的名称

之后修改对应的css文件和min.css文件

.fa-commenting:before {
  content: "\f27a";
}
.fa-commenting-o:before {
  content: "\f27b";
}
.fa-example:before {
  content: "\f27c";

修改后保存就可以了

这里写图片描述

5.配置搜索栏

在git中运行

hexo-generator-json-content

评论我没配置

分享推荐选择jiathis

链接自行添加就好

最后配置完所有项目,在git中输入

npm install hexo-deployer-git --save
hexo clean && hexo g && hexo d

好啦,以上就是本次教程。个性化主题是一个看起来
比较麻烦的过程,但操作完成后是非常有成就感的

  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Hexo是一个静态博客生成器,它提供了一些默认的主题,但是用户也可以自己开发或使用第三方主题。其中,Next是一款非常受欢迎的Hexo主题之一,它提供了丰富的功能和灵活的配置。 在使用Next主题时,我们可以通过override来修改主题的默认配置和样式。具体来说,override是指将主题的默认配置或样式文件复制到博客根目录下的/source/_data/或/source/css/override/目录下,然后进行修改。这样,在重新生成博客时,Hexo会优先使用override中的配置或样式文件,从而实现自定义主题的效果。 下面是具体的使用方法: 1. 复制配置文件到/source/_data/override/目录下 首先,我们可以通过命令`hexo config`查看当前主题的默认配置,然后将需要修改的配置项复制到/source/_data/override/目录下的同名文件中,并进行修改。例如,如果我们想修改Next主题的默认语言为英文,可以执行以下命令: ``` hexo config | grep language > source/_data/override/next.yml ``` 然后,打开source/_data/override/next.yml文件,将`language`的值修改为`en`,保存文件即可。 2. 复制样式文件到/source/css/override/目录下 如果我们需要修改主题的样式,可以将主题的默认样式文件复制到/source/css/override/目录下,并进行修改。例如,如果我们想修改Next主题的默认字体为微软雅黑,可以执行以下命令: ``` cp -r themes/next/source/css/fonts source/css/override/ ``` 然后,在source/css/override/fonts目录下,将所有字体文件中的字体名称修改为“Microsoft YaHei”,保存文件即可。 需要注意的是,override文件的命名和存放路径需要与主题默认文件一致,否则可能会导致修改无效或出现异常。同时,使用override也可能会导致主题升级时出现冲突,因此在使用时需要注意备份原始文件和谨慎修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值