如何解决从_entry.twig中的Twig变量到外部脚本中的Javascript函数的数据
我创建了一个_layout.twig文件,它作为我在页面上保存内容的基础-> _layout.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>
通过工艺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.twig中的这一小部分放在一起,查看表,如果将电灯开关设置为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.twig模板文件-> index.twig中保存一个标记到地图上(目前仅在我手动插入经度和纬度坐标时有效)。
{% 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.twig文件中的变量是否可以将标记放置在地图上,该标记位于index.twig页面上?我仍然对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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。