Skip to content

增加公共代码 js/css 片段 #6143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Zuoqiu-Yingyi opened this issue Oct 10, 2022 · 15 comments
Closed

增加公共代码 js/css 片段 #6143

Zuoqiu-Yingyi opened this issue Oct 10, 2022 · 15 comments
Assignees
Labels
Milestone

Comments

@Zuoqiu-Yingyi
Copy link
Contributor

在什么情况下你需要该特性?In what scenarios do you need this feature?

关联: [提议] 增加公共主题 css 文件, 无论使用哪个主题, 该 css 都会生效 - 链滴

描述可能的最优解决方案 Describe the optimal solution

将公共主题 theme.css 文件与 theme.js 文件塞到某个 data 目录下某个现有的静态 Web 文件服务的目录

描述候选的解决方案 Describe the candidate solution

在 data 目录下设置一个新的提供静态 Web 文件服务的目录, 用于存放公共主题的 theme.css 文件与 theme.js 文件

其他信息 Other information

不急~

@Vanessa219
Copy link
Member

公共主题为 stage/build/app/base.css,所有主题都会进行加载。公共 js 里面主要的是前端 API 之类的么?

@Vanessa219 Vanessa219 removed their assignment Oct 10, 2022
@Zuoqiu-Yingyi
Copy link
Contributor Author

公共主题为 stage/build/app/base.css,所有主题都会进行加载。公共 js 里面主要的是前端 API 之类的么?

是指不与特定主题耦合的自定义主题片段, 优先级比用户所当前所使用的主题(theme.csscustom.css)与默认主题更高, 且无论用户切换到哪个主题都可以应用

@Vanessa219
Copy link
Member

哦哦哦,想起来了,抱歉抱歉。

@Vanessa219 Vanessa219 self-assigned this Oct 10, 2022
@Vanessa219 Vanessa219 added this to the 2.4.0 milestone Oct 10, 2022
@mozhux
Copy link

mozhux commented Oct 11, 2022

这是不是类似ob的代码片段?
如果是可以不区分启用的话,那最好是能有选择性的开启某些样式或js,在设置里调节需要的功能

@88250
Copy link
Member

88250 commented Oct 11, 2022

@mozhux 这个就不区分功能了,所有功能都塞到一个 js/css 中,区分功能的话还是通过插件机制比较好。

@mozhux
Copy link

mozhux commented Oct 11, 2022 via email

@88250
Copy link
Member

88250 commented Oct 11, 2022

我不太清楚如何区分一个文件中的不同片段 😂

@mozhux
Copy link

mozhux commented Oct 11, 2022 via email

@leolee9086
Copy link

简单点可以使用不同文件吧 这个应该比较好实现 我之前试了就是片段的加载顺序不知道怎么交互比较好

@88250
Copy link
Member

88250 commented Oct 11, 2022

那有可能是 JSON 存储,按 Key 来区分功能吧。这个得再考虑看下是否有必要,因为扩展性后面可能更多是通过插件机制来实现,共享依赖库这样的场景恐怕比较少。

目前我们可以考虑支持区分功能代码片段的扩展性,即实现上按照 JSON 保存:

[
  {
    "name": "common",
    "type": "js",
    "enabled": true,
    "content": "js code"
  }
]

后面如果要区分功能再扩展这个数组,让用户可以添加类似 common 的多个 snippet 对象。

物理存放路径:工作空间/data/snippets/conf.json

前端从 /api/snippet/getSnippet 加载。

@88250 88250 changed the title 增加公共主题 css 与 js 文件 增加公共代码 js/css 片段 Oct 11, 2022
88250 added a commit that referenced this issue Oct 11, 2022

Verified

This commit was signed with the committer’s verified signature.
88250 added a commit that referenced this issue Oct 12, 2022

Verified

This commit was signed with the committer’s verified signature.
88250 added a commit that referenced this issue Oct 12, 2022

Verified

This commit was signed with the committer’s verified signature.
88250 added a commit that referenced this issue Oct 12, 2022

Verified

This commit was signed with the committer’s verified signature.
Vanessa219 added a commit that referenced this issue Oct 12, 2022

Verified

This commit was signed with the committer’s verified signature.
88250 added a commit that referenced this issue Oct 12, 2022

Verified

This commit was signed with the committer’s verified signature.
Vanessa219 added a commit that referenced this issue Oct 12, 2022
Vanessa219 added a commit that referenced this issue Oct 12, 2022
@crendy
Copy link

crendy commented Oct 18, 2022

问一下 公共代码 js/css 片段 怎么操作?

@Zuoqiu-Yingyi
Copy link
Contributor Author

问一下 公共代码 js/css 片段 怎么操作?

  1. 新建文件 <workspace>/data/snippets/conf.json
  2. 直接编辑该文件

@terwer
Copy link
Contributor

terwer commented Oct 24, 2022

参照D大的示例,css直接改type即可,提供给有需要的参考:

[
  {
    "name": "common",
    "type": "js",
    "enabled": true,
    "content": "console.log('这是自定义js片段');"
  },
   {
    "name": "common",
    "type": "css",
    "enabled": true,
    "content": ".protyle-background:has(.protyle-background__icon.fn__none) {min-height: 57px !important;}.protyle-title{margin-left:16px !important;margin-right:16px !important;}.protyle-wysiwyg{padding-left:16px !important;padding-right:16px !important;}"
  }
]

@Zuoqiu-Yingyi
Copy link
Contributor Author

引用第三方文件的方案:

[
    {
        "name": "-js-test-1",
        "type": "js",
        "enabled": false,
        "content": "document.currentScript.type='module';document.currentScript.src='/widgets/custom.js';"
    },
    {
        "name": "-js-test-2",
        "type": "js",
        "enabled": false,
        "content": "import('/widgets/custom.js');"
    },
    {
        "name": "-css-test-1",
        "type": "css",
        "enabled": false,
        "content": "@import url('/widgets/custom.css');"
    }
]

@Zuoqiu-Yingyi
Copy link
Contributor Author

@88250 能不能将 data/snippets 目录也建立静态 Web 文件服务, 这样就可以在 conf.json 中通过 @import url('/snippets/foo.css');import('/snippets/bar.js'); 引用了, 不然想要同步的话只能另辟蹊径放在 data/widgetsdata/emojis 目录了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

7 participants