笔记打卡Day1

前言

哈喽哈喽！这里是小菜不拖延博主！ 本篇主要基于完全不了解hexo框架相关东西，比如模板引擎，但是吧又了解前端三剑客等基础知识的前端er，想要快速自己修改主题html的情况，可以稍稍作为参考

bgm

是的，博主想要搭建静态的官方网站，但是又想偷懒，于是便想到了之前搭博客用的hexo，几经寻找，我终于找到了一个非常适合小型企业的官网模板————Acorn（想要快速搭建网站是一个灰常不错的选择），但是博主又想修改一些些页面样式，又没有弄过模板引擎，相关的东西一时间内不能一次性学完，所以想要通过阅读代码来强制修改，有和我一样想法的友友们，希望我的经验能带来一些些参考吧~

文件说明

album 是画廊部分

stories是案例部分

header.ejs是头部各个链接

culture.ejs是企业文化部分

gallery.ejs是右上角的画廊部分，对应的数据也是gallery

index.ejs是进入的这个首页

archieve.ejs是首页新闻部分

archieve_post是新闻部分每个文章的内容

heading.esj这个文件是我点开，产品、案例、新闻等这些右上角的文字，弹出的页面的头部的标语

acorn中_config含有右上角显示的配置（关于、首页等）

menu对应右上角配置

##article是关于部分

配置说明

theme这个变量的值在config里面去找

config.xxx是这个.ejs文件关联的yml配置文件的内容

通常情况下，Hexo 会根据 .ejs 文件的文件名，自动查找同名的 YAML 配置文件，并将它们关联起来。具体规则如下：对于在 source/_posts 目录下的 .md 文件，Hexo 会自动将其转换为对应的 .html 文件，并在 public 目录中生成一个同名的文件。例如，source/_posts/hello-world.md 会被转换为 public/hello-world/index.html。

熟悉又陌生的html标签？

这其实是EJS模板引擎的标签，和我们传统的html标签是有一定区别的

• <% '脚本' 标签，用于流程控制，无输出。
• <%_ 删除其前面的空格符
• <%= 输出数据到模板（输出是转义 HTML 标签）
• <%- 输出非转义的数据到模板
• <%# 注释标签，不执行、不输出内容
• <%% 输出字符串 '<%'
• %> 一般结束标签
• -%> 删除紧随其后的换行符
• _%> 将结束标签后面的空格符删除

部分代码理解

themes/acorn/layout/index.ejs

<!-- Index -->

<%- partial('_partial/page/hero', {cache: true}) %>



<% for (var section in site.data.index){%>
  <section class="section py-5 <%=site.data.index[section]['bg_color'] %>" id="<%=site.data.index[section]['id'] %>">
    <!-- 是否宽度沾满设置，如果沾满类名就变成container-fluid -->
    <div class="container<%=site.data.index[section]['fluid'] %>">
      
      <div class="section-heading text-center mb-5">
        <!-- 这里是根据index.yml文件，我们去遍历然后生成找到，每一个部分的里面的配置信息，这里是首页每个部分的标题和描述 -->
        <h3><%=site.data.index[section]['title'] %></h3>
        <p class="text-gray"><%=site.data.index[section]['subtitle'] %></p>

      </div>

      <!-- 这里是跳转路径，paginatio、index为携带参数 -->
      <% if ('partial' in site.data.index[section]) { %>
        <div class="section-body">
          <%- partial('_partial/'+site.data.index[section]['partial'], {pagination: 2, index: true}) %>
        </div>
        <!-- 这个参数来自客户，目前用不到这一部分，暂时不管 -->
      <% }else if('partials' in site.data.index[section]) { %>
        <% for (var partialIndex in site.data.index[section]['partials']){%>
          <div class="section-body">
            <%- partial('_partial/'+site.data.index[section]['partials'][partialIndex], {pagination: 2, index: true}) %>
          </div>
        <% } %>
      <% } %>
      <!-- 更多，链接路径，就是“查看更多”，但是可以发现，这里主题只给出了新闻部分的查看更多，意思就是其他部分也可以有，只是没有配置 -->
     
      <% if ('more' in site.data.index[section] && site.data.index[section]['more'] !== null ) { %>
        <div class="d-flex justify-content-center pt-5">
          <%- link_to(site.data.index[section]['more'], '→ 查看更多',{class: 'btn btn-lg bg-white shadow-hover'}) %>
        </div>
      <% } %>
    </div>
   
  </section>

<%} %>
<!-- 这里实现荣誉墙 -->
<div class="section-heading text-center mb-5">
  <!-- 这里是根据index.yml文件，我们去遍历然后生成找到，每一个部分的里面的配置信息，这里是首页每个部分的标题和描述 -->
  <h3></h3>
  <p class="text-gray">定制计划</p>

</div>

themes/acorn/layout/_partial/album.ejs

<!-- 
  Data Files: source/_data/album.yml
  <%#= site.data.album.length %>
-->
<!-- 这里是画廊部分，里面的布局 <%#site.data.album[item]['name'] %>-->
<div class="album-grid album-grid-6" id="album-grid">
  <% for (var item in site.data.album){%>
  <div class="album-grid-item">
    <!-- !!!!!注意，我为每个都添加了跳转链接，但是这里的跳转链接还没有写 -->
    <a href="https://zhwangart.com">
      <div class="album-art" style="background-image: url(<%=site.data.album[item]['cover']%>)">
        <!-- site.data是 source/_data/album.yml当中的每一个对象，这里的意思是取了每个对象的cover这个值-->
        <div class="album-art-text">
          <h5 class="mb-0"><%= site.data.album[item]['name'] %></h5>
          <small class="text-secondary d-block mb-3"><%=site.data.album[item]['en_name'] %></small>
          <p class="font-w-lighter"><%=site.data.album[item]['description'] %></p>
        </div>
      </div>
    </a>
  </div>
  <%} %>
</div>