我们如何标记Google字体并创建Goofonts.com

Goofontsis是由开发人员和设计师丈夫签署的附带项目，它们都是版式的忠实拥护者。我们一直在标记Google Fontsand构建了一个网站，该网站使搜索并更容易找到正确的字体。

goofontsuses wordpress在后端和前端的后端和nuxtjs（Avue.js框架）中。我很想告诉您Goofonts.com背后的故事，并分享有关我们选择的技术以及我们如何适应和将其用于该项目的一些技术细节。

为什么我们建造Goofonts

在撰写本文时，Google字体提供了977个字体。您可以随时使用TheGoogle字体开发人员API检查确切的编号。您可以检索所有字体的动态列表，包括每个家庭的可用样式和脚本列表。

Google字体网站提供了一个漂亮的界面，您可以在其中预览所有字体，通过趋势，受欢迎程度，日期或名称对其进行排序。

但是搜索功能呢？

您可以按五个类别包括和排除字体：衬线，sans-serif，显示，手写和单音范围。

您可以在脚本中搜索（Likelatin扩展，西里尔或Devanagari（它们在Google字体中称为子集）。但是您无法一次在多个子集中搜索。

您可以通过四个属性进行搜索：厚度，倾斜，宽度和“数字样式”。一种名为“变体”样式，既指风格（斜体常规）和权重（100,200，最多900）。通常，身体字体需要三个变体：常规，大胆和斜体。 “数字样式”属性与许多变体分类字体，但它不允许在“常规，大胆，斜体”组合中选择字体。

还有一个自定义搜索字段，您可以在其中输入查询。不幸的是，搜索是专门针对字体的名称执行的。因此，结果通常包括字体家庭来自Google字体以外的其他服务。

让我们以“卡通”查询为例。它从外部Foundry Linotype导致“ Cartoonscript”。

我记得在一个项目上工作，该项目要求两个高度风格化的字体 - 一个唤起旧的野外西部，另一个模仿了剧本。那是我决定标记Google字体的时刻。:)

Goofonts在行动中

让我向您展示Goofonts的工作原理。右侧的黑暗侧边栏是您的“搜索”区域。您可以在搜索字段中键入关键字，这将执行“和”搜索。例如，您可以查找同时是卡通和平板的字体。

我们亲自挑选了一堆关键字 - 关注其中的任何一个！如果您的项目需要一些特定的子集，请在子集部分中检查它们。您还可以检查字体所需的所有变体。

如果您喜欢字体，请单击其心脏图标，并将其存储在您浏览器的LocalStorage中。您可以在thegoofonts.com/bookmarkspage.together上找到书签字体，并使用代码，您可能需要嵌入它们。

我们如何构建它：WordPress部分

首先，我们需要一个以某种方式来预览和标记每种字体。我们还需要一个数据库来存储thosetags。

我在WordPress方面有一些经验。此外，WordPress带有其REST API，这为处理前端的数据打开了多种可能性。茅草很快就开始了。

我去了最直接的初始设置。每种字体都是帖子，我们将帖子标签用于关键字。 Acustom Post类型也可以使用，但是由于我们仅将WordPress用于数据，因此默认内容类型非常有效。

显然，我们需要以编程方式添加所有字体。我们还需要能够编程更新字体，包括添加新字体或添加新的可用变体和子集。

下面描述的方法与通过外部API可用的任何其他数据都很有用。在自定义的WordPress插件中，我们注册一个菜单页面，可以从中检查API的更新。为简单起见，该页面将显示一个标题，一个按钮激活更新的按钮，以及一个视觉反馈的进度条。

 /**
 *注册自定义菜单页。 
 */
