对于 Web 开发的入门者而言 ， 开发一个功能全面的静态的网站首页 ， 并不是那么容易实现的需求 。然而 ， 实现一个个人网站或企业网站的简单首页，又是十分常见的需求 。如果可以通过编写简单的配置文件，就能实现一个美观使用的静态首页，并能够提供一些自定义的功能 ， 无疑会降低此类需求开发的门槛 。
文章插图
Homer
简介Homer，是 bastienwirtz 在 Github 上开源的静态网站首页生成器，通过简单的 yaml 配置文件就能实现，目前版本为 v21.03.2 。
Homer 使用简单 ，
- 使用 yaml 格式的配置文件配置
- 可安装 (pwa）
- 提供搜索功能
- 提供分组功能
- 提供主题自定义功能
- 提供离线 heathcheck 功能
- 实现快捷键：/ 开始搜索，Escape 停止搜索，Enter 打开首个匹配结果，Alter/Option + Enter 在新标签开启结果
文章插图
Homer
使用Homer 是一个完全静态的 html/js 管理面板，使用 webpack 从 /src 中进行生成 。Homer 需要使用一个 HTTP 服务器来提供服务 。
Homer 可以使用 Docker 启动：
docker run -d \-p 8080:8080 \-v </your/local/assets/>:/www/assets \--restart=always \b4bz/homer:latest默认的静态资源或被自动安装在 /www/assets 文件夹，使用 UID 和 GID 环境变量来改变资源所有者 。也可以使用 Docker-Compose 启动，配置 docker-compose.yml：
volumes:- /your/local/assets/:/www/assetsports:- 8080:8080启动容器，cd /path/to/docker-compose.ymldocker-compose up -d也可以下载预编译的 tarball 直接使用 ， 下载 homer.zip 文件 ， 重命名 assets/config.yml.dist 文件为 assets/config.yml：wget https://github.com/bastienwirtz/homer/releases/latest/download/homer.zipunzip homer.zipcd homercp assets/config.yml.dist assets/config.ymlnpx serve # or python -m http.server 8010 or apache, nginx ...可以自行进行编译：# Using yarn (recommended)yarn installyarn build# **OR** Using npmnpm installnpm run build【web网页设计代码分享 企业网站主页制作代码】启动后 ， 就能看到 Homer 面板了 。
文章插图
Homer
Homer 最主要使用一个 yaml 格式的配置文件，一个样例的配置文件 config.yml 如下：
---# Homepage configuration# See https://fontawesome.com/icons for icons options# Optional: Use external configuration file. # Using this will ignore remaining config in this file# externalConfig: https://example.com/server-luci/config.yamltitle: "App dashboard"subtitle: "Homer"# documentTitle: "Welcome" # Customize the browser tab textlogo: "assets/logo.png"# Alternatively a fa icon can be provided:# icon: "fas fa-skull-crossbones"header: true # Set to false to hide the headerfooter: '<p>Created with <span class="has-text-danger">??</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # 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: "#4285f4"highlight-hover: "#5a95f5"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-hover: "#ffdd57"background-image: "assets/your/dark/bg.png"# Optional messagemessage:# 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: 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"icon: "fab fa-github"url: "https://github.com/bastienwirtz/homer"target: "_blank" # optional html tag target attribute- name: "link 2"icon: "fas fa-book"url: "https://github.com/bastienwirtz/homer"# 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: "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 example"tag: "app"url: "https://www.reddit.com/r/selfhosted/"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 showntag: "other"url: "http://192.168.0.151/admin"type: "PiHole" # optional, loads a specific component that provides extra features. MUST MATCH a file name (without file extension) available in `src/components/services`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
以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!
「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：
- 网页设计制作网站 怎样创建自己的网站平台
- 网页制作登录注册页面 网站注册页面代码
- 动态网页设计与网站建设 动态网页制作实例教程
- 简述网页设计的意思 什么是网页设计与制作专业
- 网页设计包含的内容 网页设计类型有哪些种类
- 网页制作的软件教学 怎么学会网页设计软件
- 安卓手机搭建web服务器 手机搭建网站全过程
- 网页设计与网站建设教程分享 怎样做网站教程
- html网页制作代码大全 如何用html制作一个网页
- 简单网页设计模板html 公司网页制作代码