0%

Hexo搭建个人博客:yilia主题配置(七) - 自定义Subnav图标

yilia是一款非常不错的博客主题,它满足几乎大多数博主对个人博客网站的要求,主题作者推崇简约模式,设计的界面非常nice!

入门要求比较低,适合所有人群,并且可以自己定制喜欢的分风格,比如添加特效、插件等等。

子导航几乎集成了大多社交网站的图标,不过还有些并未补充,这里主要介绍一下如何在子导航社交界面添加自定义的图标。

制作图片文字

1.下载社交网站图标

去网上搜索想要编辑的社交网站图标,有的网站图标,在浏览器中按 F12 找到图标位置,是有可能找到图标网址的,这时直接下载(如码云),如果没有可以到一些知名搜索引擎查找,或者到 EasyIcon 网站搜索。

2.编辑图标

2.1.复制 iconfont.svg 到下载目录

打开文件目录 themes\yilia\source-src\css\fonts,找到 iconfont.svg 并复制到下载目录。

2.2.打开百度字体编辑器

编辑刚刚下载的图标,点 [新建],创建一个新项目。然后,点中间的 [导入],选择 [导入svg],把刚才拷贝过来的 iconfont.svg 导入进,导入完毕后,就出现了yilia自带的图标文字:

导入下载好的社交网站图片(需要加入的图片,可以是SVG格式的图片),调整大小位置,保存并退出,我导入的是码云网站的图片,如图:

接着,选中刚编辑完的图片,在左上角点击 [字形信息] ,输入[Unicode][图标名],记下来,会在css文件中用到,最后,点击 [保存项目],下载 [ZIP] 压缩包。

3.配置hexo主题

3.1.解压刚刚下载的 [ZIP] 压缩包

保留 eotsvgttfwoff 这四个文件。

3.2.修改css文件

  • /themes/yilia/source-src/css 中,修改 font.scssmain.0cf68a.css,添加:
1
2
3
4
5
6
7
.icon-gitee:before {
content: "\E87A"
}

.icon-statistics:before {
content: "\E87B";
}

.icon-yourApp:before{ content: “刚才的unicode”}

  • 修改 /themes/yilia/source-src/css/social.scss 文件,添加:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
a.gitee {
background: #086ef6;
border:1px solid #086ef6;
&:hover {
border:1px solid #086ef6;
}
}
a.statistics {
background: #333435;
border:1px solid #086ef6;
&:hover {
border:1px solid #086ef6;
}
}

a.yourApp:before{颜色配置}

3.3.更新子导航配置

修改 yilia 主题配置文件 _config.yml,在subnav下添加图标名和链接:

1
2
3
# subNav-子导航
subNav:
gitee: '' # 码云

3.4.更新图标配置

将上面的4个文件重命名后,替换 /themes/yilia/source-src/css/fonts 目录下的原文件。

然后,控制台切换目录到 themes/yilia 下,

  • 安装依赖:

    1
    nom install
  • 运行打包命令:

    1
    npm run dev
  • 如果打包成功,执行:

    1
    npm run dist

回到Hexo根目录,重新生成部署 hexo s -g 就行了

错误Error:

1.npm install 时,node-sass 错误

如果出现 node-sass@4.13.1 postinstall: node scripts/build.js, Failed at the node-sass@4.13.1 这样的提示,可能是安装源的问题,修改源后再安装:

1
2
3
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

npm install

如果还有问题,出现 ./source is not an absolute path 错误,修改 webpack.config.js 文件,在 module.exports中,改成:

1
2
3
4
5
output: {
path: __dirname + "./source",
publicPath: "./",
filename: "[name].[chunkhash:6].js"
}

2.npm run dev 时,node-sass 错误

先卸载,再重装,或者重建。

1
2
3
npm uninstall node-sass
npm install node-sass
npm rebuild node-sass

如果错误信息是 permission denied ,执行:

1
npm install node-sass --unsafe-perm --save-dev

3.npm run dist 报错

检查node版本。


参考:
yilia 添加社交图标
npm 安装报错
output.path Error

------------- 本文已结束 感谢您的阅读! -------------
Donate comment here.

本文标题:Hexo搭建个人博客:yilia主题配置(七) - 自定义Subnav图标

文章作者:Jusheng Yao

发布时间:2020年02月24日 - 14:52

最后更新:2020年03月01日 - 21:49

原始链接:http://yaojusheng.github.io/archives/ccdc2da1.html

版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!

欢迎关注我的其它发布渠道