SHESHUI.ME

博客改版:重拾技术技能

/

我的博客主题风格稳定版形成在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.

前端交互

灯箱效果
上一个版本使用的是Colorbox,这次使用的是GlightBox biati-digital.github.io/glightbox/

资源引用

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/

H5视频播放器 https://www.mediaelementjs.com/

影像记录的设计站点参考 https://first-ascent.website/

简约派 https://stills.mauer.co/

通过Lazysize 计算图片宽高作为占位符 https://github.com/aFarkas/lazysizes

更多 https://www.awwwards.com/websites/?category=business-corporate&tag=clean&page=4

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/

— 未完待续 —

—— Updated 2022-01-22 22:15 ——

评论列表

  • 完美主义让你的改版难产。。。等着新版上线呢

    leimengting 在 2022-01-15

非本文主题相关的留言请到:留言本

给我留言 Say something...

* 先[预览],后[提交]。

insert_comment