L3F.WIN

Github及Hexo的使用

0%

学着修改Hexo的Landscape模板

发表于 更新于

Hexo Landscape模板修改

1. Landscape菜单的修改

themes/landscape/_config.yml
使用Editor工具打开_config.yml文件，找到 menu ，下面就是你需要修改的菜单选项了。
输入格式

1
菜单名称: 链接地址

2. 修改Read More

themes/landscape/_config.yml
使用Editor工具打开_config.yml文件，找到 excerpt_link ，下面就是你需要修改的菜单选项了。
输入格式

1
excerpt_link: '希望显示的文字'

3. 添加一个返回到顶部的按钮

我们发现landscape模板本身不带返回顶部按钮，那我们自己制作一个好了
1. themes/landscape/layout/_partial/footer.ejs
使用Editor工具打开footer.ejs文件，在

1
<footer id="footer">

中添加以下代码

1
<div class="goBack" onclick="window.scrollTo('0','0')"></div>

2. themes/landscape/source/css/_partial/footer.styl
使用Editor工具打开footer.styl文件，添加以下代码

1
2
3
4
5
6
7
8
9
10
11
#footer .goBack
  width 40px
  height 30px
  text-align center
  background #f1f1f1 url(images/scrolltop.png) no-repeat 0 0
  position fixed
  bottom 110px
  cursor pointer
  border 1px solid #cdcdcd
  border-radius 3px
  right 0

图片放入 themes/landscape/source/css/images 文件夹下，可以按照自己喜欢的返回图标进行相应的修改高宽

这样我们就创建了一个简单的返回顶部按钮，效果图如下
返回顶部按钮
注意
修改.styl文件后，在使用 hexo generate 命令之前，先使用 hexo clean 否则会出现部署的时候样式不完整

4. 修改原有模板的字体

默认的字体很可能对英语系现实很漂亮，可是对中文来说，显得略粗，我们这次修改styl文件，将相应的字体变细
因为是内容页，所以我们先打开 themes/landscape/source/css/_partial/article.styl 文件
查找到以下代码

1
.article-title

将里面的 font-weight: bold 删除

接着找到以下代码

1
.article-entry

将其下面的

1
2
h1, h2, h3, h4, h5, h6
  font-weight: bold

删除
刷新你的页面，是不是清爽多了。

本次的内容还没有结束， 我们想要增加自己的自定义字体，该怎么办呢？这里面我们已SquadaOne字体为例

  1. 打开 themes/landscape/source/css/style.styl 文件
    在里面添加以下代码

    1
    2
    3
    4
    5
    @font-face
      font-family: SquadaOne
      font-style: normal
      font-weight: normal
      src url(squadaone-path) format("truetype")

  2. 打开 themes/landscape/source/css/_variables.styl 文件
    在里面添加以下代码

    1
    squadaone-path = "fonts/SquadaOne-Regular.woff.ttf"

  3. 复制SquadaOne的字体文件到 themes/landscape/source/css/fonts 文件夹下面

  4. 修改主页logo名称 打开 themes/landscape/source/css/_partial/header.styl
    找到 #logo
    在里面添加以下代码

    1
    font-family: SquadaOne

  5. 最好hexo clean一下服务。我们看看现在的样子吧
    自定义字体

5. 修改你的share分享链接

我们发现默认的landscape模板的share地址是错误的，如何改成正确的呢，我们先打开根目录下的 _config.yml
找到 url:
并修改他的值为你自己的域名

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.l3f.win
root: /
permalink: :year/:month/:day/:title/
permalink_defaults: