3

我正在尝试在我的新 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 来访问站点内的站点名称，但我不确定从那里去哪里。

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

4

2 回答 2

1

扩展上一个答案。

可以使用 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。

于 2014-01-17T08:28:44.690 回答
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);
于 2013-01-03T13:57:30.353 回答