图库页面详细

网站一开始就是跟着butterfly的置顶教程，一步步搭建。教程写的太详细，图库这个地方作为一个新手真的没搞懂。研究了两天hexo的基本功能，对这个地方的做法才算完全理解了。现在分享给大家。

建立图库页面

1
hexo new page gallery #gallery是图库页面的名字可以自己随便起

图库页面只是普通的页面，你只需要hexo n page xxxxx创建你的页面就行.

现在想来我当时好笨，完全不知道什么是页面。关键是hexo的文档里面对页面也没有过多的介绍。可能大家都忙着写博客，很少写页面吧。

但是hexo在文档的命令部分有一点介绍。

默认情况下，Hexo会使用文章的标题来决定文章文件的路径。对于独立页面来说，Hexo会创建一个以标题为名字的目录，并在目录中放置一个index.md文件。

对于这里来说就是创建了source/gallery/index.md。但是我一开始还是没看懂，创建了个md文件，怎就叫页面了？

其实我们只要稍微思考一下hexo的功能就能有所了解，hexo无非是将我们source目录里的.md文件，使用某种渲染工具以及排版方式将其渲染为.html文件。

可能是我一直没有使用过hexo generate生成过页面。我只用hexo server看了一下样式。

然后就是对于我们新手来说如何访问这个页面呢？其实这个页面的链接就是/gallery/其实看一下pubulic的目录结构我们就应该知道：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
PUBLIC
|   404.html
|   index.html
|
+---***
|
+---gallery
|       index.html
|
+---posts
    +---01099d4d3353
    |       index.html
    |
    \---cd6760b23efa
            index.html

因为本质上是静态页面，所以其实文件的路径就决定了它的链接。当我们请求/时默认请求的就是public/index.html。因此我们的博文页面链接为/posts/cd6760b23efa/请求的是public/posts/cd6760b23efa/index.html。那么对于图库页面的链接就是/gallery/。

于是我们可以在_config.butterfly.yml中修改页面顶部的导航栏，链接到我们的图库

1
2
3
4
5
6
7
8
9
10
11
menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  娱乐||fa fa-heartbeat:
    音乐: /music/ || fas fa-music
    图库: /gallery/ || fas fa-images
    电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

图库子页面

使用如下命令创建图库子页面

1
hexo new page --path gallery/theme "主题图片"

以上命令会创建一个source/gallery/theme.md文件，同时Front Matter中的title为主题图片。如果通过hexo generate命令生成的文件目录结构如下：

1
2
3
4
5
6
7
8
PUBLIC
|   ***
|
+---***
|
\---gallery
        index.html
        theme.html

这个页面与其他页面不同，它的连接是/gallery/theme。你也可以通过/gallery/theme.html访问到它，但如果你在_config.yml中配置了pretty_urls，它会在你访问后修改地址栏的链接为/gallery/theme。

这里有个问题，所有能访问的链接一般都是/结尾，而这个页面却没有所以不知道具体有什么影响。因为我记得之前有一篇文章说不/结尾的页面会出现问题。但是我又不记得是那一篇文章

接下来我们就可以在图库页面，也就是source/gallery/index.md文件中使用/gallery/theme链接到这个词库子页面啦

1
2
3
<div class="gallery-group-main">
{% galleryGroup '主题图片' '本网站所使用的一些主题图片' '/gallery/theme' /-/img/background.jpg %}
</div>
Group Image Gallery
主题图片

本网站所使用的一些主题图片

对于子页面也就是source/gallery/theme.md的内容

1
2
3
4
5
6
7
{% gallery %}
![](/-/img/index.jpg)
![](/-/img/background.jpg)
![](/-/img/cover-default.jpg)
![](/-/img/cover-default-2.jpg)
![](/-/img/cover-default-3.jpg)
{% endgallery %}
[{"url":"/-/img/index.jpg","alt":""},{"url":"/-/img/background.jpg","alt":""},{"url":"/-/img/cover-default.jpg","alt":""},{"url":"/-/img/cover-default-2.jpg","alt":""},{"url":"/-/img/cover-default-3.jpg","alt":""}]

我相信大家看到这里对这部分内容已经掌握了，写的太详细好像已经把自己绕晕了，哈哈哈。