ブログ運営 on kenji.blog

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

Mon, 10 Apr 2023 20:26:57 +0900

Введение

Используя сервис под названием 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" . }}

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

Шорткоды, которые можно использовать в HUGO

Sun, 11 Sep 2022 22:59:52 +0900

Шорткоды, которые можно использовать в HUGO

YouTube

{{<youtube 123456abc>}}

Twitter

{{<twitter 123456abc>}}

Instagram

{{<instagram 123456abc>}}

Flickr

{{<flickr 123456abc>}}

Vimeo

{{<vimeo 123456abc>}}

Прочее

Shortcodes

Примечание

Если вы хотите отобразить {{< foo >}} на сайте, вам нужно написать это как {{</* foo */>}}.

【HUGO】Предварительный просмотр в локальной среде

Mon, 05 Sep 2022 12:28:01 +0900

Установка HUGO

Скачивание

Скачать HUGO

С указанного выше сайта скачайте и распакуйте модуль для Windows, соответствующий вашей среде. В моем случае я скачал “hugo_0.102.3_Windows-64bit.zip”.

Распаковка

Распакуйте скачанный zip-архив и скопируйте находящийся в нем hugo.exe в созданную вами папку, например C:\bin.

Регистрация в переменных среды

Зарегистрируйте в переменных среды, чтобы запускать hugo.exe из любого места. Это действия для Windows 11, но я думаю, что вы можете зарегистрировать его, выполнив следующие шаги.

Нажмите кнопку Win+Pause, чтобы открыть сведения о системе.
Нажмите Дополнительные параметры системы.
Нажмите Переменные среды.
Выберите Path и нажмите Изменить.
Нажмите Создать, введите “C:\bin” в новой строке и нажмите ОК, чтобы закрыть диалоговое окно.

Предварительный просмотр блога

Перейдите в папку блога HUGO в командной строке и выполните следующую команду.

hugo server -D

Результат выполнения ниже. (-D — это параметр для отображения черновых статей.)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


C:\Users\win11\IdeaProjects\kenji.blog>hugo server -D
Start building sites …
hugo v0.102.3-b76146b129d7caa52417f8e914fc5b9271bf56fc windows/amd64 BuildDate=2022-09-01T10:16:19Z VendorInfo=gohugoio

 | JA
-------------------+-----
 Pages | 39
 Paginator pages | 0
 Non-page files | 7
 Static files | 0
 Processed images | 0
 Aliases | 13
 Sitemaps | 1
 Cleaned | 0

Built in 161 ms
Watching for changes in C:\Users\win11\IdeaProjects\kenji.blog\{archetypes,content,themes}
Watching for config changes in C:\Users\win11\IdeaProjects\kenji.blog\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Адрес выводится во время выполнения (в примере выше http://localhost:1313/), поэтому скопируйте адрес в свой браузер. Предварительный просмотр автоматически обновляется при каждом сохранении файла. Чтобы завершить предварительный просмотр, введите Ctrl+C в командной строке.

Я начал вести блог

Fri, 02 Sep 2022 07:23:00 +0900

Я начал вести блог

Что-то вроде фейерверка, код здесь

Всем привет. Я решил завести блог просто так.

У меня нет какой-то великой цели вроде “Я хочу опубликовать это!”, просто подумал, что было бы здорово иметь место, где я мог бы писать то, что приходит в голову, будь то технологии или повседневная жизнь.

Постараюсь не относиться к этому слишком серьезно и буду вести его как блокнот.

Сделано с помощью Hugo

Этот блог создан с помощью генератора статических сайтов “Hugo”. Я нашел симпатичную тему и решил ее попробовать. (То, что на выбор темы ушло около 2 часов — это секрет)

Я также планирую делать заметки о коде и инструментах, которые меня заинтересовали.

Утренний поход в Komeda

Кстати, сегодня утром я проснулся пораньше и пошел в кафе Komeda. Вышел в 8:30, прогуливаясь и вдыхая утренний воздух.

Заказал утренний сет А с мини-сироноваром и кофе с молоком. Кажется, это стоило около 800 иен? (Не помню)

Утреннее кафе — это здорово. Если перед работой есть время немного расслабиться, кажется, что весь день пройдет хорошо.

Так что с этого момента я буду писать в свободном стиле. Планирую смешивать технические темы и повседневную жизнь.

Буду рад вашей поддержке!