Как получить и разместить рейтинг популярных страниц из Google Analytics

Введение

Используя сервис под названием Ranklet , вы можете легко получить и разместить рейтинг популярных страниц из Google Analytics.

В этой статье я расскажу, как разместить его в блоге HUGO.

Пример работы

Подготовка

Google Analytics должен быть настроен на сайте

Шаги

Перейдите в Ranklet
Нажмите Sign in with Google , чтобы войти с помощью учетной записи Google (должна быть привязана к учетной записи Google Analytics)

Нажмите Разрешить

Настройте основную информацию

Я настроил, как показано выше.

В Google Analytics View выберите представление, для которого вы хотите получить рейтинг.

Настройте замену текста

Я настроил, как показано выше. Это настроено для удаления | kenji.blog из заголовка страницы.

Настройте шаблон

HTML (числа рейтинга скрыты)

 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
<div class="ranklet ranklet-reset">
    <table class="ranklet-table">
        <tbody class="ranklet-pages">
            {{#context.pages}}
            <tr class="ranklet-page">
                <td class="ranklet-image">
                    {{#image}}
                    <a href="{{url}}" class="ranklet-link">
                        <img class="ranklet-img" src="{{image}}" />
                    </a>
                    {{/image}}
                </td>
                <td class="ranklet-meta">
                    <div class="ranklet-title">
                        <a href="{{url}}" class="ranklet-link">
                            {{title}}
                        </a>
                    </div>
                    {{#description}}
                    <div class="ranklet-description">
                        <a href="{{url}}" class="ranklet-link">
                            {{description}}
                        </a>
                    </div>
                    {{/description}}
                </td>
            </tr>
            {{/context.pages}}
        </tbody>
    </table>
</div>

CSS (изменен размер шрифта, описание будет отображаться в 3 строки)

 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
#ranklet-{{context.id}} {
    .ranklet-reset { // リセット
        table, tr, td, div, span {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
            line-height: 1;
            box-sizing: border-box;
        }
    }

    .ranklet-table {
        border-collapse: separate;
        border-spacing: 8px 24px;
        width: 100%;
        word-break: break-all;

        td {
            vertical-align: middle;
        }

        .ranklet-rank {
            text-align: center;
            font-size: 120%;
        }

        .ranklet-image {
            text-align: center;
            img {
                max-width: 128px;
                max-height: 128px;
            }
        }

        .ranklet-meta {
            .ranklet-title {
                font-size: 20px;
                line-height: 125%;
            }

            .ranklet-description {
                font-size: 16px;
                margin-top: 8px;
                line-height: 125%;
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3; /* 行数 */
            }
        }
    }
}

JavaScript без изменений

Скопируйте HTML из публикации на сайте

Скопируйте отображаемый HTML

Вставьте в шаблон HUGO

Создайте layouts/partials/ranklet.html и вставьте скопированный HTML

1
<div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>

Вставьте приведенный ниже код в строку перед </footer> в layouts/_default/single.html

1
{{- partial "ranklet.html" . }}

На этом все. Рейтинг будет отображаться в нижней части этой страницы, как показано ниже.