收起左侧

关于非cgi应用获取飞牛颜色主题配置fnos-theme-mode的方法

0
回复
20
查看
[ 复制链接 ]

7

主题

3

回帖

10

牛值

小有名气

1、前言

对于使用cgi应用来说,不存在跨域问题,直接使用 localStorage.getItem('fnos-theme-mode')即可,这没什么问题。

这里主要介绍的是自建服务的应用如何获取配置参数以自动适应飞牛颜色主题。

2、方法

2.1、中介cgi

app/ui中新建一个index.cgi,只简单的展示一个页面,用于获取参数并跳转到实际地址。
记得appname替换为实际应用id。

#!/bin/bash

echo "Content-Type: text/html; charset=utf-8"
echo ""

cat "/var/apps/appname/target/www/index.html"

app/www中新建一个index.html,也非常简单,在页面里获取参数,然后跳转到你的服务地址。
记得将80、443替换为你的实际端口,applaunchname替换为你的实际入口id。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <script>
      //可以转换一下,也可以直接使用原值
      const theme = {
        '10':'light',
        '20':'dark'
      }[localStorage.getItem('fnos-theme-mode')] || '';
      
      const protocol = window.location.protocol;
      const hostname = window.location.hostname;
      //如果是iframe入口,那https打开的飞牛就需要跳转到https
      const port = window.location.protocol == 'http:' ? '80' : '443'
      //跳转地址
      let newUrl = `${protocol}//${window.location.hostname}:${port}`;
      //fn connect的跳转
      if(hostname.endsWith('fnos.net')){
        newUrl = `${protocol}//applaunchname.${hostname}`
      }
      //跳转的时候带上参数
      window.location = `${newUrl}?fnos-theme=${theme}`;
    </script>
</body>
</html>

2.2、入口配置

app/ui/config中添加一个入口。
这里省略cgi入口其它参数,省略实际入口appname.main的配置参数。

特别说明: 局域网、穿透、ddns 访问时,实际只需要cgi入口即可,但是fn connect 是需要以入口id访问的,像 https://appname-main.xxx.fnos.net 这样,所以最好除了cgi之外再配置一个入口

记得appname替换为实际应用id。

{
    ".url": {
        "appname.cgi.Application": {
            "url": "/cgi/ThirdParty/appname/index.cgi/",
        },
        "appname.main.Application": {
        }
    }
}

2.3、设置为主入口

manifest中将cgi设置为主入口。
记得appname替换为实际应用id。

desktop_applaunchname=appname.cgi.Application

结束

收藏
送赞
分享
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则