Git Product home page Git Product logo

typecho-theme-material's Introduction

Material 原质

原之质,物之渊

Render

Contents 目录

General 概括

  • Author 作者:Viosey
  • Maintainer 维护者:黎明余光
  • Version 版本:3.4.0
  • Compatibility 兼容:PHP 7+, MySQL, Typecho 1.1+
    • 当前测试均在 PHP 7.4/8.0 与 Typecho 1.1 正式版及开发版下完成,在可能的情况下请尽量接近此环境

Feature 特性

  • 简洁高效的侧边栏
  • 极其丰富的自定义设置
  • 友好的多语言设定
  • 中英文之间自动添加空格
  • 后台更新检测
  • LocalStorage 强缓存策略

Demo 演示

Experience the Material theme in live: typecho-theme-material Demo

体验 Material 主题: typecho-theme-material 演示

Setup 设置

  • Release 中下载最新版本,大多数情况下更新可直接覆盖,部分设置需手动启用
  • 在“设置外观”中打造一个属于你自己的博客
  • 关于文章缩略图
    • 自定义字段的 “图片地址” 优先级最高,若未设定则默认为文章内第一张图片(可关闭)
    • 缩略图支持 Markdown 格式, HTML 格式以及附件形式, Markdown 格式为 ![图片描述](图片链接)
  • 首页文章概览默认最大输出 80 个字符, 可手动添加截断符 <!--more--> 控制输出
  • 创建友情链接页, 需安装此友情链接插件 typecho-links-material,并手动创建新页面,选择模板为“友情链接”

Contributing 贡献

All kinds of contributions (enhancements, new features, documentation & code improvements, issues & bugs reporting) are welcome.

欢迎各种形式的贡献,包括但不限于优化,添加功能,文档 & 代码的改进,问题和 bugs 的报告。期待你的 Pull Request

License 许可证

Open sourced under the GPL v3.0 license.

根据 GPL v3.0 许可证开源。

typecho-theme-material's People

Contributors

bbaa-bbaa avatar flygoat avatar goodmanwen avatar idawnlight avatar neofelhz avatar smriley avatar yucling avatar zigzagk 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  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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

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

typecho-theme-material's Issues

highlight替换style

我使用了大佬的主题,非常好用!感谢
请问大佬~我想替换一下你highlight.js的style的css文件 可是替换之后显示不是很正常 我替换的是css目录下面的 highlight.min.css
image
结果换完之后成这样了 感觉像是背景颜色没有正常显示 大佬可否告诉我我还需要修改哪里吗?
实际应该是这样的
image

文章

底下文章不见了怎么办
只有顶上头像

随机图配置读取错误

index.php文件中对每一个文章卡片的缩略图的选项读取出问题了。
169~185行应该由下面这段

                                <?php if ($this->options->ThumbnailOption == '1'): ?>
                                <div class="post-thumbnail-pure mdl-card__media mdl-color-text--grey-50 lazy " data-original="<?php showThumbnail($this); ?>">
                                    <p class="article-headline-p"><a href="<?php $this->permalink() ?>" target="_self"><?php $this->title() ?></a></p>
                                </div>
                                <?php elseif ($this->options->ThumbnailOption == '2'): ?>
                                <div class="mdl-card__media mdl-color-text--grey-50" style="background-color:<?php $this->options->TitleColor()?> !important;color:#757575 !important;">
                                    <p class="article-headline-p-nopic">
                                        <a href="<?php $this->permalink() ?>" target="_self">
                                        "</br><?php $this->title() ?></br>"
                                    </a>
                                    </p>
                                </div>
                                <?php elseif ($this->options->ThumbnailOption == '3'): ?>
                                <div class="post_thumbnail-random mdl-card__media mdl-color-text--grey-50 lazy " data-original="<?php randomThumbnail($this); ?>">
                                    <p class="article-headline-p"><a href="<?php $this->permalink() ?>" target="_self"><?php $this->title() ?></a></p>
                                </div>
                                <?php endif; ?>

改成

                                <?php if ($this->options->ThumbnailOption == '0'): ?>
                                <div class="post-thumbnail-pure mdl-card__media mdl-color-text--grey-50 lazy " data-original="<?php showThumbnail($this); ?>">
                                    <p class="article-headline-p"><a href="<?php $this->permalink() ?>" target="_self"><?php $this->title() ?></a></p>
                                </div>
                                <?php elseif ($this->options->ThumbnailOption == '1'): ?>
                                <div class="mdl-card__media mdl-color-text--grey-50" style="background-color:<?php $this->options->TitleColor()?> !important;color:#757575 !important;">
                                    <p class="article-headline-p-nopic">
                                        <a href="<?php $this->permalink() ?>" target="_self">
                                        "</br><?php $this->title() ?></br>"
                                    </a>
                                    </p>
                                </div>
                                <?php elseif ($this->options->ThumbnailOption == '2'): ?>
                                <div class="post_thumbnail-random mdl-card__media mdl-color-text--grey-50 lazy " data-original="<?php randomThumbnail($this); ?>">
                                    <p class="article-headline-p"><a href="<?php $this->permalink() ?>" target="_self"><?php $this->title() ?></a></p>
                                </div>
                                <?php endif; ?>

才能和配置文件相对应。
可能因此导致了Issue #11的情况。
archive.php的第22~38行也应该做同样的修改。

评论显示不出头像

qq 20171204222854

