README

使用 Twig 和 Slim3 框架将您的 Favicon 保持一致

使用 Composer 安装

$ composer require germania-kg/favicons

设置 Twig 模板加载器

将 Favicon 模板路径 vendor/germania-kg/favicons/templates（通常位于 Composer 的包目录中）添加到您的 Twig 模板加载器

<?php
// 1. Setup Twig Filesystem Loader, add Favicons' template dir as well
$loader = new Twig_Loader_Filesystem( [
    'path/to/your/templates',
    'vendor/germania-kg/favicons/templates'
]);

// 2. Setup Twig, pass loader
$twig = new Twig_Environment($loader, array(
    // other Twig settings
));

如果模板目录位于其他位置，您可以使用 Favicon 类 的模拟实例，并使用其 getTemplatesPath 方法

<?php
$favicons = new Germania\Favicons\Favicons;
echo $favicons->getTemplatesPath();

// Usually outputs something like
// "vendor/germania-kg/favicons/templates"

您的网站模板

在您的网站模板中，该模板渲染 HTML 头部，包括 Favicon 标记模板。Twig 将在其上面定义的“设置 Twig 模板加载器”部分中查找模板路径

{% include 'favicons.website.tpl' with { 
   'app_url':     '/app', 
   'base_url':    '/path/to/static', 
   'theme_color': '#ffffff',
   'icon_color':  '#e21e79',
   'cache_bust':  '134p38rfwef'
} only %}

cache_bust 变量是可选的。但是，这将输出类似于以下链接和元元素的一组

<link rel="apple-touch-icon" sizes="180x180" href="/path/to/static/apple-touch-icon.png?v=134p38rfwef">
<link rel="icon" type="image/png" href="/path/to/static/favicon-32x32.png?v=134p38rfwef" sizes="32x32">
<link rel="icon" type="image/png" href="/path/to/static/favicon-16x16.png?v=134p38rfwef" sizes="16x16">
<link rel="manifest" href="/app/manifest.json?v=134p38rfwef">
<link rel="mask-icon" href="/path/to/static/safari-pinned-tab.svg?v=134p38rfwef" color="#e21e79">
<link rel="shortcut icon" href="/path/to/static/favicon.ico?v=134p38rfwef">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/path/to/static/mstile-144x144.png?v=134p38rfwef">
<meta name="msapplication-config" content="/app/browserconfig.xml?v=134p38rfwef">
<meta name="theme-color" content="#ffffff">

请注意两个引用文件 manifest.json 和 browserconfig.xml。请使用适当的路由器，如 Slim 框架，根据您的 URL 和主题颜色值渲染这些文件，如下面的“路由”部分所示

路由 browserconfig 和 manifest 文件

简单的 Slim 3 示例

<?php
use Germania\Favicons\SlimRouter;
use Slim\App;
use Twig_Environment;

// Have your Slim v3 app and Twig ready
$app  = new App;
$twig = new Twig_Environment( ... );

// Setup favicon data
$favicon_data = [
	'app_name'    => 'My App',
  'app_url'     => '/app', 
	'base_url'    => '/path/to/icons',
	'theme_color' => '#ffffff',
	'icon_color'  => '#e21e79'
	'display'     => 'minimal-ui',
	// This is optional
	'cache_bust'  => '134p38rfwef'
];

// Setup routes 
new SlimRouter( $app, $twig, $favicon_data);

高级示例：除了使用上面的 FaviconRouter 实例外，您可能想自己定义路由。这可能对您使用自己的模板很有用

<?php
// Have your Slim app, Twig and favicon data ready
$favicon_data = [ ... ];

$app->get('/browserconfig.xml', function (Request $request, Response $response) use ($twig, $favicon_data) {
    $output = $twig->render('favicons.browserconfig.xml.tpl', $favicon_data);

    $newResponse = $response->withHeader('Content-type', 'application/xml');
    $newResponse->getBody()->write($output);

    return $newResponse;
});


$app->get('/manifest.json', function (Request $request, Response $response) use ($twig, $favicon_data) {
    $output = $twig->render('favicons.manifest.json.tpl', $favicon_data);

    $newResponse = $response->withHeader('Content-type', 'application/manifest+json');
    $newResponse->getBody()->write($output);

    return $newResponse;
});

强制 Safari 更新固定标签页图标

看起来 Safari 会忽略固定标签页图标在本地存储后存储的任何新颜色。

<link rel="mask-icon" href="/path/to/static/safari-pinned-tab.svg" color="#e21e79">

在 OS X 上，通过清空 "~/Library/Safari/Template Icons" 中的图标文件夹来强制 Safari。请参阅 Jonathan Hollin 的文章 Managing Safari 9’s Pinned-tab Icon Cache。基本步骤如下

rm ~/Library/Safari/Template\ Icons/*

开发

$ git clone https://github.com/GermaniaKG/Favicons.git
$ cd Favicons
$ composer install

单元测试

要么将 phpunit.xml.dist 复制到 phpunit.xml 并根据您的需要进行修改，要么保持原样。运行 PhpUnit 测试或 composer 脚本如下

$ composer test
# or
$ vendor/bin/phpunit

###Todo: 使 SlimRouterTest 完美。有一个 SlimRouterTest 类，但它不仅仅是创建一个 SlimRouter 实例，使用具体的 Slim 和 Twig_Environment 构造函数参数。由于我不知道如何检查 Slim 路由是否真的起作用，所以如果 SlimRouter 实例化没有抛出任何错误，这个测试将是内容的。

germania-kg / favicons

维护者

详细信息