indigo主题添加友链页面

1. 添加友链界面

  • git bash here弹出命令行窗口

  • 输入以下命令新建 “友链“ 文件夹

    hexo new page links

  • 执行完之后，会在source文件夹下创建links文件夹，其中会有一个index.md文件，打开后，对其添加：

    1
    layout: links

    这一步主要是为了，确定友链界面的布局，使用的是links的布局文件，在下面进行添加

  • 在自己的主题文件下，找到layout文件夹，新建两个文件link.ejs，links.ejs，然后复制下面的代码。（虽然都是indigo主题，但是可能这里的文件后缀名还是不一样，大家可以根据不同文件自行修改，基本差不多）

    1
    2
    3
    4
    5
    <!-- link.ejs -->

    <%- partial('links', {
        title: theme.links_title + ': '+ page.link
    }) %>
    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
    <!-- links.ejs -->

    <%- partial('_partial/header', {
        title: locals.title || theme.links_title,
        hdClass: 'links-header'
    }) %>
    <div class="container body-wrap fade">
        <% if (theme.links && theme.links.length) { %>
        <h3 class="archive-separator">
            <%=theme.links_title%>
        </h3>
        <div class="waterfall">
            <% theme.links.forEach(function(links) { %>
            <div class="waterfall-item">
                <article class="article-card archive-article">
                    <h3 class="post-title" itemprop="name">
                        <a class="post-title-link" href="<%- links.url %>" target="_blank" itemprop="url">
                            <%- links.name %></a>
                    </h3>
                </article>
            </div>
            <%})%>
        </div>
        <% }%>

        <div class="page-content" id="page-content" itemprop="pageContent">
            <%- page.content %>
        </div>

        <style>
        	.page-content{
        		background: #fff;
        		box-shadow: 0 0 4px rgba(0,0,0,.2);
        		border-radius: 4px;
        		padding: 12px;
        		margin: 40px 0;
        	}
        </style>

        <!-- 实在不会这个语法，所以直接把Valine的加载搬过来了，这里是作者添加评论的方式 -->
        <%- partial('_partial/plugins/valine') %>
            
        <%- partial('_partial/paginator') %>
    </div>

2. 使用

  • 打开主题的配置文件_config.yml，在menu菜单中添加友链item

    1
    2
    3
    4
    5
    6
    7
    8
    menu:
      home:
        text: 主页
        url: /
    <!-- 添加link item -->
      link:
        text: 友情链接
        url: /links

  • 现在友链的界面就做好了，可以试一下

  • 然后添加需要的友链，还是在主题的配置文件_config.yml，找一块地方，添加下面的代码：

    1
    2
    3
    4
    5
    6
    # 友情链接
    links:
      - name: "百度"
        url: https://www.baidu.com/
      - name: "搜狗"
        url: https://www.sogou.com/

  • 现在重新打开界面，看看效果