Hexo主题Yilia添加图标字体社交logo和源码打包笔记！

阅读:次

添加的社交图标

字体格式种类繁多，但没有一种能兼容所有浏览器。常用字体格式：TTF、OTF、EOT、SVG、WOFF、WOFF2…

TTF:TrueType字体，由苹果和微软开发，是mac和windows操作系统最常见格式。

OTF:OpenType字体，TTF演变而来，Adobe和微软开发。

EOT:嵌入式开放类型

WOFF:web开放字体格式

WOFF2:下一代WOFF

SVG:可伸缩矢量图形字体

在线编辑字体图标：https://font.qqe2.com/
使用FontEditor创建web字体图标文档:https://ecomfe.github.io/blog/use-fonteditor-to-build-webfont/

1
2
3
4
5
6
7
8
9
10
11
12
1.新建或打开一个字体文件
2.导入SVG格式文件
3.新增字形
4.编辑新增的字形

5.导入图片（各网站logo获取来源，关注该网站公众号，获取公众号头像，一般就是正方形的网站logo图了）
6.调整图片之后保存，右侧看显示效果是否居中，大小是否合适。
7.鼠标右键在字体上点击，选字型信息，命名改成自已想要的名称。然后再保存。（保存项目，右侧预览图标颜色由蓝色变成灰色）
8.最后检查无问题保存项目，右上角关闭编辑器（F2快捷键关闭编辑器）
9.选择当前浏览器支持的字体文件格式预览效果
10.如果添加多个字体图标，重复上述3-8步骤，也可在第三步一次新增N个字形，然后逐个编辑。
11.选择zip下载图标字体文件。

新增图标字体文件步骤一

新增图标字体文件步骤二

新增图标字体文件步骤三

下载解压后文件

方式一：修改编译后的source目录下代码 复制iconfont四种格式的文件，替换\themes\yilia\source\fonts四个文件,然后更改source编译后的文件main.xxx.css文件，复制icon.css中新生成的图标字体追加,然后设置样式。一个图标字体对应设置三处如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#掘金juejin Demo：
.icon-juejin:before {
  content: "\e878"
}

...

#header .header-nav .social a.juejin {
  background: #009a61;
  border: 1px solid #009a61
}
#header .header-nav .social a.juejin:hover {
  border: 1px solid #009a61
}


方式二：修改未编译的source-src目录下代码 复制iconfont四种格式的文件，替换themes\yilia\source-src\css\fonts四个文件,然后更改source-src/css/fonts.scss文件,复制icon.css中新生成的图标字体追加,为每个图标字体设置样式，在social.scss文件追加样式

1
2
3
4
5
6
7
8
#掘金juejin Demo:
        a.juejin{
            background: #086ef6;
            border:1px solid #086ef6;
            &:hover {
                border:1px solid #086ef6;
            }
        }

修改未编译的source-src目录下代码方式

打包发布
执行如下命令遇到各种报错 :
yilia打包'webpack' 不是内部或外部命令,也不是可运行的程序
先切换淘宝镜像源，然后安装各种依赖包；各种不是内部或外部命令，设置用户环境变量和系统环境变量,设置完毕cmd -v重启cmd。直至执行如下命令无报错！

1
2
3
4
cd themes/yilia #切换到themes/yilia目录
npm install  #`安装依赖
npm run dev     #webpack打包,把文件编译到source文件里，但文件不会经过压缩
npm run dist #获得最终确定版本，此时的编译会经过压缩

正常执行cnpm run dev

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
D:\WorkSpace\wwwroot\gitHub\blog-code\themes\yilia>cnpm run dev

> yilia@4.0.0 dev D:\WorkSpace\wwwroot\gitHub\blog-code\themes\yilia
> webpack

Hash: a7af2285ceb7a08c97f3
Version: webpack 1.15.0
Time: 11502ms
                        Asset       Size  Chunks             Chunk Names
         img/default-skin.png  547 bytes          [emitted]
fonts/default-skin.b257fa.svg    1.55 kB          [emitted]
            img/preloader.gif  866 bytes          [emitted]
    fonts/iconfont.adff59.eot    21.3 kB          [emitted]
   fonts/iconfont.f88d62.woff    21.2 kB          [emitted]
    fonts/iconfont.834466.ttf    21.1 kB          [emitted]
    fonts/iconfont.54afbe.svg      52 kB          [emitted]
      img/scrollbar_arrow.png    3.06 kB          [emitted]
     fonts/tooltip.4004ff.svg  492 bytes          [emitted]
               main.e0ea0a.js     209 kB       0  [emitted]  main
             mobile.869a86.js     338 kB       1  [emitted]  mobile
             slider.92ac58.js     178 kB       2  [emitted]  slider
              main.e0ea0a.css    79.7 kB       0  [emitted]  main
../layout/_partial/script.ejs     115 kB          [emitted]
   ../layout/_partial/css.ejs   80 bytes          [emitted]
   [0] multi mobile 40 bytes {1} [built]
    + 442 hidden modules