我只将其中的分享按钮注释掉了
<!-- share 取消分享按钮 <button id="comment-share-<?php $comments->theId(); ?>-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"> <i class="material-icons" role="presentation">share</i> <span class="visuallyhidden">share comment</span> </button> <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="comment-share-<?php $comments->theId(); ?>-button"> <a class="md-menu-list-a" target="view_window" href="<?php $comments->permalink(); ?>"> <li class="mdl-menu__item">在新标签页中打开</li> </a> <a class="md-menu-list-a" href="https://twitter.com/intent/tweet?text=<?php $comments->content(); ?>+from&url=<?php $comments->permalink(); ?>"> <li class="mdl-menu__item">分享到 Twitter</li> </a> <a class="md-menu-list-a" href="https://plus.google.com/share?url=<?php $comments->permalink(); ?>" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"> <li class="mdl-menu__item">分享到 Google+</li> </a> </ul> 取消分享按钮 -->

其它的内容没有改动。TYPECHO 1.0正式版

能否添加materail手势?

大佬您好 我现在一直在用您的模板
我本人不熟悉material 反馈一个建议,很多materail设计其实都有侧边栏手势划出,手指在边缘向右滑滑出
希望您的模板能越来越好

希望能加入文章目录

一直在用这个主题,非常好看,但是美中不足的是没有文章目录。访问网站的时候如果有一个文章目录,可以让游客对网站所有文章一目了然,这是个不错的功能,希望大佬能加入归档文章目录,谢谢

首页不能滑动浏览及缩略图有问题

pc端访问时首页不能往下滑动,移动端访问时虽可以滑动但是划一下就卡一下;还有缩略图,我设置的显示文章第一张图,主题刚启用时没问题,刷新了两次,缩略图就变成了纯色蓝色,请问是我设置的问题还是bug呢?

更新到3.2.1

是不是哪个文件出错啦?在3.2.0版本儿那个还能正常显示的有没有那个相应的api

pjax

能否增加pjax实现单页呢

search blank not work well with EditorMD

很高兴 material又有人维护了, 赞!
我在EditorMD时出现了一点问题,
当EditorMD开启接管前台Markdown解析时,搜索框显示不出来搜索的词语.可以解决吗

另外, 有几个地方可以在material实现吗?
首先就是可以显示文章目录吗?
有时特别长的文章,有一个文章目录可以做很好的引导
比如:http://notes.iissnan.com/2016/publishing-github-pages-with-travis-ci/
另外一个就是,搜索时可以即时显示搜索结果吗,感觉cool
https://blog.viosey.com/

网页显示为不完全安全

在启用https是,chrome显示网页为不完全安全,百度后发现是因为网页内有http链接所致,请问该如何修改使其变为完全安全?(显示gravatar的img的src是http协议)

侧边栏时间归档完善

为侧边栏添加如下图所示的 每月文章数目

image
image

可以使用 Widget_Contents_Post_Datecount 字段。

参考资料

没有 PHP 环境,就不开 PR 了。

我无法点开文章

我的博客地址:ywl.tn
无法点开文章

使用的是dokcer搭建的环境
php7.2
mysql5.7
ngnix

docker-compose.yml文件内容:

version: '2'
services:
nginx:
image: nginx:1.13.9-alpine
ports:
- "80:80"
restart: always
volumes:
- ./typecho:/app
- ./typecho.conf:/etc/nginx/conf.d/default.conf
- logs:/var/log/nginx
links:
- php-fpm
depends_on:
- php-fpm
php-fpm:
image: myphp/php-7.2.3
restart: always
volumes:
- ./typecho:/app
links:
- db
depends_on:
- db
db:
image: mysql:5.7.21
restart: always
ports:
- 3306:3306
volumes:
- ./mysql:/var/lib/mysql
- logs:/var/logs/mysql
env_file:
- mysql.env
volumes:
logs:

typecho版本是开发版本

评论框按钮点击后报错

点击评论栏下的class为mdl-button__ripple-container的按钮控制台报错,报错信息为 Cannot read property 'parentNode' of null
复现方法
image

image
image

渐变背景变成白色

更新 主题至3.2.0之后,我两个站点的渐变背景不知为何变为白色,经多次修改设置,调试无果,前来请求帮助

文章预览问题

在我帮别人做博客的时候突然发现了这样一个问题。

问题很明显了...我也不知道是怎么回事。反正就是预览的时候所有换行的语句都会连起来。
希望能够用换行符表示预览分隔,也就是说只放第一行的文字上去,这样显得才会正常一些。
如图:
image

但是打开后却是正常的。
image

使用中的一些小问题

很喜欢这个风格的主题,感谢作者。但是使用时还有一些小问题,不知道是不是我配置的问题

  1. 自带的搜索功能没法使用....

  2. 留言填写完成后就没有了...

  3. 主题设定没法保存,切换主题后就没了...

HighlightJS support

The style will be covered.
For a better code view, please add Highlight JS support.

关闭localstorage的问题

localstorage在某些情况下不太好用..如果需要关闭的话,直接将js部分css/jslsloader的函数换成正常引入就好了吗?

顺便请教一下,pjax是否可以手动关闭,感觉对评论不太友好

评论为空跳转新页面

这个可以去掉吗?改用抖动提示
再限制一下头图大小,看着不是一样的
评论之后不会自动刷新
文章页脚加入谷歌广告,当无广告时会重新加载一次主页,禁忌,多重存在

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.