/shortcode-rewards

A Hugo theme component with reward-log or sponsor-log shortcode.

Primary LanguageHTMLMIT LicenseMIT

shortcode-rewards

A Hugo theme component with reward-log or sponsor-log shortcode.

Demo

Requirements

Developed based on the FixIt Timeline plugin.

  • FixIt v0.3.9 or later.

Install Component

The installation method is the same as installing a theme. There are several ways to install, choose one, for example, install through Hugo Modules:

[module]
  [[module.imports]]
    path = "github.com/hugo-fixit/FixIt"
+ [[module.imports]]
+   path = "github.com/hugo-fixit/shortcode-rewards"

Inject Partial

Inject the shortcode-rewards.html into the custom-head through the custom block opened by the FixIt theme in the layouts/partials/custom.html file:

{{- define "custom-head" -}}
  {{- partial "inject/shortcode-rewards.html" . -}}
{{- end -}}

Usage

First, create the reward-log.yml file and edit your data:

cp themes/shortcode-sponsor-log/reward_log.yml.example data/reward_log.yml

If your site is multilingual, you can create a reward_log.en.yml file for English and reward_log.zh-cn.yml for Chinese.

Next, use the reward-log shortcode in any page:

{{< reward-log >}}

Note

For compatibility with older versions, sponsor-log shortcode can also be used, and the corresponding data file is sponsor_log.yml.

Params

Shortcode

The reward-log shortcode has the following named parameters, and the positional parameters ordered from top to bottom:

Parameter Description Type Optional values Default
reverse whether the node is ascending or descending, default is ascending boolean - false
placement position of timestamp string top / bottom bottom
animation whether to enable animation boolean - false
size node size string small / medium / large medium
node node style string circle / dot circle
width # container width string - -
height # container height string - -
class # container classname string - -

Parameters marked with # only support named parameters.

Data

The reward_log.yml file has the following fields:

# The sponsor logs data format is as follows
# currency: [CNY, USD, EUR, ...] https://gohugo.io/functions/lang/formatcurrency/
# origin: [alipay, bitcoin, paypal, wechatpay, ...]

message: Thanks all!
currency: CNY
symbol: ¥
# The sponsor logs inherit the FixIt Timeline events
logs:
  - date: "2006-01-02 15:04:05"
    sponsor: Cell
    money: 50
    origin: alipay
    remark: "Come on!"

References