函数register_custom_menu_page（）{
  add_menu_page（ 
    “ Google字体到WordPress”， 
    “ WP Goofonts”， 
    “ manage_options'， 
    'WP-GOOFONTS-MENU'， 
  function（）{？>        
    <h1 id="Google字体API"> Google字体API </h1>
    <button type="“" button>运行</button>
    <p> </p>        
    <progress max="“" value="“"> </progress>
  <p><br>让我们从编写JavaScriptPart开始。虽然大多数与WordPress一起使用Ajax实现了JQuery和thejquery.ajaxmethod的示例，但可以在没有jQuery的情况下获得相同的示例，而是使用haxios和axoxiosand andaxiosand a helperqs.jss.jsfor数据序列化。</p><p>我们希望在加载后Quave toload我们的自定义脚本<em>。</em></p><pre rel="PHP" data-line=""> add_action（'admin_enqueue_scripts'function（）{
  wp__script（'axios'，'https://unpkg.com/axios/dist/axios.min.js'）;
  wp_enqueue_script（'qs'，'https://unpkg.com/qs/dist/qs.js'）;
  wp_enqueue_script（'wp-goofonts-admin-script'，plugin_dir_url（__file__）。'js/wp-goofonts.js'，array（'axios'qs'，'qs'），'1.0.0'，true）;
}）;

让我们看看Javascript的外观：

 const button = document.getElementById（'wp-goofonts button'）
const info = document.getElementById（'info'）
const progress = document.getElementById（'progress'）
const updater = {
  总计：0，
  总体检查：0，
  更新：[]，
  init：async函数（）{
    尝试 {
      const allfonts =等待axios.get（'https://www.googleapis.com/webfonts/v1/webfonts?key = api_keykey＆sort = date'）
      this.totalCount = allfonts.data.items.length
      info.textContent =`获取$ {this.totalCount} fonts。
      this.updatepost（allfonts.data.items，0）
    }捕获（e）{
      控制台（E）
    }
  }，，
  update post：async函数（els，index）{
    if（index === this.totalCount）{
      返回
    }                
    const data = {
      动作：'goofonts_update_post'，
      字体：els [index]，
    }
    尝试 {
       const apirequest =等待axios.post（ajaxurl，qs.stringify（data））
       此  
       progress.setAttribute（'value'，math.Round（100*this.totalchecked/this.totalCount））
       this.updatepost（Els，索引1）
    }捕获（e）{
       控制台（E）
      }
   }
}

button.addeventlistener（'click'，（）=> {
  updater.init（）
}））

Initmethod向TheGoogleFonts API提出了请求。一旦获得API的数据，我们将调用递归递归asynchronousupdatepostmethod，该数据将邮政请求中的sanividual字体发送到WordPress服务器。

现在，重要的是要记住，WordPress以其特定的方式实现了Ajax。首先，必须向每个请求发送towp-admin/admin-ajax.php 。该URL可以在管理区域作为全球JavascriptVariableajaxurl提供。

其次，所有WordPress AJAX请求必须在数据中包括AnactionArgument。操作的值确定将在服务器端上使用哪个挂钩标签。

在我们的情况下，动作值isgoofonts_update_post。这意味着服务器端上发生的事情由thewp_ajax_goofonts_update_posthook确定。

 add_action（'wp_ajax_goofonts_update_post'，function（）{
  if（isset（$ _post ['font']））{
    / *帖子瓷砖是字体的名称 */
    $ title = wp_strip_all_tags（$ _post ['font'] ['family']）;
    $ variants = $ _post ['font'] ['variants'];
    $ subsets = $ _post ['font'] ['subsets'];
    $ category = $ _post ['font'] ['category'];
    / *检查帖子是否已经存在 */
    $ object = get_page_by_title（$ title，'object'，'post'）;
    如果（null === $ object）{
      / *创建一个新帖子和集类别，变体和子集作为标签 */
      goofonts_new_post（$ title，$类别，$ variants，$ subset）;
    } 别的 {
      / *检查$ variants或$子集更改 */
      goofonts_update_post（$ object，$ variants，$ subset）;
    }
  }
}）;

函数goofonts_new_post（$ title，$类别，$ variants，$ subset）{
  $ post_id = wp_insert_post（array（array）（
    'post_author'=> 1，
    'post_name'=> sanitize_title（$ title），
    'post_title'=> $ title，
    'post_type'=>'post'，
    'post_status'=>'草稿'，
    ）
  ）；
  如果（$ post_id> 0）{
    / *标记的简单部分;）附加字体类别，变体和子集（这三个来自Google字体API）作为标签 */
    wp_set_object_terms（$ post_id，$ category，'post_tag'，true）;
    wp_set_object_terms（$ post_id，$ variants，'post_tag'，true）;
    wp_set_object_terms（$ post_id，$ subset，'post_tag'，true）;
  }
}

这样，在不到一分钟的时间内，我们最终在仪表板上得到了近一千个邮政草稿，其中所有标签已经到位。我们需要启动为每种字体一个一个字体添加标签。
在这种情况下，默认的WordPress编辑器没有多大意义。我们需要的是该字体的预览。 fonts.google.com上指向字体页面的链接也派上用场。

Acustom Metaboxdo很好。在大多数情况下，您将使用元框来定制表单元素来保存与帖子相关的一些自定义数据。实际上，Metabox的内容实际上可以是任何HTML。

函数display_font_preview（$ post）{
  / *字体名称，例如Abril Fatface */
  $ font = $ post-> post_title;
  / *字体如URL，例如Abril Fatface */
  $ font_url_part = umpode（''，Explode（''，$ font））;
  ？>
  <div> 
    <link href="%E2%80%9C" echo font_url_part swap>
      <h2>  </h2>
      <a href="%E2%80%9C" echo font_url_part>“ target =” target =“ _ black” rel =“ noopener”>在Google Fonts上的标本</a>
    
    <div contentedialtial="“" true style="“" font-family echo font>”>
      <p>快速的棕色狐狸跳过一只懒狗。</p>
      <p style="“" text-transform>快速的棕色狐狸跳过懒狗。</p>
      <p> 1 2 3 4 5 6 7 8 9 0 </p>
      <p>＆！ ; ？ {} [] </p>
    </div>
  </div>
<p>标记字体是一项长期的任务，重复了很多。它还需要大量的一致性。这就是为什么我们开始定义一组标签“预设”的原因。</p><pre rel="JavaScript" data-line=""> {
  / * ... */
  漫画：{
    标签：“漫画，休闲，非正式，卡通”
  }，，
  草书：{
    标签：“草书，书法，脚本，手稿，签名”
  }，，
  / * ... */
}

接下来，使用一些自定义CSS和JavaScript，我们通过使用一组预设按钮来“砍” WordPress编辑器和标签形成。

我们如何构建它：前端部分（使用nuxtjs）

thegoofonts.cominterface是由法国Graphicandweb设计师BySylvain Guizard设计的（WhoalSo恰好是我的丈夫）。我们想要一些简单的东西区分“搜索”区域。 Sylvain故意购买了离Google字体身份不远的颜色。我们正在寻找建立独特的和原始的用户混乱之间的平衡。

虽然IDID毫不犹豫地将WordPress用于The Back-End，但IDID不想在前端使用它。我们的目标是一种类似应用程序的体验，我个人想在JavaScript中进行编码，尤其是使用vue.js。

我遇到了使用nuxtjswith wordpress的网站的示例，并决定尝试一下。选择立即做出。 NUXTJS是一个非常流行的vue.js框架，我真的很喜欢它的简单性和灵活性。
我一直在使用不同的NUXTJS设置来使用100％的静态网站。完全静态的解决方案感觉到性能最高；整体体验似乎是最流畅的。这也意味着我的WordPress站点仅在构建过程中使用。因此，它可以在我的本地主机上运行。这不是可以忽略的，因为它消除了托管成本，最重要的是，我可以跳过与安全性相关的安全性压力的安全性和安全性。）

如果您熟悉NUXTJ，您可能会知道，全部静态一代尚未（尚未）NUXTJ的一部分。预订页面试图在导航时尝试再次获取数据。

这就是为什么我们必须以某种方式将100％的静态生成“入侵”。在这种情况下，我们将获取的数据的有用部分保存到每个构建过程之前。这是可能的，尤其是Tonuxt钩子，特别是它的构建器挂钩。

钩子通常在NUXT模块中使用：

 / *模块/fore build.js */

const fs = require（'fs'）
const axios = require（'axios'）

const sourcePath ='http：//wpgoofonts.local/wp-json/wp/v2/'
const路径='static/allfonts.json'

Module.exports =（）=> {
  / *将数据写入文件，如果文件已经存在 */替换文件 */
  const stordata =（data，path）=> {
    尝试 {
      fs.writeFilesync（路径，json.stringify（data））
    } catch（err）{
      console.Error（err）
    }
  }
  异步函数getData（）{    
    const fetchedTags =等待axios.get（`$ {sourcepath} tags？per_page = 500`）
      .catch（e => {console.log（e）; return false}）
    
  / *构建tag_id的对象：tag_slug */
    const tags = fetchedTags.data.data.data（（ACC，CUR）=> {
      acc [cur.id] = cur.slug
      返回ACC
    }，{}）
    
  / *我们想知道总数或页面 */
    const mhead =等待axios.head（`$ {sourcepath} posts？per_page = 100`）
      .catch（e => {console.log（e）; return false}）
    const totalpages = mhead.headers ['x-wp-totalpages']

  / *让我们获取所有字体 */
    令字体= []
    让i = 0
    而（i <totalpages const ports fonts.push.apply clean carter enterporary fonts="（fonts）.Reduce（（ACC，EL）="> {
      acc [el.slug] = {
        姓名：el.title.rendered，
        标签：el.tags.map（i => tags [i]），
      }
      返回ACC
    }，{}）

  / *将字体对象保存到.json文件 */
    Stordata（字体，路径）
  }

  / *确保在每个构建之前都会发生这种情况 */
  this.nuxt.hook（'构建：之前'，getData）
}</totalpages>

 / * nuxt.config.js */
Module.exports = {
  // ...
  buildModules：[
    ['〜模块/之前的建筑']
  ]，，
// ...
}

如您所见，我们仅请求标签列表和列表帖子。

最后的想法

在Goofonts上工作是一项长期冒险。也需要积极维护这种项目。我们定期继续检查Google字体中的新字体，子集或变体。我们标记新项目并更新我们的数据库。最近，我真的很兴奋地发现了家族的野牛Neuehas联合。我们在鲜为人知的标本中也拥有个人最爱。

作为一个定期研讨会的培训师，我可以观察到真正的用户使用Goofonts。在项目的这个阶段，我们希望获得尽可能多的反馈。我们希望Goofonts成为Web Designers的有用，方便和直观的工具。待办事项功能之一是以其名称搜索字体。我们还希望增加分享书签集并创建多个字体“集合”的可能性。

作为开发人员，我真的很喜欢这个项目的多学科方面。这是我第一次与WordPress Rest API合作，这是我在Vue.js中的第一个大项目，我对排版学到了很多东西。

如果可以的话，我们会做不同的事情吗？绝对地。这是一个学习过程。另一方面，我认为我们不会更改主要工具。 WordPress和Nuxt.js的灵活性被证明是正确的选择。从今天开始，我肯定会花一些时间来探索GraphQL，将来我可能会实施它。

我希望您发现一些讨论的方法有用。正如我之前所说，您的反馈非常宝贵。如果您有任何疑问或言论，请在评论中告诉我！

以上是我们如何标记Google字体并创建Goofonts.com的详细内容。更多信息请关注PHP中文网其他相关文章！