我从头开始构建了终极教育网站 — 第 5 天

昨天，我们研究了周期性属性，这是一篇特定的文章。今天，让我们回到实际的网站设计和页面。

我们将创建有机化学页面。我们将从设置基本的 HTML 结构开始，包括交互式元素的占位符。

第 23 小时：构建有机化学页面

首先，我在 Chemistry 文件夹中创建了organic.html。这是基本结构：

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - Organic Chemistry</title>
    <meta name="description" content="Explore the fascinating world of organic chemistry with interactive articles, quizzes, and 3D molecule visualizations.">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/favicon.png">

    <!-- Stylesheets (Consider using a CSS preprocessor like Sass for better organization) -->
    <link rel="stylesheet" href="css/style-main.css">
    <link rel="stylesheet" href="css/style.css"> 
    <link rel="stylesheet" href="css/specific-chemistry.css">


    <header>
        <nav>
            <div>



<p>I've added basic structure, links to the main stylesheets, and CDN link to a 3D molecule viewer library molGL. I've also added a basic header and footer, consistent with our previous pages, and a button for hamburger menu.</p>

<p>Now, I'll add the main content area, divided into sections for articles, key topics, and an interactive molecule viewer.<br>
</p>

<pre class="brush:php;toolbar:false"><section>



<p>This code adds a three-column layout. The left column will house the article list with a search bar. The middle column will have a hero section with a call-to-action button and a grid of topic cards with images. Finally, the right column will feature the interactive 3D molecule viewer.</p>

<p>I've also added placeholders for images within the topic cards (images/hydrocarbons.jpg, etc.). We'll need to replace these with actual images later.</p>

<h2>
  
  
  Hour 24: Adding JavaScript for Interactivity
</h2>

<p>Now, let's add some basic JavaScript to handle the hamburger menu, the article search functionality, and the 3D molecule viewer. I'll add the following inside the <script> tag at the end of the body:<br>
</script></p>

<pre class="brush:php;toolbar:false">        // Hamburger Menu Toggle
const hamburgerBtn = document.getElementById('hamburger-btn');
const navMenu = document.getElementById('nav-menu');

hamburgerBtn.addEventListener('click', () => {
  navMenu.classList.toggle('show'); 
});

// Article Search Functionality (Basic Example)
const articleSearch = document.getElementById('article-search');
const articleLinks = document.getElementById('article-links').querySelectorAll('a');

articleSearch.addEventListener('input', () => {
  const searchTerm = articleSearch.value.toLowerCase();

  articleLinks.forEach(link => {
    const linkText = link.textContent.toLowerCase();
    if (linkText.includes(searchTerm)) {
      link.style.display = 'block';
    } else {
      link.style.display = 'none';
    }
  });
});

// 3D Molecule Viewer (MolGL Example)
const molContainer = document.getElementById('mol-container');
const moleculeSelect = document.getElementById('molecule-select');

// Initialize MolGL viewer 
let viewer = new MolGL({
  container: molContainer,
  style: {
    stick: {},
    sphere: { scale: 0.3 }
  }
});

// Load a default molecule
viewer.load('pdb:1crn'); // Example: Load a PDB structure

// Change molecule on selection
moleculeSelect.addEventListener('change', () => {
  const selectedMolecule = moleculeSelect.value;
  // We'll need to map molecule names to appropriate data sources (e.g., PDB IDs, SDF files)
  if (selectedMolecule === 'methane') {
    viewer.load('sdf:./molecules/methane.sdf'); // Example: Load from an SDF file
  } else if (selectedMolecule === 'ethanol') {
    viewer.load('pdb:1etn');
  } else if (selectedMolecule === 'benzene') {
    viewer.load('sdf:./molecules/benzene.sdf');
  }
});

这是这个 JavaScript 的作用：

1. 汉堡菜单切换：向汉堡按钮添加事件侦听器以切换导航菜单上的显示类，使其在小屏幕上可见或隐藏。
2. 文章搜索：实现简单的搜索功能，根据用户在搜索栏中的输入过滤文章链接。
3. 3D 分子查看器：
   • 在 mol-container 元素中初始化 MolGL 查看器实例。
   • 从外部链接加载 PDB 格式的默认分子（crambin 蛋白，1crn）。
   • 将事件侦听器添加到分子选择下拉列表中，以在用户进行选择时加载不同的分子。
   • 使用占位符分子数据源（./molecules/macet.sdf 等）。我们需要以正确的格式（SDF、PDB 等）提供实际的分子数据，并相应地映射分子名称。

实时页面在这里，如果你想看：

有机化学 - NeuronIQ

第 25 小时：创建无机化学页面

让我们创建一个无机化学的新页面，其结构与有机化学页面类似。

首先，我在Chemistry文件夹中创建了organic.html，其基本结构如下：

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - Inorganic Chemistry</title>
    <link rel="stylesheet" href="style.css">
       <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style-main.css">
      <link rel="stylesheet" href="specific-chemistry.css">


    <header>
        <nav>
            <div>



<p>This code sets up the HTML for the page with:</p>

<ul>
<li>  A basic header with navigation links.</li>
<li>  An aside element for the article list.</li>
<li>  A main content area with a heading, introductory text, and a grid for key topics.</li>
<li>  Placeholder links for articles and topics.</li>
<li>  A footer.</li>
</ul>

<p>We are using style.css, style-main.css and specific-chemistry.css for the styling.</p>

<p>Next, I added some content to the page:<br>
</p>

<pre class="brush:php;toolbar:false"><section>



<p>I also added a search bar and some links, that we will add later.</p>

<h2>
  
  
  Hour 26: Adding JavaScript for Search Functionality
</h2>

<p>Since we used a similar structure to the organic chemistry page, I copied over the JavaScript code for the hamburger menu and the article search functionality from organic.html to this inorganic chemistry page, removing the 3D molecule viewer part.<br>
</p>

<pre class="brush:php;toolbar:false">// Hamburger Menu Toggle
const hamburgerBtn = document.getElementById('hamburger-btn');
const navMenu = document.getElementById('nav-menu');

hamburgerBtn.addEventListener('click', () => {
  navMenu.classList.toggle('show'); 
});

// Article Search Functionality (Basic Example)
const articleSearch = document.getElementById('article-search');
const articleLinks = document.getElementById('article-links').querySelectorAll('a');

articleSearch.addEventListener('input', () => {
  const searchTerm = articleSearch.value.toLowerCase();

  articleLinks.forEach(link => {
    const linkText = link.textContent.toLowerCase();
    if (linkText.includes(searchTerm)) {
      link.style.display = 'block';
    } else {
      link.style.display = 'none';
    }
  });
});

我必须调整选择器以匹配此页面中使用的 ID。该脚本现在可以处理基本的汉堡菜单切换和文章搜索过滤。

我们现在有一个基本的无机.html 页面，其结构与有机化学页面类似。我们可以通过以下方式进一步增强它：

1. 添加内容：
   • 针对列出的主题撰写实际文章。
   • 将图像或图表添加到主题网格。
2. 造型：
   • 使用 CSS 改善视觉呈现。
   • 确保不同屏幕尺寸的响应能力。
3. 更多互动：
   • 根据需要添加测验或交互式图表。
4. 导航：
   • 如果网站变得更加复杂，则实施更强大的导航系统，因为当前的导航系统非常基础

由于我们今天的主要重点是设置结构和基本功能，因此我们可以在接下来的步骤中考虑这些增强功能。我们还可以通过添加更多相关内容并提高页面的响应能力来改进这一点。