ブログ運営 on kenji.blog

Cara Mendapatkan dan Menempatkan Peringkat Halaman Populer dari Google Analytics

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

Pengantar

Dengan menggunakan layanan bernama Ranklet , Anda dapat dengan mudah mendapatkan dan menempatkan peringkat halaman populer dari Google Analytics.

Dalam artikel ini, saya akan menunjukkan cara menempatkannya di blog HUGO.

Contoh Hasil

Persiapan

Google Analytics harus disiapkan di situs

Langkah-langkah

Akses Ranklet
Klik Sign in with Google untuk masuk dengan akun Google (harus ditautkan ke akun Google Analytics)

Klik Izinkan

Atur informasi dasar

Saya telah mengaturnya seperti yang ditunjukkan di atas.

Pada Google Analytics View , pilih tampilan yang ingin Anda dapatkan peringkatnya.

Atur penggantian teks

Saya telah mengaturnya seperti yang ditunjukkan di atas. Ini diatur untuk menghapus | kenji.blog dari judul halaman.

Atur templat

HTML (angka peringkat disembunyikan)

 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 (ukuran font diubah, deskripsi akan ditampilkan dalam 3 baris)

 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 tidak ada perubahan

Salin HTML dari publikasi di situs

Salin HTML yang ditampilkan

Tempel ke templat HUGO

Buat layouts/partials/ranklet.html dan tempel HTML yang disalin

1

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

Tempel kode di bawah ini pada baris sebelum </footer> di layouts/_default/single.html

1

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

Itu saja. Peringkat akan ditampilkan di bagian bawah halaman ini seperti yang ditunjukkan di bawah ini.

Kode pendek yang dapat digunakan di HUGO

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

Kode pendek yang dapat digunakan di HUGO

YouTube

{{<youtube 123456abc>}}

Twitter

{{<twitter 123456abc>}}

Instagram

{{<instagram 123456abc>}}

Flickr

{{<flickr 123456abc>}}

Vimeo

{{<vimeo 123456abc>}}

Lainnya

Shortcodes

Catatan sampingan

Jika Anda ingin menampilkan {{< foo >}} di situs, Anda perlu menulisnya sebagai {{</* foo */>}}.

【HUGO】Pratinjau Tampilan di Lingkungan Lokal

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

Instalasi HUGO

Unduhan

Unduh HUGO

Dari situs web di atas, unduh dan ekstrak modul Windows yang sesuai dengan lingkungan Anda. Dalam kasus saya, saya mengunduh “hugo_0.102.3_Windows-64bit.zip”.

Ekstrak

Ekstrak file zip yang diunduh dan salin hugo.exe di dalamnya ke direktori yang Anda buat, misalnya C:\bin.

Daftarkan ke Variabel Lingkungan

Daftarkan ke variabel lingkungan untuk menjalankan hugo.exe dari lokasi mana pun. Ini adalah operasi di Windows 11, tetapi Anda dapat mendaftarkannya dengan prosedur berikut.

Tekan tombol Win+Pause untuk membuka Tentang.
Klik Pengaturan sistem lanjutan.
Klik Variabel Lingkungan.
Pilih Path dan klik Edit.
Klik Baru, masukkan “C:\bin” di baris baru, dan klik OK untuk menutup dialog.

Pratinjau Blog

Pergi ke folder blog HUGO di Command Prompt dan jalankan perintah berikut.

hugo server -D

Hasil eksekusinya ada di bawah. (-D adalah opsi untuk menampilkan artikel draf.)

 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

Alamat akan ditampilkan pada saat eksekusi (dalam contoh di atas, http://localhost:1313/), jadi salin alamat tersebut ke browser Anda. Pratinjau akan diperbarui secara otomatis setiap kali file disimpan. Untuk mengakhiri pratinjau, masukkan Ctrl+C di command prompt.

Saya mulai menulis blog

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

Saya mulai menulis blog

Sesuatu seperti kembang api, kodenya ada di sini

Halo semuanya. Saya memutuskan untuk mulai menulis blog tanpa alasan khusus.

Saya tidak punya tujuan besar seperti “Saya ingin mempublikasikan ini!”, hanya berpikir akan menyenangkan memiliki tempat di mana saya bisa menulis apa pun yang terlintas di pikiran, baik itu tentang teknologi maupun kehidupan sehari-hari.

Saya tidak akan terlalu serius dan akan menggunakannya seperti buku catatan.

Dibuat menggunakan sesuatu yang disebut Hugo

Blog ini dibuat menggunakan generator situs statis yang disebut “Hugo”. Saya menemukan tema yang bagus, jadi saya memutuskan untuk mencobanya. (Butuh sekitar 2 jam untuk memilih tema, tapi itu rahasia)

Saya juga berencana untuk membuat catatan tentang kode dan alat yang menarik bagi saya.

Cerita Komeda di pagi hari

Ngomong-ngomong, pagi ini saya bangun agak pagi dan pergi ke kedai kopi Komeda. Saya berangkat jam 8:30, berjalan sambil menghirup udara pagi.

Saya memesan paket sarapan A dengan mini shironoir dan cafe au lait. Kalau tidak salah harganya sekitar 800 yen? (Saya tidak ingat)

Kafe di pagi hari sangat menyenangkan. Jika saya punya waktu untuk bersantai sebelum bekerja, rasanya hari itu akan berjalan lancar.

Jadi, mulai sekarang saya akan menulis dengan santai. Saya berencana mencampur topik teknis dan kehidupan sehari-hari.

Mohon dukungannya!