minimal-mistakes一些自定义修改的备忘总结

由于疫情困在家，就着手做了一下自己的个人网页，以前用google site做的，虽然还行但是学校给了域名，一直没有用过，还是想自己搞一个网站来。网站基于Jekyll. 简单跟着Jekyll的tutorial过了一遍，就开是动手了。基于minimal-mistake的主题修改的，内容比较杂，作为一个前端盲有点心累。用这篇博客记一下，省的自己忘了。

首先，牢记需要修改什么，就用浏览器审查元素来进行定位。

• 网页都放在_page文件夹里。写网页的主要内容。md格式的只会用markdown渲染，所以不要加css标签。

• 然后套用_layout文件夹里对应的layout，layout是html文件，按html渲染，可以加一些css和js标签。

• layout文件应该会include一些现成的文件,如sidebar,这些文件会使用一些样式，存在_sass文件夹里。

• _data文件夹里存的是可以配置的导航栏。

• _include里有很多已经高度集成的部件：

  • 侧边栏：sidebar.html author-profile.html
  • 报头：masthead.html 可以修改顶部的图片
  • 页脚: footer.html

• _sass里定义了很多样式：

  • base里定义了很多全局的样式，比如字号，段落，链接，动画，代码样式等。
  • button里是button的样式。
  • page就是定义了除了侧边栏的page样式。可以调整宽度、文字对齐方式，字体大小，链接样式等。padding-right: 35px;可以修改左边side bar的宽度(待确认).
  • sidebar定义了侧边栏的宽度，字体，间距. .author__avatar {}可以修改个人图片.
  • utilities定义了一些工具，比如对齐，按钮
  • variables里定义了一些变量：字体，字号，上面文件中引用的变量定义。

• assets存储了一些媒体资源，比如image/css/js等。网站需要的文件也可以。这样生成文件时就可以全部拷贝到_site文件夹里。

关于如何使用academic icons。

• 把解压到css和font放在assets下对应的文件夹内。
• 在使用的layout里引入css:

<link rel="stylesheet" href="/assets/css/academicons.min.css"/> <!-- academic icons css -->

• 然后在_config.yml里正常使用即可。