过去几天我一直在问很多问题，试图修补我正在构建的这个模板的不同区域。我只是想制作一些有用的东西，这样就很容易进入并改变我稍后将要创建的几个页面的所有内容（这在美学上看起来会更好，这只是让所有功能都能正常工作）。
但是，我遇到了一个问题。我们使用Drupal作为我们的内容管理系统（不是我们的决定;我们的上司将它交给我们）。主要问题是，由于它已分发给多个部门，我们无法控制其中的很多部门。把它组合在一起的人是管理员，我们只是“用户”。下面的代码可以使用，并且它在我投入的时间很短的情况下运行良好。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text/Photo Swap Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function defaultText(){
document.getElementById('textarea2').innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pulvinar lectus non lectus auctor egestas. Donec at nunc neque. Morbi ornare condimentum lobortis. Nam vehicula urna ac mauris pharetra rutrum. Duis et arcu eget sapien interdum porttitor ut et tortor. Maecenas ultricies dignissim pretium. Integer quis enim metus. Sed enim lacus, eleifend eu euismod volutpat, blandit eu sem. Vestibulum varius purus ut est accumsan pellentesque. Donec quis enim id lectus sollicitudin suscipit at volutpat augue. Curabitur et metus purus. Fusce luctus nunc vitae sapien pharetra id accumsan lectus malesuada.';
}
function dogText(){
document.getElementById('textarea2').innerHTML = 'The domestic dog (Canis lupus familiaris), is a subspecies of the gray wolf (Canis lupus), a member of the Canidae family of the mammilian order Carnivora. The term domestic dog is generally used for both domesticated and feral varieties. The dog may have been the first animal to be domesticated, and has been the most widely kept working, hunting, and companion animal in human history. The word dog may also mean the male of a canine species, as opposed to the word bitch for the female of the species.';
}function catText(){
document.getElementById('textarea2').innerHTML = 'The domestic cat (Felis catus or Felis silvestris catus) is a small, usually furry, domesticated, carnivorous mammal. It is often called the housecat when kept as an indoor pet, or simply the cat when there is no need to distinguish it from other felids and felines. Cats are valued by humans for companionship and ability to hunt vermin and household pests. They are primarily nocturnal.';
}
function parrotText(){
document.getElementById('textarea2').innerHTML = 'Parrots, also known as psittacines are birds of the roughly 372 species in 86 genera that make up the order Psittaciformes, found in most tropical and subtropical regions. The order is subdivided into three superfamilies: the Psittacoidea parrots), the Cacatuoidea (cockatoos) and the Strigopoidea (New Zealand parrots). Parrots have a generally pantropical distribution with several species inhabiting temperate regions in the Southern Hemisphere as well. The greatest diversity of parrots is found in South America and Australasia.';
}
function lizardText(){
document.getElementById('textarea2').innerHTML = 'Lizards are a widespread group of squamate reptiles, with more than 5600 species , ranging across all continents except Antarctica as well as most oceanic island chains. The group, traditionally recognized as the suborder Lacertilia, is defined as all extant members of the Lepidosauria (reptiles with overlapping scales), which are neither sphenodonts (i.e., tuatara) nor snakes ? they form an evolutionary grade. While the snakes are recognized as falling phylogenetically within the Toxicofera clade from which they evolved, the Sphenodonts are the sister group to the Squamates, the larger monophyletic group, which includes both the lizards and the snakes.';
}
function horseText(){
document.getElementById('textarea2').innerHTML = 'The horse (Equus ferus caballus) is one of two extant subspecies of Equus ferus, or the wild horse. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature into the large, single-toed animal of today. Humans began to domesticate horses around 4000 BC, and their domestication is believed to have been widespread by 3000 BC. Horses in the subspecies caballus are domesticated, although some domesticated populations live in the wild as feral horses. These feral populations are not true wild horses, as this term is used to describe horses that have never been domesticated, such as the endangered Przewalski Horse, a separate subspecies, and the only remaining true wild horse. There is an extensive, specialized vocabulary used to describe equine-related concepts, covering everything from anatomy to life stages, size, colors, markings, breeds, locomotion, and behavior.';
}
function chickenText(){
document.getElementById('textarea2').innerHTML = 'The chicken (Gallus gallus domesticus) is a domesticated fowl, a subspecies of the Red Junglefowl. As one of the most common and widespread domestic animals, and with a population of more than 24 billion in 2003, there are more chickens in the world than any other species of bird. Humans keep chickens primarily as a source of food, consuming both their meat and their eggs.';
}
//The switchImg function is what swaps out the awesome.png picture when thumbnails are clicked.
function switchImg(i){
document.images["awesome"].src = i;
}
</script>
<style>
<!--NEEDS TO BE FIXED-->
<!--This uses the picture in the URL as a background image, needs to be fixed to stretch across whole page; use %'s.-->
body {background: url('gradient.png');}
<!--This is all gallery stuff. Makes it all a certain size, floats it to the left, pads the images, makes the images appear in a span while the mouse
is hovering over it (might be taked out and replaced with JavaScript).-->
#gallery {position: relative; }
#gallery ul {list-style-type: none;
width: 300px; }
#gallery li { display: inline;
float: left;
padding: 5px; }
#gallery img {border-style: solid: 10px; border-color: #333; }
#gallery a { text-decoration: none;
font-style: none;
color: #333; }
#gallery span {display: none; }
#gallery a:hover span {display: block;
position: absolute;
top: 10px;
left: 300px;
text-align: center; }
<!--NEEDS TO BE FIXED-->
<!--What does this do? Excellent question, my fine sir. This tries to float the image that changes on click to the right. -->
#mainPicture {
float: right;
}
<!-- <=popOut STUFF=> <=popOut STUFF=> <=popOut STUFF=> <=popOut STUFF=> <=popOut STUFF=> <=popOut STUFF=> <=popOut STUFF=>-->
.popOut
{
cursor: default;
list-style: none;
}
.popOut a
{
cursor: default;
}
.popOut a .preview
{
display: none;
}
.popOut a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}
.popOut img
{
background: #ebf0f3;
border-color: #ebf0f3;
border-style: solid;
border-width: 1px;
color: inherit;
vertical-align: top;
width: 100px;
height: 75px;
}
.popOut li
{
background: #ebf0f3;
border-color: #CCCCCC;
border-style: solid;
border-width: 0px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 2px;
position: relative;
}
.popOut .preview
{
border-color: #000;
width: 200px;
height: 150px;
}
.popOut p
{
text-align: center;
}
#textarea
{
background-color: #ebf0f3;
}
</style>
</head>
<body>
<!--NEEDS TO BE FIXED-->
<!--Give the awesome picture a similar outline to the preview pictures.-->
<!--This picture is the one that is going to change when pictures are clicked on.-->
<div class="mainPicture"><img id="awesome" src="awesome.png" height="300" width="400" alt=""><!--style="position:relative; left:600px; top:326px;"--></div>
<!--Alright, so this gallery is to hold all of the pictures. They're all set to be a certain size (100x75px) and expand to a larger size(400x300px). As it stands now,
they're in an unordered list, and are set to change the awesome.png image whenever they are clicked.-->
<td width="1000" rowspan="3">
<div id="gallery">
<ul class="popOut">
<li onclick="dogText()">
<a href="#" onclick="switchImg('dog.jpg')">
<img src="dog.jpg" width="100" height="75" alt="dog"><img src="dog.jpg" width="100" height="75" alt="dog" class="preview">
</a>
</li>
<li onclick="catText()">
<a href="#" onclick="switchImg('cat.jpg')">
<img src="cat.jpg" width="100" height="75" alt="cat"><img src="cat.jpg" width="100" height="75" alt="cat" class="preview">
</a>
</li>
<li onclick="parrotText()">
<a href="#" onclick="switchImg('parrot.jpg')">
<img src="parrot.jpg" width="100" height="75" alt="parrot"><img src="parrot.jpg" width="100" height="75" alt="parrot" class="preview">
</a>
</li>
<li onclick="lizardText()">
<a href="#" onclick="switchImg('lizard.jpg')">
<img src="lizard.jpg" width="100" height="75" alt="lizard"><img src="lizard.jpg" width="100" height="75" alt="lizard" class="preview">
</a>
</li>
<li onclick="horseText()">
<a href="#" onclick="switchImg('horse.jpg')">
<img src="horse.jpg" width="100" height="75" alt="horse"><img src="horse.jpg" width="100" height="75" alt="horse" class="preview">
</a>
</li>
<li onclick="chickenText()">
<a href="#" onclick="switchImg('chicken.jpg')">
<img src="chicken.jpg" width="100" height="75" alt="chicken"><img src="chicken.jpg" width="100" height="75" alt="chicken" class="preview">
</a>
</li>
<li onclick="defaultText()">
<a href="#" onclick="switchImg('awesome.png')" class="textualLink"><p>Click for Default Image</p></a>
</li>
</ul>
<!--This textarea is the field where information about whatever is clicked will pop up, and hopefully stay there. By default, it should contain some sort of welcome message.-->
<div id="textarea" style="height:600px;width:320px;font:14px;font:14px/26px Arial, Helvetica, sans-serif;overflow:scroll; position:relative;
top:12px;"><p id="textarea2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pulvinar lectus non lectus auctor egestas. Donec at nunc neque. Morbi ornare condimentum lobortis. Nam vehicula urna ac mauris pharetra rutrum. Duis et arcu eget sapien interdum porttitor ut et tortor. Maecenas ultricies dignissim pretium. Integer quis enim metus. Sed enim lacus, eleifend eu euismod volutpat, blandit eu sem. Vestibulum varius purus ut est accumsan pellentesque. Donec quis enim id lectus sollicitudin suscipit at volutpat augue. Curabitur et metus purus. Fusce luctus nunc vitae sapien pharetra id accumsan lectus malesuada.</p></div>
</div>
</div>
</div>
</td>
</body>
</html>
然而，今天我和我的伙伴之间花了几个小时试图找到一种方法来覆盖内置的CSS以及如何集成JavaScript。
我看到网页告诉我在源代码中添加和标记我正在尝试构建的页面/节点：
<head>
<script src="PathToJavaScriptFile.js.txt">
</script>
</head>
我看到网页告诉我使用php标记将JavaScript代码合并到页面中，就像在普通HTML页面中的标记一样：
<?php
function switchImg(i){
document.images["awesome"].src = i;
}
?>
我甚至尝试使用我认为称为模块的.js文件调用.js文件：
<?php
drupal_add_js('PathToJavaScriptFile.js.txt', 'external');
?>
我正在失去理智。我只是想添加一些CSS和JavaScript，这样我就可以给那些给我实习的人留下深刻印象：/
答案 0 :(得分：1)
首先，您开始解释为什么使用drupal。然后你问你的问题。然后抱怨drupal。阅读提问的提示！ 你需要提供你使用drupal的版本。或者你是如何构建模块的？或与问题相关的细节。
drupal方式不是覆盖css和输出。 如果他要求您使用Drupal并且他发现您实际上没有使用Drupal，那么您的客户会怎么想？人们使用drupal并且具有稳定性，可靠性，可扩展性等等。
您需要创建一个页面类型的节点并在其中添加内容。然后，您可以转到sites / all / themes / your-theme-name / template.php中的template.php文件，并使用theme_preprocess_page（）添加js。
或者您可以在模块中执行此操作。例如，您不能只将代码添加到它们未包含的模块中（就像我认为您在示例中所做的那样）。它们是模块，它们以某种方式工作。
在你的模块（或你的主题）中你可以创建一个钩子。 （记得在admin配置页面中启用它）例如
//code not tested
function yourmodulename_preprocess_page(&$vars)
{
drupal_add_js(drupal_get_path('theme', 'MYTHEME') .'/mytheme.js', 'file');
//read the functions documentation!
}
其他几点。
编辑： 考虑到您无权访问管理员或页面的其余部分。查看是否可以创建节点并将完整HTML设置为格式过滤器。然后，您可以使用脚本标记从那里添加Javascript。