自定义 ojs 3.3.0 仪表板字体（无硬编码）

Question

我们目前正在定制 ojs 3.3.0 仪表板。我们想将我们的自定义字体添加到仪表板（我们为客户端添加了我们自己的主题插件和所需的字体），但不幸的是我们还没有找到任何解决方案如何在没有硬编码的情况下将我们的字体导入 ojs。

有没有办法不用硬编码将我们的字体导入ojs？

或者有什么方法可以将我们的主题插件中的字体导入到 ojs 中吗？

有没有办法从已安装的主题插件中解决 ojs 中的字体问题？

Answer 1

基于 PKP-OJS Documentation，是的，您可以添加自定义样式或字体并覆盖它们。每个主题都扩展了核心 ThemePlugin class。 class 有多种方法可以帮助您加载脚本和样式、修改父样式表等。主题的设置和配置将在 init() 方法中进行。此方法仅运行适用于当前活动主题（或当前活动主题的父主题）。 API 的所有其他方法应该是 init() 方法中的运行。

<?PHP

import('lib.pkp.classes.plugins.ThemePlugin');
class TutorialThemePlugin extends ThemePlugin {

  /**
  * Load the custom styles for our theme
  * @return null
  */
  public function init() {
      $this->addStyle('my-custom-style', 'styles/index.less');
  }
}

如果要添加新样式或 css 字体，请使用 addStyle() 方法。 addStyle() 方法接受许多可选参数 hash.Like context、addLess、priority、...。查看此 link 了解更多信息.

示例：

在这个例子中，TutorialThemePlugin 是我们的自定义主题。想象一下，我们想在客户端（前端）和管理仪表板端（后端）导入 a Roboto font。在一切之前，我们需要激活我们的模板。在管理页面上，我们在技术上位于“站点”区域，而不是特定期刊。所以我们需要确保我们已经激活了网站的自定义主题，而不仅仅是期刊。我们从这条路径 Settings > Website > Appearance.

激活我们的主题

第一步是将字体上传到我们的自定义主题 styles/fonts 目录，然后在 CSS 文件中找到它们。

TutorialThemePlugin:
     - js
     - libs
     - locale
     - styles
        - fonts
           - roboto.css
           - Roboto-Thin.ttf
           - Roboto-Medium.eot
           - ...
     - template
     - ...

第二步是通过我们的主题调用字体或样式。
TutorialThemePlugin.inc.php:

<?PHP

import('lib.pkp.classes.plugins.ThemePlugin');
class TutorialThemePlugin extends ThemePlugin {

  /**
  * Load the custom styles for our theme
  * @return null
  */
  public function init() {
      $this->addStyle('htmlFont', 'styles/fonts/roboto.css', array('contexts' => 'frontend')); // Client Side
      $this->addStyle('htmlFont', 'styles/fonts/roboto.css', array('contexts' => 'backend')); // OJS Admin Dashboard
  }
}

第三步是在我们的主题中继承自OJS。当我们创建自定义主题时，我们可以选择让它扩展父主题。子主题将自动加载在其父主题中找到的模板和样式。这允许您在预先存在的主题之上构建主题。子主题允许我们从父主题覆盖 select 模板，同时在没有模板被覆盖时仍然使用它们。
本指南的 HTML/Smarty 部分描述了如何按优先顺序加载前端模板文件。子主题为检索模板文件添加了一个新的最高优先级位置。

当 OJS 或 OMP 加载模板时，它会按以下顺序搜索。

当前主题template目录。
如果指定父主题，父主题的模板目录。
OJS 或 OMP 模板目录。
应用内lib/pkp/templates/ directory。

要覆盖父主题的模板（OJS 默认模板），将该模板文件复制到子主题（TutorialThemePlugin 主题）中的相同位置。

For changes to the template files, you can go to Administration > Clear Template Cache.

参考资料：

https://docs.pkp.sfu.ca/pkp-theming-guide/en/theme-api
https://docs.pkp.sfu.ca/pkp-theming-guide/en/child-themes
https://forum.pkp.sfu.ca/t/how-can-i-override-backend-templates-ojs-3/33512/27
https://forum.pkp.sfu.ca/t/ojs-3-need-help-with-theme-customization/21210

自定义 ojs 3.3.0 仪表板字体（无硬编码）

Customizing ojs 3.3.0 dashboard font (without hardcoding)

css

smarty

dms

ojs

示例：

参考资料：