Docs Guide

Guide untuk Pembuatan Dokumentasi

3 menit dibaca

Akses Terbatas

Akses Public

Pageinfo

This is placeholder content.

{ {% pageinfo color="primary" %} }
This is placeholder content.
{ {% /pageinfo %} }

TIPS

{< tag >} untuk isi HTML
{% tag %} untuk isi Markdown

Gara-gara perbedaan command tag ini, bisa bikin error atau kacau hasil

Custom

Sudah dicustom untuk penambahan Css dan Javascript, dengan cara:

1. Edit config

Pada config.toml tambahkan:

custom_css = ["css/namafile.css"]
custom_js = ["js/namafile.js"]

2. Struktur

Tata letaknya di folder /static/css dan /static/js

Keyboard

Single

<div class='keyboard'>ctrl + c</div>

ctrl + c

Tag KBD

{ {< kbd ctrl >} } + { {< kbd c >} }

ctrl + c

Alert

{ {% alert title="judul" color="jenis" %} }
isi pesan
{ {% /alert %} }

Spoiler

{ {% spoiler title="Judul" %} }
isi
{ {% /spoiler %} }

Foto

Cara aman letakkan pada folder /static

Normal

Format markdown:

![Puncak Pedang - Klotok](/images/pedang.jpg "Puncak Pedang - Klotok")

Gambar Tag

Cocok buat model galeri

{ {< gambar src="/foto.jpg" caption="Mican.." alt="kitten" title="Mungil dan Imut" >} }

Photo Tag

Dengan fitur border dan bayangan. Untuk menekankan informasi foto. Atribut caption untuk mengisi figcaption.

Figcaption css nya belum selesai dibenerin.

{ {< photo src="/images/pedang.jpg" alt="Puncak Pedang" title="Puncak Pedang - Klotok" caption="Puncak Pedang - Klotok" >} }

Figure

Format CSS belum cocok.

{ {< figure src="/images/pedang.jpg" title="Puncak Pedang - Klotok" >} }

Mermaid

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

TAB Card

Tabpane

Card

Hightlight

Html

{ {< highlight html >} }
... code html ...
{ {< /highlight >} }

output:

<section id="main">
  <div>
   <h1 id="title">{{ .Title }}</h1>
    {{ range .Pages }}
        {{ .Render "summary"}}
    {{ end }}
  </div>
</section>

File

{ {< code file=static/code/examples/ping.js highlight="javascript" >} }

const bot = new lumpia.init(token, { log_id: 12345 });

function doPost(e) {
  bot.doPost(e);
}

bot.cmd('ping', (ctx, next) => {
  let time_start = Date.now();
  let res = ctx.replyIt('..pong!');
  let time_stop = Date.now();

  let time_delta = (time_stop - time_start) / 1000; // mili detik
  let time = new Intl.NumberFormat('id').format(time_delta); // jadiin detik, sekaligus di format

  let msg_id = res.result.message_id;

  bot.telegram.editMessageText(ctx.chat.id, msg_id, null, `<b>Pong!</b> Proses <code>${time}</code> detik.`, { parse_mode: 'html' });
})

Eksternal

Gist

{ {< gist banghasan 0a3711290e6b6d621d7550e5653a4c01 >} }

Twitter

{ {< tweet 1428660612091977732 >} }

twitter tiba-tiba error

Ascii Cinema

{ {< asciicast 428738 >} }

Google Slide

Test Presentasi