README

康涅狄格大学标志

这是一个符合大学品牌标准的网络标志实现。

历史记录

与我们的许多网络品牌努力一样，大学通讯部与UITS Web Dev实验室合作，为大学的网络形象打造了新的外观。虽然大多数大学院系和组织可以通过UITS提供的Aurora（WordPress）平台实现品牌合规，但仍需要静态模板。此项目旨在填补这一空白。

截至2020年1月16日，此存储库的master分支代表标志的3.x版本。主要区别如下：

谁应该使用这个？

任何正在构建新的*.uconn.edu网站且不会在Aurora平台上托管的人。

网站要求（推荐）

• 为Internet Explorer的条件HTML类

使用方法

使用此代码的方法有很多。这里只列举几个：

1. HTML - 您可以下载最新的zip文件，并使用“_site”目录中的资源开始构建您的网站。
2. PHP - 使用Composer将标志嵌入页面。
3. npm - 将其作为node_module包含，使用npm install uconn-banner --save-dev，使用“_site”目录中的HTML/CSS/JS。

测试

此存储库使用phpunit测试标志的属性。可以使用./vendor/bin/phpunit tests/Banner/BannerTest.php --bootstrap vendor/autoload.php运行测试。

贡献/开发

克隆/下载此存储库，并使用11ty。

	
# Clone and open
git clone https://github.com/uconn/banner.git
cd banner

# use [nvm](https://github.com/nvm-sh/nvm)
nvm use

# Install npm dependencies
npm install

# Install composer dependencies
composer install


# Run the develop task
npm run develop

在您的网页浏览器中打开https://:8080/以查看您的更改。

JavaScript

如果您计划使用此标志并启用移动菜单，请仔细阅读以下内容。您必须实现自己的移动菜单。虽然标志提供了一个菜单切换按钮，但在菜单的标记或样式方面（几乎）没有意见。您唯一必须做的是确保包裹菜单的组件的id与菜单切换按钮的aria-controls属性匹配。

<!-- banner -->
<button 
  class="btn mobile-menu-btn"
  id="banner-mobile-button"
  aria-haspopup="true"
  aria-controls="mobile-menu-id"
  aria-expanded="false"
>
<!-- end banner -->

<!-- wherever the mobile menu is... -->
<nav id="mobile-menu-id">
  <!-- menu markup -->
</nav>
<!-- end mobile menu -->

当button被点击时，它将触发一个名为ucBannerMenuState的自定义javascript事件，您可以监听它。这使您可以从任何其他脚本中控制菜单。

// banner.js

// custom event 
var ucBannerMenuStateEvent = new CustomEvent('ucBannerMenuState', {
  detail: { isOpen: false },
  bubbles: true
})

// this is part of the click event listener on the banner buttons
function toggleMenu(button) {
  var isExpanded = button.getAttribute('aria-expanded') === 'true' ? true : false
  // switch the state of the emitted event
  ucBannerMenuStateEvent.detail.isOpen = !isExpanded
  // dispatch the event
  button.dispatchEvent(ucBannerMenuStateEvent)
  // handle the rest of the toggle
  !isExpanded ? expand(button) : collapse(button)
  return true
}
// end banner.js

// ...some other script in a different part of the project
var menuToggle = document.querySelector('#banner-mobile-button')
var mobileMenu = document.querySelector('#mobile-menu-id')

// listen for the custom event
document.addEventListener('ucBannerMenuState', function(evt) {
  // toggle a class based on the state of the event
  evt.detail.isOpen ? 
    mobileMenu.classList.add('active') : 
    mobileMenu.classList.remove('active');
})

有关完整示例，请参考未压缩的banner.js文件和menu-demo.js文件。

部署到GitHub Pages

	
# Run the build task
nvm use && npm run develop

# push just the _site directory to gh-pages
git subtree push --prefix _site origin gh-pages

静态输出

要创建横幅的静态HTML版本，您可以使用包含的 Generator.php 文件。它涵盖了横幅可用的所有选项。您可以使用以下命令使用生成器：php src/Banner/Generator.php <options>。要获取帮助或查看选项列表 - php src/Banner/Generator.php --help。