使用Liquid语法将每个单词的首字母大写？

Question

我正在使用Liquid语法在LocomotiveCMS安装中设置SEO。我尝试编写代码，以便使用{{ page.title }}动态获取页面标题，然后强制将每个单词的首字母大写。

我尝试了这个：

<title>
      {{ page.title | camelcase }} | {{ site.name }}
</title>

根据此处的液态语法文档：http://docs.shopify.com/themes/liquid-basics/output#camelize

但是它不起作用。使用capitalize会起作用，但它只将第一个单词的第一个字母大写。

谢谢！

- APAD1

---

我也尝试使用camelize代替camelcase，但那也不起作用。 - APAD1

camelcase 是一个 Shopify 过滤器，而不是 Liquid 过滤器 - 因此它在 Locomotive CMS 中无法使用。 - Luke

Answer 1

使用 Liquid 语法可以实现这一点，无需任何插件。

将您的单词字符串分解为数组，并使用 for 循环结合 capitalize 过滤器来大写每个单词的第一个字母。如果您适当地将此封装在捕获语句内，您将得到每个单词的第一个字符大写的结果。

{% assign words = "Hi, how are you today?" | split: ' ' %}

{% capture titlecase %}
  {% for word in words %}
    {{ word | capitalize }}
  {% endfor %}{% endcapture %}
{{ titlecase }}

输出:

嗨，你今天怎么样？

请注意，所有这些都在一行上，并且整个捕获语句中只有一个空格符号！

- taky2

---

我非常确定此为解决方案，尽管可以使用 自定义插件 或 css-capitalize。 - eQ19

这是唯一对我有效的方法。思维敏捷！ - tonysepia

耶稣基督，这是一种糟糕透顶的语言。 - Fed

如果你想避免故意破坏大写单词，例如 "HTML"，你应该将循环的核心更改为 {{ word | slice: 0 | upcase -}}{{- word | slice: 1, 999 }} [不太美观但有效]。 - undefined

Answer 2

我建议使用插件来实现这个功能。

_plugins/_capitalize_all.rb:

require 'liquid'
require 'uri'

# Capitalize all words of the input
module Jekyll
  module CapitalizeAll
    def capitalize_all(words)
      return words.split(' ').map(&:capitalize).join(' ')
    end
  end
end

Liquid::Template.register_filter(Jekyll::CapitalizeAll)

使用方法：

{{ "mein text" | capitalize_all }}

- AsTeR

---

谢谢您的回答！我可以问一下如何将插件文件添加到液态主题文件夹中吗？ - Yaoyu Yang

据我所记，您只需将其放入Jekyll网站的“_plugins”目录中，它就可以工作了。@YaoyuYang - AsTeR

我明白了。我没有使用Jekyll，我正在处理一个Shopify网站，不确定在哪里添加它。 - Yaoyu Yang

@YaoyuYang 对此没有经验，抱歉。 - AsTeR

Answer 3

用CSS设置这个怎么样？

title {
    text-transform:capitalize;
}

编辑：我在text-transform上打错了一个字，现在已经更正；

- Ty Kayn

---

那不是他想要的。他希望他标题中的所有单词都以大写字母开头。 - taxicala

抱歉，我的意思是：text-transform: capitalize; - Ty Kayn

这实际上做到了我想要做的事情，也就是在Jekyll中将类别转换为标题大小写。感谢您的提醒。 - Merovex

很棒的想法... 幸运的是，在CSS中使用大写字母并不像在Liquid中那样容易出错 ;-) - Manfred Moser

Answer 4

关于您发布的链接，驼峰命名法的工作原理如下：

{{ 'coming-soon' | camelcase }}

它接受一个字符串，其中单词用“-”分隔，并将其转换为驼峰式大小写。我只有一个问题：您的“page.title”是如何生成的？它的单词是否用“-”分隔？还是您有这样的文本：“这是我的页面标题”？如果是后者，则应将其替换为：“this-is-the-title-of-my-page”。希望这可以帮助您。

- taxicala

Answer 5

这一系列的筛选器对我很有用。但是，如果您的标题中有5个连续的破折号或破折号不在您希望的位置导致下一个字母大写，那么您可能会遇到问题。

{% assign headerTitle = page.title | split: " " | join: "-----" | camelcase | split: "-----" | join: " " %}

- David Fisco

Answer 6

感谢您的回复，实际上我在发布后就想出了一个解决方法。现在我不再调用page.title，而是提取page.seo_title，这可以通过LocomotiveCMS后端手动输入正确的大写字母来完成。

- APAD1

Answer 7

这对我有用：

{{ page.title | capitalize }}

它只会将句子中的第一个单词大写。 我最初的想法是每个单词都会被大写，但实际情况并非如此。

来源： https://docs.shopify.com/themes/liquid-documentation/filters/string-filters#capitalize

- Sentry.co

---

是的，这在我的原始帖子中提到过。 - APAD1

我实际上遇到了相反的问题。我不想让标题中的每个单词都大写。在我的情况下，我从文件名而不是前置元数据标题中提取标题。当我这样做时，每个单词都会被大写。这可能是Jekyll的一个错误，因为它是一个令人惊讶的约定。预期的标题应该是文件名中所写的标题。我正在研究如何获取实际的文件名标题。在您的情况下，如果您不想使您的帖子代码混乱，您可以编写一个Liquid循环并将其包含在其中。或者像我一样，只需从文件名中提取标题即可。 - Sentry.co

Answer 8

{{ page.title | capitalize }} | {{ site.name }}

现在的大写方式已经直接生效了

https://liquidjs.com/filters/capitalize.html

- Salim K