博客主页 🐟
公爵书房
:以指键之轻,承载知识之重

Blog:

公爵书房
 9月26日  本站新增表情包内容,让评论更加丰富  
 9月24日  本站已完成升级,目前除文章外的基础数据已迁移完成,文章后续会逐步同步 :@(aruA052)   
 9月19日  本站由 hexo主站 迁移到 typecho 主题为 MyDiary 主题,原站可通过 [本链...  
2022年9月30日
日记
晴 • 摸鱼 • 31℃
没有什么东西是永恒的,如果非要说有的话,大概就是“失去”本身吧。
马上放假了,无心上班,开始摸鱼了
Docker搭建MediaWiki
简介MediaWiki 是 Wikipedia 使用的网站解决方案的开源版,以个人观点来看,Wiki 在这个时代显得不够时尚,且不支持 MarkDown 等新兴的标记语言,另外页面的组织方式采用了自己的一套管理语言,上手需要一定的学习成本。不过经典总归是经典。MediaWiki 也提供了官方的 Docker image,这就节省了不少安装环境的工作量,接下来就来看看私有 MediaWiki 站点是如何搭建起来的吧。环境说明操作系统:Debian 10.2 64bit配置:1核2GDocker管理器:3.9.1PHP:7.4.30本文采用docker部署一套MediaWiki安装docker请查看 官网安装mysqlmkdir -p /data mkdir -p /data/mediawiki mkdir -p /data/mysql docker pull mysql:5.7 docker run -itd -p 3306:3306 --name wiki-mysql -e MYSQL_ROOT_PASSWORD=123456 --restart=always --restart=on-failure:1 --oom-score-adj -1000 --privileged=true --log-opt max-size=10m --log-opt max-file=1 -v /data/mysql:/var/lib/mysql mysql:5.7创建数据库以及用户,并开启远程连接权限# docker exec -it wiki-mysql /bin/bash root@4a6eaab770c5:/# mysql -p123456 mysql> create database my_wiki; Query OK, 1 row affected (0.00 sec) mysql> create user 'wikiuser'@'%' identified by '123456'; Query OK, 0 rows affected (0.00 sec) mysql> grant all privileges on my_wiki.* to 'wikiuser'@'%' with grant option; Query OK, 0 rows affected (0.01 sec) mysql> flush privileges; Query OK, 0 rows affected (0.00 sec) mysql> exit root@4a6eaab770c5:/# exit安装MediaWikiMediaWiki 需要依赖于 MySQL,所以要先启动 MySQL,再启动 MediaWiki,不然启动会失败。docker pull mediawiki:1.31.1 docker run -itd --name mywiki -p 8080:80 --privileged=true --restart=always --link wiki-mysql:mysql mediawiki:1.31.1初始化配置打开浏览器http://IP+端口/mediawiki/index.php开始初始化配置语言设置环境检查选择mysql,注意:修改ip地址为mysql的容器IP,使用 'docker inspect [容器id或名称]' 进行查看容器IP。数据库用户:wikiuser,密码:123456选择数据库引擎为InnoDB,新版本可不用选择设置全局名称和添加管理员密码:必须8位以上,且符合复杂性要求正式安装安装完成注意:页面会自动下载一个 LocalSettings.php注意:先不要点击 进入您的wiki,还查一个步骤,否则会出错的。登录到服务器,将 LocalSettings.php 上传到服务器,比如:/tmp目录将 LocalSettings.php 复制到容器中的wiki根目录docker cp LocalSettings.php mywiki:/var/www/html/点击 上图中的 进入您的wiki它会调转链接http://IP:端口/index.php/首页效果如下:网页持久化配置目前的php代码在容器里面,一旦重启,数据就丢失了。复制网页目录docker cp mywiki:/var/www/html /data/mediawiki/杀掉docker,以新的方式启动。docker rm -f mywiki docker run -itd --name mywiki -p 8080:80 -v /data/mediawiki/html:/var/www/html --privileged=true --restart=always --link wiki-mysql:mysql mediawiki:1.31.1再次刷新页面,效果同上!
使用umami搭建免费的个人博客数据统计系统
Umami 是一个简单、易于使用、自托管的网络分析解决方案。目标是为您提供一个更友好、注重隐私的 Google Analytics 替代方案,以及一个免费、开源的付费解决方案替代方案。Umami 只收集您关心的指标,所有内容都放在一个页面上。官网推荐的安装方式有两种,第一种是源码运行在本机环境的,第二种是使用docker进行运行。这里我使用的是第一种方法运行要求官网要求: Node.js >= 12 MySQL或Postgresql数据库 站长安装使用环境: 操作系统:Debian 10.2 64bit 宝塔:7.9.2 Node.js版本:v16.15.1 数据库:Mysql关于node.js和数据库的安装我这里就不赘述了,都很简单,在此默认都是安装好的情况下来安装umami安装git clone https://github.com/mikecao/umami.git cd umami yarn install配置创建 .env 文件,填入以下内容:DATABASE_URL=(connection url)其中 (connection url) 的链接格式如下(填入记得去掉括号,我就在这里踩了坑):postgresql://username:mypassword@localhost:5432/mydb mysql://username:mypassword@localhost:3306/mydbusername 为数据库用户名mypassword 为数据库密码localhost:3306 为数据库链接地址加端口mydb 为数据库名称构建应用程序yarn build创建数据库表yarn update-db执行完语句,你会发现在数据库里多了几张表,并且创建一个登录帐户(用户名/密码:admin/umami)启动程序yarn start默认情况下,端口为3000,可以使用http://localhost:3000进行访问使用默认账号密码登录后,界面如下点击头像旁边的按钮设置中文语言最后在使用反代即可通过域名访问umami了,到这里便完成了安装
Joe 主题美化记录
头像呼吸灯在主题后台全局css里添加 .avatar { border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .avatar:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;} }调整内容宽度把1360px更换成你想要的宽度即可#Joe .joe_container{ max-width: 1360px; }自定义鼠标右键在主题后台自定义JS(body)里添加<!-- 调用js --> <script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script> <!-- 自定义右键菜单美化 --> <style type="text/css"> a {text-decoration: none;} div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba (0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;} div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block} div.usercm ul li{margin:0px;padding:0px;line-height:35px;} div.usercm ul li a{color:#666;padding:0 15px;display:block} div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)} div.usercm ul li a i{margin-right:10px} a.disabled{color:#c8c8c8!important;cursor:not-allowed} a.disabled:hover{background-color:rgba(255,11,11,0)!important} div.usercm{background:#fff !important;} </style> <div class="usercm" style="left: 199px; top: 5px; display: none;"> <ul> <li><a href="https://blog.gjcloak.top/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li> <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li> <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li> <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li> <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li> <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li> <li><a href="https://blog.gjcloak.top/links"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li> <li><a href="https://blog.gjcloak.top/messagecenter"><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span></a></li> </ul> </div> <script type="text/javascript"> (function(a) { a.extend({ mouseMoveShow: function(b) { var d = 0, c = 0, h = 0, k = 0, e = 0, f = 0; a(window).mousemove(function(g) { d = a(window).width(); c = a(window).height(); h = g.clientX; k = g.clientY; e = g.pageX; f = g.pageY; h + a(b).width() >= d && (e = e - a(b).width() - 5); k + a(b).height() >= c && (f = f - a(b).height() - 5); a("html").on({ contextmenu: function(c) { 3 == c.which && a(b).css({ left: e, top: f }).show() }, click: function() { a(b).hide() } }) }) }, disabledContextMenu: function() { window.oncontextmenu = function() { return !1 } } }) })(jQuery); function getSelect() { "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢!") : document.execCommand("Copy") }; function baiduSearch() { var a = window.getSelection ? window.getSelection() : document.selection.createRange().text; "" == a ? layer.msg("啊噢...你没还没选择文字呢!") : window.open("https://www.baidu.com/s?wd=" + a) }; $(function() { for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) { d = !1; break } d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu()) }); </script>网站底部样式具体效果请看本站网站底部在头部文件加上两个链接<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cy-j/chenyu@1.6.0/css/cydibu.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cy-j/chenyu/css/bootstrap-grid.min.css">footer页面放入以下代码<!-- 好久不见 --> <div class="chenyuyc"> <div class="footer-fav"> <div class="container"> <div class="fl site-info"> <h2><a href="https://www.gjcloak.top/" target="_blank">公爵书房</a></h2> <div class="site-p"> <p>公爵【她只是途经我留下了星火 而我却任凭它焚烧了我整个荒原】</p> </div> </div> <div class="fr site-fav"> <a href="https://www.gjcloak.top/" class="btn btn-fav btn-orange">Ctrl+D收藏本站</a></div> <div class="site-girl"> <div class="girl fl"> <i class="thumb " style="background-image:url(https://cdn.jsdelivr.net/gh/cy-j/chenyu/img/cyxy.png);"></i> </div> <div class="girl-info hide_md"> <h4>绿水本无忧,因风皱面</h4> <h4>青山原不老,为雪白头</h4> </div> </div> </div> </div> </div> 刚放入上面代码还是不够的,我的目标是用这个代替原先的页脚信息,因此需要把原来页脚的部分代码加入到<div class="site-p"></div>最终效果<#if settings.enable_footer!true> <footer class="joe_footer${(settings.footer_position=='fixed')?then(' fixed','')}${settings.enable_full_footer?then(' full','')}"> <#if settings.footer_source=='both' || settings.footer_source=='theme'> <!-- 好久不见 --> <div class="chenyuyc"> <div class="footer-fav"> <div class="container"> <div class="fl site-info"> <h2><a href="https://www.gjcloak.top/" target="_blank">公爵书房</a></h2> <div class="site-p"> <p>公爵【她只是途经我留下了星火 而我却任凭它焚烧了我整个荒原】</p> <#if settings.enable_birthday!false> <p> ${.now?string("yyyy")} © <a href="${blog_url!}" target="_blank" rel="noopener noreferrer">${user.nickname!}</a> <#if settings.enable_icp && settings.icp?? && settings.icp?trim!=''> - <a class="icp" href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer nofollow">${settings.icp}</a></#if> </p> <#if settings.enable_police && settings.police?? && settings.police?trim!=''> <#assign recordcode=settings.police?replace('[^\\d]','','ri')> <p class="site_police"> <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${recordcode}" target="_blank" rel="noopener noreferrer nofollow">${settings.police}</a> </p> <#if settings.enable_powerby!true><p class="site_powered">Powered by <a class="a-powered" href="https://halo.run/" target="_blank" rel="noopener noreferrer">Halo</a>&nbsp;|&nbsp;? Theme by <a class="a-theme" title="当前主题:Joe2.0 V${theme.version!}" href="${theme.repo!}" target="_blank" rel="noopener noreferrer">M酷</a></p></#if> </#if> <div class="site_life"> <i class="joe-font joe-icon-jiasu"></i>已运行&nbsp;<strong class="joe_run__day">00</strong> 天 <strong class="joe_run__hour">00</strong> 时 <strong class="joe_run__minute">00</strong> 分 <strong class="joe_run__second">00</strong> 秒 </div> </#if> </div> </div> <div class="fr site-fav"> <a href="https://www.gjcloak.top/" class="btn btn-fav btn-orange">Ctrl+D收藏本站</a></div> <div class="site-girl"> <div class="girl fl"> <i class="thumb " style="background-image:url(https://cdn.jsdelivr.net/gh/cy-j/chenyu/img/cyxy.png);"></i> </div> <div class="girl-info hide_md"> <h4>绿水本无忧,因风皱面</h4> <h4>青山原不老,为雪白头</h4> </div> </div> </div> </div> </div> <!--<div class="joe_container${(settings.enable_rss==false && settings.enable_sitemap==false)?then(' central','')}"> <div class="item"> <#if settings.driven_by?? && settings.driven_by!='none'> <#assign driven_logo=BASE_RES_URL + '/source/img/cloud/' + settings.driven_by + '.svg'> <#switch settings.driven_by> <#case 'aliyun'> <#assign driven_url='https://www.aliyun.com'> <#break> <#case 'tencent'> <#assign driven_url='https://cloud.tencent.com'> <#break> <#case 'baidu'> <#assign driven_url='https://cloud.baidu.com'> <#break> <#case 'upyun'> <#assign driven_url='https://www.upyun.com'> <#break> <#case 'qiniu'> <#assign driven_url='https://www.qiniu.com'> <#break> <#case 'huawei'> <#assign driven_url='https://www.huaweicloud.com'> <#break> <#case 'jinshan'> <#assign driven_url='https://www.ksyun.com'> <#break> <#case 'custom'> <#assign c_cloud=settings.custome_cloud?split('\n')> <#assign driven_logo=(c_cloud[0]?? && c_cloud[0]?trim!='')?then(c_cloud[0]?trim,'')> <#assign driven_url=(c_cloud[1]?? && c_cloud[1]?trim!='')?then(c_cloud[1]?trim,'')> <#break> <#default> <#assign driven_url=''> </#switch> <#assign clickable = driven_url != '' && driven_url != '#'> <p class="site_driven">本站点由 <a href="${clickable?then(driven_url,'javascript:;')}" ${clickable?then('target="_blank"','')} rel="noopener noreferrer nofollow"> <img class="${settings.driven_by}" src="${driven_logo}" onerror="Joe.errorImg(this)" alt="云服务商"/> </a>提供云服务 </p> </#if> </div> <div class="side-col"> <#if settings.enable_rss==true || settings.enable_sitemap==true> <div class="item"> <#if settings.enable_rss><a class="rss" href="${rss_url!}" target="_blank" rel="noopener noreferrer"><i class="joe-font joe-icon-rss-fill"></i>&nbsp;RSS</a></#if> <#if settings.enable_sitemap><a href="${sitemap_xml_url!}" target="_blank" rel="noopener noreferrer">站点地图</a></#if> </div> </#if> <#if settings.enable_busuanzi!false> <div class="item busuanzi-statistic"> <span class="site-pv"><i class="joe-font joe-icon-zhexiantu"></i>访问量<em id="busuanzi_value_site_pv">0</em></span> <span class="site-uv"><i class="joe-font joe-icon-monitor"></i>访客量<em id="busuanzi_value_site_uv">0</em></span> <span class="site-page-pv"><i class="joe-font joe-icon-dianji"></i>本页访客<em id="busuanzi_value_page_pv">0</em></span> </div> </#if> </div> </div> </#if> <#if settings.footer_source=='both' || settings.footer_source=='backend'> <@global.footer /> </#if>--> </footer> </#if>添加全屏头图显示创建HTML文件内容如下:<!doctype html> <html> <section class="bg-hero py-md-0" style="background-image: url(https://cos.gjcloak.xyz/yun/%E5%9B%BE%E7%89%87/6171_2131898046.jpg?imageMogr2/format/webp/interlace/1/quality/80)"> <div class="container"> <div class="row vh-md-100"> <div class="col-md-8 mx-auto my-auto text-white text-center"> <p class="lead mb-2 font-weight-bold"><br></p> <h1 class="my-4"><big>Hi, I'm Cloak.</big></h1> <p class="lead mb-5 font-weight-bold"> <span class="typist">公 爵 书 房</span> </p> </div> </div> </div> </section> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </html>使用字体(可选)<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico|Inconsolata:400,700">添加CSS在前面创建的HTML文件里加入一下CSS代码:.bg-hero { background-color: #3d5afe; background-size: cover; background-position: center center; position: relative; } .bg-hero:before { position: absolute; z-index: 1; width: 100%; height: 100%; display: block; left: 0; top: 0; content: ""; background-color: rgba(0, 0, 0, 0.3); } .bg-hero .container { z-index: 2; position: relative; } .bg-hero .container h1 { font-family: Pacifico; font-weight: normal; color: #ffffff; } .py-md-0 { padding-top: 0 !important; } .py-md-0 { padding-bottom: 0 !important; } .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } .container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .navbar > .container, .navbar > .container-fluid { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 575.99px) { .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 576px) { .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }} @media (max-width: 767.99px) { .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 768px) { .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }} @media (max-width: 991.99px) { .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 992px) { .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }} @media (max-width: 1199.99px) { .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 1200px) { .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .navbar-expand > .container, .navbar-expand > .container-fluid { padding-right: 0; padding-left: 0; } .navbar-expand > .container, .navbar-expand > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } @media (min-width: 768px) { .vh-md-100 { height: 100vh; } } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; } @media (min-width: 768px) { .col-md { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-md-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } .col-md-8 { -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667%; }} .mx-auto { margin-left: auto !important; margin-right: auto !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .text-white { color: #fff !important; } .text-center { text-align: center !important; } .img-fluid { max-width: 100%; height: auto; } .rounded-circle { border-radius: 50% !important; } .img-profile { max-width: 175px; } .lead { font-size: 1.2rem; font-weight: 400; } .mb-5, .my-5 { margin-bottom: 1.5rem !important; } .mb-6, .my-6 { margin-bottom: 1.8rem !important; } .font-weight-bold { font-weight: 700 !important; } @keyframes blink { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @-webkit-keyframes blink { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } .typist .selectedText { display: none; } .typist:after { position: relative; top: 7px; display: inline-block; height: 30px; margin-left: 5px; content: " "; -webkit-animation: blink .5s step-end infinite alternate; animation: blink .5s step-end infinite alternate; border-right: 2px solid; }主题使用在主题的index.php文件中,查找到<?php $this->need('public/header.php'); ?>这串代码,在下方引入下面代码(当然具体位置可以根据需要自动调整)<?php include ("public/[file name].html"); ?>[file name] 是前面创建的html文件名称最后,这样就完成了全屏头图显示。
使用umami搭建免费的个人博客数据统计系统
Umami 是一个简单、易于使用、自托管的网络分析解决方案。目标是为您提供一个更友好、注重隐私的 Google Analytics 替代方案,以及一个免费、开源的付费解决方案替代方案。Umami 只收集您关心的指标,所有内容都放在一个页面上。官网推荐的安装方式有两种,第一种是源码运行在本机环境的,第二种是使用docker进行运行。这里我使用的是第一种方法运行要求官网要求: Node.js >= 12 MySQL或Postgresql数据库 站长安装使用环境: 操作系统:Debian 10.2 64bit 宝塔:7.9.2 Node.js版本:v16.15.1 数据库:Mysql关于node.js和数据库的安装我这里就不赘述了,都很简单,在此默认都是安装好的情况下来安装umami安装git clone https://github.com/mikecao/umami.git cd umami yarn install配置创建 .env 文件,填入以下内容:DATABASE_URL=(connection url)其中 (connection url) 的链接格式如下(填入记得去掉括号,我就在这里踩了坑):postgresql://username:mypassword@localhost:5432/mydb mysql://username:mypassword@localhost:3306/mydbusername 为数据库用户名mypassword 为数据库密码localhost:3306 为数据库链接地址加端口mydb 为数据库名称构建应用程序yarn build创建数据库表yarn update-db执行完语句,你会发现在数据库里多了几张表,并且创建一个登录帐户(用户名/密码:admin/umami)启动程序yarn start默认情况下,端口为3000,可以使用http://localhost:3000进行访问使用默认账号密码登录后,界面如下点击头像旁边的按钮设置中文语言最后在使用反代即可通过域名访问umami了,到这里便完成了安装
Joe 主题美化记录
头像呼吸灯在主题后台全局css里添加 .avatar { border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .avatar:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;} }调整内容宽度把1360px更换成你想要的宽度即可#Joe .joe_container{ max-width: 1360px; }自定义鼠标右键在主题后台自定义JS(body)里添加<!-- 调用js --> <script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script> <!-- 自定义右键菜单美化 --> <style type="text/css"> a {text-decoration: none;} div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba (0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;} div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block} div.usercm ul li{margin:0px;padding:0px;line-height:35px;} div.usercm ul li a{color:#666;padding:0 15px;display:block} div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)} div.usercm ul li a i{margin-right:10px} a.disabled{color:#c8c8c8!important;cursor:not-allowed} a.disabled:hover{background-color:rgba(255,11,11,0)!important} div.usercm{background:#fff !important;} </style> <div class="usercm" style="left: 199px; top: 5px; display: none;"> <ul> <li><a href="https://blog.gjcloak.top/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li> <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li> <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li> <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li> <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li> <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li> <li><a href="https://blog.gjcloak.top/links"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li> <li><a href="https://blog.gjcloak.top/messagecenter"><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span></a></li> </ul> </div> <script type="text/javascript"> (function(a) { a.extend({ mouseMoveShow: function(b) { var d = 0, c = 0, h = 0, k = 0, e = 0, f = 0; a(window).mousemove(function(g) { d = a(window).width(); c = a(window).height(); h = g.clientX; k = g.clientY; e = g.pageX; f = g.pageY; h + a(b).width() >= d && (e = e - a(b).width() - 5); k + a(b).height() >= c && (f = f - a(b).height() - 5); a("html").on({ contextmenu: function(c) { 3 == c.which && a(b).css({ left: e, top: f }).show() }, click: function() { a(b).hide() } }) }) }, disabledContextMenu: function() { window.oncontextmenu = function() { return !1 } } }) })(jQuery); function getSelect() { "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢!") : document.execCommand("Copy") }; function baiduSearch() { var a = window.getSelection ? window.getSelection() : document.selection.createRange().text; "" == a ? layer.msg("啊噢...你没还没选择文字呢!") : window.open("https://www.baidu.com/s?wd=" + a) }; $(function() { for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) { d = !1; break } d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu()) }); </script>网站底部样式具体效果请看本站网站底部在头部文件加上两个链接<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cy-j/chenyu@1.6.0/css/cydibu.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cy-j/chenyu/css/bootstrap-grid.min.css">footer页面放入以下代码<!-- 好久不见 --> <div class="chenyuyc"> <div class="footer-fav"> <div class="container"> <div class="fl site-info"> <h2><a href="https://www.gjcloak.top/" target="_blank">公爵书房</a></h2> <div class="site-p"> <p>公爵【她只是途经我留下了星火 而我却任凭它焚烧了我整个荒原】</p> </div> </div> <div class="fr site-fav"> <a href="https://www.gjcloak.top/" class="btn btn-fav btn-orange">Ctrl+D收藏本站</a></div> <div class="site-girl"> <div class="girl fl"> <i class="thumb " style="background-image:url(https://cdn.jsdelivr.net/gh/cy-j/chenyu/img/cyxy.png);"></i> </div> <div class="girl-info hide_md"> <h4>绿水本无忧,因风皱面</h4> <h4>青山原不老,为雪白头</h4> </div> </div> </div> </div> </div> 刚放入上面代码还是不够的,我的目标是用这个代替原先的页脚信息,因此需要把原来页脚的部分代码加入到<div class="site-p"></div>最终效果<#if settings.enable_footer!true> <footer class="joe_footer${(settings.footer_position=='fixed')?then(' fixed','')}${settings.enable_full_footer?then(' full','')}"> <#if settings.footer_source=='both' || settings.footer_source=='theme'> <!-- 好久不见 --> <div class="chenyuyc"> <div class="footer-fav"> <div class="container"> <div class="fl site-info"> <h2><a href="https://www.gjcloak.top/" target="_blank">公爵书房</a></h2> <div class="site-p"> <p>公爵【她只是途经我留下了星火 而我却任凭它焚烧了我整个荒原】</p> <#if settings.enable_birthday!false> <p> ${.now?string("yyyy")} © <a href="${blog_url!}" target="_blank" rel="noopener noreferrer">${user.nickname!}</a> <#if settings.enable_icp && settings.icp?? && settings.icp?trim!=''> - <a class="icp" href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer nofollow">${settings.icp}</a></#if> </p> <#if settings.enable_police && settings.police?? && settings.police?trim!=''> <#assign recordcode=settings.police?replace('[^\\d]','','ri')> <p class="site_police"> <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${recordcode}" target="_blank" rel="noopener noreferrer nofollow">${settings.police}</a> </p> <#if settings.enable_powerby!true><p class="site_powered">Powered by <a class="a-powered" href="https://halo.run/" target="_blank" rel="noopener noreferrer">Halo</a>&nbsp;|&nbsp;? Theme by <a class="a-theme" title="当前主题:Joe2.0 V${theme.version!}" href="${theme.repo!}" target="_blank" rel="noopener noreferrer">M酷</a></p></#if> </#if> <div class="site_life"> <i class="joe-font joe-icon-jiasu"></i>已运行&nbsp;<strong class="joe_run__day">00</strong> 天 <strong class="joe_run__hour">00</strong> 时 <strong class="joe_run__minute">00</strong> 分 <strong class="joe_run__second">00</strong> 秒 </div> </#if> </div> </div> <div class="fr site-fav"> <a href="https://www.gjcloak.top/" class="btn btn-fav btn-orange">Ctrl+D收藏本站</a></div> <div class="site-girl"> <div class="girl fl"> <i class="thumb " style="background-image:url(https://cdn.jsdelivr.net/gh/cy-j/chenyu/img/cyxy.png);"></i> </div> <div class="girl-info hide_md"> <h4>绿水本无忧,因风皱面</h4> <h4>青山原不老,为雪白头</h4> </div> </div> </div> </div> </div> <!--<div class="joe_container${(settings.enable_rss==false && settings.enable_sitemap==false)?then(' central','')}"> <div class="item"> <#if settings.driven_by?? && settings.driven_by!='none'> <#assign driven_logo=BASE_RES_URL + '/source/img/cloud/' + settings.driven_by + '.svg'> <#switch settings.driven_by> <#case 'aliyun'> <#assign driven_url='https://www.aliyun.com'> <#break> <#case 'tencent'> <#assign driven_url='https://cloud.tencent.com'> <#break> <#case 'baidu'> <#assign driven_url='https://cloud.baidu.com'> <#break> <#case 'upyun'> <#assign driven_url='https://www.upyun.com'> <#break> <#case 'qiniu'> <#assign driven_url='https://www.qiniu.com'> <#break> <#case 'huawei'> <#assign driven_url='https://www.huaweicloud.com'> <#break> <#case 'jinshan'> <#assign driven_url='https://www.ksyun.com'> <#break> <#case 'custom'> <#assign c_cloud=settings.custome_cloud?split('\n')> <#assign driven_logo=(c_cloud[0]?? && c_cloud[0]?trim!='')?then(c_cloud[0]?trim,'')> <#assign driven_url=(c_cloud[1]?? && c_cloud[1]?trim!='')?then(c_cloud[1]?trim,'')> <#break> <#default> <#assign driven_url=''> </#switch> <#assign clickable = driven_url != '' && driven_url != '#'> <p class="site_driven">本站点由 <a href="${clickable?then(driven_url,'javascript:;')}" ${clickable?then('target="_blank"','')} rel="noopener noreferrer nofollow"> <img class="${settings.driven_by}" src="${driven_logo}" onerror="Joe.errorImg(this)" alt="云服务商"/> </a>提供云服务 </p> </#if> </div> <div class="side-col"> <#if settings.enable_rss==true || settings.enable_sitemap==true> <div class="item"> <#if settings.enable_rss><a class="rss" href="${rss_url!}" target="_blank" rel="noopener noreferrer"><i class="joe-font joe-icon-rss-fill"></i>&nbsp;RSS</a></#if> <#if settings.enable_sitemap><a href="${sitemap_xml_url!}" target="_blank" rel="noopener noreferrer">站点地图</a></#if> </div> </#if> <#if settings.enable_busuanzi!false> <div class="item busuanzi-statistic"> <span class="site-pv"><i class="joe-font joe-icon-zhexiantu"></i>访问量<em id="busuanzi_value_site_pv">0</em></span> <span class="site-uv"><i class="joe-font joe-icon-monitor"></i>访客量<em id="busuanzi_value_site_uv">0</em></span> <span class="site-page-pv"><i class="joe-font joe-icon-dianji"></i>本页访客<em id="busuanzi_value_page_pv">0</em></span> </div> </#if> </div> </div> </#if> <#if settings.footer_source=='both' || settings.footer_source=='backend'> <@global.footer /> </#if>--> </footer> </#if>添加全屏头图显示创建HTML文件内容如下:<!doctype html> <html> <section class="bg-hero py-md-0" style="background-image: url(https://cos.gjcloak.xyz/yun/%E5%9B%BE%E7%89%87/6171_2131898046.jpg?imageMogr2/format/webp/interlace/1/quality/80)"> <div class="container"> <div class="row vh-md-100"> <div class="col-md-8 mx-auto my-auto text-white text-center"> <p class="lead mb-2 font-weight-bold"><br></p> <h1 class="my-4"><big>Hi, I'm Cloak.</big></h1> <p class="lead mb-5 font-weight-bold"> <span class="typist">公 爵 书 房</span> </p> </div> </div> </div> </section> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </html>使用字体(可选)<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico|Inconsolata:400,700">添加CSS在前面创建的HTML文件里加入一下CSS代码:.bg-hero { background-color: #3d5afe; background-size: cover; background-position: center center; position: relative; } .bg-hero:before { position: absolute; z-index: 1; width: 100%; height: 100%; display: block; left: 0; top: 0; content: ""; background-color: rgba(0, 0, 0, 0.3); } .bg-hero .container { z-index: 2; position: relative; } .bg-hero .container h1 { font-family: Pacifico; font-weight: normal; color: #ffffff; } .py-md-0 { padding-top: 0 !important; } .py-md-0 { padding-bottom: 0 !important; } .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } .container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .navbar > .container, .navbar > .container-fluid { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 575.99px) { .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 576px) { .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }} @media (max-width: 767.99px) { .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 768px) { .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }} @media (max-width: 991.99px) { .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 992px) { .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }} @media (max-width: 1199.99px) { .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 1200px) { .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .navbar-expand > .container, .navbar-expand > .container-fluid { padding-right: 0; padding-left: 0; } .navbar-expand > .container, .navbar-expand > .container-fluid { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } @media (min-width: 768px) { .vh-md-100 { height: 100vh; } } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; } @media (min-width: 768px) { .col-md { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-md-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } .col-md-8 { -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667%; }} .mx-auto { margin-left: auto !important; margin-right: auto !important; } .my-auto { margin-top: auto !important; margin-bottom: auto !important; } .text-white { color: #fff !important; } .text-center { text-align: center !important; } .img-fluid { max-width: 100%; height: auto; } .rounded-circle { border-radius: 50% !important; } .img-profile { max-width: 175px; } .lead { font-size: 1.2rem; font-weight: 400; } .mb-5, .my-5 { margin-bottom: 1.5rem !important; } .mb-6, .my-6 { margin-bottom: 1.8rem !important; } .font-weight-bold { font-weight: 700 !important; } @keyframes blink { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @-webkit-keyframes blink { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } .typist .selectedText { display: none; } .typist:after { position: relative; top: 7px; display: inline-block; height: 30px; margin-left: 5px; content: " "; -webkit-animation: blink .5s step-end infinite alternate; animation: blink .5s step-end infinite alternate; border-right: 2px solid; }主题使用在主题的index.php文件中,查找到<?php $this->need('public/header.php'); ?>这串代码,在下方引入下面代码(当然具体位置可以根据需要自动调整)<?php include ("public/[file name].html"); ?>[file name] 是前面创建的html文件名称最后,这样就完成了全屏头图显示。
为什么说VIC3是神?
需要资源的可以自行通过 这里 进行下载游玩体验为什么说VIC3是神?在谈论这个问题之前,我们先看一看其他P社和4x游戏相比于VIC3差在了哪里。首先是犯下傲慢之罪的EU4创造出一个点数系统Jonan就露出不屑的笑,这种游戏注定走不长远,事实也是如此。靠着许多阴险的dlc赢了vic2之后就一直在走下坡路。VIC3并不是不会点数系统,只是不想用太简单的机制让萌新上手,可笑某些人不理解神的良苦用心,还用这些事情来讥讽神,我劝你们好自为之。然后是犯下愤怒之罪的HOI4屡次被神用更完美的模拟所击败,但口服心不服的HOI4,暗中嫉妒着神,甚至用国策瞎几把写来试图超过神。于是,什么狗屁国家的国策都能给全世界的核心,中国的西藏却不给核心,在政治正确的“蒸汽平台”上,HOI4被正义的锁住!接着是犯下懒惰之罪的CK3自以为漂亮的地图和3d的人物建模就了不起,自创摸鱼更新法,让玩家买一份皇家版就可以3年都不用再买。另外大家有所不知,其实在CK3发售以前,在宣传词中幻想的内容,正是站在光芒中的VIC3,那时神告诉它,你只可以更新这么快,不可越过。然而,CK竟然想和神争抢P社游戏之王的位置,于是神降下了他的惩罚,CK3将失去自己的姓名“deus vult”犯下贪婪之罪的stellaris只是初出茅庐的太空4x,stellaris就获得了各项榜单的冠军,这一切自然是因为神的应允。神本来钦定stellaris为自己在太空的代言人,在太空继续奴隶制、拜占庭官僚和复兴罗马的重任,为此不惜将完美的POP系统也允许stellaris所使用。但最后stellaris被利益蒙蔽了双眼,不在践行完善POP系统的重任,竟然搞出人口全局增长限制的sb设定,于是神降下了惩罚。stellaris新dlc全部多半差评,设计师的设定被开局机制轻松绕过。犯下暴死(暴食)之罪的IR相较于神,IR自然是不完美的。所以IR凉了犯下暴怒之罪的都市天际线为了更好地向pop传递神的福音,神选中了天际线作为自己在省份格内的使者,为自己建设完美的巴别塔。然而,天际线玩家不能领会神的旨意,不能与神的羔羊搞好关系,总是怒气冲冲地指责羔羊们不遵守交规,从而被神所放逐出4萌的队伍!最后,犯下淫欲之罪的文明63.04补丁发行之后,神已经非常虚弱了,邪神“席德梅尔”吸走了神的玩家数此时,只有神子们在维护神的尊严。作为神的异端继任者,文明很好的捍卫了4x游戏的尊严。但是玩家们毫不专一,日常讨论波兰、埃及、斯基太、努比亚、印尼、朝鲜的领袖谁好看,最终身败名裂!
禁止右键及F12等事件
在主题配置的 inject 的 head 里引入这个 css<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/css/function.min.css">复制下面这段 js , 执行 forbidden_control() 执行即可看到效果 - 隐藏内容 -
提高学习效率的策略
推荐一本关于学习方法的书《认知天性》,里面有讲到有一些简单实用的学习策略,能让大家学的更好、记得更牢,而且这些策略人人可用,时时可用。这些方法包括各种形式的检索练习——例如小的测试和自测,间隔练习、穿插不同但相关科目或技能的练习(多样化练习),在别人教给你解决方案前自己先试着解决问题,从不同类型问题中提取基本原理和规则。由于学习是反复的过程,需要复习早先学过的东西,持续更新已知,并把它们和新知识联系起来。检索式学习练习从记忆中检索新知识或新技能是有效的学习工具,也是保持长久记忆的有力武器。但凡需要大脑记忆、需要在将来回忆的东西,都可以用到它——对于事实、复杂的概念、解决问题的技巧、运动技能来说都适用。那么到底什么是检索式学习呢?说说我理解的检索式学习:在脑中检索知识,比如课后的一个小测试、对某个知识点用笔默写出来,甚至去参加面试,等等,都可以理解为检索式学习。努力检索有助于人们获得更好的学习效果,产生更持久的记忆。我们很容易相信,学东西时越轻松,学习效果越好,但研究表明,事实恰恰相反。只有当头脑被迫工作时,才会将所学的东西记得更牢靠。在检索时所付出的努力越大——只要真正做到这一点检索就会更好地强化你的所学。在第一次检测后,推迟后续检索练习要比立即练习更能强化记忆,因为延迟后再检索需要会费更大力气。反复检索不仅能让记忆更持久,还能让知识在更多变的环境中更容易被检索,而且可以解决更多的问题。频繁的集中练习只会产生短期记忆人们顽固地相信,自己把心思放在一件事上,拼命重复就能学得更好,认为这些观点经受住了时间的考验,而且“练习,练习,再练习”的明显收效再次证明了这种方法的好处。但是,科学家们把习得技能阶段的这种成绩称为“暂时的优势”,并把它同“潜在的习惯优势”区分开来。形成习惯优势有种种技巧,例如有间隔的练习、有穿插内容的练习,以及多样化练习,这些技巧恰恰会放缓有明显成果的学习进程,它们不会在练习中提高我们的表现。我们从表面上看不到成绩提高,也就没有付出努力的动力(大多数人的学习心理就是这样,在看不到成果的时候容易失去动力)。填鸭式练习是集中练习的一种形式,它一直被比作贪食症——吃得不少,但没过多久基本上都吐出来了。间隔练习使知识存储更牢固把学习与练习间隔开来分期进行,让两者之间隔上一定时间,这样做就能让学习成果更加显著、记忆更加牢固,能有效地形成习惯优势。间隔多长时间才够?答案很简单:从最低限度上说,间隔的时间足够出现一点儿遗忘就对了。练习环节中间出现一点儿遗忘是好事,只要它能让人更加努力地练习就行。话说回来,你肯定不愿意忘掉太多东西,以至于检索最终变成了对资料的重新学习。间隔一段时间再练习能巩固记忆。睡眠似乎在巩固记忆的工作中扮演了重要角色,所以在两次练习间至少间隔一天应该是不错的做法。要当心熟悉这个陷阱:你感觉自己明白了某样东西,觉得不再需要练习了。如果想走捷径,这种熟悉会让你在自测时受伤。道格拉斯·拉尔森说:“你必须自觉地说,好吧,我要强迫自己把这些全想起来,要是我想不起来,那我是忘掉了什么,我怎,么会不知道那个呢?’如果是教师出题测验,那就一下子变成你穿插练习有助于长期记忆穿插练习两样或更多的内容同样也提供了一种间隔。穿插内容练习有助于发展人们辨识不同问题的能力,也是在培养人们从不断增加的解决方案中寻找合适工具的能力。进行穿插内容练习,不能是完成一个科目的全部练习再跳到下一个科目。你需要在每个科目的练习完成前就跳到下一个科目。我们的一个朋友这样描述自己的经历,“我去上了一堂冰球课,学习滑冰、控球、射门。滑冰练习还没进行多长时间,自己刚刚有点儿上手的感觉,教练就转到控球练习上了,这让我感到非常沮丧。灰心地到家后,我说,‘为什么教练不让我们一次把技能练好呢?”其实他是遇上了少有的好教练。这位教练懂得分散精力练习不同技能要比下力气一次掌握一件事更有效果。球员感到沮丧是因为并没有在短时间内看到成果,但到下一周,无论是滑冰、控球,还是其他内容,他都会获得全面进步,效果会好于每次只专心练习一项技能。多样化练习促进知识的活学活用与穿插内容练习一样,多样化练习有助于学习者树立更开阔的心理模式。这是一种能力,掌握它的人可以评估不断变化的条件,并调整应对方式进行适应。可以说,穿插内容练习与多样化练习有助于学习者超越暂时性记忆,步入更高层次的概念性学习,并把它们应用到实际情景中,从而获得更全面、更深刻、更持久的学习效果。这些学习成果在运动技能中就表现为潜在的习惯优势。小总结有间隔、有内容穿插出现,以及内容多样化,其实就是我们生活的本来面貌。程序员每开发一个项目,都是一次测验,也是一次检索练习的锻炼。每次常规的拦车检查对于警察来说都是一次测验,而且每次检查都不一样,这会加强警察的外显记忆与内隐记忆。只要他上心,今后的工作就会更有效率。人们常说的一句话是“从经验中学习”。有些人似乎从来不学习,学与不学的一个区别可能就在于,人们是否培养了反思(总结)的习惯。反思(总结)是检索练习的一种形式(发生了什么?我是怎么做的?怎样才能有用?),而且辅以细化加强(下次我要采取别的什么方法?)知识的“滚雪球”效应学习的过程至少可以分成三步:最开始是对短期工作记忆中信息的编码。这时信息还没有被巩固成长期记忆中坚实的知识表征。巩固会辨识并稳定记忆线索,赋予其含义,把它们与过去的经验以及长期记忆中已经存储下来的其他知识联系起来。检索会更新所学的东西,并让你做到学以致用。学习总是建立在已知基础之上。我们是通过与已知建立联系这种方式来解读事件和记忆事件的。长期记忆的容量基本上是无限的。你知道得越多,就越有可能为新知识建立联系。由于长期记忆的容量颇大,所以关键是要有一种能力,让你在需要的时候锁定并回忆已知。回忆所学知识的难易程度取决于对信息的重复使用(保持检索路径不会被忘却),也取决于你是否建立起了强大的检索线索,因为它能重新激活你的记忆。阶段性地检索所学,有助于强化记忆间的联系,也能强化回忆知识的线索,同时还能弱化连通冲突记忆的路径。检索练习若是没什么难度,那就不能强化所学的知识;练习难度越大,收效才越大。当你从短期记忆中回忆所学时,例如快速频繁地进行练习,是不需要花什么心思的,也不会有长期性的收效。但当你过一段时间再回忆时,当你对所学的东西有些遗忘时,你就不得不努力重建这一切。这种耗费心力的检索既能强化记忆,又能让所学再次具有可塑性,引发对所学知识的再巩固。再巩固可以用新信息更新你的记忆,同时可以将它们与最近学到的东西联系起来。重复进行费力的回忆或是练习,有助于把所学的知识整合成心智模型。在心智模型中,一套彼此相关的概念或一系列运动技能被融会贯通,形成一个有意义的整体。它能适应随后的各种环境,并发挥作用。开车时的感知和操控就是一个例子。在面对弧线球时知道如何打出全垒打也是同一个道理。练习的条件如果发生了变化,或是在检索中穿插安排了对其他资料的练习,我们就能强化自己的辨析与归纳能力,凭借全面发展,我们还能把所学的知识用在以后的新环境中。穿插与多样化建立了新的联系,拓展并进一步深化了记忆中的知识,同时增加了检索线索的数量。、试着自己想出答案,而不是坐等别人给你答案,或是在拿到解决方案前自行尝试解决一个问题,会产生更好的学习效果,也能让你把正确的答案或解决方案记得更持久。即便有时你会犯错,只要有纠正性反馈就没问题。——以上内容摘自《认知天性》,结合本人的个人理解,更多内容请查看该书籍。
萌ICP备20226257号 赣ICP备2022001242号-1 闽公网安备35020502000606号 本站已运行 254 天 16 小时 55 分 51统计 百度统计 本站由提供CDN加速服务 自豪地使用 Typecho 建站,并搭配 MyDiary 主题 Copyright © 2022 ~ 2022. 公爵书房 All rights reserved.
历史足迹
分类目录
  • 随笔
  • 知识
  • 分享
  • 书籍
  • 专栏
  • 笔记