3.5 Finding which theme files to edit 3.5如何正确找到主题文件需要编辑的位置

Let’s say you want to edit a part of your theme, but you don’t know which file that code is in. Well, you need a way to search the entire theme for a piece of text.

如果我们要修改我们主题的某个部分,但是我们不知道这部分的代码存储在哪个文件里面。也就是说我们需要对整个主题的某些需要修改的部分进行定位。

Example:

举例:

I want to edit the HTML around my Add to cart button. Maybe to add a small note right under it – “Pre-order only”.

我们想编辑添加购物车周围的一些HTML。比如在添加购物车下方添加“Pre-order only”这个字符。

1.Inspect the buttons in chrome dev tools, and find the button code.

在谷歌浏览器Chrome开发者工具里选中Add to cart 按钮,右键点检查。

2.Look for the class that is on the button, the containing div, or anything that would be unique to this part of the website.

找到这个按钮的CSS类以及所在的div(找到这个按钮在网站上独一无二的身份信息)。

I see that the class of my Add to Cart button is product-form__submit . I’m pretty sure there aren’t many uses of this class around my site, just judging by the name. It’s the submit button for the product form i.e. adding to cart.

我们可以看到添加购物车按钮的类是 product-form__submit。我们前面讲到过CSS类是独一无二的。

3.Now you want to search your theme for product-form__submit to find where that code is.

现在我们在主题文件里搜索 product-form__submit 就能很好的定位到需要修改的地方了。

Don’t use the element id for this, especially when it has random numbers and letters as in the screenshot. That is dynamically generated with Liquid, and you won’t find a match in your theme code.

注意:千万不要使用元素的ID来定位需要修改的部分,尤其是id包含很多数字和字母这种。因为这种是由Liquid自动创建的。因此我们也不会在模板文件里找到这些。

上一篇 3.3 Using a custom CSS file 3.3 如何使用自定义CSS文件
下一篇 4.2 Non-semantic Elements: <div> and<span> 无语义元素:<div>和<span>
AeroCore图片
AeroCore图片
AeroCore图片
AeroCore图片
AeroCore图片
最新评论
暂无评论