我创建了一个_layout.twig文件，它作为我的基础来保存页面上的内容->_布局.twig:
<!DOCTYPE html>
<html lang="{{ craft.app.language }}">
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta charset="utf-8" />
<title>
{{ siteName }}
</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
name="viewport" />
<link rel="stylesheet"
href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin="" />
{% includeCssFile siteUrl ~ 'assets/css/style.css' %}
</head>
<body>
{% include '_includes/nav' %}
<div>
{% block content %}
{% endblock %}
</div>
<footer class="main-footer">
<div class="footer-wrapper">
{{ exampleInformation.exampleDescription|markdown }}
<p>
© {{ now|date('Y') }}, <a href="https://craftcms.com">Lorem Ipsum</a>
</p>
</div>
</footer>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
{% includeJsFile siteUrl ~ 'assets/js/scripts.js' %}
</body>
</html>
通过craft CMS中的控制面板，我创建了一个条目，其中包含一个表，该表具有一系列坐标(经度和纬度值(和一个开关，以及创建的每个条目的一些其他一般信息，例如标题、日期、图像等
_entry.twig页面扩展_layout.twig->_entry.twig:
{% extends '_layout' %}
{% set featureImage = {
mode: 'crop',
width: 600,
height: 600,
quality: 90
} %}
{% block content %}
<div class="entry__container">
<div class="entry__wrapper">
<div class="entry__title">
<h1>
{{ entry.title }}
</h1>
</div>
<div class="entry__image">
{% if entry.featureImage|length %}
{% for image in entry.featureImage.all() %}
<img src="{{ image.getUrl(featureImage) }}"
alt="{{ image.title }}" />
{% endfor %}
{% endif %}
</div>
<div>
{% for block in entry.exampleContent.all() %}
<div class="entry__description">
{% if block.type == 'text' %}
{{ block.text }}
{% elseif block.type == 'image' %}
{% for image in block.image.all() %}
<img src="{{ image.url }}" alt="{{ image.title }}" />
{% endfor %}
{% endif %}
</div>
{% endfor %}
</div>
{# display post categories #}
{% if entry.exampleCategories|length %}
<div class="entry__category">
<p>
Categories
</p>
{% for category in entry.exampleCategories.all() %}
<a href="{{ category.url }}">{{- category.title -}}</a>
{% endfor %}
</div>
{% endif %}
{# display table info #}
{% if entry.lotInfo|length %}
<div class="entry__coordinate">
<ul>
{% for row in entry.lotInfo %}
{% if row.createNewEntry == '1' %}
<li>
<div data-latCoordinate="{{ row.latitude }}"
id="latCoordinate">
{{ row.latitude }}
</div>,<div data-lngCoordinate="{{ row.longitude }}"
id="lngCoordinate">
{{ row.longitude }}
</div>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
{# end table info #}
</div>
</div>
{% endblock %}
我能够在_entry.trick中把这个小部分放在一起，它会查看表格，如果灯开关设置为1，它会在行中输出相应的纬度和经度值：
{# display table info #}
{% if entry.lotInfo|length %}
<div class="entry__coordinate">
<ul>
{% for row in entry.lotInfo %}
{% if row.createNewEntry == '1' %}
<li>
<div data-latCoordinate="{{ row.latitude }}"
id="latCoordinate">
{{ row.latitude }}
</div>,<div data-lngCoordinate="{{ row.longitude }}"
id="lngCoordinate">
{{ row.longitude }}
</div>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
{# end table info #}
这些值目前显示在前端输入页面上，该页面将显示坐标，具体取决于哪个灯开关开关处于活动状态，这使我能够确保它提取与正确信息相对应的正确坐标。
现在，我链接了一个外部js文件，它位于local/craft/assets/js/*.js中，并包含这个脚本->scripts.js:
//Set initial map view
var map = L.map('map', { scrollWheelZoom: false }).setView(
[50.4205, -104.52],
15,
)
//Initialize the tilemap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
minZoom: 14.5,
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map)
// Set location array
var locations = [{ lat: 'SOME LATITUDE COORDINATE', lng: 'SOME LONGITUDE COORDINATE' }]
function addToMap(locationArray) {
//Iterate through array object
;[].forEach.call(locationArray, function (location) {
var marker = L.marker([location.lat, location.lng]).addTo(map)
})
}
//Show markers
addToMap(locations)
目前，这个脚本将创建一个传单/osm地图，然后基于：
// Set location array
var locations = [{ lat: '(SOME LATITUDE VALUE)', lng: '-(SOME LONGITUDE VALUE') }];
将向地图输出一个标记(目前仅在我手动插入纬度和经度坐标时有效(，该标记位于我的index.trick模板文件中->index.trick:
{% extends '_layout' %}
{% set posts = craft.entries.section('example').all() %}
{% block content %}
<div class="background-test">
<div id="map"></div>
</div>
<div class="main-container">
<div class="main-wrapper">
<h1 class="example-title">
Some Title
</h1>
<div class="category-list">
{% set entries = craft.entries.limit(null) %}
{% for category in craft.categories.relatedTo(entries).order(
'title asc'
) %}
{% set entryCount = entries.relatedTo(category).total() %}
<a href="{{ category.url }}">
{{- category.title -}}<span class="count-number">({{ entryCount }})</span>
</a>
{% endfor %}
</div>
{% include '_includes/listing' with {
posts: posts
} only %}
</div>
</div>
{% endblock %}
以某种方式使用的最佳方式是什么
{{ row.latitude }}, {{ row.longitude }}
在我现有的scripts.js文件中的_entry.trick文件中的变量，以便在index.trick页面上的地图上放置标记？我对Craft还是个新手，对Twig更是如此，所以我仍在学习这些东西。
我的文件夹结构是：
/assets
/css
/js
scripts.js
/templates
/includes
/blog
_category.twig
_entry.twig
index.twig
_layout.twig
index.html
Any help would be greatly appreciated!
Thank you
首先确定一些指针，您可以将多个data-*属性添加到一个元素中，id的属性也必须是唯一的。所以我建议你把树枝模板换成下面的：
{% if entry.lotInfo|length %}
<div class="entry__coordinate">
<ul>
{% for row in entry.lotInfo %}
{% if row.createNewEntry == '1' %}
<li data-latCoordinate="{{ row.latitude }}" data-lngCoordinate="{{ row.longitude }}">
{{ row.latitude }}, {{ row.longitude }}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
然后，我们需要调整您的javascript，以便能够在地图上添加多个点
首先删除以下行
// Set location array
var locations = [{ lat: 'SOME LATITUDE COORDINATE', lng: 'SOME LONGITUDE COORDINATE' }]
正如您在html中定义的指针一样，我们只需要一个选择器来选择中定义data-*属性的所有元素
<script>
document.querySelectorAll(".entry__coordinate ul li").forEach(row => {
addToMap({ 'lat': row.dataset.latcoordinate, 'lng' : row.dataset.lngcoordinate, });
});
</script>