Homer¶

Docker¶

docker run --restart=always -d \
  --name homer \
  -p 13200:8080 \
  --mount type=bind,source="/data/wwwroot/docker/homer",target=/www/assets \
  --restart=unless-stopped \
  b4bz/homer:latest

技巧¶

Mac¶

# 生成 ICO 用
brew install imagemagick
magick icon.png -define icon:auto-resize=256,128,64,48,32,16 favicon.ico
# 批量操作
for f in *.png; do
  magick "$f" -define icon:auto-resize=256,128,64,32,16 "${f%.*}.ico"
done

# 矢量化 PNG→SVG
brew install potrace

magick logo.png logo.pnm      # PNG 转为中间格式 PNM
potrace -s -o logo.svg logo.pnm  # 使用 potrace 追踪轮廓生成 SVG
rm logo.pnm                      # 清理临时文件

# 批量操作
#!/bin/bash
file="${1%.*}"
magick "$file.png" "$file.pnm"
potrace -s -o "$file.svg" "$file.pnm"
rm "$file.pnm"

配置文件¶

修改config.yml文件

title: BOOKMARK
subtitle: 個人書籤導航
icon: "fas fa-bookmark"
#icon: "assets/icons/favicon.ico"
logo: "assets/icons/logo.svg"

header: true # Set to false to hide the header
# Optional: Different hotkey for search, defaults to "/"
hotkey:
  search: "Shift"
footer: "Miss You 陪伴，無論你需不需要我一直都在…" # set false if you want to hide it.

columns: "auto" # "auto" or number (must be a factor of 12: 1, 2, 3, 4, 6, 12)
connectivityCheck: true # whether you want to display a message when the apps are not accessible anymore (VPN disconnected for example).
                        # You should set it to true when using an authentication proxy, it also reloads the page when a redirection is detected when checking connectivity.

# Optional: Proxy / hosting option
proxy:
  useCredentials: false # send cookies & authorization headers when fetching service specific data. Set to `true` if you use an authentication proxy. Can be overrided on service level. 
  headers: # send custom headers when fetching service specific data. Can also be set on a service level.
    Test: "Example"
    Test1: "Example1"

# Set the default layout and color scheme
defaults:
  layout: columns # Either 'columns', or 'list'
  colorTheme: auto # One of 'auto', 'light', or 'dark'

# Optional theming
theme: default # 'default' or one of the themes available in 'src/assets/themes'.

# Optional custom stylesheet
# Will load custom CSS files. Especially useful for custom icon sets.
# stylesheet:
#   - "assets/custom.css"

# Here is the exhaustive list of customization parameters
# However all value are optional and will fallback to default if not set.
# if you want to change only some of the colors, feel free to remove all unused key.
colors:
  light:
    highlight-primary: "#3367d6"      # 蓝色主色
    highlight-secondary: "#4285f4"
    highlight-hover: "#5a95f5"
    background: "#f5f5f5"
    card-background: "#ffffff"
    text: "#363636"
    text-header: "#424242"
    text-title: "#303030"
    text-subtitle: "#424242"
    card-shadow: rgba(0, 0, 0, 0.1)
    link: "#3273dc"
    link-hover: "#363636"
    background-image: "/assets/your/light/bg.png"

  dark:
    highlight-primary: "#7e57c2"      # 紫色主色
    highlight-secondary: "#9575cd"
    highlight-hover: "#b39ddb"
    background: "#131313"
    card-background: "#2b2b2b"
    text: "#eaeaea"
    text-header: "#ffffff"
    text-title: "#fafafa"
    text-subtitle: "#f5f5f5"
    card-shadow: rgba(0, 0, 0, 0.4)
    link: "#b39ddb"                   # 链接用浅一点的紫
    link-hover: "#e1bee7"             # 悬停更亮的粉紫
    background-image: "/assets/your/dark/bg.png" # prefix with your sub subpath if any (ex: /homer/assets/...)


message:
  # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below.
  # mapping: # allows to map fields from the remote format to the one expected by Homer
  #   title: 'id' # use value from field 'id' as title
  #   content: 'value' # value from field 'value' as content
  # refreshInterval: 10000 # Optional: time interval to refresh message
  #
  # Real example using chucknorris.io for showing Chuck Norris facts as messages:
  # url: https://api.chucknorris.io/jokes/random
  # mapping:
  #   title: 'id'
  #   content: 'value'
  # refreshInterval: 10000
  # style: "is-warning"
  # title: "Optional message!"
  # icon: "fa fa-exclamation-triangle"
  # The content also accepts HTML content, so you can add divs, images or whatever you want to make match your needs.
  # content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  style: "is-info"
  title: "Quote"
  icon: "fa fa-quote-left"
  content: "未来，是過去所有選擇的延長線。<br>昨天已經過去，明天尚未到來，今天，仍是未知。"

# Optional navbar
# links: [] # Allows for navbar (dark mode, layout, and search) without any links
links:
  - name: "Home"
    icon: "fas fa-home"
    url: "#"
  # - name: "My Blog"
  #   icon: "fas fa-book"
  #   url: "https://lyricn.com"
  #   target: "_blank" # optional html tag target attribute
  # this will link to a second homer page that will load config from page2.yml and keep default config values as in config.yml file
  # see url field and assets/page.yml used in this example:
  - name: "Videos"
    icon: "fas fa-film"
    url: "#page_video"
  - name: "Music"
    icon: "fas fa-music"
    url: "#page_music"
  - name: "Photo"
    icon: "fas fa-camera"
    url: "#page_photo"
  - name: "Book"
    icon: "fas fa-book-reader"
    url: "#page_book"
  - name: "Game"
    icon: "fas fa-gamepad"
    url: "#page_game"
  - name: "Blog"
    icon: "fas fa-blog"
    url: "#page_blog"
  - name: "Web"
    icon: "fas fa-globe-asia"
    url: "#page_web"
  - name: "IDOL"
    icon: "fas fa-users"
    url: "#page_idol"
  - name: "Language"
    icon: "fas fa-language"
    url: "#page_language"

services:
  - name: 個人 - Blog
    icon: "fas ffa-book"
    items:
      - name: Lyricn's Blog
        url: "https://lyricn.com"
        target: "_blank"
        subtitle: 我的網站
        tag: "blog"
        # 尺寸選擇 is-small、is-medium、is-large
        # is-primary：主題色（通常是藍色系）、is-link：連結色，偏藍紫。
        # is-info：資訊色，藍色、is-success：成功色，綠色、is-warning：警告色，黃色、is-danger：錯誤/警示色，紅色
        # is-dark：深色、is-light：淺色、is-white：白色、is-black：黑色
        tagstyle: "is-medium is-info"
        keywords: "lyricn blog" # optional keyword used for searching purpose

AI生成services信息¶

將下列信息轉成homer可用的services信息，根據網站內容自動分組，每個分組不超過5個內容；
其中target: "_blank";
tag格式為tag: "book"，具體為內容根據網站內容生產（不超過十個字符）;
tagstyle為"is-medium is-info"，顏色隨機生成（is-info、is-success、is-warning、is-danger）;
keywords為url域名的信息（不要前綴和後綴）;
subtitle為網站信息簡介,如果有name信息保持原樣；
如果網站無法訪問，單獨列出

<center>
<a href="https://sound-effects.bbcrewind.co.uk/" target="_blank"> BBC 音效資料庫 </a>
</center>
<br>