React : 一个简短的路由配置示例

为了方便学习React路由,这里记录示例创建过程。 1、创建react app #创建 npx create-react-app sample #进入目录 cd sample 2、修改public/index.html <html> <head> <title>React 路由</title> </head> <body> <div id="root"></div> </body> </html> 3、修改 src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); 4、修改src/App.js import React from 'react'; import { BrowserRouter as Router,Route,Link} from 'react-router-dom'; function Home () { return ( <div> <span>主页</span> <Link to="/page">其他页面</Link> </div> ); } function Page () { return ( <div> <span>其他页面</span> <Link to="/">主页</Link> </div> ); } function App() { return ( <Router> <div> <Route path="/" exact={true} component={Home} /> <Route path="/page" exact={true} component={Page} /> </div> </Router> ); } export default App; 5、安装依赖 react-router-dom ...

October 15, 2019 · 1 min · holdsky

学习笔记:升级 WordPress 时提示”另一更新正在进行”

由于在升级Wordpress时,Wordpress会在数据库wp_options表中增加core_updater.lock记录。如中途打断Wordpress升级,这个记录会留在数据库中。当下次升级时,Wordpress检测到此记录的存在就会返回”另一更新正在进行”。 参考https://www.wpdaxue.com/wordpress-update-problem.html 解决: 通过终端登录WordPress数据库 mysql -u 数据库用户名字 -p mysql> use wordpress的数据库名字; 从下面结果中,找到 xxxx_options表 # 查询数据库中所有表名 mysql> select table_name from information_schema.tables where table_schema='wordpress的数据库名字'; 查询 mysql> select * from xxx_options where option_name='core_updater.lock'; 删除 mysql> delete from xxx_options where option_name='core_updater.lock';

October 15, 2019 · 1 min · holdsky

学习笔记:CSS指定超链接的文字颜色

超链接的四种状态 一个超链接示例 <a href="https://www.z6z8.cn">z6z8</a> 有四种状态: a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 CSS 改变超链接颜色 在未指定适用范围时,下面css影响全局 a:link { /*前景色*/ color:blue; /*背景色*/ background-color: orange; } a:visited { color:red; } a:hover{ ... } a:active{ ... } CSS 改变部分超链接颜色 需要将新颜色设置指定给具体的CSS块,例如 .testcss { width:100%; height:20%; } .testcss a:visited { color:red; }

October 11, 2019 · 1 min · holdsky

CSS 头脚+中间两列布局

效果图 <html> <head> <style type="text/css"> /* 整体Body */ .flex-body { width: 100%; height: 100%; margin: 0px; } /* 头 高70px*/ .flex-header { background-color: aqua; height: 70px; width: 100%; } /* 中间左侧,绝对定位,宽度50%,高度由top和bottom决定, top和bottom分别是 flex-header ,flex-footer的高度*/ .flex-left-main { position: absolute; background-color: red; width: 50%; top: 70px; bottom: 60px; } /* 中间左侧,绝对定位,宽度50%,高度由top和bottom决定, margin-left: 50% top和bottom分别是 flex-header ,flex-footer的高度*/ .flex-right-main { position: absolute; background-color: blue; width: 50%; top: 70px; bottom: 60px; margin-left: 50%; } /* 脚 高60px */ .flex-footer { position: absolute; bottom: 0px; width:100%; height: 60px; background-color: bisque; } </style> </head> <body class="flex-body"> <div id="flex-header" class="flex-header"></div> <div id="flex-left-main" class="flex-left-main"></div> <div id="flex-right-main" class="flex-right-main"></div> <div id="flex-footer" class="flex-footer"></div> </body> </html>

October 10, 2019 · 1 min · holdsky

转载:js获取控件坐标位置

全文请看 https://www.jb51.net/article/40413.htm //获取坐标位置 function getpos(obj) { var top=obj.offsetTop; var left=obj.offsetLeft; var height=obj.offsetHeight; var width=obj.offsetWidth; while(obj=obj.offsetParent) { top+=obj.offsetTop; left+=obj.offsetLeft; } } obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。 obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。 obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。 obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

October 10, 2019 · 1 min · holdsky

学习笔记:ubuntu 禁用ssh密码登陆

