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

【问题标题】：How to use Lettering.js with Drupal 7 on site name?如何在站点名称上使用带有 Drupal 7 的 Lettering.js？
【发布时间】：2013-01-03 09:47:27
【问题描述】：

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

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

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

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

【问题讨论】：

标签： php javascript jquery drupal

【解决方案1】：

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

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

【讨论】：

【解决方案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。

【讨论】：