Next 主题设置-添加相册、标签云、友情链接

阅读次数：

添加相册

可以使用Next自带功能Group Pictures建立相册或者在文章中插入图片，这是一种最简单的方法。

标签云特效，参考cloud。

  1. 安装：npm install hexo-tag-cloud@^3.* --save
  2. 对于next8版本，找到theme/next/layout/_macro/sidebar.njk，打开后搜索back2top.sidebar，在其上方添加如下代码。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {% if site.tags.length > 1 %}
    <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
    <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
    <div class="widget-wrap">
        <h3 class="widget-title">Tag Cloud</h3>  #为标签云命名，建议不命名，直接删除此行
        <div id="myCanvasContainer" class="widget tagcloud">
            <canvas width="250" height="250" id="resCanvas" style="width:100%">
                {{ list_tags() }}
            </canvas>
        </div>
    </div>
    {% endif %}
  3. hexo-tag-cloud插件支持自定义，可以改变标签云的字体和颜色，还有突出高亮。在站点配置里添加如下的配置项:
    1
    2
    3
    4
    5
    6
    7
    tag_cloud:
        textFont: Trebuchet MS, Helvetica
        textColor: '#333'
        textHeight: 25
        outlineColor: '#E2E1D1'
        maxSpeed: 0.5
        pauseOnSelected: true # true 意味着当选中对应 tag 时,停止转动

自定义友情链接

next主题自带添加友情链接功能，在侧栏下方显示。

1
2
3
4
5
6
links_settings:
  icon: fa fa-globe
  title: 友情链接
  layout: inline # Available values: block | inline
links:
  name: url
  1. 先关闭原先的友情链接，注释掉即可。
  2. 现在要在侧栏上方菜单里添加友情链接选项，hexo new page "links"，打开Hexo\source\links里的index.md，修改title、type等。
    1
    2
    3
    4
    title: 友情链接 #为了标题中出现
    type: "links" #必须有
    comments: true # 是否再下方显示评论栏 
    此处编辑你想写的内容，默认显示在所有友情链接下方。比如放置申请友链的要求等。
  3. 在themes\next\languages\zh-CN里添加links的翻译。如果已有翻译，也可以自行改成其他翻译，比如友链、朋友等。
  4. 此创建方法针对我所使用的next8.8.1，其它不同版本的next主题也可以参照以下方法。
    在Hexo\themes\next\layout\_partials\page里新建links.njk文件，复制以下内容：
    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
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    {% block content %}
      {######################}
      {### LINKS BLOCK ###}
      {######################}
        <div id="links">
            <style>
                .links-content{
                    margin-top:1rem;
                }

                .link-navigation::after {
                    content: " ";
                    display: block;
                    clear: both;
                }
                
                .card {
                    width: 300px;
                    font-size: 1rem;
                    padding: 10px 20px;
                    border-radius: 4px;
                    transition-duration: 0.15s;
                    margin-bottom: 1rem;
                    display:flex;
                }
                .card:nth-child(odd) {
                    float: left;
                }
                .card:nth-child(even) {
                    float: right;
                }
                .card:hover {
                    transform: scale(1.1);
                    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
                }
                .card a {
                    border:none; 
                }
                .card .ava {
                    width: 3rem!important;
                    height: 3rem!important;
                    margin:0!important;
                    margin-right: 1em!important;
                    border-radius:4px;
                    
                }
                .card .card-header {
                    font-style: italic;
                    overflow: hidden;
                    width: 236px;
                }
                .card .card-header a {
                    font-style: normal;
                    color: #2bbc8a;
                    font-weight: bold;
                    text-decoration: none;
                }
                .card .card-header a:hover {
                    color: #d480aa;
                    text-decoration: none;
                }
                .card .card-header .info {
                    font-style:normal;
                    color:#a3a3a3;
                    font-size:14px;
                    min-width: 0;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            </style>
            <div class="links-content">
                <div class="link-navigation">
                    {% for link in theme.mylinks %}
                        <div class="card">
                            <img class="ava" src="{{ link.avatar }}"/>
                            <div class="card-header">
                            <div><a href="{{ link.site }}" target="_blank">@ {{ link.nickname }}</a></div>
                            <div class="info">{{ link.info }}</div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                {{ page.content }}
                </div>
            </div>
      {##########################}
      {### END LINKS BLOCK ###}
      {##########################}
    {% endblock %}
    修改Hexo\themes\next\layout\page.njk文件，注意格式。
    在
    1
    2
    {%- elif page.type === 'schedule' and not page.title %}
        {{- __('title.schedule') + page_title_suffix }}
    下面添加：
    1
    2
    {%- elif page.type === 'links' and not page.title %}
      {{- __('title.links') + page_title_suffix }}
    在
    1
    2
    {% elif page.type === 'schedule' %}
      {%- include '_partials/page/schedule.njk' -%}
    下面添加：
    1
    2
    {% elif page.type === 'links' %}
      {%- include '_partials/page/links.njk' -%}
    在主题配置文件_config.yml末尾处添加友链：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    mylinks:
      - nickname:  #友链名称
        avatar:   #友链头像
        site:   #友链地址
        info:   #友链说明
      - nickname:  #友链名称
        avatar:   #友链头像
        site:   #友链地址
        info:   #友链说明