如何解决自定义 ojs 3.3.0 仪表板字体无硬编码
我们目前正在定制 ojs 3.3.0 仪表板。我们想将我们的自定义字体添加到仪表板(我们添加了我们自己的主题插件和客户端所需的字体),但不幸的是,我们还没有找到任何解决方案,如何在没有硬编码的情况下将我们的字体导入 ojs。
有没有什么办法不用硬编码就可以将我们的字体导入到ojs中?
解决方法
基于 PKP-OJS Documentation,是的,您可以添加自定义样式或字体并覆盖它们。
每个主题都扩展了核心 ThemePlugin 类。这个类有几个方法可以帮助你加载脚本和样式、修改父样式表等等。主题的设置和配置将在 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。例如 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
- ...
第二步是通过我们的主题调用字体或样式。
教程ThemePlugin.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',array('contexts' => 'backend')); // OJS Admin Dashboard
}
}
我们主题中的第三步是从 OJS 继承。当我们创建自定义主题时,我们可以选择让它扩展父主题。子主题将自动加载在其父主题中找到的模板和样式。这允许您在预先存在的主题之上构建主题。子主题允许我们覆盖从父主题中选择的模板,同时在没有模板被覆盖时仍然使用它们。
本指南的 HTML/Smarty
部分介绍了如何按优先级顺序加载前端模板文件。子主题添加了一个新的最高优先级位置,用于检索模板文件。
当 OJS 或 OMP 加载模板时,它会按以下顺序进行搜索。
- 当前主题
template
目录。 - 如果指定了父主题,则为父主题的模板目录。
- OJS 或 OMP 模板目录。
- 应用程序中的
lib/pkp/templates/ directory
。
要覆盖父主题的模板(OJS 默认模板),请将该模板文件复制到子主题(TutorialThemePlugin 主题)中的相同位置。
要更改模板文件,您可以转到管理 > 清除模板缓存。
参考:
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。