首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >定制OJS3.3.0仪表板字体(没有硬编码)

定制OJS3.3.0仪表板字体(没有硬编码)
EN

Stack Overflow用户
提问于 2021-03-04 10:40:00
回答 1查看 901关注 0票数 1

我们目前正在自定义OJS3.3.0仪表板。我们希望将我们的自定义字体添加到仪表板中(我们为客户端添加了我们自己的主题插件和所需的字体),但不幸的是,我们没有找到任何解决方案--如何在没有硬编码的情况下将字体导入ojs。

是否有任何方法将我们的字体导入ojs而不进行硬编码?

或者有任何方法将字体从我们的主题插件导入到ojs中?

有任何方法来解决在ojs中安装的主题插件字体吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-08 18:40:31

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

代码语言:javascript
复制
<?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 contextaddLesspriority、.有关更多信息,请查看此链接

例子:

在本例中,TutorialThemePlugin是我们的自定义主题。假设我们希望在客户端(前端)和管理仪表板端(后端)导入a Roboto font。在此之前,我们需要激活我们的模板。在管理页面上,我们在技术上属于“站点”区域,而不是一个特定的日志。因此,我们需要确保我们已经激活了网站的自定义主题,而不仅仅是日志。我们从这个路径Settings > Website > Appearance激活我们的主题。

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

代码语言:javascript
复制
TutorialThemePlugin:
     - js
     - libs
     - locale
     - styles
        - fonts
           - roboto.css
           - Roboto-Thin.ttf
           - Roboto-Medium.eot
           - ...
     - template
     - ...

第二步是通过主题调用字体或样式。

TutorialThemePlugin.inc.php:

代码语言:javascript
复制
<?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。创建自定义主题时,可以选择让它扩展父主题。子主题将自动加载其父主题中的模板和样式。这允许您在预先存在的主题的基础上构建主题。子主题允许我们覆盖从父主题中选择的模板,而在没有重写模板时仍然使用它们。

本指南的HTML/Smarty部分描述了如何按优先级顺序加载前端模板文件。子主题添加一个用于检索模板文件的新的最高优先级位置。

当OJS或OMP加载模板时,它按以下顺序进行搜索。

  1. 当前主题template目录。
  2. 如果指定了父主题,则父主题的模板目录。
  3. OJS或OMP模板目录。
  4. 应用程序中的lib/pkp/templates/ directory

若要重写父主题的模板(OJS默认模板),请将该模板文件复制到子主题(TutorialThemePlugin主题)中的相同位置。

对于对模板文件的更改,可以转到Administration >清除模板缓存。

参考资料:

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66473361

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档