Child html-webpack-plugin for "..\layout\_partial\script.ejs":
        + 3 hidden modules
Child html-webpack-plugin for "..\layout\_partial\css.ejs":
        + 3 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 5 hidden modules
Child extract-text-webpack-plugin:
        + 8 hidden modules



正常执行cnpm run dist

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
D:\WorkSpace\wwwroot\gitHub\blog-code\themes\yilia>cnpm run dist

> yilia@4.0.0 dist D:\WorkSpace\wwwroot\gitHub\blog-code\themes\yilia
> webpack -p

Hash: c449ec144eb18ba2b2c2
Version: webpack 1.15.0
Time: 22078ms
                        Asset       Size  Chunks             Chunk Names
fonts/default-skin.b257fa.svg    1.55 kB          [emitted]
         img/default-skin.png  547 bytes          [emitted]
            img/preloader.gif  866 bytes          [emitted]
      img/scrollbar_arrow.png    3.06 kB          [emitted]
    fonts/iconfont.adff59.eot    21.3 kB          [emitted]
    fonts/iconfont.54afbe.svg      52 kB          [emitted]
    fonts/iconfont.834466.ttf    21.1 kB          [emitted]
   fonts/iconfont.f88d62.woff    21.2 kB          [emitted]
     fonts/tooltip.4004ff.svg  492 bytes          [emitted]
             mobile.a46d0a.js     114 kB       0  [emitted]  mobile
               main.f2b45d.js    74.7 kB       1  [emitted]  main
             slider.f185e0.js    54.1 kB       2  [emitted]  slider
              main.f2b45d.css    59.1 kB       1  [emitted]  main
../layout/_partial/script.ejs     114 kB          [emitted]
   ../layout/_partial/css.ejs   80 bytes          [emitted]
   [0] multi mobile 40 bytes {0} [built]
    + 442 hidden modules

WARNING in main.f2b45d.js from UglifyJs
Side effects in initialization of unused variable baseCt [./source-src/js/aside.js:12,12]
Side effects in initialization of unused variable img [./source-src/js/viewer.js:21,8]
Condition always true [./~/badjs-report/dist/bj-report-tryjs.js:591,0]
Condition always true [./~/js-cookie/src/js.cookie.js:10,0]
Condition always true [./~/js-cookie/src/js.cookie.js:14,0]
Condition always true [./~/photoswipe/dist/photoswipe-ui-default.js:11,0]
Dropping unreachable code [./~/photoswipe/dist/photoswipe-ui-default.js:13,2]
Condition always true [./~/photoswipe/dist/photoswipe.js:5,0]
Dropping unreachable code [./~/photoswipe/dist/photoswipe.js:7,2]

WARNING in slider.f185e0.js from UglifyJs
Condition always false [./source-src/js/Q.js:13,7]
Condition always false [./source-src/js/Q.js:13,38]
Condition always true [./source-src/js/Q.js:15,12]
Dropping unreachable code [./source-src/js/Q.js:17,9]
Dropping unused variable qtid [./source-src/js/Q.js:130,36]
Side effects in initialization of unused variable cache [./source-src/js/Q.js:84,8]
Dropping unused variable _qtid [./source-src/js/Q.js:87,8]
Dropping unused variable uid [./source-src/js/Q.js:395,16]
Dropping unused variable MARK [./source-src/js/Q.js:451,12]
Dropping unused variable nArgs [./source-src/js/Q.js:1202,19]
Side effects in initialization of unused variable Data [./source-src/js/Q.js:1170,8]
Dropping unused variable listeners [./source-src/js/Q.js:1302,8]
Side effects in initialization of unused variable strats [./source-src/js/Q.js:1376,8]
Dropping unused variable PROP_REG [./source-src/js/Q.js:1378,8]
Side effects in initialization of unused variable index [./source-src/js/Q.js:1770,12]
Side effects in initialization of unused variable data [./source-src/js/Q.js:1771,12]
Condition always true [./~/es6-promise/dist/es6-promise.js:10,0]
Child html-webpack-plugin for "..\layout\_partial\script.ejs":
        + 3 hidden modules
Child html-webpack-plugin for "..\layout\_partial\css.ejs":
        + 3 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 5 hidden modules
Child extract-text-webpack-plugin:
        + 8 hidden modules


layout文件修改后，引入的img、js， 在source目录下新建assets/img和assets/js引入使用。 source-src没使用到的img、js不能直接打包进source目录.若想打包可在source-src/css/main.scss和source-src/js/main.js引入。
二次开发目录结构

本文链接： https://dragonersli.github.io/2019/10/29/Hexo主题Yilia添加图标字体社交logo和源码打包笔记！/
本人声明： 此文只作为自己日后工作学习中遇到类似问题方便快速回忆解决问题的笔记，仅供参考！
版权声明： 知识共享许可协议 本文首发于 すせなの筆記 转载无需联系本人，但要注明来源本站！
赏

谢谢您请我喝咖啡！~

支付宝
微信

扫一扫，分享到微信

微信分享二维码
Hexo Theme Yilia by Litten

导航

tag: