angular - DSpace 7.0 在哪里放置自定义 CSS 和 Javascript？

问题描述

在使用 Mirage2 主题的以前版本的 DSpace 中，如果我想包含我的自定义 javascript，我只需将其放在脚本目录中并在scripts.xml文件中引用它即可。当涉及到自定义 CSS 时，我只是使用文件@import中的指令来引用它_style.scss。现在 DSpace 7.0 正在使用 Angular 框架，我想知道我应该把我的自定义 JS 和 CSS 文件放在哪里。我想将我的一些自定义从 6x 迁移到 7，例如可折叠/可展开的目录，它需要自定义 CSS 和 JS。

我认为在这个使用界面定制指南中，我有预感如何放置我的自定义 CSS，但我不知道在哪里放置我的自定义 Javascript。

提前致谢！

编辑 1

我根据我在网上的搜索尝试了什么，特别是这个：如何在 Angular 6/7 中使用外部 JS 文件和 JavaScript 代码

由于我的外部自定义 Javascript 依赖于 JQuery，我通过运行安装它：

npm install jquery

安装 jquery 后，我在该js目录下创建了一个目录[dspace-angular]/src/assets并将我的外部 javascript 复制到那里。

然后我将它们添加到文件中的脚本数组中[dspace-angular]/angular.json：

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "src/assets/js/jquery.cookie.js",
  "src/assets/js/jquery.treeview.js",
  "src/assets/js/sair.js"
]

对于自定义 CSS，我将其复制到[dspace-angular]/src/styles]目录中并在文件的样式数组中引用它angular.json：

        "styles": [
          "src/styles/startup.scss",
          "src/styles/jquery.treeview.css",
          {
            "input": "src/styles/base-theme.scss",
            "inject": false,
            "bundleName": "base-theme"
          },
          {
            "input": "src/themes/custom/styles/theme.scss",
            "inject": false,
            "bundleName": "custom-theme"
          },
          {
            "input": "src/themes/dspace/styles/theme.scss",
            "inject": false,
            "bundleName": "dspace-theme"
          }
        ],

由于此 CSS 的某些内容使用背景图像，因此我将图像复制到[dspace-angular]/src/assets/images目录中。

保存angular.json并发出命令yarn start:dev后，我收到一个错误：

TSError: ⨯ Unable to compile TypeScript:
src/app/shared/empty.util.ts:1:28 - error TS2307: Cannot find module 'rxjs' or its corresponding type declarations.

1 import { Observable } from 'rxjs';
                         ~~~~~~
src/app/shared/empty.util.ts:2:29 - error TS2307: Cannot find module 'rxjs/operators' or its corresponding type declarations.

2 import { filter, map } from 'rxjs/operators';
                          ~~~~~~~~~~~~~~~~

at createTSError (C:\dspace-angular\node_modules\ts-node\src\index.ts:434:12)
at reportTSError (C:\dspace-angular\node_modules\ts-node\src\index.ts:438:19)
at getOutput (C:\dspace-angular\node_modules\ts-node\src\index.ts:578:36)
at Object.compile (C:\dspace-angular\node_modules\ts-node\src\index.ts:775:32)
at Module.m._compile (C:\dspace-angular\node_modules\ts-node\src\index.ts:858:43)
at Module._extensions..js (internal/modules/cjs/loader.js:1257:10)
at Object.require.extensions.<computed> [as .ts] (C:\dspace-angular\node_modules\ts-node\src\index.ts:861:12)
at Module.load (internal/modules/cjs/loader.js:1085:32)
at Function.Module._load (internal/modules/cjs/loader.js:950:14)
at Module.require (internal/modules/cjs/loader.js:1125:19)
error Command failed with exit code 1.

我发出了命令yarn install，然后yarn start:dev它编译成功。

当我在浏览器中查看它时，我可以说 CSS 已加载，因为我可以看到列表中应用的背景图像。基本上，我包含的自定义 javascript 只是为了在集合和项目页面上找到一个可展开/可折叠的目录。

作为 6.3 版本的示例：

这就是我在上面完成的步骤之后的样子：

我的自定义 javascript 使sair.js文件中的列表可折叠/可扩展仅包含以下代码：

$(function() {
    $("#tree").treeview({
        collapsed: true,
        animated: "medium",
        control:"#sidetreecontrol",
        persist: "location"
    });
});

我在浏览器的控制台中没有发现任何相关的错误（对我来说），这会告诉我我在这里缺少什么。我的意思是如果 jquery 没有正确加载，那么我会有reference not found错误吗？

我还尝试在<head>标签中包含外部 javascript，index.html但我只有一个空白页。

所以我现在的问题是：

我错过了什么？
我上面做的步骤是否正确？（即，这可以被认为是最佳实践吗？）
使用外部 javascript 是否有任何替代步骤？

标签： angulardspace

angular - DSpace 7.0 在哪里放置自定义 CSS 和 Javascript？

问题描述

解决方案

推荐阅读