闲暇无事看了看系统日志,发现ssh被暴力了,类似下面的日志几乎一秒一条 Oct 3 21:30:38 localhost sshd[11266]: Failed password for invalid user minecraftserver from 84.93.153.9 port 54913 ssh2 索性禁用ssh密码登陆 打开文件 /etc/ssh/sshd_config,将 PasswordAuthentication 值修改为no #开启公钥算法鉴权 PubkeyAuthentication yes #禁用密码鉴权 PasswordAuthentication no #鉴权挑战响应 ChallengeResponseAuthentication no 保存文件后,重启sshd服务 sudo systemctl restart sshd.service 清净多了

October 3, 2019 · 1 min · holdsky

WordPress GuCherry Blog Theme,修改摘要长度

默认长度是40,取值范围是20到40,显然是不够用的。 需要我们手动修改代码,具体如下: wordpress安装目录/wp-content/themes/gucherry-blog/inc/customizer/functions/customizer-fields.php $wp_customize->add_control( 'gucherry_blog_excerpt_length', array( 'label' => esc_html__( 'Excerpt Length', 'gucherry-blog' ), 'description' => esc_html__( 'Maximum excerpt length 40 and minimum excerpt length 20 can be set.', 'gucherry-blog' ), 'section' => 'gucherry_blog_excerpt_length_section', 'type' => 'number', 'input_attrs' => array( 'min' => 20, 'max' => 40, ), ) ); 手动修改其中的 max 值,就可增大取值范围了

October 1, 2019 · 1 min · holdsky

WordPress GuCherry Blog Theme,解除 footer文案的html标签限制

GuCherry Blog Theme自身是支持在不修改代码的情况下自定义网页页脚文案的,只不过灵活度不够。 该主题footer部分代码在 wordpress安装目录/wp-content/themes/gucherry-blog/footer.php 文件中,位置如下: //该主题footer部分代码在<code>wordpress安装目录/wp-content/themes/gucherry-blog/footer.php</code>文件中,位置如下: <?php $footer_copyright_text = get_theme_mod( 'gucherry_blog_site_footer_copyright_text' ); if( !empty( $footer_copyright_text ) ) { /* translators: 1: Copyright Text 2: Theme name, 3: Theme author. */ printf( esc_html__( '%1$s %2$s by %3$s','gucherry-blog' ), $footer_copyright_text, 'GuCherry Blog', '<a href="'. esc_url( 'https://everestthemes.com' ) . '">Everestthemes</a>' ); } else { /* translators: 1: Theme name, 2: Theme author. */ printf( esc_html__( '%1$s by %2$s', 'gucherry-blog' ), 'GuCherry Blog', '<a href="'. esc_url( 'https://everestthemes.com' ) . '">Everestthemes</a>' ); } ?> 重点在 $footer_copyright_text = get_theme_mod( 'gucherry_blog_site_footer_copyright_text' );,其返回值是我们需要修改的文案。 全目录搜索寻找关键词 gucherry_blog_site_footer_copyright_text,按图索骥就好。 应能找到 wordpress安装目录/wp-content/themes/gucherry-blog/inc/customizer/functions/customizer-fields.php 中 ...

September 30, 2019 · 1 min · holdsky

腾讯云主机安全扫描:关闭Nginx server_tokens

扫描结果 漏洞名称 Nginx server_tokens基线 危险等级 中危 漏洞类型 安全基线 漏洞描述 server_tokens指令负责在错误页面和ServerHTTP响应头字段中显示NGINX版本号和操作系统版本。 不应显示此信息。 修复方案 在nginx配置文件中配置 server_tokens off;

September 27, 2019 · 1 min · holdsky

腾讯云主机安全扫描:启用authpriv和cron系统日志审计

扫描结果 漏洞名称 启用authpriv和cron系统日志审计 危险等级 中危 漏洞类型 安全基线 漏洞描述 启用authpriv和cron系统日志审计。 authpriv -包括特权信息如用户名在内的认证活动 cron -与 cron 和 at 有关的计划任务信息 参考链接 修复方案 1. 修改/etc/rsyslog.conf,添加或取消注释如下配置(中间的分隔符是tab): authpriv.* /var/log/secure cron.* /var/log/cron 1. 重启rsyslog服务 名词解释 authpriv 参考 http://www.kbase101.com/question/32969.html 可知 authpriv - 非系统授权消息 auth - 认证和授权相关命令 早期的LOG_AUTHPRIV用于隐藏受保护的敏感日志消息文件,例如/var/log/auth.log。而Linux上的LOG_AUTH通常没有配置限制访问,而LOG_AUTHPRIV是。 cron linux 上的定时任务服务

September 27, 2019 · 1 min · holdsky