分类: 折腾

wordpress exprience

  • 使用github搭建动态的个性化博客

    前言

    本文介绍使用github gist api 无需任何服务器,搭建一个可动态发布文章的个人博客,博客基于 GitHub Pages 与 Github API 实现无后台,可动态发布博客的系统。博客数据储存于gist 通过Github API 进行增删改查。
    演示地址:https://github-laziji.github.io
    Github地址:https://github.com/GitHub-Laziji/vblog

    快速搭建

    搭建博客只需3步

    1、点击github头像旁边的 “+” 号 选择 Import repository克隆地址填 https://github.com/GitHub-Laziji/GitHub-Laziji.github.io 项目名填:你的用户名.github.io
    2、克隆完成后 修改文件 /static/configuration.json 中的 githubUsername 为自己的github用户名
    类似演示地址其中 GitHub-Laziji 为用户名

    现在 https://你的用户名.github.io 就是你的个人博客了,例如https://github-laziji.github.io(可能需要等一两分钟,并按F5强制刷新才能出来)

    3、获取Token并绑定
    发布文章和修改博客某些设置需要绑定token,在 github > settings > Developer settings > Personal access tokens 勾选gist 和 repo权限,获取Token,点击博客左下角绑定。

    绑定自定义域名

    如果你想用Github二级域名访问,就无视这一步,如果你想用自己的域名访问,请继续看。

    先解析域名的CNAME记录到你的Git二级域名

    然后访问你的博客Git项目地址,点击Create new file新建文件,命名CNAME,内容写上你的域名,不要http等。

    稍等一会儿后就可以通过自己的域名访问博客了

    本文链接:https://agint.me/82.html

  • WordPress架设多域名多站点教程

    本文转自月光博客:http://www.williamlong.info/archives/5378.html

     

    WordPress 3.0以上的版本支持直接开启多站点模式,这样一来,你可以在一个后台切换多个站点进行管理。多站点模式可以使用多个不同的域名绑定,避免了在同一个服务器安装多个WordPress的尴尬,管理多个网站非常方便,下面就介绍一下安装和启用多站点的操作方法。

    开启网络配置

    在网站根目录下的 wp-config.php 添加:

    define(‘WP_ALLOW_MULTISITE’, true);

    配置多站点模式

    刷新网站后台,访问 工具 > 配置网络,根据自己的需要选择“子域名”或者“子目录”模式,然后点击“安装”,如果需要绑定域名,可以选择“子域名”模式。之后系统会生成两段代码,一段添加到网站根目录下的 wp-config.php 中,一段添加到网站根目录下的 .htaccess 文件中。

    添加网站域名

    服务器Apache设置为泛域名解析,然后在 我的站点 – 管理网络 – 站点 里,添加新的站点,选一个子域名添加站点。

    添加好了以后,在子域名上点编辑,把里面的“站点地址(URL)”修改为指定的独立域名,然后将该独立域名DNS绑定过来,即可完成配置。

    设置COOKIE

    在网站根目录下的 wp-config.php 添加:

    define( ‘COOKIE_DOMAIN’, ” );

    这步操作很重要,如果不设置的话,之后登录网站后台会提示“错误:Cookies被阻止或者您的浏览器不支持。要使用WordPress,您必须启用Cookies。”

    之后,用户就可以用一套WordPress程序来管理多个不同的站点,可以同步调整主题和插件,这些站点可以是完全不同的域名,管理起来非常方便。

     

  • WP自定义网页字体

    转载文章:WP自定义网页字体 – https://iiong.com/wordpress-custom-web-font.html

    前言

    今天在群里和一个朋友讨论网页字体美化的方案,因为跨平台原因,总是找不到合适的中文字体渲染方案。

     

    再此之前我研究过类似的,那时候直接从ttf字体文件提取汉字常用字的web font,加载到网页会出现大量的空白网页等待时间,故总结:

    • 字体过大
    • Web字体文件下载太慢,宽带不足
    • font-family没有适当配置好

    准备

    总结上面几点,主要还是做个异步加载,就是在加载中web font期间渲染的是系统自带的字体。Google搜索下的确有一个方案:Web Font Loader

    既然有这个库很好办,所以我们需要准备什么?

    打开FontMin工具,将汉字常用字体的内容复制进去,再将字体拖进去点击生成,大概一分钟后自动打开个文件夹,里面包含Web ont字体:

    QQ截图20180517224831.png

    石锤教材

    得到字体后下面基本简单了,简单的来说就是这样:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="hyxb.css" rel="stylesheet" type="text/css">
        <style type="text/css" rel="stylesheet">
            .aaa {
                font-family: "hyxb";/*hyxb是你的字体声明(一般是你命名的字体文件名)*/
            }
        </style>
    </head>
    <body>
    <div class="aaa">
        捌扒叭吧笆八疤巴拔跋靶
        把耙壩坝
        汹雄熊休修羞朽嗅銹锈秀袖繡
        绣墟戌需虛虚噓嘘須须徐許许蓄酗敘
        叙旭序畜恤絮婿緒绪續续軒轩喧
        宣懸悬旋玄選选癬癣眩絢绚靴薛
        學学穴雪血勳勋熏循旬詢询尋寻
        馴驯巡殉汛訓训訊讯遜逊迅壓压
        押鴉鸦鴨鸭呀丫芽牙蚜崖衙涯
        雅啞哑亞亚訝讶焉咽閹阉煙烟淹鹽
    </div>
    </body>
    </html>
    
    HTML

    根据上面得知引入生成的css文件,然后声明字体类型就行了。

    既然得到字体后,个人不建议放在小宽带的服务器里面,绝大部分提取的字体基本上兆,建议存放对象存储里,例如七牛云、又拍云等。

    你只需要把css(带xxxxx-embed的不需要上传)eotsvgttfwoff上传到对象存储中即可。

    那么在WordPress如何使用?

    根据webfontloader教程得知配置:

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.js"></script>
    <script type="text/javascript">
        WebFont.load({
            custom: {
                families: ['hyxb'],
                urls: ['//cdn.com/fonts/hyxb/hyxb.css'] //这里引入你上传到对象存储的css文件
            }
        });
    </script>
    
    JavaScript

    把上面的脚本放在footer.php</body>前面,注意,是前面,不是后面即可,放在页脚主要加速网页加载。

    然后在你的css文件(同样在wp设置-额外的css里填写内容也可以),添加代码:

    html.wf-active body {
        font-family: '你的字体声明(一般是你命名的字体文件名)', sans-serif;
    }
    
    CSS

    基本上字体美化就可以了,至于其他的需要你自己慢慢调整了。

    交流

    如果你使用有任何问题,请加群交流:

    添加QQ群

    当然了,群里有编译好的字体,拿来即用!

  • QQ邮箱阅读空间订阅本博客的教程

    QQ邮箱里有个阅读空间,我们可以订阅喜欢的栏目以阅读消遣。

    订阅本博客只需要在阅读空间板块点击右上角添加订阅,然后输入本博客的feed地址,即:

    https://blog.240996.xyz/feed

    完成后就可以在邮箱查看本博客的内容了。

    订阅空间栏目不会有邮件提醒,只在你需要阅读的时候点击更新就能查看最新文章了,方便快捷还不会打扰到工作中的你。

  • 本人对Siren主题的个人化改进记录

    2018.5.17

    inc/siren-update.php

    332,334

    bloginfo(‘url’)>>bloginfo(‘wpurl’)

    来源https://www.cnblogs.com/huntaheart/p/3968373.html

     

    2018.5.16

    layouts/sharelike.php

    23-28

    jiathis分享已经停止服务,主题原分享链接失效。去除QQ空间分享和豆瓣分享,替换为QQ分享和Twitter分享。

    来源于akina交流群。

    <li><a href="https://api.qrserver.com/v1/create-qr-code/?size=220x220&margin=13&data=<?php the_permalink(); ?>" onclick="window.open(this.href, 'renren-share', 'width=400,height=400');return false;" class="s-weixin"><img src="<?php bloginfo('template_url'); ?>/images/wechat.png"/></a></li>
    <li><a href="https://connect.qq.com/widget/shareqq/index.html?url=<?php the_permalink(); ?>&title=<?php the_title(''); ?>" onclick="window.open(this.href, 'weibo-share', 'width=730,height=500');return false;" class="s-qq"><img src="<?php bloginfo('template_url'); ?>/images/qq.png"/></a></li>
    <li><a href="http://service.weibo.com/share/share.php?url=<?php the_permalink(); ?>&title=<?php the_title(''); ?>" onclick="window.open(this.href, 'weibo-share', 'width=550,height=235');return false;" class="s-sina"><img src="<?php bloginfo('template_url'); ?>/images/sina.png"/></a></li>
    <li><a href="https://twitter.com/home?status=分享一篇文章给你们:<?php the_title(''); ?> <?php the_permalink(); ?>" onclick="window.open(this.href, 'renren-share', 'width=490,height=600');return false;" class="s-douban"><img src="<?php bloginfo('template_url'); ?>/images/twitter.png"/></a></li>

     

    2018.8.12

    style.css     single-reward

    赞赏弹出界面设置成上方。

     

     

    before

    。。。

     

  • 更改WordPress友情链接排序的方法

    最近两天加了几个友链。但是发现一个问题:友情链接系统默认是按照 名称(name) 来排序的。如何自定义友情链接排序。这是今天需要解决的问题。

    作为一个新手站长,WordPress菜鸟,首先我当然不会去WordPress官方查看文档。最有效的办法就是上谷歌百度一下。解决办法:

    一:通过修改代码来实现

    打开 wp-includes/bookmark-template.php 文件。搜索 “ wp_list_bookmarks ”,找到如下代码:

    <code>’orderby’ => ‘id’, ‘order’ => ‘ASC’,</code>

    注意 ‘orderby’ => ‘name’ 这部分就是系统的按照链接名字来排序的代码段。只需要修改这部分为对应的参数就可以了。比如,我想按照链接的id(添加的先后顺序),只需要把这部分修改为 ‘orderby’ => ‘id’ 就可以了。——没错,就是只替换 name 就可以了。已知的还可以替换成下面这些参数:
    ‘id’ – 链接的后台ID编号
    ‘url’ – 链接的URL地址
    ‘name’ – 链接的网站名称
    ‘target’ – 链接的打开方式
    ‘description’ – 链接的描述
    ‘owner’ – 链接的创建者
    ‘rating’ – 链接的分级(注意:评分低的在前)
    ‘updated’ – 链接的发布时间
    ‘rel’ – 链接与本站的关系 (XFN).
    ‘notes’ – 链接的备注
    ‘rss’ – 链接的feed地址
    ‘length’ – 链接的网站名称的字符串长度
    ‘rand’ – 随机排序替换完成后,只要保存就可以了。

    二:通过My Link Order插件来实现

    插件的使用比较简单。只需要安装就可以了。

     

    转载自:http://www.web92.net/356.html

     

  • 解决 wordpress 发布时间显示提前8小时的办法

    wp-includes\functions.php 查找以下代码:

    [code]

    function current_time( $type, $gmt = 0 ) {
    switch ( $type ) {
    case 'mysql':
    return ( $gmt ) ? gmdate( 'Y-m-d H:i:s' ) : gmdate( 'Y-m-d H:i:s', ( time() + ( get_option( 'gmt_offset' ) * HOUR_IN_SECONDS ) ) );
    case 'timestamp':
    return ( $gmt ) ? time() : time() + ( get_option( 'gmt_offset' ) * HOUR_IN_SECONDS );
    default:
    return ( $gmt ) ? date( $type ) : date( $type, time() + ( get_option( 'gmt_offset' ) * HOUR_IN_SECONDS ) );
    }
    }

    [/code]

    0改成8

     

     

     

  • [更新] WP Editor.MD:一个好用的Markdown WP插件

    简介

    WP Editor.MD是一个漂亮又实用的在线Markdown文档编辑器。
    基于Editor.md构建对WordPress平台的支持。
    使用WordPress Jetpack 的Markdown模块来解析和保存内容。

    Veriosn 5.0重构,更新日志请查看:日志说明

    安装使用

    插件下载地址:WordPress插件库

    最新版本以WordPress插件版本为主。

    上传到你的WordPress插件库启用即可使用!

    使用文档(5.0版本)

    Markdown基本语法:源码文件

    请将源码文件的内容复制到编辑器学习!,大概得学习下,免得有小问题。

    扩展语法说明

    代码块:

    本插件语法高亮引擎使用Prism.js

    “`语法类型
    代码展示内容
    “`

    支持语法类型列表请看:Prism.js支持语法高亮列表,请注意,语法类型统一小写

    科学公式:

    本插件公司渲染引擎使用KaTeX.

    官网语法文件:KaTeX语法文档

    使用说明(行内公式和多行公式):
    实例地址:公式实例

    如果编辑器公式渲染有问题,请及时反馈!建议Github issues反馈!

    其它说明

    有些同学比较好奇插件的工作原理,我随便写个流程如下:

    wpeditormd.png

    所以就算是卸载插件也没有什么影响。

    QA

    Q: 其次有些同学可能会出现一个情况:明明是Markdown写入的,怎么再次打开变成HTML文章了?
    A: 根据流程图得知md是存储在一个字段,如果是不存在可能使用优化(清理)数据库插件导致的。

  • WordPress Theme Siren

    文章转载自Louie·2016-10-30     19.78k 次阅读

    https://www.i94.me/26.html

     

    Siren 是基于 Akina 主题修改而来的,感谢Fuzzz写出这么棒的主题(查看原始主题)。
    应该属于Akina的娱乐版本吧,我也不知道为什么要改成这样,可能因为好看吧。

    新的版本:2.0.5
    更新摘要:
    # 2016-11-20
    ## 增加一种首页文章列表风格。
    ## 增加支持异步文章搜索。
    ## 增加首页大图自定义随机图片。
    ## 增加首页大图自定义滤镜效果。
    ## 增加评论提交验证(原来的机器评论拦截代码已删除,与Super Cache插件冲突)。
    ## 增加自定义评论UA信息显示。
    ## 增加自定义系统邮件前缀。
    ## 增加文章打赏。
    ## 更新字体图标库。
    ## 重构全局JS函数。
    ## 移除必应图片。
    ## 修复视频BUG。
    ## 去除冗余代码。
    ## 优化许多细节。
    ## 幻灯片 (效果不理想)。
    ## 重力感应视觉差 (效果不理想)。
    
    # 2016-11-13
    ## 增加私密评论。
    ## 增加随机缩略图。
    ## 增加公告滚动效果。
    ## 加速动画效果。
    ## 修复BUG。
    
    # 2016-11-11
    ## 增加用户菜单到导航栏(非用户中心)。
    ## 增加注册页身份验证。
    ## 增加推特,脸书,Google+到SNS信息。
    ## 优化设备自适应。
    ## 优化评论分页。
    ## 排除一些链接地址不使用Pjax加载。
    ## 调整底部信息容器不被Pjax加载。
    ## 更换页面过渡动画 & 删除加载条。
    ## 首先调用本地图片作为头像。
    ## 修改文章标题样式 & 其他细节样式。
    ## 修改移动端头部背景图比例。
    ## 修改主题颜色选择器。
    ## 修复分类页默认使用图片展示的问题,改为填写分类ID。
    ## 修复一个安全漏洞。
    
    # 2016-11-6
    ## 添加自定义样式。
    ## 修正某些CSS代码。
    ## 修复分类&标签默认图片无法显示缩略图的问题。
    ## 修改作者页样式。
    
    # 2016-10-31
    ## 修复评论回复重载页面问题。
    ## 修复后台黑屏无限加载问题。
    ## 修复第二个视频无法续播问题。
    
    # 2016-10-29
    ## 初始版本 2.0.0
    

    新增功能

    # Pjax(ajax)全站数据异步获取,支持大部分背景音乐插件不间断播放。
    # 首页随机背景图 + HTML5视频功能。
    # 支持文章,页面,归档,标签头部背景图。
    # 前台登陆与注册。
    # 更多炫酷功能。

    主题下载

    Download
    【注意】更新2.0.5版本后先保存一次主题设置,然后刷新或清除浏览器缓存。

    事项

    GIT下载文件夹默认带有master后缀,自行重命名为siren再上传。

    使用本主题过程中不提供小白解答服务,不提供个例问题解答服务(包括你自己修改后出现的BUG)。
    不接受任何修改要求,可以在评论区提建议,但不保证会采纳。

  • 你所不知道的 Console

    你所不知道的 Console

    1.凡人视角

    打印字符串

    代码:

    console.log("I am a 凡人");
    

    打印提示消息

    代码:

    console.info("Yes, you arm a 凡人");
    

    打印警告消息

    代码:

    console.warn("凡人你居然敢窥视我");
    

    打印错误消息

    代码:

    console.error("天兵天将,把这个凡人给我打入地狱");
    

    打印调试信息

    console.debug("我就是传说中的debug");
    

    2.上帝视角

    查看所有方法

    console 除了上面的几个方法还有什么方法呢?log 除了能打印字符串外,还能打印出对象,我们可以利用console.log 打印自己。

    代码:

    console.log(console);
    

    输出:

    Object {
        assert: ...,
        clear: ...,
        count: ...,
        debug: ...,
        dir: ...,
        dirxml: ...,
        error: ...,
        group: ...,
        groupCollapsed: ...,
        groupEnd: ...,
        info: ...,
        log: ...,
        markTimeline: ...,
        profile: ...,
        profileEnd: ...,
        table: ...,
        time: ...,
        timeEnd: ...,
        timeStamp: ...,
        timeline: ...,
        timelineEnd: ...,
        trace: ...,
        warn: ...
    }
    

    啊咧咧?怎么这么多方法。其实上面的 console 方法 不一定每个浏览器 都有实现,我这边使用的是 chrome浏览器 。所以说,这个特性是非标准的,请尽量不要在 生产环境 中使用它。

    但是我们可以在 开发环境 中,合理的利用 这些方法来帮助我们开发。

    清理控制台

    如果我们在控制台调试的时候,难免 强迫症 发作想清理掉已经乱七八糟的控制台。浏览器和命令行 clear 一样提供了一个清理函数 console.clear()

    console.clear()
    

    当然我们也可以用 chromecommand line api 来清理控制台。

    clear()
    

    又或者可以使用按键Mac上 cmd + k ,Win ctrl + l(我用的是chrome浏览器)。

    分组

    当代码非常长,或者我们需要把一个函数,或者一个文件中的函数等区分出来。我们可以使用分组来实现。

    代码:

    console.group('凡人');
    console.log("手");
    console.log("脚");
    console.groupEnd();
    
    console.group('神');
    console.log("法力无边");
    console.log("腾云架雾");
    console.groupEnd();
    

    输出:

    如果想要输出为折叠,我们可以使用 console.groupCollapsed ,用法和 console.group 类似。

    查看对象信息

    有时候我们需要打印出对象信息,可以使用 console.log 来进行简单的输出。

    代码:

    var person = {
        head: 1,
        hand: 2,
        leg: 2
    };
    console.log(person);
    

    呜呜,可是这个显示得好丑,我们这个时候就可以使用传说中的神器 console.table 来帮助我们清楚的显示 关联数组信息

    var data = [
        {
            '姓名': '幼儿园', 
            '性别': '女'
        },
        {
            '姓名': '李狗嗨',
            '数量': 1
        }
    ];
    console.table(data);
    

    输出:

    但是如果想要看详细的对象信息,我们可以使用 console.dir,将一个 JavaScript 对象的所有属性和属性值显示成一个可交互的列表,它还能打印出函数等。

    console.dir(clear);
    

    什么?你想看某个节点中的html代码?没事,我们可以用 console.dirxml 来查看页面中对应元素的 html/xml 内容。

    html代码:

    <div id='person'>
        <p>I am a 凡人</p>
    </div>
    

    javascirpt代码:

    var person = document.getElementById('person');
    console.dirxml(person);
    

    性能测试

    雷军粑粑老是喜欢说:“不服?跑个分。”有时候,我们也需要对代码跑个分。这个时候,我们可以使用console.timeconsole.timeEnd,他们可以记录代码运行所花费的时间。

    console.time("神机妙算");
    (function () {
        for(var i = 0; i < 10; i++) {
            var sum = (function () {
                var flog = 0;
                for(var i = 0; i < 10; i++) {
                    flog+=i;
                }
            })();
        }
    })();
    console.timeEnd("神机妙算");
    

    啊咧咧?你这个顶多就是 计时器 怎么能说是 性能测试 。客官别急,我们这还有一个叫做 console.profileconsole.profileEnd 姐妹呢~~

    console.profile("神机妙算");
    (function () {
        for(var i = 0; i < 10; i++) {
            var sum = (function () {
                var flog = 0;
                for(var i = 0; i < 10; i++) {
                    flog+=i;
                }
            })();
        }
    })();
    console.profileEnd("神机妙算");
    

    输出会显示在 profile

    什么还是不够?你还想知道运行时的结果栈?可以可以,我们这还有一位 console.trace 哦。他可以看透大爷你的一局一动哦。 代码:

    function add(num) {
        if (0 < num) {
            console.trace("现在num的值为", num);
            return num + add(num - 1);
        } else {
            return 0;
        }
    }
    
    var a =3;
    add(3);
    

    输出:

    判断真假

    平时我们在写代码是时候,经常需要判断一下当前值的真假情况,使用if或者三元表达式来达到目的。我们现在也可以使用 console.assert 来判断,该方法会在条件为错误时,返回一个 console.error 的输出。

    console.assert(1 == 1);
    console.assert(1 == 0);
    console.assert(!(1 == 0));
    

    统计次数

    有时候我们需要统计一个函数或者被调用了几次,我们通常会增加一个变量 count 来记录,然后在控制台中查看。这样相当的麻烦,我们可以使用 console.count 函数来帮忙我们记录次数,并输出。

    function hi(name) {
        console.count(name);
        return "hi " + name;
    }
    
    for(var i = 0; i < 10; i++) {
        if(i < 4) {
            hi("person");
        } else {
            hi("god");
        }
    }
    

    总结

    console 中有很多对我们调试代码有帮助的函数,我们可以在开发环境中配合 console 来调试代码,使得我们测试更加便利。

    文章最后编辑时间为: 2016/10/21 23:10

    本文由 淮城一只猫 创作,采用 知识共享署名 4.0国际许可协议进行许可

    可自由转载、引用,但需署名作者且注明文章出处