|
|
$ ]4 x% Q* n+ T可以将 SpeciaTheme 中 Heropress Pro 主题转换成 Typecho 主题,下面是具体的实现过程:6 Z0 ^6 W& `$ |5 j4 f! A$ F, ]! a
$ n) Z) S7 f" q1.下载主题文件
$ @6 k) N4 o( ]) ?
1 }& H w$ ?6 x在 SpeciaTheme 网站购买 Heropress Pro 主题后,从下载链接中下载主题文件压缩包。. u4 z3 d: T9 Q$ ~. }
3 d* }- q; P0 N0 ^9 r2.创建 Typecho 主题目录
1 b. m+ ^+ e6 v4 W6 R& Y8 y" y% `+ Y8 d
在 Typecho 根目录下的 usr/themes 目录中新建一个名为 heropress-pro 的文件夹,这将是新的主题目录。9 g3 r1 P' M- a+ ~ t' |! ] I$ u8 Z
- y1 R3 `5 ?: t0 P2 V$ C. n
3.解压主题文件
, g' C- B3 P. K, [ ~% { [3 E8 `$ E# h! B- I) |6 h& }, ~# s
将下载的 Heropress Pro 主题文件压缩包解压缩,然后复制文件到 heropress-pro 目录中。应该会有以下文件和目录:
4 I3 S0 f' I8 z4 x1 |! P) Z* c# P% n' y9 I: a
assets/
3 |3 J8 I+ F6 r" S2 X vdist/9 D) V+ B# d% }0 v' X2 Z
inc/' g! z4 A5 A$ O0 Z- }% N) [2 e% o+ m
node_modules/. s% @2 B, P4 s8 g
partials/
9 S, Y# m4 f. d) J4 }: Ltemplates/
) e, ]; D1 W' }' W( j( n V1 y.babelrc
5 i8 W* c( ~7 u0 {, b6 f- V+ K.eslintrc.js1 K6 k# k- R- t+ b6 P4 P- `& H/ h
gulpfile.js- ?$ S+ ~! \$ M! @- b# N5 Z% N
package.json+ Y0 g% D7 @* W5 u9 D
webpack.config.js- n: S" s }" d$ l/ a
4.修改主题样式表文件& m g O' C" k6 h, T' k& {! j
- M( l" U4 P3 E5 [
修改主题样式表文件 assets/css/style.css,将其中所有图片、字体等路径都指向 Typecho 主题所在的地址。例如:
/ P- t6 d( f/ `( y4 N1 u/ | ~2 K3 H! O2 }3 [
css
! B p( D* _6 K Sbackground-image: url('https://example.com/usr/themes/heropress-pro/assets/images/bg.jpg');1 N- e9 v7 U2 H6 E' ]5 s" k4 V
修改为:, e2 ?1 M, ~) g
' M9 R& m0 [, u! g- y
css R& m6 h' m( k4 ?" V
background-image: url('/usr/themes/heropress-pro/assets/images/bg.jpg');
$ u2 [( t: R! \7 q- V. P) W3 X5.创建 Typecho 主题配置文件3 ~4 p6 k/ ]% e: d* W6 L
0 X6 L* ^% i5 i' ^
在主题目录中创建一个名为 config.inc.php 的文件,并添加以下代码:
1 A& E# _( S7 p6 q0 ]
0 {) @) E" Z0 Hphp- G9 r: ^+ c# z0 N% o
<?php
( T7 j0 g' }6 Y1 S) _9 d9 |$ [. Ireturn array(
; y H& \) @4 p$ {% X 'name' => 'Heropress Pro',2 d# r$ Q: D% y3 [) T* j
'description' => 'Typecho adaptation of Heropress Pro theme',
H; V( q% m/ ^ 'version' => '1.0',. p3 g6 L7 q9 ]6 a# @2 W- `
'author' =>'Your Name',
+ R3 Z" p9 Z# S* o7 w);
% |9 G( L* g7 ~8 O" F2 @6.配置主题布局文件6 b( q3 l: t# D# p3 T r+ O' M
: P0 q @ h3 D( A
在 heropress-pro 目录中创建一个名为 index.php 的文件,并添加以下代码:
) C1 J# f0 D6 c; ?
* i, u) r( y6 o k+ dphp
. t6 ?7 L) X2 ^<?php while ($this->next()): ?>
9 v# z6 ^/ U# L! s+ O<div class="post">
! c2 S& }/ Y: b6 e, f' e <h2 class="post-title">' l+ R0 ^7 l8 ?% T! g9 ]
<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>9 b; e9 P6 }6 W# o' |; \
</h2>
% t0 ]* a, R6 E* s <div class="post-meta">
# g' X7 h8 J1 p t <span><?php $this->date('F j, Y'); ?></span>, h8 u- o3 k+ i" C4 s4 A
<?php if($this->tags): ?>0 S' \, m% x8 z( }
<span class="post-tags">" D3 @$ ?- ?' u& C% O! n( n, E
<?php $this->tags(', ', true, 'none'); ?>
6 M5 ~* i4 O" z0 a8 j/ P( r+ a% m9 T </span>
5 ~/ g9 f6 l s <?php endif; ?>
$ L v2 h5 @) p% |8 H' s T </div>
5 H$ X7 P* f5 v6 j9 r% L' Q9 r <div class="post-content">" x# X4 A0 y, o% W, c# L4 _* _
<?php $this->content('Read more »'); ?>
- l; _" Q$ C% q# z: w </div>
+ Q' w6 e) F6 S; ]</div>
5 ?) E% N( v" z7 D+ k8 k- _<?php endwhile; ?>( |! P% k6 A5 ^# B- v8 d1 D
7.调用 Typecho 函数
3 [8 C Y! O, p0 a0 e
8 _1 W2 u# v/ X2 D2 ~在 index.php 文件中,将需要显示文章的地方改为 Typecho 的函数。例如:- E8 n7 S- Q: r& Q: o
# `* A- |# `6 T* d6 k
用 the_title() 替换 get_the_title()。1 y6 W* u- X4 X: A# Y* a
/ V5 h# q( }2 Z5 @用 the_permalink() 替换 get_permalink()。
2 o( w- i# b+ b) b- v) Z
- _% C3 Y" \, j4 k用 $this->date('F j, Y'); 替换 the_time('F j, Y')。7 l+ i6 K- M8 \
% M' ~, `5 }- J I8 e4 T用 $this->content('Read more »'); 替换 the_content('Read more »')。
) Z3 w! m' b' u$ Q" d6 v( b4 m) U# |( a, Q; [; b
8.添加 Typecho 标记
4 f" X" h) M* _* P+ `: ?; ~% w
) j9 l3 o1 U' k+ d; M在 index.php 文件中,添加 Typecho 的头部和页面循环,以及必要的 js 和 css 文件:- s8 A! _) u. h2 R
, q5 W4 c! ~0 @" o& H& [/ o% D
php; J3 q( @0 W$ S& m8 ?# Q, W* Q
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>7 f/ y% y. q5 D1 |0 H! e
<?php $this->need('header.php'); ?>
0 \: y( C! Y' f. h' N* u<div id="main" class="container">* I5 Z+ ^7 b+ C( w! `4 m
<div id="content" class="row">
! ]( @4 ^& `1 i a- u <?php while ($this->next()): ?>7 V& F' @* V6 C: `' X! T
<div class="col-md-8 col-md-offset-2">/ D' Y4 X) l. z! x
<div class="post">, W$ h* b! m* M" r" U8 m
<h2 class="post-title">
/ }7 d: L4 R, y) `4 L* K3 K <a href="<?php $this->permalink() ?>"><?php $this->title() ?></a>
0 W+ p/ u. B6 ]0 N; d( `/ M </h2>
9 E9 U4 h' F; a <div class="post-meta">7 w5 Z I/ m; T" O! C
<span><?php $this->date('F j, Y'); ?></span> o0 j1 I& k+ R4 E
<?php if($this->tags): ?>
- o& D8 ?% \; }2 p Z <span class="post-tags">( G6 G, V: t5 K, E$ Y
<?php $this->tags(', ', true, 'none'); ?>
7 R" C; p7 l3 R, {/ W# j </span>% c6 z) Y) L( u. F1 o
<?php endif; ?>, B6 Z; _# O( P0 T& V/ O/ B: {9 R
</div>) X& S9 m5 d) \# D: X3 z
<div class="post-content"> ?& |4 g/ c% S/ s
<?php $this->content('Read more »'); ?>
. W, {6 y: k3 f# V, M </div>
3 C& E) m& x; c; b4 x </div>
9 W% e/ `+ [. {& {$ O </div>2 h1 o7 v7 C+ |0 l2 \( z
<?php endwhile; ?>
G* `0 E! ?8 K8 e5 J" Q </div>/ R* q4 z9 V$ N$ w" X7 G
</div>; P! b- ~+ M0 B, x- t6 U
<?php $this->need('footer.php'); ?>; B6 }1 d$ D# p; S4 u2 P, g
9.调整其他可能需要的文件和代码+ `% R+ z% U& j+ P- T; }/ `9 V( o" @
: ^! K2 s; E: z5 T; ]& F6 |" W! U根据 Typecho 的特点,需要调整主题中的一些文件和代码。例如,需要将 header.php 中的 <title> 标签改为:. ]& L! y: c4 e/ z J' G6 G
y; ?" d. c1 R0 g; Y, h3 ?" jhtml
% t X$ Z, x; ?5 L<title><?php $this->archiveTitle(array(
0 ?! i5 X+ I% f' B! k+ ] 'category' => _t('%s'),
& t+ M3 m: k8 \- h/ n$ t. w 'search' => _t('Search "%s"'),
0 R+ p* r6 h$ I7 t- D. t 'tag' => _t('Tag "%s"'),# ?# v9 S) i1 i: m& ]& U" j
'author' => _t('Author "%s"'),* _2 z z, }6 i) e4 ^$ J
'date' => _t('Archive "%s"'),
2 A& D8 ^7 I8 H& S 'default' => ''
9 y/ ~2 U6 l& q' C7 e- X ), '', ' - '); ?><?php $this->options->title(); ?>
2 F' E9 u! n1 r" c; ~</title>: {/ a+ v( W$ n& u1 P
10.使用主题; X# a4 P0 K0 \5 R; I# O# D5 f- U
, T; ?7 j: {% ?. M* r
登录 Typecho 管理页面,选择外观,找到 Heropress Pro 主题,并选择该主题即可。
\6 v9 ^) n, W. L7 B3 [, x" j* s; e8 H8 b: Q5 H
以上就是将 Heropress Pro 主题转换成 Typecho 主题的具体过程,希望对你有所帮助。5 n- m5 M3 N: x
% W6 a J" T e9 D& Z) p |
|