Warp FRAMEWORK教程

Yootheme教程

Warp 架构中文说明——添加新的CSS,JS或字体

用户评分: 0 / 5

不活动星星不活动星星不活动星星不活动星星不活动星星
 

在本教程中,我们向您展示如何将自定义字体,CSS和JavaScript文件添加到基于Warp框架的主题中。

单个配置文件/layouts/template.config.php通过在一个位置进行所有初始化改进了模板环境的设置。它初始化所有PHP类,加载所有必要的CSS和JavaScript以及所有IE特定的文件。如果你需要加载自定义的CSS和JavaScript文件,这是你做的地方。

如果您创建了主题样式并希望添加一些新的资源,则可以覆盖默认的template.config.php文件。只需将/layouts/template.config.php复制/styles/YOUR_STYLE/layouts/template.config.php

添加一个CSS文件

template.config.php配置文件加载所有主题的CSS文件。如果您想添加自己的自定义CSS文件/css/my.css,可以使用以下语法来完成:

// load css
$this['asset']->addFile('css', 'css:my.css');

添加一个JAVASCRIPT文件

如果您想添加自己的脚本my.js,只需将其复制到主题/ js目录,并将以下内容添加到template.config.php配置文件中:

// add javascripts
$this['asset']->addFile('js', 'js:my.js');

添加一个字体

有时你需要添加一个自定义字体到你的Warp主题,这只需要几个步骤。FontSquirrel有一个很好的服务,您可以选择许多Web字体,甚至可以从您的电脑上传一个自定义的字体,并将其转换为一个webfont。尊重字体版权,不是每个字体在技术上建立和/或合法的网络使用许可。

如果您想使用法语,西班牙语或其他拉丁语言,请选择支持Mac Roman子集/字符编码的字体。

添加一个字体到你的主题

把你的字体文件放到主题的/ fonts目录下。创建一个包含字体的CSS文件,并给它一个像fontname.css这样的专有名称编辑/layouts/template.config.php文件并在加载字体部分添加一行

// load fonts
$this['asset']->addFile('css', 'template:fonts/myfont.css');

更新主题的config.xml文件,使您的字体在主题设置中可用。目前有3种不同的类型可用(正文,标题和菜单字体)。只需在所需的字体参数(font1,font2或font3)中添加新的选项即可。在下面的例子中,我们将新的字体添加到Body Font参数中。

<field name="font1" type="list" default="default" label="Body Font" description="Select the main body typeface.">
	<option value="arial">Arial</option>
	<option value="lucida">Lucida</option>	
	...
	<option value="myfont">My Font</option>

接下来,/ css / font1目录中为您的字体创建一个myfont.css文件这个文件定义了所有你想应用你的新字体的选择器。请确保检查此目录中的现有文件,因为您想以同样的方式设置myfont.css我们继续我们的例子,并在我们的myfont.css中定义正文字体,如下所示:

body { font-family: "MyFontRegular"; }
说点什么...
取消
你是一个访客 ( 注册 ? )
作为一个访客
加载评论... 注释将在之后刷新 00:00.

第一个发表评论

Search