博客改版：重拾技术技能

Jan 06, 2022 / 评论(5) / 笔记

我的博客主题风格稳定版形成在2019年前后，从2020年到现在一直在琢磨怎么能有更新颖的设计风格。

期间，看过最近几年的网站设计（ Awwwards – Best Web Design Trends ），商业及个性与艺术主题都有。最后发现，耐看且纯粹的、简约不简单的才是经典。所以自己的网站改版也就一拖再拖，设计到现在发现，所谓的页面有很多酷炫的交互动画（animation）也容易形成审美疲劳。

在考虑采用很成熟的Bootstrap之后，确实可以节约很多规模化的设计开发时间，但同时对于我这种小博客站点来说，不管是样式文件还是js库对性能加载来说都形成了一种冗余。

于是，自己决定还是在原有v1.0版本的基础上继续手动处理接下来的改版工作。 有时候，完美主义的强迫症真的很误事！

改版原则

个人觉得还是要对这次改版定一些基本准则，包括从自己博客的内容信息构成、Section及风格管理上展开，专注做好信息浏览的用户体验，首先方便自己，而后方便游客。😃 😃 😃 😃

信息架构

以信息架构为导向的设计：Textpattern有一个很要的信息架构基础，表现层通过Theme、Section、Page、Form、Style进行覆盖。内容层面（数据）存在有Article、Images、Files、Links、Categories、Comments类型。

以上这些都属于一个博客或CMS系统的基本框架，且保持简单、清晰，也是自己喜欢Textpattern的原因，在这个框架里头我们需要做的就是内容输出。让自己可以专注与“点滴记录生活、见证心路历程”的日常创作。

用户体验

需要好的用户体验，首先是基于用户体验设计要素及方法论进行，但核心关键因素还是由细节决定差异化体验。

用户体验的设计还是基于内容信息结构的合理划分，然后才是主题风格的设定，以及交互的友好性。因为博客属于内容定位，所以交互主要表现在信息浏览的流畅的，浏览与操作应该是行云流水一般。这次风格需保持简约，同时不落时代审美。

页面构建上，更多的采用模块化设计，保持“内容+风格”能快速复用，对Layout标签进行分级 section、block、item-box、widget 等。

代码片段

首页定制

Textpattern 有个不友好的地方便是没有专门针对首页的判断方式。于是在主题v1.0中我使用如下方法：

<txp:if_section name="default">
  <txp:if_category>
    <txp:article limit="15" />
  <txp:else />
    <txp:if_search>
    <h2 class="category-title"><txp:text item="搜索：" /><txp:page_url type="q" /></h2>
    <txp:article limit="30" searchform="search_results" />
    <txp:else />
      <txp:if_author name="jingbao">
        <txp:article limit="15" />
      <txp:else />
        <txp:article limit="15" displayinhome="1" sort="Posted desc" />
      </txp:if_author>
    </txp:if_search>
  </txp:if_category>
<txp:else />
  <txp:article limit="15" />
</txp:if_section>

以上是一种判断方式，另一个判断方式如下，也就是计划主题2.0采用的方式。

<txp:if_article_list>
  <txp:if_category>
    <txp:output_form form="section_banner" />
    <main class="main clearfloat">
      <section>
        <txp:article limit="15" />
        <txp:output_form form="pager" />
      </section>
    </main>
  <txp:else />
    <txp:if_section name="default">
      <txp:if_search>
        <txp:output_form form="section_banner" />
        <h2 class="category-title"><txp:text item="搜索：" /><txp:page_url type="q" /></h2>
        <main class="main clearfloat">
          <section>
            <txp:article limit="30" searchform="search_results" />
            <txp:output_form form="pager" />
          </section>
        </main>
      <txp:else />
        <!--FrontPage-->
        <txp:output_form form="section_cover" />
        <txp:article limit="1" form="home" />
      </txp:if_search>
    <txp:else />
      <txp:output_form form="section_banner" />
      <main class="main clearfloat">
        <section>
          <txp:article limit="15" />
          <txp:output_form form="pager" />
        </section>
      </main>
    </txp:if_section>
  </txp:if_category>
