Coder Social home page Coder Social logo

gridea-theme-inlineamp's Introduction

gridea-theme-inlineamp

InlineAMP 是一款纯 AMP 主题,设计上简约、干净、响应式,适合喜欢极简设计、比较在意页面打开速度的博主使用。

下载:https://github.com/jiansing/gridea-theme-inlineamp/releases

预览:https://gridea-theme-inlineamp.netlify.app/

演示站托管在 netlify 并启用了AMP 服务器端渲染,拥有更快的速度。

测速报告:

gtmetrix.com

测速位置:香港 网络:不受限制 首屏仅需 0.6s

<iframe src="https://gtmetrix.com/reports/gridea-theme-inlineamp.netlify.app/E494RVXu/video" width="640" height="548" frameborder="0" scrolling="no" allowfullscreen></iframe>

测速位置:香港 网络:LTE Mobile (15/10 Mbps, 100ms) 首屏仅需 1.1s

<iframe src="https://gtmetrix.com/reports/gridea-theme-inlineamp.netlify.app/J0Xi8LW8/video" width="640" height="548" frameborder="0" scrolling="no" allowfullscreen></iframe>

pagespeed insights 报告:https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fgridea-theme-inlineamp.netlify.app (手机端分数低是因为延迟加载了视口外的图像,并且我放的几张图像没有压缩过。如果将图片压缩、调整大小分数会更高,但即使用了也不影响首屏的速度)

使用指南

插入图片、视频、音频 https://jiansing.github.io/include-images-and-video/

添加评论 https://jiansing.github.io/add-comment-for-gridea-theme-inlineamp/

v1.3.0-beta.0 updated 2020.4.26

NEW:

外观

  1. 可以更精细地调整主题配色(注意有些配置项要滚动下拉才能看到)
  2. 预置两种配色方案
  3. 支持自定义 CSS
  4. 支持公共顶部设置图片作为背景

评论

  1. 支持五种评论系统:Gitalk、Valine、Utterances、Disqus、Facebook

SEO

  1. 支持 SEO Meta
  2. 支持 Google JSON-LD 结构化数据:博客文章、面包屑、Logo

侧边栏

  1. 可以更换不同的搜索引擎

其他

  1. 增加了主题更新提醒

Gitalk、Valine、Utterances 评论系统均以能够通过 AMP 验证的方式实现,由于不是官方给出的实现方案,可能存在一些常规情况下不会出现的问题,在后面的版本中随时可能被移除。

移植于wordpress的同名主题 InlineAMP 。(原主题Github

继承了原主题的一些特点:

  • 纯AMP主题(极致速度体验)
  • 移动端/PC端响应式布局(Flex布局)
  • Pure CSS design(无图设计)
  • 极简&科技风格(简约但不简单)

简单但够用:

顶部标语

可以设置主/副标语,将显示在每个页面的顶端

友链

在侧边栏显示友链

Disqus评论

支持Disqus评论

按需加载JS

Google Analytics

可以添加Google Analytics

语言

用于设置 html lang 属性,默认设置为简体中文(zh-Hans),一般用默认设置即可

待实现的功能

  • 标签云页面
  • PWA 支持
  • 主题自定义
  • 代码高亮

gridea-theme-inlineamp's People

Contributors

jiansing avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

gridea-theme-inlineamp's Issues

分类目录出错

当点击进入分类目录后,在不同的目录下,侧边栏显示的分类目录是不同的,而且当分类数量超过两个后,会出现重复显示的bug。
我非常喜欢这个主题,如果能够越来越完善就好了:D

disqus代码URL无法更新

在gitee page上传了页面,也更新了代码,但是页面上显示的链接是博客页面本身的链接

文章封面的时间显示错误

https://i.niupic.com/images/2020/04/06/7hAS.png
详情看图片。
我已经更新了4.5号的最新版本,然而并不能解决这个问题。为避免偶然性,我将旧版本的文件删除后,再复制上新版本的文件。我看到制作者的博客中时间能显示正常(显示当前时间和发布时间,我认为是正常状态),但是我的博客中,发布时间为18年的文章却显示2020,2019,2018三个时间。
另外我希望只显示例如2018这个发布时间,这就足够了:D

设置多个标签,只会显示一个

如题,给文章设置了多个标签后,只会显示出一个标签,不论封面还是文章内的黄色标签都是。
不过文章内底部的灰色方框标签显示正常。希望在封面的能够显示正常

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.