让网站运营更简单
让搜索引擎更喜欢的网站
立即咨询
福利，定制网站送小程序， 名额有限，先到先得
对于 Web 开发的入门者而言，开发一个功能全面的静态的网站首页，并不是那么容易实现的需求然而，实现一个个人网站或企业网站的简单首页，又是十分常见的需求如果可以通过编写简单的配置文件，就能实现一个美观使用的静态首页，并能够提供一些自定义的功能，无疑会降低此类需求开发的门槛。
Homer简介Homer，是 bastienwirtz 在 Github 上开源的静态网站首页生成器，通过简单的 yaml 配置文件就能实现，目前版本为 v21.03.2Homer 使用简单，使用 yaml 格式的配置文件配置。
可安装 (pwa）提供搜索功能提供分组功能提供主题自定义功能提供离线 heathcheck 功能实现快捷键：/ 开始搜索，Escape 停止搜索，Enter 打开首个匹配结果，Alter/Option + Enter 在新标签开启结果
Homer使用Homer 是一个完全静态的 html/js 管理面板，使用 webpack 从 /src 中进行生成Homer 需要使用一个 HTTP 服务器来提供服务Homer 可以使用 Docker 启动：。
sets --restart=always b4bz/
volumes:
也可以下载预编译的 tarball 直接使用，下载 homer.zip 文件，重命名 assets/config.yer.zip
unziphomer.zipcdhomercpassets/config.yml.dist assets/config.ymlnpxserve # or pyth
lyarnbuild # **OR** Using npmnpminstallnpmrun build启动后，就能看到 Homer 面板了。
HomerHomer 最主要使用一个 yam icons options
# Optional: Use external configuration file. # Using this will ignore remaining config
title:"App dashboard"subti
"assets/logo.png"# Alternatively a fa icon can be provided:# icon: "fas fa-skull-crossbones"header:true
# Set to false to hide the headerfooter:
Created with ❤️ with bulma, vuejs & font awesome // Fork me on
# set false if you want to hide it.columns:"3"# "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)
# Optional themingtheme: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-hover:"#363636"background-image:"assets/your/light/bg.png"dark:highlight-primary:"#3367d6"highlight-secondary:
aeaea"text-header:
"#ffffff"text-title:"#fafafa"text-subtitle:"#f5f5f5"card-shadow:rgba(0,0,0,0.4)link-hover:"#ffdd57"background-image:
/" # 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:
# mapping:# title: id# content: value# refreshInterval: 10000style:"is-warning"title:"Optional message!"
icon:"fa fa-exclamation-triangle"content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."# Optional navbar
# links: [] # Allows for navbar (dark mode, layout, and search) without any linkslinks:-name:"Link 1"
-name:"link 2"icon: 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:"Second Page"icon:"fas fa-file-alt"url:
"#page2"# Services# First level array represents a group.# Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
services:-name:"Application"icon:"fas fa-code-branch"# A path to an image can also be provided. Note that icon take precedence if both icon and logo are set.
# logo: "path/to/logo"items:-name:"Awesome app"logo:"assets/tools/sample.png"# Alternatively a fa icon can be provided:
# icon: "fab fa-jenkins"subtitle:"Bookmark exampl
target:"_blank"# optional html tag target attribute-name:"Another one"logo:"assets/tools/sample2.png"
subtitle:"Another application"tag:"app"# Optional tagstyletagstyle:"is-success"url:"#"-name:"Other group"
icon:"fas fa-heartbeat"items:-name:"Pi-hole"logo:"assets/tools/sample.png"# subtitle: "Network-wide Ad Blocking" # optional, if no subtitle is defined, PiHole statistics will be shown
target:"_blank"# optional html a tag target attribute# class: "green" # optional custom CSS class for card, useful with custom stylesheet
# background: red # optional color for card to set color directly without custom stylesheet可以看到，提供了包括：标题、子标题、图表、主题、颜色风格、链接、子服务等配置。
Homer 通过以上的配置，就能自动生成美观的主页
Homer总结Homer 使用简单，使用 yaml 格式的配置文件配置，可安装，提供搜索、分组功能，可自定义主题等，使实现一个网站的静态首页变得十分简单，同时提供了美观且功能丰富的实现方案，值得使用
Homer
本文图文来源于网络，版权属于原作者或网站，内容为作者观点，内容版权归原作者所有、本站不对文章中的任何观点负责，内容只用于提供信息阅读，无任何商业用途。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站（文章、图片、音频、视频）有涉嫌抄袭侵权/违法违规的内容，请联系管理员，一经查实，将立刻删除、维护您的正当权益。
扫一扫，关注我们
