php - 如何在网站名称上使用 Lettering.js 和 Drupal 7？

Question

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

1. 我从 Github 下载文件并将其放在我的主题中名为 scripts 的文件夹中。 (所以它看起来像这样/sites/all/themes/MyThemeName/scripts/jquery.lettering.js)

2. 然后我使用语法“scripts[] = scripts/jquery.lettering.js”将脚本添加到主题的信息文件中。当我查看页面源代码时，我可以看到正在加载脚本。

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

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

Answer 1

lettering.js 所做的就是将文本拆分成 span。

<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 行为，该行为可能会在所有带有类字母的标题上运行 letteringjs。

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