美文网首页
自己做个网站(四)

自己做个网站(四)

作者: 多啦A梦的时光机_648d | 来源:发表于2020-03-09 23:15 被阅读0次

今天推荐一个很棒的博客主题:Sakura,想用可以到这个网站下载。

先说说他的优点,哈哈


*   支持随机封面图
*   支持Lazyload图片延迟加载
*   支持首页文章浮现效果
*   可设置视频为文章封面
*   支持自定义登录界面
*   支持 Bilibili 表情
*   可调用QQ头像
*   评论支持插入图片
*   支持评论显示用户UA和IP(主题内置了8M多的ip数据库)
*   支持文章目录
*   支持Mac风格代码高亮
*   支持前台修改背景图
*   支持时光轴
*   自带相册功能
*   自带邮件美化模板
*   支持Aplayer播放器
*   CDN优化
*   可对接安卓客户端(作者自己的,不是你拿来就用)
*   主题选项内置[SEO](https://chonzi.com/seohost "网站SEO经常遇到的问题")描述
*   自带焦点图广告三个
*   Sakura主题自带的随机特色图图片位于主题的/cover/gallery文件夹里面可以自己新增或者删除

这款主题在功能方面由于是作者自用的主题,所以对于当做博客使用的话,可以满足大多数人的实际需求。并且这一款主题最最重要的一点是(**免费的**)!

从github下载的主题放到/var/www/html/wp-content/themes/目录下,没解压的话解压,然后到浏览器界面启用,主题设置在 菜单-外观-Sakura 主题设置。

一:封面图片主题设置

对于封面图片主题设置有3个选项:webp优化随机图、内置原图随机图、外部随机图API,rest-api url调用示例:https://example.com/wp-json/sakura/v1/image/cover ,请根据个人的情况在 后台-外观-Sakura主题设置-第一屏-封面图片库选项 选择

webp优化随机图

主题v3.3.3之后,内置了manifest生成工具,使用python3实现,可生成封面图所需文件,详见这里

  • 目录及文件说明
.
├── manifest
│   ├── gallary           // 存放原图片
│   ├── jpeg              // 存放生成的缩略图
│   ├── webp              // 存放转换后的封面图
│   ├── manifest.json     // 生成的manifest数据
│   ├── manifest.py       // manifest主程序
│   ├── qt.py             // manifest GUI程序(开发中)
│   ├─── __init__.py      // GUI程序初始化文件
│   └── icon.*            // GUI素材文件

这里只讲linux的安装

# Linux/Mac Terminal
pip install Pillow
# 如果也安装了 Python 2,需要指定 pip 版本:
pip3 install Pillow
  • 运行
    把图片文件放到 gallary 目录。
# 切换到 manifest.py 所在目录:
cd /path/to/manifest/
python manifest.py
# 如果也安装了 Python 2,需要指定 Python 版本:
python3 manifest.py

之后根据提示操作即可,程序会生成封面图,并且manifest.json会上传至WordPress后台存入数据库。v3.3.5更新为后端获取manifest.json,在 后台-外观-Sakura主题设置-第一屏-封面图片库url 处填写url并保存好后,点击更新会将manifest.json 存入WordPress数据库

将 manifest 整个文件夹上传至你的cdn,并在 后台-外观-Sakura主题设置-第一屏-封面图片库url 处填写url并保存,最后不用加斜杠(注:留空则使用本地的manifest路径)

eg. manifest的地址是 https://cdn.jsdelivr.net/gh/mashirozx/sakura@3.3.3/manifest/,只需在后台填写 https://cdn.jsdelivr.net/gh/mashirozx/sakura@3.3.3 ;如需使用本地图片库,将url填写处留空即可

现代浏览器基本都支持Webp,如遇不支持的浏览器,api会自动返回压缩后的普通图片。

内置原图随机图

主题内建api,将图片放入 主题目录/manifest/gallary/ 文件夹下,访问 rest-api url 会返回原图片

外部随机图API

在 后台-外观-Sakura主题设置-第一屏-封面图片库url 处填写外部随机图API的url,访问 rest-api url 会返回api的图片

下面推荐几个插件

一:文章别名为拼音或英文

发现一个问题,就是搭建完wordpress,试着写了一篇博客。文章发布后,首页已经能显示出文章的标题,但是点进去后却提示该页无法显示。这个问题是由于wordpress生成的链接中包含中文字符导致的,所以我们安一个自动转换中文链接为拼音 SO Pinyin Slugs 的插件。



他会自动把中文名转换成英文或拼音。

二: 静态缓存插件

它把整个网页直接生成 HTML 文件,这样 Web 服务器就不用解析 PHP 脚本,通过使用这个插件,能使得你的 WordPress 博客将显著的提速。

$git clone https://github.com/Automattic/wp-super-cache.git

三:wp-player音乐播放器

git clone https://github.com/webjyh/WP-Player.git

WP-Player 一个迷你歌曲播放器,支持多歌曲播放,支持使用网易云音乐, 虾米音乐, QQ音乐, 百度音乐歌曲地址, 也支持自定义上传音乐。

源码说明

./src/ 为源码目录
./dist/ 为打包后输出目录
请使用 ./dist/wp-player/ 文件夹下文件,此目录为插件目录可以打成 zip 包上传至 wordpress 后台

源码打包

# install dependencies
npm install

# build for production with minification
npm run build

安装好之后,就可以在文章中插入音乐了。

  • 在虾米网打开喜欢的歌曲页面,复制歌曲页面的网址如https://music.163.com/#/my/m/music/playlist?id=2513015855
  • 并将复制的网址填写到WP-Player的表单内(在文件编辑页面最底部)。音乐类型将根据网址自动做出选择。


  • 点击获取音乐ID按钮,此时音乐ID出现在表单中。
  • 将短代码 [player autoplay="1"] 填入您的文章内容中。
  • 短代码中 autoplay 表示是否自动播放;参数"0"表示否;"1"表示是;
  • PS:建议使用网址来获取音乐ID。

四:link manager

$wget http://downloads.wordpress.org/plugin/link-manager.zip

用过wordpress网站的朋友都知道,新版的wordpress后台没有友情链接功能,我们需要启用才可以显示出来。

五:图片压缩

$git clone https://github.com/ORCA-WPMU/wp-smush-pro.git

Smush现在可以压缩任何目录中的任何图像,以便您可以优化网站上的所有图像 - 包括NextGEN图像,使用WP Offload Media存储在Amazon S3上的图像以及每个WordPress插件和主题包中的图像! 原文地址:https://www.tghello.com/post/111.html © tghello.com

相关文章

  • 自己做个网站(四)

    今天推荐一个很棒的博客主题:Sakura,想用可以到这个网站下载。 先说说他的优点,哈哈 从github下载的主题...

  • 自己做个网站(三)

    上一步将最基础的网站搭建好了,就可以美好自己的网站了。 一:安个编辑器 由于我用惯了markdown,所以按个ma...

  • 自己做个网站(二)

    之前已经构建好了网站的后台数据库,下一步就可以安装wordpress了。 一:安装wordpress 1.下载解压...

  • 自己做个网站六

    这里讲一下安装Yoast SEO 第一步安装依赖 Composer 移动 composer.phar,这样 com...

  • 自己做个网站五

    第一步 复制主题模板文件下single.php为guestbook.php。 用vim打开guestbook.ph...

  • 自己做个网站(一)

    今天来自己做个博客首先自己取淘宝买个服务器,买个最低配置的年费服务器,这里怎么买就不讲了。有两种选择:其一是乌班图...

  • 干货 | 实战15分钟超快建站,不会技术我有自己网站

    @凉皮:凉皮最近想要展示自己更清晰点,要做自我营销,所以做个人网站是个不错的选择。最关键的尝试着自己去做个网站,其...

  • 自己做个门户网站心得

    我做的一个地方门户类型的网站(宿州信息网),刚开始自己再这方面什么都不懂,花钱请了一个培训机构学习了一些关于网站的...

  • 09 Axure 进度条

    最近在研究Axure 想着怎么用这玩意做个小网站 微网站啥的 毕竟毕业设计要做个微网站 正好可以拿来糊弄老师 做...

  • 6.9

    !今天开始做个人网站???

网友评论

      本文标题:自己做个网站(四)

      本文链接:https://www.haomeiwen.com/subject/pfxsdhtx.html