<txp:else />
  <txp:output_form form="section_banner" />
  <main class="main clearfloat">
    <section>
      <txp:article />
      <txp:output_form form="pager" />
    </section>
  </main>
</txp:if_article_list>

社区提供的方法 forum.textpattern.com/viewtopic.php?id=48287 ，暂未验证

<txp:if_article_list type="author, c, month, pg, q"> <!-- not section frontpage -->
    <txp:article />
    <!-- shift appends pg parameter to all page links, even the first one -->
    <txp:newer shift /> - <txp:older />
<txp:else />
    <txp:article pgonly /> <!-- set up pagination -->
    <txp:article status="sticky" />
    <!-- shift="0" outputs the current page link with pg parameter appended -->
    <txp:older shift="0" />
</txp:if_article_list>

采用插件的方法 soo_if_frontpage

插件实现的核心其实是根据URL判断，以PHP方式实现，核心代码如下：

function soo_if_frontpage ($atts, $thing)
{
    $atts = lAtts(array(
        'section'   =>  '',
        'pg'        => false,
    ), $atts);

    global $s, $pg, $c, $q, $author, $month, $id, $p;

    if (! $section = $atts['section']) {
        $section = 'default';
    }

    return parse(EvalElse($thing, 
        ($section == '*' || in_list($s, $section)) &&
        (! $atts['pg'] || $pg < 2) &&
        ! ($c or $q or $author or $month or $id or $p)
    ));
}

技术引用

Textpattern 插件

The rss_admin_db_manager github.com/Bloke/rss_admin_db_manager plugin adds three menu items to your Textpattern admin interface. Each contains different functionality to help manage your MySQL database. You can think of this plugin as a lightweight replacement for phpMyAdmin.

前端交互

灯箱效果 在上一版本（v1.0）使用 Colorbox ，这次v3.0版本（未启用）使用 GlightBox 。

以下这两个JS应用作者来自乌克兰的 Dmytro （他的推特），为了表示支持，我决定v1.2主题升级版改用这套JS应用，Because I stand with Ukraine. —— @sheshuime 2022.04

PhotoSwipe JavaScript image gallery and lightbox. 基于MIT开源，Github地址 github.com/dimsemenov/PhotoSwipe

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device 基于MIT开源，Github地址 github.com/dimsemenov/Magnific-Popup
(for jQuery or Zepto.js).

资源引用

Txtpattern 支持Podcast 插件：http://www.dev.michaelgravel.com/text/podcasting-with-textpattern-a-tutorial

<video class="home-video-bkg" poster="/wp-content/uploads/2018/10/Homepage-placeholder-image-for-video.jpg" autoplay="" loop="" data-autoplay="" muted="">
  <source src="https://mediag.com/wp-content/themes/mg_2018/video/hero-banner.webm">
  <source src="https://mediag.com/wp-content/themes/mg_2018/video/hero-banner.mp4">
</video>

背景视频参考 https://mediag.com/
波浪动画参考 Canvas 实现 https://mixpanel.com/
设计参考 Our Partners 部分 https://www.thestartupx.com/ecosystem/
更多设计 https://www.awwwards.com/websites/?category=business-corporate&tag=clean&page=4
H5视频播放器 https://www.mediaelementjs.com/
影像记录的设计站点参考 https://first-ascent.website/
简约派 https://stills.mauer.co/
通过Lazysize 计算图片宽高作为占位符 https://github.com/aFarkas/lazysizes
SVG遮罩图：羽毛 https://www.neseahydra.com/images/onar4.svg
Table Flex 响应式方法：https://medium.com/@snowleo208/how-to-create-responsive-table-d1662cb62075
GA数据埋点上报参考文章 https://tate-young.github.io/2019/04/24/google-analytics.html
CDN解决方案：jsDelivr – A free, fast, and reliable CDN for open source https://www.jsdelivr.com/

新版已于2022年2月10日晚上发布，上线包括首页、博客、影像、关于，余下包括文章目录导航跳转、Twitter页、友链、归档等页面尚未完善，另外作品展示等信息内容还需重新规划调整，页面性能也需要不断优化

—— End. 2022.2.11 GZ

评论已关闭。Comments are turned off for this article.

依然少年.

摘要

目录