|
|
. i! ~& a, M0 H& e可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:
# x7 F% P" H! E1 y% ?: n% g5 d3 U# B" ]) c; N# z5 C
1.下载主题文件
$ `* Z9 m: o1 G% z
' C: f, S4 ^7 i: ~5 t$ n1 z在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。, a9 ^0 \0 a+ p; k2 h
6 u9 z" G! m! ]; M$ O/ y2.创建 Typecho 主题目录- h5 V3 @6 G! o! }" e
3 G% T" W P+ w2 s6 [+ o
在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。9 `7 c1 B% l0 [) x5 K) T4 `+ M
8 d+ ^" \( [0 D% z9 A% c' k3.解压主题文件
! U: U& ~ F" \* ?1 [% _4 C/ p( C" O6 h1 A2 p1 @# d
将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:
9 s. G2 P7 n" K6 E1 k6 [- L9 ~' O: n/ |& m X4 w/ |. x' G
assets/
; C: F; l! i/ m; {7 G0 |4 Xdist/" Q7 u* `! V; O7 ^1 c6 k
inc/
+ m$ W7 F, ^$ |0 p# dnode_modules/
/ T4 I6 m" O2 W4 s f# rpartials/; f+ o- }( M/ Y! g# N, t
templates/8 s, N K; B! `' K4 Y# I
.babelrc
! h2 O% h" B& q4 p& p3 I- B.eslintrc.js
' E3 E$ V9 l& ygulpfile.js2 J0 R1 M% u! K6 X9 P2 X
package.json u% |0 \* `" h6 X& W/ G
webpack.config.js
7 v# k3 ~4 S0 l4.修改主题样式表文件4 G9 f2 V6 E! @! G3 _& q8 M
) f3 f% L: c/ y+ U
修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:! L- O: K- i! v$ Q+ \: s. e
8 C3 p1 I- S3 ]7 E0 l
css
6 J: t. s1 {# `# }% O1 _background-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');4 H9 Z+ v9 I/ T+ m" Q
修改为:* x6 r$ Z$ c3 e0 e
! k+ H0 m' w+ l
css
4 g. m/ _+ L) L+ E# c: Tbackground-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');1 n, s/ P3 O8 ^% r
5.创建 Typecho 主题配置文件3 w( l2 F' w# p/ R7 M
2 k" j x; m) ~% J在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:
# M# x& t+ V4 ~% {& P5 i5 T
! L. Q, [& V. I0 Sphp/ [ ?, v8 E) z% e) v
<?php
& i& J! E; F1 T, z9 N7 C* jreturn array(
5 Q/ r" x v! C2 w4 _% V/ e$ x0 p 'name' => 'Heropress Pro'," x1 V. O' H4 p
'description' => 'Typecho adaptation of Heropress Pro theme',
( h. Q2 y( j/ j' N; v, O7 z 'version' => '1.0',
" _2 m$ p4 |, R 'author' =>'Your Name',
( w, O0 _- Q- u7 s, L% _);
4 B. s; J6 D: ?& H3 y# ]' {6.配置主题布局文件
, W4 P- d0 m+ A: f5 w2 u0 Q5 e8 _+ J8 L& M! e; w$ o
在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:
6 }$ O: O7 e1 _. z( {% o/ B8 r: g: V* C% ]" y* g
php+ z, R: N; Q( i- w" y1 P1 w
<?php while ($this->next()): ?>
6 U' t2 q o* U0 S9 ~9 _5 a<div class="post">: }; b7 z/ Y/ F4 ~% X. [( g. q0 F0 y
<h2 class="post-title">
$ X, n( c: V: q: k3 d6 b <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
! i" |8 d$ a! f3 w8 v </h2>
5 f% u' O& U# ?: v, E <div class="post-meta">
4 x) c- I. p* T <span><?php $this->date('F j, Y'); ?></span>2 V& H/ p- h% U! q
<?php if($this->tags): ?>% }. i8 v- E: K( o
<span class="post-tags">
8 H, M( {) U' T! F1 X <?php $this->tags(', ', true, 'none'); ?>
$ C# b; A6 I( {- [7 x </span>; J: D, L7 H3 j+ O `- N4 F0 R
<?php endif; ?>; \, U1 t% @- c+ h0 }
</div>, N% F* @# y1 A: _/ }" r
<div class="post-content">- @; W' ^4 v6 i7 |( t' \- ?: u: p) \
<?php $this->content('Read more »'); ?>
2 I2 k; V; g+ Y5 b$ Z </div>
7 { C' c5 V# c# g</div>! j0 H g9 ?' j( P v
<?php endwhile; ?>5 v+ c4 e+ P R6 t2 x: `
7.调用 Typecho 函数
) k6 S% Z v. I7 K% J) Z* E6 S I! D
在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:' ?' i# ~1 q6 Y( v Z3 `! C
?8 X5 T1 B" ]5 f/ e' I) d
用 the_title() 替换 get_the_title()。
( T( \2 v8 U3 L! c* q- q
2 W, I+ m) n* s8 v. s% }用 the_permalink() 替换 get_permalink()。
% ?0 L6 X9 Y9 J; q' k6 U8 Q5 c% C- u# T) e Z0 P
用 $this->date('F j, Y'); 替换 the_time('F j, Y')。
. a6 C+ t8 O2 w( C- s- V( z: ?2 K0 q0 v$ P, \
用 $this->content('Read more »'); 替换 the_content('Read more »')。9 f+ F( f# b! G' m' R! }
9 ?4 {+ F9 ^: g# e$ X
8.添加 Typecho 标记9 i- U9 x' \$ f7 X
+ {$ J N) q; m# Z% z# v% b- }
在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:
# v i( q2 n1 c9 f, z$ A& C3 i0 A( K$ N
php1 u5 n' v5 g0 ^, M! [- }
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
! @# S* w4 z3 z" h7 U/ u<?php $this->need('header.php'); ?>% W8 C, a" [) D* X, ?
<div id="main" class="container">( I$ H* c2 G6 x& u
<div id="content" class="row">) ~2 R5 r7 w, W! h
<?php while ($this->next()): ?>, v* U5 g) L+ a8 [8 D, y
<div class="col-md-8 col-md-offset-2">
0 k- E8 n! h" v% g <div class="post">8 M. P% t2 R% L1 W2 F# Y9 X
<h2 class="post-title">
' M; T& Y/ R) x% b; v! u- T <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
J% U$ a8 _3 ^ </h2>
7 u+ i# M7 \, s" ~ <div class="post-meta">9 k6 x4 V9 p7 I- q) n1 f
<span><?php $this->date('F j, Y'); ?></span>
" U, A( U$ \4 ?: d <?php if($this->tags): ?>
' v3 {* }' g$ D" P7 R, P <span class="post-tags">
. q5 N# J. [, F( S <?php $this->tags(', ', true, 'none'); ?>, T' B. b/ a1 v$ S/ b4 p4 F% J1 u; y) s
</span>
3 C# @8 N. _# l( {1 p% { <?php endif; ?>
! l( {, g* H6 [, X B- l1 d </div>
9 s7 R5 h. O- J" Q2 | <div class="post-content">
; T- p0 u( f- j <?php $this->content('Read more »'); ?>( b' }7 i( ^0 m6 o3 `
</div># c. P r: `6 D% p) M
</div>" Z& i+ D' S' C2 C
</div>
+ q) E* _ r1 p <?php endwhile; ?>
1 G D4 P) x ?) f; R$ {( z </div>8 u# k6 G: _8 I' a2 j
</div>
, P* w, n9 n$ F7 G) `% A<?php $this->need('footer.php'); ?>5 |" C1 X9 {8 G1 `6 Q
9.调整其他可能需要的文件和代码7 X; e8 ]2 |7 M% F2 k: | i$ x
, P, B5 K3 c; Y* T( E
根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为: d* U# O! N# K g8 H; r
7 W) r$ H6 E2 ]html
$ _+ e4 i$ ~* U; ^! a<title><?php $this->archiveTitle(array(5 p( ~( U7 k/ c" M
'category' => _t('%s'),8 s+ v$ r3 X$ M
'search' => _t('Search "%s"'),$ `& T z- i/ T7 Q
'tag' => _t('Tag "%s"'),6 @/ g6 P3 |# w& X5 o
'author' => _t('Author "%s"'),$ l/ D I: _4 }" y& K
'date' => _t('Archive "%s"'),
/ T, b7 V; M8 e; g 'default' => ''
, C5 H2 m+ _" R' e( d, q% B' ` ), '', ' - '); ?><?php $this->options->title(); ?>
+ r8 B6 P/ Q9 w4 ]' K4 S- z8 |</title>8 S# V% ?2 y8 g# Q, J
10.使用主题! E; Y7 r4 Z6 K/ C
/ x9 P( M' d: g# E3 q
登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。
7 r+ u; f0 s, {9 h
4 b5 m5 ~# G& d" R8 b以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。" v0 E0 H/ b8 }( N0 u1 w
G+ B/ F7 v4 R |
|