Config Blog With Hexo Theme Diaspora and Gitalk Activation

Config Blog With Hexo Theme Diaspora and Gitalk Activation

August 16, 2022

Pilih Tema

Disini saya memilih Diaspora sebagai tema untuk blog saya.

Pilih tema yang kalian suka disini.
Cari url github untuk tema nya di website. Untuk Diaspora, ini url nya. @Fechin - Diaspora
Ikuti instruksi yang telah di tulis di Readme.md

Instal Tema

1
$ git clone https://github.com/Fechin/hexo-theme-diaspora.git themes/diaspora

Terapkan Tema

Ubah file konfigurasi hexo, _config.yml. Ubah nilai theme menjadi Diaspora.

1
2
3
...
theme: diaspora
...

Perbarui Tema

Catatan: Jangan lupa untuk buat file _config.yml cadangan, saat memperbarui tema.

1
2
cd themes/diaspora
git pull

Template Artikel baru

1
2
3
4
5
6
7
8
9
10
11
12
---
title: My awesome title
date: 2022-08-16 00:00:00
categories: 
    - category-1
    - category-2
tags: 
    - tag-1
    - tag-2
mp3: http://domain.com/awesome.mp3
cover: http://domain.com/awesome.jpg
---

Membuat Kategori

  1. Buat halaman baru dan diberi nama categories. Ikuti perintah berikut:

    1
    hexo new page categories

  2. Edit halaman yang baru dibuat dan atur jenis halaman ke categories.

    1
    2
    3
    4
    title: categories
    date: 2022-08-16 00:00:00
    type: "categories"
    ---

Tema akan secara otomatis menampilkan semua categories untuk halaman ini.

Membuat Tag

  1. Buat halaman baru dan diberi nama tags. Ikuti perintah berikut:

    1
    hexo new page tags

  2. Edit halaman yang baru dibuat dan atur jenis halaman ke tags.

    1
    2
    3
    4
    title: tags
    date: 2022-08-16 00:00:00
    type: "tags"
    ---

Tema akan secara otomatis menampilkan semua tags untuk halaman ini.

Membuat Pencarian

  1. Perlu menginstal plugin pencarian untuk hexo.

    1
    npm install hexo-generator-searchdb --save

  2. tambahkan script berikut di _config.yml.

    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000

  3. Buat halaman baru dan diberi nama search. Ikuti perintah berikut:

    1
    hexo new page search

  4. Edit halaman yang baru dibuat dan atur jenis halaman ke search.

    1
    2
    3
    4
    title: search
    date: 2022-08-16 00:00:00
    type: "search"
    ---

  5. Aktifkan menu pencarian lokal di _config.yml yang ada di folder tema.

    1
    2
    3
    4
    #本地搜索,请将索引文件放在网站根目录
    local_search:
        #是否启用
        enable: true

Tema akan secara otomatis menampilkan fungsi pencarian untuk halaman ini.

Konfigurasi Gitalk

Daftarkan aplikasi github kalian disini.

Setelah berhasil mendaftarkan aplikasi github, kalian akan mendapatkan clientID dan clientSecret. Silahkan copy dan isikan ke _config.yml bawaan tema.

1
2
3
4
5
6
7
8
9
10
gitalk:
    enable: true
    autoExpand: false
    clientID: '<yourClientId>'
    clientSecret: '<yourClientSecret>'
    repo: '<yourRepo>'
    owner: '<yourGithubUsername>'
    admin: [<yourGithubUsername>]
    id: location.pathname
    distractionFreeMode: false

_config.yml bawaan tema.

Ini adalah file konfigurasi bawaan dari tema. Anda bisa menyesuaikan konfigurasi tema disini.

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
# 头部菜单，title: link
menu:
  首页: /
  分类: /categories
  标签: /tags
  归档: /archives  
  关于: /about

# 是否显示目录
TOC: false

# 是否自动播放音乐
autoplay: false

# 默认音乐（随机播放）
mp3: 
    - http://link.hhtjim.com/163/425570952.mp3
    - http://link.hhtjim.com/163/425570952.mp3

# 首页封面图, 为空时取文章的cover作为封面(注意跨域问题,建议使用同源图片)
welcome_cover: /img/welcome-cover.jpg


# 默认文章封面图（随机调用,支持外链）
cover: 
  - /img/cover.jpg
  - /img/welcome-cover.jpg

# 是否显示Twitter分享卡片图像(图像尺寸要求：1200*600，creatorid不需要带@符号。注意：链接必须是完整url，否则Twitter将无法读取图片信息）
twitterpic:
  enable: false
  src: https://bangdream.moe/img/ident.png
  creatorid: yourtwitteridhere

# 是否关闭默认滚动条
scrollbar: true

# 本地搜索,请将索引文件放在网站根目录,或修改主题js文件的path值
local_search:
    # 是否启用
    enable: false

# 是否显示 一言(hitokoto)
hitokoto: true

# 链接(可选:facebook,twitter,github,wechat,email)
links:
    facebook: /
    twitter: /
    github: /
    wechat: /img/logo.png
    email: mailto:xxxx@gmail.com
  
# 备案
beian: 
    # 是否显示备案信息
    enable: true
    # 是否在主页面最底下显示备案信息(虽然丑，但是完全满足规定要求)
    enableFooter: false
    # 备案号
    beianInfo: 冀ICP备xxxxxxx号
    # 链接地址
    link: http://www.beian.miit.gov.cn

# 是否使用mathjax
mathjax: false

# Gitalk 评论插件（https://github.com/gitalk/gitalk）
gitalk:
    # 是否启用评论功能
    enable: false
    # 是否自动展开评论框
    autoExpand: false
    # 应用编号
    clientID: ''
    # 应用秘钥
    clientSecret: ''
    # issue仓库名
    repo: ''
    # Github名
    owner: ''
    # Github名
    admin: ['']
    # Ensure uniqueness and length less than 50
    id: location.pathname
    # Facebook-like distraction free mode
    distractionFreeMode: false

# 网站关键字
keywords: Fechin

# 要使用google_analytics进行统计的话，这里需要配置ID
google_analytics: 

# 网站ico
favicon: /img/favicon.png

# rss文件
rss: atom.xml

# 版权信息，要使用版权信息可以在这配置并设定许可方式，可以从 https://creativecommons.org/about/cclicenses/ 查询
copyright:
    enable: false
    license: "CC BY-NC-ND"

Terima kasih sudah membaca artikel Config Blog With Hexo Theme Diaspora with Gitalk Activation

Referensi: @Fechin - Docs