Question

我正在尝试在我的新Drupal 7网站的网站名称上使用Lettering.js。以下是我到目前为止所做的事情：

我从Github下载了文件并将其放在我主题中名为scripts的文件夹中。（所以看起来像/sites/all/themes/MyThemeName/scripts/jquery.lettering.js）
然后我使用以下语法“scripts [] = scripts / jquery.lettering.js”将脚本添加到主题的info文件中。我可以看到在查看页面源时正在加载脚本。

我遇到问题的部分是如何调用它。我一直在http://drupal.org/node/171213阅读文档，但我仍然感到困惑。我假设我应该将调用放在template.php中，并且我可以使用$ site_name来访问站点内的站点名称，但我不确定从那里去哪里。

感谢任何能提供一些建议的人。

Answer 1

所有fonts.js所做的就是将文本拆分为跨度。

<p>Hey</p>

变为

<p><span class="char1">H</span><span class="char2">e</span><span class="char3">y</span></p>

有关详细信息，请参阅源代码：https://github.com/davatron5000/Lettering.js/blob/master/jquery.lettering.js

这可以通过预处理功能轻松完成，也可以使用PHP在模板中完成：

$chars = str_split($site_name);
$letter_site_name = "";
for($i=0,$count=count($chars);$i<$count;$i++) {
   $letter_site_name = '<span class="char' . ($i+1) . '">' . $chars[$i] . '</span>';
}

如果你想使用lettering.js，你必须写一个额外的JavaScript。这个脚本必须定义一个Drupal行为，它可以在所有标题上用类字体运行fontsjs。

(function ($) {
  Drupal.behaviors.headline_lettering = {
    attach:function (context, settings) {
      $("h1.lettering:not(.lettering-attached)", context)
         .addClass('lettering-attached')
         .lettering();
    }
  }
})(jQuery);

Answer 2

扩展上一个答案。

可以使用template.php中的drupal_add_js（）添加javascript：

drupal_add_js($path_to_theme . '/scripts/jquery.lettering-0.6.1.min.js');

上面提到的附加脚本可以添加到page.tpl.php作为

<script>
(function ($) {
  Drupal.behaviors.headline_lettering = {
    attach:function (context, settings) {
      $(".lettering:not(.lettering-attached)", context)
         .addClass('lettering-attached')
         .lettering();
    }
  }
})(jQuery);
</script>

我没有在脚本中添加.h1然后我只需要在任何文本中添加一个“刻字”类，然后将应用字体。

然后您可以使用Kern.js调整每个字母的位置。它生成需要包含在页面中的CSS。

如何在站点名称上使用Drupal 7的Lettering.js？

2 个答案: